@oiz/stzh-components 2.1.0 → 2.2.0-beta

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

@@ -0,0 +1,136 @@
+import { Host, h } from "@stencil/core";
+/**
+ */
+export class StzhLangnav {
+  constructor() {
+    this.handleChange = (event) => {
+      this.stzhChange.emit({
+        component: "stzh-langnav",
+        value: event.detail.value
+      });
+      if (!this.preventUrlchange) {
+        window.location.href = event.detail.value;
+      }
+    };
+    this.languageActive = undefined;
+    this.languages = undefined;
+    this.popoverPlacement = "bottom";
+    this.preventUrlchange = false;
+  }
+  render() {
+    const classes = {
+      "stzh-langnav": true
+    };
+    return (h(Host, null, h("div", { class: classes }, h("stzh-dropdown", { class: "stzh-langnav__dropdown", "no-search": true, icon: "world-globe", size: "small", variant: "plain", popoverPlacement: this.popoverPlacement, items: this.languageActive ? [this.languageActive] : null, options: this.languages, onStzhChange: this.handleChange }))));
+  }
+  static get is() { return "stzh-langnav"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-langnav.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-langnav.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "languageActive": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Active language of langnav"
+        },
+        "attribute": "language-active",
+        "reflect": false
+      },
+      "languages": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "any[] | string",
+          "resolved": "any[] | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Available language in langnav"
+        },
+        "attribute": "languages",
+        "reflect": false
+      },
+      "popoverPlacement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"bottom\" | \"top\"",
+          "resolved": "\"bottom\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Popover placement"
+        },
+        "attribute": "popover-placement",
+        "reflect": true,
+        "defaultValue": "\"bottom\""
+      },
+      "preventUrlchange": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to prevent the default behaviour of changing the `location.href`"
+        },
+        "attribute": "prevent-urlchange",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhChange",
+        "name": "stzhChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Langnav change event"
+        },
+        "complexType": {
+          "original": "StzhLangnavChangeEvent",
+          "resolved": "{ component: \"stzh-langnav\"; value: string; }",
+          "references": {
+            "StzhLangnavChangeEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+}

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

@@ -0,0 +1,42 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Langnav',
+  component: 'stzh-langnav',
+  parameters: {
+    actions: {
+      handles: ['stzhChange']
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('langnav'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const languages = `[
+  { "text": "Deutsch", "value": "/de" },
+  { "text": "English", "value": "/en" }
+]`;
+
+const Template = (args) => (
+  <stzh-langnav {...args}></stzh-langnav>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  'language-active': '/en',
+  languages
+};

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

@@ -34,6 +34,7 @@ export class StzhLink {
     this.iconPosition = "left";
     this.size = "default";
     this.href = "";
+    this.rel = undefined;
     this.target = "";
     this.download = undefined;
     this.type = "button";
@@ -49,6 +50,10 @@ export class StzhLink {
     this.iconOnly = false;
     this.label = "";
     this.linkAccesskey = undefined;
+    this.a11yLabel = undefined;
+    this.a11yDescribedby = "";
+    this.a11yExpanded = undefined;
+    this.a11yControls = undefined;
   }
   /** Focus link */
   async setFocus() {
@@ -84,9 +89,11 @@ export class StzhLink {
       [`stzh-link--${this.variant}`]: !!this.variant,
     };
     return (h(Host, null, this.href ?
-      h("a", { ref: (el) => (this.link = el), href: this.disabled ? null : this.href, download: this.download, target: this.target, class: classes, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
+      h("a", { ref: (el) => (this.link = el), href: this.disabled ? null : this.href, download: this.download, rel: this.rel, target: this.target, class: classes, accessKey: this.linkAccesskey, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+          ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
       :
-        h("button", { ref: (el) => (this.link = el), class: classes, type: this.type, disabled: this.disabled, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))));
+        h("button", { ref: (el) => (this.link = el), class: classes, type: this.type, disabled: this.disabled, accessKey: this.linkAccesskey, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+            ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))));
   }
   static get is() { return "stzh-link"; }
   static get encapsulation() { return "scoped"; }
@@ -174,6 +181,23 @@ export class StzhLink {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "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,
@@ -441,6 +465,75 @@ export class StzhLink {
         },
         "attribute": "link-accesskey",
         "reflect": 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 (this will be overwritten if description prop or slot is used, used by stzh-radiogroup)"
+        },
+        "attribute": "a11y-describedby",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "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
       }
     };
   }

package/dist/collection/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.css

@@ -0,0 +1,125 @@
+/**
+ * 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;
+}
+
+.stzh-microsite-teaserlist__filter {
+  margin-bottom: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-microsite-teaserlist__filter {
+    margin-bottom: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-microsite-teaserlist__filter {
+    margin-bottom: var(--stzh-space-xxxlarge);
+  }
+}
+.stzh-microsite-teaserlist__show-more {
+  margin-top: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-microsite-teaserlist__show-more {
+    margin-top: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-microsite-teaserlist__show-more {
+    margin-top: var(--stzh-space-xxxlarge);
+  }
+}

package/dist/collection/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.js

@@ -0,0 +1,198 @@
+import { Host, h } from "@stencil/core";
+import axios from 'axios';
+import { fetchTranslations } from "../../utils/translation-utils";
+/**
+ * @see https://www.stadt-zuerich.ch/site/fuer-zueri/de/index.html
+ * @see https://www.stadt-zuerich.ch/site/iazh/de/index.html
+ */
+export class StzhMicrositeTeaserlist {
+  constructor() {
+    this._tags = [];
+    this._tagChips = [];
+    this.items = [];
+    this.filteredItems = [];
+    this.filteredSlicedItems = [];
+    this.handleChange = (event) => {
+      this.showItems = this.stepItems;
+      this.activeFilter = event.detail.value;
+    };
+    this.handleMoreClick = () => {
+      this.showItems += this.stepItems;
+    };
+    this.localization = undefined;
+    this.api = undefined;
+    this.tags = [];
+    this.stepItems = 6;
+    this.showItems = undefined;
+    this.activeFilter = "";
+  }
+  async filterHandler() {
+    this.filteredItems = this.items
+      .filter((item) => {
+      // return (this.activeFilter[0] !== "") ? item.tags.some(tag => this.activeFilters.indexOf(tag) > -1) : true;
+      return (this.activeFilter !== "") ? item.tags.some(tag => this.activeFilter === tag) : true;
+    });
+    this.filteredSlicedItems = this.filteredItems
+      .slice(0, this.showItems);
+  }
+  async tagsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._tags = JSON.parse(newValue);
+    }
+    else {
+      this._tags = newValue;
+    }
+    this._tagChips = this._tags.map((tag) => ({
+      "label": tag.name,
+      "value": tag.id,
+      "variant": "filter",
+      "type": "secondary",
+      "counter": ((tag.id)
+        ? this.items.filter(item => item.tags.indexOf(tag.id) > -1).length
+        : this.items.length).toString()
+    }));
+  }
+  async apiWatcher(newValue) {
+    if (!newValue) {
+      return;
+    }
+    let apiUrl = this.api.replace(/\{lang\}/, this.localization.$locale);
+    // load data from API
+    const { data } = await axios.get(apiUrl);
+    this.items = data.items;
+    this.showItems = this.stepItems;
+    this.tagsWatcher(this.tags);
+  }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "microsite-teaserlist");
+    }
+    await this.apiWatcher(this.api);
+  }
+  render() {
+    const classes = {
+      "stzh-microsite-teaserlist": true,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("stzh-chip-select", { class: "stzh-microsite-teaserlist__filter", label: this.localization.tagsLabel, data: this._tagChips, onStzhChange: this.handleChange }), h("stzh-card-list", { layout: "subpages" }, this.filteredSlicedItems.map((item) => h("stzh-card", { href: item.link, hideHeaderBorder: true }, item.image &&
+      h("img", { slot: "image", src: item.image }), item.title &&
+      h("stzh-clamp", { slot: "heading", lines: 2 }, item.title), item.description &&
+      h("stzh-clamp", { slot: "content", lines: 3 }, item.description)))), this.showItems < this.filteredItems.length &&
+      h("div", { class: "stzh-microsite-teaserlist__show-more" }, h("stzh-button", { variant: "secondary", label: this.localization.showMore, onClick: this.handleMoreClick })))));
+  }
+  static get is() { return "stzh-microsite-teaserlist"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-microsite-teaserlist.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-microsite-teaserlist.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhMicrositeTeaserlistLocalizedText",
+          "resolved": "StzhLocaleComponent & { tagsLabel: string; showMore: string; }",
+          "references": {
+            "StzhMicrositeTeaserlistLocalizedText": {
+              "location": "import",
+              "path": "./stzh-microsite-teaserlist.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "api": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "API URL (`{lang}` is replaced in the URL)"
+        },
+        "attribute": "api",
+        "reflect": false
+      },
+      "tags": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | StzhMicrositeTeaserlistTag[]",
+          "resolved": "StzhMicrositeTeaserlistTag[] | string",
+          "references": {
+            "StzhMicrositeTeaserlistTag": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tags"
+        },
+        "attribute": "tags",
+        "reflect": false,
+        "defaultValue": "[]"
+      },
+      "stepItems": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Numbers of item shown with each load more action"
+        },
+        "attribute": "step-items",
+        "reflect": false,
+        "defaultValue": "6"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "showItems": {},
+      "activeFilter": {}
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "showItems",
+        "methodName": "filterHandler"
+      }, {
+        "propName": "activeFilter",
+        "methodName": "filterHandler"
+      }, {
+        "propName": "tags",
+        "methodName": "tagsWatcher"
+      }, {
+        "propName": "api",
+        "methodName": "apiWatcher"
+      }];
+  }
+}

package/dist/collection/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.localization.js

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

package/dist/collection/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.stories.js

@@ -0,0 +1,58 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+// import { withDesign } from 'storybook-addon-designs';
+// import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Microsite/Teaserlist',
+  component: 'stzh-microsite-teaserlist',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    // design: {
+    //   type: 'figma',
+    //   url: getFigmaLink('microsite-teaserlist'),
+    //   allowFullscreen: true
+    // }
+  },
+  decorators: [
+    // withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-microsite-teaserlist {...args}></stzh-microsite-teaserlist>
+);
+
+const tags = `[
+  {
+    "id": "",
+    "name": "Alle"
+  },
+  {
+    "id": "digitale-stadt",
+    "name": "Digitale Stadt"
+  },
+  {
+    "id": "lorem",
+    "name": "Lorem"
+  },
+  {
+    "id": "dolor-sit",
+    "name": "Dolor Sit"
+  },
+  {
+    "id": "ipsum",
+    "name": "Ipsum"
+  }
+]`
+
+export const Default = Template.bind({});
+Default.args = {
+  api: 'mock/microsite-teaserlist.json',
+  tags
+};