From 080bd0631a93fcf3beced71bb534326c89522e70 Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Sun, 21 Feb 2021 15:46:25 +0200
Subject: [PATCH] list item
---
src/components.d.ts | 26 +++++++++
src/components/hy-box/readme.md | 2 +
.../hy-general-list-item.scss | 3 +
.../hy-general-list-item.tsx | 46 +++++++++++++++
src/components/hy-general-list-item/readme.md | 33 +++++++++++
.../hy-general-list/hy-general-list.tsx | 56 ++++++-------------
src/components/hy-general-list/readme.md | 16 ++++++
7 files changed, 144 insertions(+), 38 deletions(-)
create mode 100644 src/components/hy-general-list-item/hy-general-list-item.scss
create mode 100644 src/components/hy-general-list-item/hy-general-list-item.tsx
create mode 100644 src/components/hy-general-list-item/readme.md
diff --git a/src/components.d.ts b/src/components.d.ts
index 5fc5f077..4af49c5a 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -395,6 +395,15 @@ export namespace Components {
interface HyGeneralList {
dataItems: ListItemValue[] | string;
}
+ interface HyGeneralListItem {
+ description?: string;
+ imageAlt: string;
+ imageUrl: string;
+ itemTitle?: string;
+ label?: string;
+ type?: string;
+ url?: string;
+ }
interface HyGridContainer {}
interface HyGridItem {
columns: GridColumns;
@@ -1038,6 +1047,11 @@ declare global {
prototype: HTMLHyGeneralListElement;
new (): HTMLHyGeneralListElement;
};
+ interface HTMLHyGeneralListItemElement extends Components.HyGeneralListItem, HTMLStencilElement {}
+ var HTMLHyGeneralListItemElement: {
+ prototype: HTMLHyGeneralListItemElement;
+ new (): HTMLHyGeneralListItemElement;
+ };
interface HTMLHyGridContainerElement extends Components.HyGridContainer, HTMLStencilElement {}
var HTMLHyGridContainerElement: {
prototype: HTMLHyGridContainerElement;
@@ -1337,6 +1351,7 @@ declare global {
'hy-footer-info': HTMLHyFooterInfoElement;
'hy-footer-link-item': HTMLHyFooterLinkItemElement;
'hy-general-list': HTMLHyGeneralListElement;
+ 'hy-general-list-item': HTMLHyGeneralListItemElement;
'hy-grid-container': HTMLHyGridContainerElement;
'hy-grid-item': HTMLHyGridItemElement;
'hy-grid-row': HTMLHyGridRowElement;
@@ -1732,6 +1747,15 @@ declare namespace LocalJSX {
interface HyGeneralList {
dataItems?: ListItemValue[] | string;
}
+ interface HyGeneralListItem {
+ description?: string;
+ imageAlt?: string;
+ imageUrl?: string;
+ itemTitle?: string;
+ label?: string;
+ type?: string;
+ url?: string;
+ }
interface HyGridContainer {}
interface HyGridItem {
columns?: GridColumns;
@@ -2255,6 +2279,7 @@ declare namespace LocalJSX {
'hy-footer-info': HyFooterInfo;
'hy-footer-link-item': HyFooterLinkItem;
'hy-general-list': HyGeneralList;
+ 'hy-general-list-item': HyGeneralListItem;
'hy-grid-container': HyGridContainer;
'hy-grid-item': HyGridItem;
'hy-grid-row': HyGridRow;
@@ -2350,6 +2375,7 @@ declare module '@stencil/core' {
'hy-footer-info': LocalJSX.HyFooterInfo & JSXBase.HTMLAttributes<HTMLHyFooterInfoElement>;
'hy-footer-link-item': LocalJSX.HyFooterLinkItem & JSXBase.HTMLAttributes<HTMLHyFooterLinkItemElement>;
'hy-general-list': LocalJSX.HyGeneralList & JSXBase.HTMLAttributes<HTMLHyGeneralListElement>;
+ 'hy-general-list-item': LocalJSX.HyGeneralListItem & JSXBase.HTMLAttributes<HTMLHyGeneralListItemElement>;
'hy-grid-container': LocalJSX.HyGridContainer & JSXBase.HTMLAttributes<HTMLHyGridContainerElement>;
'hy-grid-item': LocalJSX.HyGridItem & JSXBase.HTMLAttributes<HTMLHyGridItemElement>;
'hy-grid-row': LocalJSX.HyGridRow & JSXBase.HTMLAttributes<HTMLHyGridRowElement>;
diff --git a/src/components/hy-box/readme.md b/src/components/hy-box/readme.md
index fcb67c48..3571b840 100644
--- a/src/components/hy-box/readme.md
+++ b/src/components/hy-box/readme.md
@@ -30,6 +30,7 @@
- [hy-accordion-container](../accordion-container)
- [hy-adjacent-image-text](../adjacent-image-text)
- [hy-banner](../hy-banner)
+- [hy-general-list](../hy-general-list)
- [hy-heading](../heading)
- [hy-hero](../hy-hero)
- [hy-image](../image)
@@ -50,6 +51,7 @@ graph TD;
hy-accordion-container --> hy-box
hy-adjacent-image-text --> hy-box
hy-banner --> hy-box
+ hy-general-list --> hy-box
hy-heading --> hy-box
hy-hero --> hy-box
hy-image --> hy-box
diff --git a/src/components/hy-general-list-item/hy-general-list-item.scss b/src/components/hy-general-list-item/hy-general-list-item.scss
new file mode 100644
index 00000000..5d4e87f3
--- /dev/null
+++ b/src/components/hy-general-list-item/hy-general-list-item.scss
@@ -0,0 +1,3 @@
+:host {
+ display: block;
+}
diff --git a/src/components/hy-general-list-item/hy-general-list-item.tsx b/src/components/hy-general-list-item/hy-general-list-item.tsx
new file mode 100644
index 00000000..ce5ad711
--- /dev/null
+++ b/src/components/hy-general-list-item/hy-general-list-item.tsx
@@ -0,0 +1,46 @@
+import {Component, h, Prop} from '@stencil/core';
+
+@Component({
+ tag: 'hy-general-list-item',
+ styleUrl: 'hy-general-list-item.scss',
+ shadow: true,
+})
+export class HyGeneralListItem {
+ @Prop() itemTitle?: string;
+ @Prop() description?: string;
+ @Prop() label?: string;
+ @Prop() url?: string;
+ @Prop() type?: string;
+ @Prop() imageUrl: string = null;
+ @Prop() imageAlt: string = '';
+
+ render() {
+ const classAttributes = ['hy-general-list-item'].join(' ');
+
+ const contentClassAttributes = ['hy-general-list-item__text-container'].join(' ');
+
+ const imageClassAttributes = ['hy-general-list-item__image-container'].join(' ');
+
+ //const target = '_blank';
+ //const ariaLabel = 'Link points outside the current website.';
+ const aspectRatioWidth = 6;
+ const aspectRatioHeight = 4;
+ const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
+ const aspectRatio = {
+ '--aspectRatio': `${aspect}%` as 'aspectRatio',
+ };
+
+ return [
+ <div class={classAttributes} tabindex="0">
+ <div class={imageClassAttributes} style={aspectRatio}>
+ <img alt={this.imageAlt} class="hy-image__image" src={this.imageUrl} />
+ <div class="hy-general-list-item--label">{this.label}</div>
+ </div>
+ <div class={contentClassAttributes}>
+ <div class="hy-general-list-item--title">{this.itemTitle}</div>
+ <div class="hy-general-list-item--description">{this.description}</div>
+ </div>
+ </div>,
+ ];
+ }
+}
diff --git a/src/components/hy-general-list-item/readme.md b/src/components/hy-general-list-item/readme.md
new file mode 100644
index 00000000..1727f986
--- /dev/null
+++ b/src/components/hy-general-list-item/readme.md
@@ -0,0 +1,33 @@
+# hy-general-list-item
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ------------- | ------------- | ----------- | -------- | ----------- |
+| `description` | `description` | | `string` | `undefined` |
+| `imageAlt` | `image-alt` | | `string` | `''` |
+| `imageUrl` | `image-url` | | `string` | `null` |
+| `itemTitle` | `item-title` | | `string` | `undefined` |
+| `label` | `label` | | `string` | `undefined` |
+| `type` | `type` | | `string` | `undefined` |
+| `url` | `url` | | `string` | `undefined` |
+
+## Dependencies
+
+### Used by
+
+- [hy-general-list](../hy-general-list)
+
+### Graph
+
+```mermaid
+graph TD;
+ hy-general-list --> hy-general-list-item
+ style hy-general-list-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System
diff --git a/src/components/hy-general-list/hy-general-list.tsx b/src/components/hy-general-list/hy-general-list.tsx
index e6564ac4..ebff727b 100644
--- a/src/components/hy-general-list/hy-general-list.tsx
+++ b/src/components/hy-general-list/hy-general-list.tsx
@@ -7,7 +7,7 @@ export interface ListItemValue {
url: string;
}
-import {Component, h, Prop, Watch} from '@stencil/core';
+import {Component, Element, h, Prop, Watch} from '@stencil/core';
@Component({
tag: 'hy-general-list',
@@ -17,8 +17,7 @@ import {Component, h, Prop, Watch} from '@stencil/core';
export class HyGeneralList {
@Prop() dataItems: ListItemValue[] | string;
private _dataItems: ListItemValue[];
-
- //@State() listItems: Array<object> = [];
+ @Element() el: HTMLElement;
@Watch('dataItems')
arrayDataWatcher(newValue: ListItemValue[] | string) {
@@ -33,6 +32,11 @@ export class HyGeneralList {
this.arrayDataWatcher(this.dataItems);
}
+ handleCardClick(id) {
+ let card = this.el.shadowRoot.querySelectorAll('#' + id)[0] as HTMLElement;
+ window.open(card.dataset.location, '_blank');
+ }
+
render() {
const classAttributes = ['hy-general-list'].join(' ');
@@ -40,44 +44,20 @@ export class HyGeneralList {
<div class={classAttributes}>
{this._dataItems.map((x) => {
return (
- <div>
- {x.title}
- {x.description}
- {x.label}
- {x.id}
- {x.url}
- {x.type}
- </div>
+ <hy-general-list-item
+ id={x.id}
+ item-title={x.title}
+ description={x.description}
+ label={x.label}
+ url={x.url}
+ type={x.type}
+ data-location={x.url}
+ onClick={() => this.handleCardClick(x.id)}
+ ></hy-general-list-item>
);
})}
</div>,
+ <hy-box mb="1.75, 1.75, 2, 2.5" />,
];
}
}
-
-/*
-
-componentDidLoad() {
- this._dataItems = JSON.parse(this.dataItems);
- console.log(this._dataItems);
-
- let items = [];
-
- //this._dataItems.forEach((item) => {
- //}
-
- this.listItems = items;
- }
-
-
-<hy-process-flow-box
- class={classItem}
- variant={processVariant}
- box-number={index + 1}
- box-title={x.heading}
- box-description={x.description}
- intermediate-step-title={x.step}
- step-state={stepState}
- number-term={this.numberTerm}
- />
-* */
diff --git a/src/components/hy-general-list/readme.md b/src/components/hy-general-list/readme.md
index b7a4efdf..2127658d 100644
--- a/src/components/hy-general-list/readme.md
+++ b/src/components/hy-general-list/readme.md
@@ -8,6 +8,22 @@
| ----------- | ------------ | ----------- | --------------------------- | ----------- |
| `dataItems` | `data-items` | | `ListItemValue[] \| string` | `undefined` |
+## Dependencies
+
+### Depends on
+
+- [hy-general-list-item](../hy-general-list-item)
+- [hy-box](../hy-box)
+
+### Graph
+
+```mermaid
+graph TD;
+ hy-general-list --> hy-general-list-item
+ hy-general-list --> hy-box
+ style hy-general-list fill:#f9f,stroke:#333,stroke-width:4px
+```
+
---
Helsinki University Design System
--
GitLab