@oiz/stzh-components 2.1.0 → 2.2.0

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

@@ -0,0 +1,323 @@
+import { Host, h, Fragment } from "@stencil/core";
+/**
+ * @slot - Slot for nested datalist
+ */
+export class StzhDatalistItem {
+  constructor() {
+    this.actionClick = (originalEvent) => {
+      this.stzhItemActionClick.emit({
+        component: "stzh-datalist-item",
+        originalEvent
+      });
+    };
+    this.handleDirectionChange = (event) => {
+      this.direction = event.detail.value;
+    };
+    this.handleHideBorderChange = (event) => {
+      this.hideBorder = event.detail.value;
+    };
+    this.direction = "vertical";
+    this.href = undefined;
+    this.rel = undefined;
+    this.target = undefined;
+    this.download = undefined;
+    this.icon = undefined;
+    this.label = undefined;
+    this.value = undefined;
+    this.meta = undefined;
+    this.hideBorder = false;
+    this.a11yExpanded = undefined;
+    this.a11yControls = undefined;
+  }
+  renderInner(isButton) {
+    const Item = isButton ? "button" : (this.href ? "a" : "div");
+    return (h(Fragment, null, h(Item, { "aria-hidden": "true", tabindex: "-1", class: "stzh-datalist-item__label", href: this.href, rel: this.rel, target: this.target, download: this.download }, this.label), h(Item, { class: "stzh-datalist-item__value", href: this.href, rel: this.rel, target: this.target, download: this.download, "aria-label": `${this.label}, ${this.value}, ${this.meta}`, "aria-controls": this.a11yControls, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+        ? (this.a11yExpanded ? "true" : "false") : null }, this.value), h(Item, { "aria-hidden": "true", tabindex: "-1", class: "stzh-datalist-item__meta", href: this.href, rel: this.rel, target: this.target, download: this.download }, this.meta)));
+  }
+  async connectedCallback() {
+    this.datalist = this.element.closest("stzh-datalist");
+    if (this.datalist) {
+      this.direction = this.datalist.currentDirection;
+      this.hideBorder = this.datalist.hideBorder;
+      this.datalist.addEventListener("stzhDirectionChange", this.handleDirectionChange);
+      this.datalist.addEventListener("stzhHideBorderChange", this.handleHideBorderChange);
+    }
+  }
+  disconnectedCallback() {
+    if (this.datalist) {
+      this.datalist.removeEventListener("stzhDirectionChange", this.handleDirectionChange);
+      this.datalist.removeEventListener("stzhHideBorderChange", this.handleHideBorderChange);
+      this.datalist = null;
+    }
+  }
+  render() {
+    const isButton = typeof this.a11yExpanded !== "undefined"
+      || typeof this.a11yControls !== "undefined";
+    const classes = {
+      "stzh-datalist-item": true,
+      "stzh-datalist-item--is-interactive": !!this.href || isButton,
+      "stzh-datalist-item--is-link": !!this.href,
+      "stzh-datalist-item--is-button": isButton,
+      "stzh-datalist-item--is-expanded": this.a11yExpanded,
+      "stzh-datalist-item--has-hidden-border": this.hideBorder,
+      [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction
+    };
+    const Action = isButton ? "button" : (!this.href && this.icon ? "div" : "a");
+    return (h(Host, { role: "listitem" }, h("div", { class: classes }, this.direction === "horizontal" ?
+      this.renderInner(isButton)
+      :
+        h("div", { class: "stzh-datalist-item__wrapper" }, this.renderInner(isButton)), h(Action, { "aria-hidden": "true", tabindex: "-1", class: "stzh-datalist-item__action-list", href: this.href, rel: this.rel, target: this.target, download: this.download }, this.href &&
+      (this.download ?
+        h("stzh-icon", { class: "stzh-datalist-item__icon", name: this.icon ? this.icon : "download" })
+        :
+          h(Fragment, null, h("stzh-icon", { class: "stzh-datalist-item__icon is-internal", name: this.icon ? this.icon : "arrow-right" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-external", name: this.icon ? this.icon : "external-link" }))), isButton &&
+      h(Fragment, null, h("stzh-icon", { class: "stzh-datalist-item__icon is-closed", name: this.icon ? this.icon : "plus" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-open", name: this.icon ? this.icon : "minus" })), !this.href && this.icon &&
+      h("stzh-button", { class: "stzh-datalist-item__action", variant: "tertiary", size: "tiny", "aria-label": this.value, iconOnly: true, icon: this.icon, onClick: this.actionClick }))), h("div", { class: "stzh-datalist-item__nested" }, h("div", { class: "stzh-datalist-item__nested-inner" }, h("slot", null)))));
+  }
+  static get is() { return "stzh-datalist-item"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-datalist-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-datalist-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "direction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"vertical\" | \"horizontal\"",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Direction"
+        },
+        "attribute": "direction",
+        "reflect": true,
+        "defaultValue": "\"vertical\""
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Link"
+        },
+        "attribute": "href",
+        "reflect": true
+      },
+      "rel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Rel (if href is used)"
+        },
+        "attribute": "rel",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Target (if href is used)"
+        },
+        "attribute": "target",
+        "reflect": false
+      },
+      "download": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Download attribute of link (if `href` used)"
+        },
+        "attribute": "download",
+        "reflect": false
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon of action button (if href is used, will only be for presentation and default to link icon)"
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value"
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "meta": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Meta"
+        },
+        "attribute": "meta",
+        "reflect": false
+      },
+      "hideBorder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hide border lines"
+        },
+        "attribute": "hide-border",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "a11yExpanded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria expanded of link/button"
+        },
+        "attribute": "a11y-expanded",
+        "reflect": true
+      },
+      "a11yControls": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria controls of link/button"
+        },
+        "attribute": "a11y-controls",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhItemActionClick",
+        "name": "stzhItemActionClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Item action click event"
+        },
+        "complexType": {
+          "original": "StzhDatalistItemActionClickEvent",
+          "resolved": "{ component: \"stzh-datalist-item\"; originalEvent: MouseEvent; }",
+          "references": {
+            "StzhDatalistItemActionClickEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+}

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

@@ -0,0 +1,49 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/DatalistItem',
+  component: 'stzh-datalist-item',
+  parameters: {
+    layout: 'padded',
+    actions: {
+      handles: ['stzhItemActionClick', 'stzhFocus', 'stzhBlur']
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('datalist-item'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-datalist-item {...args}></stzh-datalist-item>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  "label": "Label",
+  "value": "Value 1",
+  "meta": "Metainfo",
+  "icon": "delete"
+};
+
+export const AsLink = Template.bind({});
+AsLink.args = {
+  "label": "Label",
+  "value": "Value 5",
+  "href": "http://example.com",
+  "rel": "external nofollow",
+  "target": "_blank"
+};

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

@@ -126,6 +126,17 @@
     padding-right: var(--stzh-space-xlarge);
   }
 }
+.stzh-datamessagelist-item__vhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
+  width: 0.0625rem;
+  height: 0.0625rem;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
 .stzh-datamessagelist-item__content {
   display: flex;
   flex-direction: column;

package/dist/collection/components/stzh-datamessagelist-item/stzh-datamessagelist-item.js

@@ -74,7 +74,8 @@ export class StzhDatamessagelistItem {
       "stzh-datamessagelist-item": true,
       "stzh-datamessagelist-item--is-unread": this.unread
     };
-    return (h(Host, { role: "listitem" }, h("article", { class: classes }, h("div", { class: "stzh-datamessagelist-item__content" }, h("div", { class: "stzh-datamessagelist-item__text" }, h("h3", { class: "stzh-datamessagelist-item__heading" }, h("a", { class: "stzh-datamessagelist-item__heading-link", href: this.href, onClick: this.itemClick }, this.heading)), this.description &&
+    return (h(Host, { role: "listitem" }, h("article", { class: classes }, h("div", { class: "stzh-datamessagelist-item__content" }, h("div", { class: "stzh-datamessagelist-item__text" }, h("h3", { class: "stzh-datamessagelist-item__heading" }, h("a", { class: "stzh-datamessagelist-item__heading-link", href: this.href, onClick: this.itemClick }, this.unread &&
+      h("span", { class: "stzh-datamessagelist-item__vhidden" }, this.localization.unread, ","), this.heading)), this.description &&
       h("div", { class: "stzh-datamessagelist-item__description" }, h("stzh-clamp", { lines: 2, linesMedium: 1 }, this.description)), this._meta && this._meta.length > 0 &&
       h("div", { class: "stzh-datamessagelist-item__meta-wrapper" }, h("ul", { class: "stzh-datamessagelist-item__meta" }, this._meta.map((meta) => h("li", { class: "stzh-datamessagelist-item__meta-item" }, h("span", { class: "stzh-datamessagelist-item__meta-item-label" }, meta.label), h("span", { class: "stzh-datamessagelist-item__meta-item-value" }, meta.value)))))), this._loadingStatus &&
       h("stzh-status", { class: "stzh-datamessagelist-item__status", label: this._loadingStatus.label, percent: this._loadingStatus.percent, type: this._loadingStatus.type, withLoadingbar: true }), this._tags && this._tags.length > 0 &&
@@ -101,7 +102,7 @@ export class StzhDatamessagelistItem {
         "mutable": false,
         "complexType": {
           "original": "StzhDatamessagelistItemLocalizedText",
-          "resolved": "StzhLocaleComponent & { actionsPopoverLabel: string; }",
+          "resolved": "StzhLocaleComponent & { actionsPopoverLabel: string; unread: string; }",
           "references": {
             "StzhDatamessagelistItemLocalizedText": {
               "location": "import",

package/dist/collection/components/stzh-details/stzh-details.css

@@ -0,0 +1,119 @@
+/**
+ * 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 {
+  display: contents;
+  --content-padding: 0;
+  --content-background: transparent;
+  --content-grid-column: inherit;
+  --content-border-bottom: none;
+}
+
+.stzh-details, .stzh-details__trigger {
+  display: contents;
+}
+.stzh-details__content {
+  overflow: hidden;
+  background-color: var(--content-background);
+  grid-column: var(--content-grid-column);
+  border-bottom: var(--content-border-bottom);
+}
+.stzh-details__content-inner {
+  padding: var(--content-padding);
+}