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

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
+};

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

package/dist/collection/components/stzh-page-skiplinks/stzh-page-skiplinks.css

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -101,7 +104,7 @@
 .stzh-pagebottom {
   display: flex;
   flex-direction: column;
-  /* With border */
+  /* Has border */
 }
 @media screen and (min-width: 600px) {
   .stzh-pagebottom {
@@ -134,17 +137,17 @@
     margin-left: var(--stzh-space-xlarge);
   }
 }
-.stzh-pagebottom--with-border {
+.stzh-pagebottom--has-border {
   padding-top: var(--stzh-space-xlarge);
   border-top: 0.0625rem solid var(--stzh-base-border-color);
 }
 @media screen and (min-width: 1024px) {
-  .stzh-pagebottom--with-border {
+  .stzh-pagebottom--has-border {
     padding-top: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  .stzh-pagebottom--with-border {
+  .stzh-pagebottom--has-border {
     padding-top: var(--stzh-space-xxxlarge);
   }
 }

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

@@ -14,7 +14,7 @@ export class StzhPagebottom {
   render() {
     const classes = {
       "stzh-pagebottom": true,
-      "stzh-pagebottom--with-border": this.withBorder
+      "stzh-pagebottom--has-border": this.withBorder
     };
     return (h(Host, null, h("div", { class: classes }, !this.shareDisabled &&
       h("div", { class: "stzh-pagebottom__share-wrapper" }, this.shareTitle &&

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -108,20 +111,29 @@
   }
 }
 :host ::slotted([slot=image]) {
-  margin-top: var(--stzh-space-xxlarge);
-  margin-bottom: var(--stzh-space-xxlarge);
+  margin-top: var(--stzh-space-medium);
+}
+@media screen and (min-width: 1024px) {
+  :host ::slotted([slot=image]) {
+    margin-top: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted([slot=image]) {
+    margin-top: var(--stzh-space-xlarge);
+  }
 }
 :host ::slotted([slot=lead]) {
-  margin-top: var(--stzh-space-medium);
+  margin-top: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted([slot=lead]) {
-    margin-top: var(--stzh-space-large);
+    margin-top: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted([slot=lead]) {
-    margin-top: var(--stzh-space-xlarge);
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 

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

@@ -1,7 +1,11 @@
 import { Host, h } from "@stencil/core";
 import { hasSlot, setPropsIfNull } from "../../utils/utils";
 /**
- * @slot image - Slot for image
+ * @slot heading - Slot for `stzh-heading` element
+ * @slot image - Slot for `stzh-figure` or `img` element
+ * @slot lead - Slot for `stzh-text` element
+ * @slot action-left - Slot e.g. for `stzh-readspeaker` or `stzh-link` element
+ * @slot action-right - Slot e.g. for `stzh-readspeaker` or `stzh-link` element
  */
 export class StzhPagetitle {
   constructor() {