@oiz/stzh-components 1.5.0-alpha → 2.0.0

package/dist/collection/components/stzh-card/stzh-card.localization.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,134 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Card',
+  component: 'stzh-card',
+  parameters: {
+    actions: {
+      handles: ['stzhCollapse', 'stzhStarClick', 'stzhSubtitleClick', 'stzhActionClick']
+    },
+    layout: 'padded',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('card'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-card {...args}>
+    <img slot="image" src="media/images/example.jpg" loading="lazy" alt="Example image" />
+    <div slot="content">Card Content</div>
+    <stzh-status
+      slot="meta"
+      label="complete"
+      type="success"
+      percent="50"
+    ></stzh-status>
+  </stzh-card>
+);
+
+const TemplateSelectable = (args) => (
+  <stzh-card {...args}>
+    <img slot="image" src="media/images/example.jpg" loading="lazy" alt="Example image" />
+    <div slot="content">Card Content</div>
+    <stzh-chip slot="meta" label="Tag"></stzh-chip>
+  </stzh-card>
+);
+
+const TemplateStarrable = (args) => (
+  <stzh-card {...args}>
+    <div slot="content">Card Content</div>
+  </stzh-card>
+);
+
+const headerActions = `[
+  {
+    "id": "delete",
+    "icon": "delete",
+    "label": "Action"
+  },
+  {
+    "id": "message",
+    "icon": "mail",
+    "badge": "3",
+    "label": "Messages",
+    "onlyCollapseText": true
+  }
+]`;
+
+const footerActions = `[
+  {
+    "id": "action-1",
+    "icon": "alarm-bell",
+    "label": "Lorem",
+    "badge": "3"
+  },
+  {
+    "id": "action-2",
+    "icon": "cart",
+    "label": "Ipsum"
+  },
+  {
+    "id": "action-3",
+    "icon": "delete",
+    "label": "Dolor"
+  },
+  {
+    "id": "action-4",
+    "icon": "mail",
+    "label": "Lorem"
+  },
+  {
+    "id": "action-5",
+    "icon": "clock",
+    "label": "Ipsum"
+  }
+]`;
+
+export const Default = Template.bind({});
+Default.args = {
+  heading: 'Lorem ipsum',
+  subtitle: 'Dolor si',
+  'header-actions': headerActions,
+  'footer-actions': `[
+    {
+      "id": "action-1",
+      "icon": "arrow-right",
+      "label": "Lorem",
+      "variant": "default",
+      "iconPosition": "right"
+    }
+  ]`
+};
+
+export const Selectable = TemplateSelectable.bind({});
+Selectable.args = {
+  heading: 'Lorem ipsum',
+  subtitle: 'Dolor si',
+  selectable: true,
+  name: 'card',
+  value: '1',
+  'header-actions': headerActions
+};
+
+export const Starrable = TemplateStarrable.bind({});
+Starrable.args = {
+  heading: 'Lorem ipsum',
+  subtitle: 'Dolor si',
+  starrable: true,
+  'header-actions': headerActions,
+  'footer-actions': footerActions
+};

package/dist/collection/components/{stzh-servicecard-list/stzh-servicecard-list.css → stzh-card-list/stzh-card-list.css}

@@ -114,7 +114,7 @@
   --color: inherit;
 }
 
-.stzh-servicecard-list__header {
+.stzh-card-list__header {
   margin-bottom: var(--stzh-space-medium);
   display: flex;
   justify-content: space-between;
@@ -122,42 +122,42 @@
   align-items: flex-start;
 }
 @media screen and (min-width: 1024px) {
-  .stzh-servicecard-list__header {
+  .stzh-card-list__header {
     margin-bottom: var(--stzh-space-large);
   }
 }
 @media screen and (min-width: 1260px) {
-  .stzh-servicecard-list__header {
+  .stzh-card-list__header {
     margin-bottom: var(--stzh-space-xlarge);
   }
 }
 @media screen and (min-width: 800px) {
-  .stzh-servicecard-list__header {
+  .stzh-card-list__header {
     flex-direction: row;
   }
 }
-.stzh-servicecard-list__description {
+.stzh-card-list__description {
   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);
   color: var(--stzh-base-lead-color);
 }
 @media screen and (min-width: 1024px) {
-  .stzh-servicecard-list__description {
+  .stzh-card-list__description {
     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-servicecard-list__description:not(:empty) {
+.stzh-card-list__description:not(:empty) {
   margin-bottom: var(--stzh-space-xsmall);
 }
 @media screen and (min-width: 800px) {
-  .stzh-servicecard-list__description:not(:empty) {
+  .stzh-card-list__description:not(:empty) {
     margin-bottom: 0;
   }
 }
-.stzh-servicecard-list__switch {
+.stzh-card-list__switch {
   --color: var(--stzh-base-lead-color);
   align-self: end;
 }

package/dist/collection/components/{stzh-servicecard-list/stzh-servicecard-list.js → stzh-card-list/stzh-card-list.js}

@@ -2,54 +2,58 @@ import { Host, h } from "@stencil/core";
 import { cloneElement } from "../../utils/utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 /**
- * @slot - Slot for `stzh-servicecard` elements
+ * @slot - Slot for `stzh-card` elements
  * @slot description - Slot for description
  */
-export class StzhServicecardList {
+export class StzhCardList {
   constructor() {
     /** Whether collapse/expand toggle link */
     this.showToggleLink = false;
-    /** Whether sorting should be disabled */
-    this.sortableDisabled = false;
+    /** Whether sorting should be enabled */
+    this.sortableEnabled = false;
     /** HTML attribute that is used by the `toArray()` of sortable method */
     this.sortableDataIdAttribute = "data-id";
-    /** Algorithm how the ghost element will be cloned */
+    this.allCollapsed = false;
+    this.collapseClick = () => {
+      const cards = Array.from(this.element.querySelectorAll("stzh-card"));
+      cards.forEach(card => {
+        if (card.collapsible) {
+          card.collapsed = !this.allCollapsed;
+        }
+      });
+      this.allCollapsed = !this.allCollapsed;
+      this.stzhCollapseAll.emit({
+        component: "stzh-card-list",
+        allCollapsed: this.allCollapsed
+      });
+    };
+    this.updateCollapsedState = () => {
+      const cards = Array.from(this.element.querySelectorAll("stzh-card"));
+      this.allCollapsed = !cards.some(card => !card.collapsed);
+    };
     this.sortableGhostClone = (dragElement) => {
       const [clonedElement, clonedStzhElement, originalStzhElement] = cloneElement(dragElement);
       if (clonedStzhElement
         && originalStzhElement
-        && clonedStzhElement.tagName.toLowerCase() === 'stzh-servicecard') {
+        && clonedStzhElement.tagName.toLowerCase() === "stzh-card") {
         const clonedStzhElementCard = clonedStzhElement;
         const originalStzhElementCard = originalStzhElement;
         // copy every property that is not reflected to its attribute
         clonedStzhElementCard.heading = originalStzhElementCard.heading;
         clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;
-        clonedStzhElementCard.actions = originalStzhElementCard.actions;
+        clonedStzhElementCard.headerActions = originalStzhElementCard.headerActions;
+        clonedStzhElementCard.footerActions = originalStzhElementCard.footerActions;
         clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;
       }
       return clonedElement;
     };
-    this.allCollapsed = false;
-    this.collapseClick = () => {
-      const cards = Array.from(this.element.querySelectorAll("stzh-servicecard"));
-      cards.forEach(card => {
-        if (card.collapsible) {
-          card.collapsed = !this.allCollapsed;
-        }
-      });
-      this.allCollapsed = !this.allCollapsed;
-    };
-    this.updateCollapsedState = () => {
-      const cards = Array.from(this.element.querySelectorAll("stzh-servicecard"));
-      this.allCollapsed = !cards.some(card => !card.collapsed);
-    };
   }
   collapseListener() {
     this.updateCollapsedState();
   }
   async componentWillLoad() {
     if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, "servicecard-list");
+      this.localization = await fetchTranslations(this.element, "card-list");
     }
   }
   componentDidLoad() {
@@ -57,21 +61,21 @@ export class StzhServicecardList {
   }
   render() {
     const classes = {
-      "stzh-servicecard-list": true
+      "stzh-card-list": true
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-servicecard-list__header" }, h("div", { class: "stzh-servicecard-list__description" }, h("slot", { name: "description" })), this.showToggleLink &&
-      h("stzh-link", { class: "stzh-servicecard-list__switch", icon: this.allCollapsed ? "list-expanded" : "list-shrinked", label: this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll, onClick: this.collapseClick })), h("stzh-sortable", { disabled: this.sortableDisabled, dataIdAttribute: this.sortableDataIdAttribute, ghostClone: this.sortableGhostClone }, h("div", { class: "stzh-servicecard-list__cards", role: "list" }, h("slot", null))))));
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-card-list__header" }, h("div", { class: "stzh-card-list__description" }, h("slot", { name: "description" })), this.showToggleLink &&
+      h("stzh-link", { class: "stzh-card-list__switch", icon: this.allCollapsed ? "list-expanded" : "list-shrinked", label: this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll, onClick: this.collapseClick })), h("stzh-sortable", { disabled: !this.sortableEnabled, dataIdAttribute: this.sortableDataIdAttribute, ghostClone: this.sortableGhostClone }, h("div", { class: "stzh-card-list__cards", role: "list" }, h("slot", null))))));
   }
-  static get is() { return "stzh-servicecard-list"; }
+  static get is() { return "stzh-card-list"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
-      "$": ["stzh-servicecard-list.scss"]
+      "$": ["stzh-card-list.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["stzh-servicecard-list.css"]
+      "$": ["stzh-card-list.css"]
     };
   }
   static get properties() {
@@ -80,12 +84,12 @@ export class StzhServicecardList {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "StzhServicecardListLocalizedText",
+          "original": "StzhCardListLocalizedText",
           "resolved": "StzhLocaleComponent & { expandAll: string; collapseAll: string; }",
           "references": {
-            "StzhServicecardListLocalizedText": {
+            "StzhCardListLocalizedText": {
               "location": "import",
-              "path": "./stzh-servicecard-list.localization"
+              "path": "./stzh-card-list.localization"
             }
           }
         },
@@ -114,7 +118,7 @@ export class StzhServicecardList {
         "reflect": true,
         "defaultValue": "false"
       },
-      "sortableDisabled": {
+      "sortableEnabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -126,9 +130,9 @@ export class StzhServicecardList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether sorting should be disabled"
+          "text": "Whether sorting should be enabled"
         },
-        "attribute": "sortable-disabled",
+        "attribute": "sortable-enabled",
         "reflect": false,
         "defaultValue": "false"
       },
@@ -149,32 +153,6 @@ export class StzhServicecardList {
         "attribute": "sortable-data-id-attribute",
         "reflect": false,
         "defaultValue": "\"data-id\""
-      },
-      "sortableGhostClone": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Function",
-          "resolved": "Function",
-          "references": {
-            "Function": {
-              "location": "global"
-            },
-            "HTMLElement": {
-              "location": "global"
-            },
-            "HTMLStzhServicecardElement": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Algorithm how the ghost element will be cloned"
-        },
-        "defaultValue": "(dragElement: HTMLElement) => {\n    const [clonedElement, clonedStzhElement, originalStzhElement] = cloneElement(dragElement);\n\n    if (\n      clonedStzhElement\n      && originalStzhElement\n      && clonedStzhElement.tagName.toLowerCase() === 'stzh-servicecard'\n    ) {\n      const clonedStzhElementCard: HTMLStzhServicecardElement = clonedStzhElement as HTMLStzhServicecardElement;\n      const originalStzhElementCard: HTMLStzhServicecardElement = originalStzhElement as HTMLStzhServicecardElement;\n\n      // copy every property that is not reflected to its attribute\n      clonedStzhElementCard.heading = originalStzhElementCard.heading;\n      clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;\n      clonedStzhElementCard.actions = originalStzhElementCard.actions;\n      clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;\n    }\n\n    return clonedElement;\n  }"
       }
     };
   }
@@ -183,6 +161,29 @@ export class StzhServicecardList {
       "allCollapsed": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "stzhCollapseAll",
+        "name": "stzhCollapseAll",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Collapse all event"
+        },
+        "complexType": {
+          "original": "StzhCardListCollapseAllEvent",
+          "resolved": "{ component: \"stzh-card-list\"; allCollapsed: boolean; }",
+          "references": {
+            "StzhCardListCollapseAllEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
   static get elementRef() { return "element"; }
   static get listeners() {
     return [{

package/dist/collection/components/stzh-card-list/stzh-card-list.stories.js

@@ -0,0 +1,132 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/CardList',
+  component: 'stzh-card-list',
+  parameters: {
+    actions: {
+      handles: ['stzhCollapseAll']
+    },
+    layout: 'padded',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('card-list'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const actions = `[
+  {
+    "id": "message",
+    "onlyCollapseText": true,
+    "icon": "mail",
+    "badge": "3",
+    "label": "Messages"
+  }
+]`;
+
+const actions2 = `[
+  {
+    "id": "add",
+    "icon": "plus",
+    "label": "Add address"
+  },
+  {
+    "id": "edit",
+    "icon": "edit",
+    "label": "Edit"
+  },
+  {
+    "id": "delete",
+    "icon": "delete",
+    "label": "Remove"
+  },
+  {
+    "id": "message",
+    "onlyCollapseText": true,
+    "icon": "mail",
+    "badge": "3",
+    "label": "Messages"
+  }
+]`;
+
+const Template = (args) => (
+  <stzh-card-list {...args}>
+    <stzh-text slot="description">
+      Services are shown here, which you marked with <stzh-icon name="star-filled"></stzh-icon>
+    </stzh-text>
+    <stzh-card collapsible starrable heading="Lorem ipsum 1" subtitle="Dolor si 1" header-actions={actions}>
+      <div slot="content">Content</div>
+    </stzh-card>
+    <stzh-card collapsible heading="Lorem ipsum 2" subtitle='["Dolor si 2", "Dolor si 2.1", "Dolor si 2.2"]' subtitle-interactive header-actions={actions2}>
+      <stzh-row slot="content" span-small="6">
+        <stzh-cell>
+          <stzh-datalist
+            items='[
+              {
+                "label": "Label",
+                "value": "Value 1",
+                "meta": "Metainfo",
+                "icon": "delete"
+              },
+              {
+                "label": "Really Long Label",
+                "value": "Value 2",
+                "meta": "Metainfo",
+                "icon": "delete"
+              },
+              {
+                "label": "Label",
+                "value": "Value 3",
+                "meta": "Metainfo"
+              }
+            ]'></stzh-datalist>
+        </stzh-cell>
+        <stzh-cell>
+        <stzh-datalist
+            items='[
+              {
+                "label": "Label",
+                "value": "Value 4",
+                "meta": "Metainfo",
+                "icon": "delete"
+              },
+              {
+                "label": "Label",
+                "value": "Value 5",
+                "icon": "delete",
+                "href": "http://example.com"
+              }
+            ]'></stzh-datalist>
+        </stzh-cell>
+      </stzh-row>
+    </stzh-card>
+    <stzh-card collapsible starrable heading="Lorem ipsum 3" subtitle="Dolor si 3" footer-actions={actions2}>
+      <div slot="content">Content</div>
+    </stzh-card>
+    <stzh-card collapsible heading="Lorem ipsum 4">
+      <stzh-cspace slot="content">
+        <p>Content with Input:</p>
+        <stzh-input></stzh-input>
+        <stzh-button label="Button Right" fullwidth></stzh-button>
+      </stzh-cspace>
+    </stzh-card>
+  </stzh-card-list>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  'show-toggle-link': true
+};

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

@@ -27,6 +27,8 @@ export class StzhChip {
     this.disabled = false;
     /** Invert (only available for tag variant) */
     this.invert = false;
+    /** Id for element which describes the button */
+    this.a11yDescribedby = "";
     this.onFocus = (event) => {
       const focusEvent = new FocusEvent("focus", {
         view: window,
@@ -80,7 +82,7 @@ export class StzhChip {
       [`stzh-chip--${this.variant}`]: !!this.variant
     };
     return (h(Host, null, h("div", { class: classes }, this.removable &&
-      h("button", { class: "stzh-chip__remove", onClick: this.onRemoveClick, disabled: this.disabled, "aria-label": this.removeLabel, type: "button" }, h("stzh-icon", { class: "stzh-chip__remove-icon", name: "close" })), h("button", { class: "stzh-chip__button", onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, disabled: this.disabled, type: "button" }, h("div", { class: "stzh-chip__icon-wrapper" }, this.icon ?
+      h("button", { class: "stzh-chip__remove", onClick: this.onRemoveClick, disabled: this.disabled, "aria-label": this.removeLabel, type: "button" }, h("stzh-icon", { class: "stzh-chip__remove-icon", name: "close" })), h("button", { class: "stzh-chip__button", onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, disabled: this.disabled, type: "button", "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby }, h("div", { class: "stzh-chip__icon-wrapper" }, this.icon ?
       h("stzh-icon", { class: "stzh-chip__icon", name: this.icon })
       :
         h("slot", { name: "icon" })), h("div", { class: "stzh-chip__label" }, this.label ? this.label : h("slot", null)), this.counter &&
@@ -297,6 +299,41 @@ export class StzhChip {
         "attribute": "invert",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "a11yLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accessible label for screen readers to replace visible text"
+        },
+        "attribute": "a11y-label",
+        "reflect": false
+      },
+      "a11yDescribedby": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Id for element which describes the button"
+        },
+        "attribute": "a11y-describedby",
+        "reflect": false,
+        "defaultValue": "\"\""
       }
     };
   }