Skip to content
Snippets Groups Projects
Commit 1d65f744 authored by druid's avatar druid
Browse files

general list

parent d52d444f
No related branches found
No related tags found
No related merge requests found
......@@ -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>;
......
:host {
display: block;
}
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}
/>
* */
# hy-general-list
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
| ----------- | ------------ | ----------- | --------------------------- | ----------- |
| `dataItems` | `data-items` | | `ListItemValue[] \| string` | `undefined` |
---
Helsinki University Design System
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment