general list

src/components.d.ts

@@ -43,6 +43,7 @@ import {IDropdownItem} from './components/hy-dropdown/hy-dropdown';
 import {IFilterGroupFilter} from './components/hy-filter-group/hy-filter-group';
 import {FooterBaseLinks, FooterBaseSome} from './components/footer/hy-footer-base/hy-footer-base';
 import {FooterInfoLinks} from './components/footer/hy-footer-info/hy-footer-info';
+import {ListItemValue} from './components/hy-general-list/hy-general-list';
 import {KeyFigureValue} from './components/hy-key-figure-group/hy-key-figure-group';
 import {KeyHighlightValue} from './components/hy-key-highlight-group/hy-key-highlight-group';
 import {ProcessFlowValue} from './components/hy-large-process-flow/hy-large-process-flow';
@@ -391,6 +392,9 @@ export namespace Components {
     url: string;
     variant: FooterLinkVariants;
   }
+  interface HyGeneralList {
+    dataItems: ListItemValue[] | string;
+  }
   interface HyGridContainer {}
   interface HyGridItem {
     columns: GridColumns;
@@ -1029,6 +1033,11 @@ declare global {
     prototype: HTMLHyFooterLinkItemElement;
     new (): HTMLHyFooterLinkItemElement;
   };
+  interface HTMLHyGeneralListElement extends Components.HyGeneralList, HTMLStencilElement {}
+  var HTMLHyGeneralListElement: {
+    prototype: HTMLHyGeneralListElement;
+    new (): HTMLHyGeneralListElement;
+  };
   interface HTMLHyGridContainerElement extends Components.HyGridContainer, HTMLStencilElement {}
   var HTMLHyGridContainerElement: {
     prototype: HTMLHyGridContainerElement;
@@ -1327,6 +1336,7 @@ declare global {
     'hy-footer-base': HTMLHyFooterBaseElement;
     'hy-footer-info': HTMLHyFooterInfoElement;
     'hy-footer-link-item': HTMLHyFooterLinkItemElement;
+    'hy-general-list': HTMLHyGeneralListElement;
     'hy-grid-container': HTMLHyGridContainerElement;
     'hy-grid-item': HTMLHyGridItemElement;
     'hy-grid-row': HTMLHyGridRowElement;
@@ -1719,6 +1729,9 @@ declare namespace LocalJSX {
     url?: string;
     variant?: FooterLinkVariants;
   }
+  interface HyGeneralList {
+    dataItems?: ListItemValue[] | string;
+  }
   interface HyGridContainer {}
   interface HyGridItem {
     columns?: GridColumns;
@@ -2241,6 +2254,7 @@ declare namespace LocalJSX {
     'hy-footer-base': HyFooterBase;
     'hy-footer-info': HyFooterInfo;
     'hy-footer-link-item': HyFooterLinkItem;
+    'hy-general-list': HyGeneralList;
     'hy-grid-container': HyGridContainer;
     'hy-grid-item': HyGridItem;
     'hy-grid-row': HyGridRow;
@@ -2335,6 +2349,7 @@ declare module '@stencil/core' {
       'hy-footer-base': LocalJSX.HyFooterBase & JSXBase.HTMLAttributes<HTMLHyFooterBaseElement>;
       '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-grid-container': LocalJSX.HyGridContainer & JSXBase.HTMLAttributes<HTMLHyGridContainerElement>;
       'hy-grid-item': LocalJSX.HyGridItem & JSXBase.HTMLAttributes<HTMLHyGridItemElement>;
       'hy-grid-row': LocalJSX.HyGridRow & JSXBase.HTMLAttributes<HTMLHyGridRowElement>;

src/components/hy-general-list/hy-general-list.scss

+:host {
+  display: block;
+}

src/components/hy-general-list/hy-general-list.tsx

+export interface ListItemValue {
+  id: string;
+  label: string;
+  type: string;
+  title: string;
+  description: string;
+  url: string;
+}
+
+import {Component, h, Prop, Watch} from '@stencil/core';
+
+@Component({
+  tag: 'hy-general-list',
+  styleUrl: 'hy-general-list.scss',
+  shadow: true,
+})
+export class HyGeneralList {
+  @Prop() dataItems: ListItemValue[] | string;
+  private _dataItems: ListItemValue[];
+
+  //@State() listItems: Array<object> = [];
+
+  @Watch('dataItems')
+  arrayDataWatcher(newValue: ListItemValue[] | string) {
+    if (typeof newValue === 'string') {
+      this._dataItems = JSON.parse(newValue);
+    } else {
+      this._dataItems = newValue;
+    }
+  }
+
+  componentWillLoad() {
+    this.arrayDataWatcher(this.dataItems);
+  }
+
+  render() {
+    const classAttributes = ['hy-general-list'].join(' ');
+
+    return [
+      <div class={classAttributes}>
+        {this._dataItems.map((x) => {
+          return (
+            <div>
+              {x.title}
+              {x.description}
+              {x.label}
+              {x.id}
+              {x.url}
+              {x.type}
+            </div>
+          );
+        })}
+      </div>,
+    ];
+  }
+}
+
+/*
+
+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}
+              />
+* */

src/components/hy-general-list/readme.md

+# hy-general-list
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property    | Attribute    | Description | Type                        | Default     |
+| ----------- | ------------ | ----------- | --------------------------- | ----------- |
+| `dataItems` | `data-items` |             | `ListItemValue[] \| string` | `undefined` |
+
+---
+
+Helsinki University Design System