@oiz/stzh-components 2.1.0-beta → 2.2.0-beta

package/dist/collection/components/stzh-datalist/stzh-datalist.js

@@ -1,15 +1,26 @@
 import { Host, h } from "@stencil/core";
+import { media, addMediaChangeListener, removeMediaChangeListener } from '../../utils/media-utils';
 /**
  */
 export class StzhDatalist {
   constructor() {
     this._items = [];
-    this.actionClick = (originalEvent, item) => {
-      this.stzhItemActionClick.emit({
-        component: "stzh-datalist",
-        originalEvent,
-        item
-      });
+    this.resizeHandler = () => {
+      if (media("ultra").matches && this.directionUltra !== "inherit") {
+        this.currentDirection = this.directionUltra;
+      }
+      else if (media("large").matches && this.directionLarge !== "inherit") {
+        this.currentDirection = this.directionLarge;
+      }
+      else if (media("medium").matches && this.directionMedium !== "inherit") {
+        this.currentDirection = this.directionMedium;
+      }
+      else if (media("small").matches && this.directionSmall !== "inherit") {
+        this.currentDirection = this.directionSmall;
+      }
+      else {
+        this.currentDirection = this.direction;
+      }
     };
     this.direction = "vertical";
     this.directionSmall = "horizontal";
@@ -18,6 +29,22 @@ export class StzhDatalist {
     this.directionUltra = "inherit";
     this.hideBorder = false;
     this.items = [];
+    this.currentDirection = undefined;
+  }
+  hideBorderWatcher(newValue) {
+    this.stzhHideBorderChange.emit({
+      component: "stzh-datalist",
+      value: newValue
+    });
+  }
+  directionWatcher() {
+    this.resizeHandler();
+  }
+  currentDirectionWatcher(newValue) {
+    this.stzhDirectionChange.emit({
+      component: "stzh-datalist",
+      value: newValue
+    });
   }
   itemsWatcher(newValue) {
     if (typeof newValue === "string") {
@@ -29,21 +56,23 @@ export class StzhDatalist {
   }
   async componentWillLoad() {
     this.itemsWatcher(this.items);
+    this.hideBorderWatcher(this.hideBorder);
+    this.resizeHandler();
+  }
+  connectedCallback() {
+    addMediaChangeListener(this.resizeHandler);
+  }
+  disconnectedCallback() {
+    removeMediaChangeListener(this.resizeHandler);
   }
   render() {
     const classes = {
       "stzh-datalist": true,
-      "stzh-datalist--hide-border": this.hideBorder,
-      [`stzh-datalist--direction-${this.direction}`]: !!this.direction,
-      [`stzh-datalist--direction-small-${this.directionSmall}`]: !!this.directionSmall,
-      [`stzh-datalist--direction-medium-${this.directionMedium}`]: !!this.directionMedium,
-      [`stzh-datalist--direction-large-${this.directionLarge}`]: !!this.directionLarge,
-      [`stzh-datalist--direction-ultra-${this.directionUltra}`]: !!this.directionUltra
+      "stzh-datalist--has-hidden-border": this.hideBorder,
+      [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-datalist__list", role: "list" }, this._items.map((item) => h("div", { role: "listitem", class: {
-        "stzh-datalist__list-item": true,
-        "stzh-datalist__list-item--has-icon": !!item.icon,
-      } }, h("div", { class: "stzh-datalist__label" }, item.label), h("div", { class: "stzh-datalist__value" }, item.href ? h("stzh-link", { href: item.href, label: item.value, size: "inherit" }) : item.value), h("div", { class: "stzh-datalist__meta" }, item.meta), h("div", { class: "stzh-datalist__action-list" }, h("button", { class: "stzh-datalist__action", onClick: (event) => this.actionClick(event, item) }, h("stzh-icon", { name: item.icon })))))))));
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-datalist__list", role: "list" }, this._items.map((item) => h("stzh-datalist-item", Object.assign({}, item), item.items && item.items.length > 0 &&
+      h("stzh-datalist", { items: item.items }))), h("slot", null)))));
   }
   static get is() { return "stzh-datalist"; }
   static get encapsulation() { return "scoped"; }
@@ -184,30 +213,67 @@ export class StzhDatalist {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Items in datalist\nArray of objects that must at least include `value` attribute.\nCan optionally contain `label`, `meta`, `icon`, `href` attribute:\n`[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\"}]`"
+          "text": "Items in datalist\nArray of objects that must at least include `value` attribute.\nCan optionally contain `label`, `meta`, `icon`, `href` attribute and be nested to display deeper levels:\n`[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`"
         },
         "attribute": "items",
         "reflect": false,
         "defaultValue": "[]"
+      },
+      "currentDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"vertical\" | \"horizontal\"",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Current direction in use (readonly)"
+        },
+        "attribute": "current-direction",
+        "reflect": false
       }
     };
   }
   static get events() {
     return [{
-        "method": "stzhItemActionClick",
-        "name": "stzhItemActionClick",
+        "method": "stzhDirectionChange",
+        "name": "stzhDirectionChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Direction attribute change event"
+        },
+        "complexType": {
+          "original": "StzhDatalistDirectionChangeEvent",
+          "resolved": "{ component: \"stzh-datalist\"; value: \"vertical\" | \"horizontal\"; }",
+          "references": {
+            "StzhDatalistDirectionChangeEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhHideBorderChange",
+        "name": "stzhHideBorderChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Item action click event"
+          "text": "Hide border change event"
         },
         "complexType": {
-          "original": "StzhDatalistItemActionClickEvent",
-          "resolved": "{ component: \"stzh-datalist\"; originalEvent: MouseEvent; item: StzhDatalistItemEntry; }",
+          "original": "StzhDatalistHideBorderChangeEvent",
+          "resolved": "{ component: \"stzh-datalist\"; value: boolean; }",
           "references": {
-            "StzhDatalistItemActionClickEvent": {
+            "StzhDatalistHideBorderChangeEvent": {
               "location": "import",
               "path": "../../index"
             }
@@ -218,6 +284,27 @@ export class StzhDatalist {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "hideBorder",
+        "methodName": "hideBorderWatcher"
+      }, {
+        "propName": "direction",
+        "methodName": "directionWatcher"
+      }, {
+        "propName": "directionSmall",
+        "methodName": "directionWatcher"
+      }, {
+        "propName": "directionMedium",
+        "methodName": "directionWatcher"
+      }, {
+        "propName": "directionLarge",
+        "methodName": "directionWatcher"
+      }, {
+        "propName": "directionUltra",
+        "methodName": "directionWatcher"
+      }, {
+        "propName": "currentDirection",
+        "methodName": "currentDirectionWatcher"
+      }, {
         "propName": "items",
         "methodName": "itemsWatcher"
       }];

package/dist/collection/components/stzh-datalist/stzh-datalist.stories.js

@@ -7,8 +7,9 @@ export default {
   title: 'Components/Datalist',
   component: 'stzh-datalist',
   parameters: {
+    layout: 'padded',
     actions: {
-      handles: ['stzhItemActionClick']
+      handles: ['stzhDirectionChange']
     },
     docs: {
       description: {
@@ -30,6 +31,17 @@ const Template = (args) => (
   <stzh-datalist {...args}></stzh-datalist>
 );
 
+const TemplateDetails = (args) => (
+  <stzh-datalist {...args}>
+    <stzh-details>
+      <stzh-datalist-item label="Label" value="Click for more"></stzh-datalist-item>
+      <stzh-richtext slot="content">
+        <p>More content</p>
+      </stzh-richtext>
+    </stzh-details>
+  </stzh-datalist>
+);
+
 export const Default = Template.bind({});
 Default.args = {
   items: [
@@ -55,12 +67,61 @@ Default.args = {
       "value": "Value 4",
       "meta": "Metainfo",
       "icon": "delete"
+    }
+  ]
+};
+
+export const Urls = Template.bind({});
+Urls.args = {
+  items: [
+    {
+      "value": "Internal Link",
+      "href": "#"
+    },
+    {
+      "value": "External Link",
+      "href": "http://example.com",
+      "rel": "external nofollow",
+      "target": "_blank"
     },
+    {
+      "value": "Download Link",
+      "href": "#",
+      "download": true
+    },
+    {
+      "value": "Custom Icon",
+      "href": "#",
+      "icon": "mail"
+    }
+  ]
+}
+
+export const Nested = Template.bind({});
+Nested.args = {
+  items: [
     {
       "label": "Label",
-      "value": "Value 5",
-      "icon": "delete",
-      "href": "http://example.com"
+      "value": "Value 1",
+      "href": "#",
+      "items": [
+        {
+          "label": "Label",
+          "value": "Value 2",
+          "href": "#",
+          "items": [
+            {
+              "label": "Label",
+              "value": "Value 3",
+              "href": "#"
+            }
+          ]
+        }
+      ]
     }
   ]
+}
+
+export const Details = TemplateDetails.bind({});
+Details.args = {
 };

package/dist/collection/components/stzh-datalist-item/stzh-datalist-item.css

@@ -0,0 +1,260 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Richtext
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Appnav
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Accordions
+ */
+/**
+ * Buttons
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Container
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+}
+:host[hidden] {
+  display: none;
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --font-family: var(--stzh-font-family-regular);
+  --font-weight: var( --stzh-font-weight-regular);
+  --color: inherit;
+  --action-display: block;
+  display: contents;
+}
+:host[href]:not([href=""]), :host[a11y-expanded], :host[a11y-controls] {
+  --color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --hover-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+:host[direction=horizontal] {
+  --action-display: flex;
+}
+:host ::slotted(stzh-datalist) {
+  margin-left: var(--stzh-space-large);
+}
+
+.stzh-datalist-item {
+  position: relative;
+  text-decoration: none;
+  /* Button variant */
+  /* Link variant */
+  /* Interactive variant */
+  /* Vertical variant */
+  /* Horizontal variant */
+}
+.stzh-datalist-item__wrapper {
+  flex-grow: 1;
+}
+.stzh-datalist-item__value {
+  font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
+  line-height: var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));
+  letter-spacing: var(--stzh-font-curve-p1-default-text-letter-spacing);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-datalist-item__value {
+    font-size: var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));
+    line-height: var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));
+    letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
+  }
+}
+.stzh-datalist-item__value, .stzh-datalist-item__label, .stzh-datalist-item__meta, .stzh-datalist-item__action-list {
+  display: block;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: transparent;
+  border: none;
+  padding: 0;
+  text-decoration: none;
+}
+.stzh-datalist-item__value, .stzh-datalist-item__icon {
+  color: var(--color);
+}
+.stzh-datalist-item__label, .stzh-datalist-item__meta {
+  font-size: var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));
+  line-height: var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));
+}
+@media screen and (min-width: 1024px) {
+  .stzh-datalist-item__label, .stzh-datalist-item__meta {
+    font-size: var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));
+    line-height: var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height));
+  }
+}
+.stzh-datalist-item__label {
+  font-family: var(--stzh-font-family-medium);
+  font-weight: var(--stzh-font-weight-medium);
+  font-style: normal;
+  color: var(--stzh-base-lead-color);
+}
+.stzh-datalist-item__action-list {
+  display: var(--action-display);
+  text-align: center;
+}
+.stzh-datalist-item__action-list:not(:empty) {
+  padding-left: var(--stzh-space-xsmall);
+}
+.stzh-datalist-item__action[variant=tertiary] {
+  --color: inherit;
+}
+.stzh-datalist-item__value, .stzh-datalist-item__icon {
+  transition: color var(--stzh-base-transition-animation-speed);
+}
+.stzh-datalist-item__interactive {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.stzh-datalist-item--is-button .stzh-datalist-item__icon.is-open {
+  display: none;
+}
+.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded .stzh-datalist-item__icon.is-closed {
+  display: none;
+}
+.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded .stzh-datalist-item__icon.is-open {
+  display: inline-flex;
+}
+.stzh-datalist-item--is-link .stzh-datalist-item__icon.is-external {
+  display: none;
+}
+.stzh-datalist-item--is-link .stzh-datalist-item__action-list[rel*=external] .stzh-datalist-item__icon.is-internal {
+  display: none;
+}
+.stzh-datalist-item--is-link .stzh-datalist-item__action-list[rel*=external] .stzh-datalist-item__icon.is-external {
+  display: inline-flex;
+}
+.stzh-datalist-item--is-interactive:hover .stzh-datalist-item__value, .stzh-datalist-item--is-interactive:hover .stzh-datalist-item__icon {
+  color: var(--hover-color);
+}
+.stzh-datalist-item--is-interactive:hover .stzh-datalist-item__value {
+  text-decoration: underline;
+}
+.stzh-datalist-item--direction-vertical {
+  display: flex;
+  align-items: center;
+  padding-top: var(--stzh-space-xsmall);
+  padding-bottom: var(--stzh-space-xsmall);
+}
+.stzh-datalist-item--direction-vertical.stzh-datalist-item--has-hidden-border {
+  padding-top: calc(var(--stzh-space-xsmall) / 2);
+  padding-bottom: calc(var(--stzh-space-xsmall) / 2);
+}
+.stzh-datalist-item--direction-vertical:not(.stzh-datalist-item--has-hidden-border) {
+  border-bottom: 0.0625rem solid var(--stzh-base-border-color);
+}
+.stzh-datalist-item--direction-horizontal {
+  display: contents;
+}
+.stzh-datalist-item--direction-horizontal + .stzh-datalist-item__nested {
+  display: contents;
+}
+.stzh-datalist-item--direction-horizontal + .stzh-datalist-item__nested .stzh-datalist-item__nested-inner {
+  grid-column: 1/5;
+}
+.stzh-datalist-item--direction-horizontal .stzh-datalist-item__label, .stzh-datalist-item--direction-horizontal .stzh-datalist-item__value, .stzh-datalist-item--direction-horizontal .stzh-datalist-item__meta {
+  display: flex;
+  padding-top: var(--stzh-space-xsmall);
+  padding-bottom: var(--stzh-space-xsmall);
+}
+.stzh-datalist-item--direction-horizontal .stzh-datalist-item__label, .stzh-datalist-item--direction-horizontal .stzh-datalist-item__value, .stzh-datalist-item--direction-horizontal .stzh-datalist-item__meta, .stzh-datalist-item--direction-horizontal .stzh-datalist-item__action-list {
+  align-items: center;
+}
+.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border .stzh-datalist-item__label, .stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border .stzh-datalist-item__value, .stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border .stzh-datalist-item__meta {
+  padding-top: calc(var(--stzh-space-xsmall) / 2);
+  padding-bottom: calc(var(--stzh-space-xsmall) / 2);
+}
+.stzh-datalist-item--direction-horizontal:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__label, .stzh-datalist-item--direction-horizontal:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__value, .stzh-datalist-item--direction-horizontal:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__meta, .stzh-datalist-item--direction-horizontal:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__action-list {
+  border-bottom: 0.0625rem solid var(--stzh-base-border-color);
+}
+.stzh-datalist-item--direction-horizontal .stzh-datalist-item__label:not(:empty) {
+  padding-right: var(--stzh-space-xsmall);
+}
+.stzh-datalist-item--direction-horizontal .stzh-datalist-item__meta:not(:empty) {
+  padding-left: var(--stzh-space-xsmall);
+}
+.stzh-datalist-item--direction-horizontal .stzh-datalist-item__action-list {
+  justify-content: center;
+}