@oiz/stzh-components 3.0.0 → 3.1.0

package/dist/collection/components/stzh-homepage-service-highlights/stzh-homepage-service-highlights.css

@@ -0,0 +1,387 @@
+/**
+ * Colors
+ */
+/* Signal colors */
+/* Old colors (TODO: cleanup when not needed anymore) */
+/**
+ * Base
+ */
+/**
+ * Selection
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * Icons
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Footer
+ */
+/**
+ * Fieldset
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Text
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Dialogs / Popover
+ */
+/**
+ * Overlays
+ */
+/**
+ * Accordions
+ */
+/**
+ * Timeline
+ */
+/**
+ * Buttons
+ */
+/**
+ * Ratios
+ */
+/**
+ * Pagetitle
+ */
+/**
+ * TopnewsMostsearched
+ */
+/**
+ * Calendar
+ */
+/**
+ * Cta
+ */
+/**
+ * Toasts
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Container
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Ratios
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-medium);
+  font-weight: var(--stzh-font-weight-medium);
+  font-style: var(--stzh-font-style-medium);
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+  /* default outline value, which will be applied to all elements receiving focus
+  the .has-focus class is used by the focus target */
+}
+:host[hidden] {
+  display: none;
+}
+:host::-moz-selection {
+  color: var(--stzh-selection-color);
+  background-color: var(--stzh-selection-background-color);
+}
+:host::selection {
+  color: var(--stzh-selection-color);
+  background-color: var(--stzh-selection-background-color);
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
+  -webkit-text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
+          text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
+}
+:host .has-focus {
+  outline: var(--stzh-flyingfocus-color) solid 0.125rem;
+  outline-offset: 0.125rem;
+}
+:host .stzh-fylingfocus-focused {
+  outline-style: none !important;
+}
+:host .stzh-fylingfocus-focused::-moz-focus-inner {
+  border: 0 !important;
+}
+
+/**
+* @prop --background-color-topnews: Background color of top news section
+* @prop --background-color-mostsearched: Background color of top most searched section
+*/
+:host {
+  --background-color-topnews: var(--stzh-topnews-background-color);
+  --background-color-mostsearched: var(--stzh-mostsearched-background-color);
+}
+
+.stzh-homepage-service-highlights {
+  display: grid;
+  /**
+   * Top news.
+   */
+  /**
+   * Most searched.
+   */
+}
+.stzh-homepage-service-highlights__topnews, .stzh-homepage-service-highlights__mostsearched {
+  display: flex;
+  flex-direction: column;
+}
+@media screen and (min-width: 900px) {
+  .stzh-homepage-service-highlights--has-topnews {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+.stzh-homepage-service-highlights .stzh-topnews-item {
+  padding-top: var(--stzh-space-medium);
+  padding-bottom: var(--stzh-space-medium);
+  padding-left: var(--stzh-space-large);
+  padding-right: var(--stzh-space-large);
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+@media screen and (min-width: 600px) {
+  .stzh-homepage-service-highlights .stzh-topnews-item {
+    padding-top: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-homepage-service-highlights .stzh-topnews-item {
+    padding-top: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-homepage-service-highlights .stzh-topnews-item {
+    padding-top: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-homepage-service-highlights .stzh-topnews-item {
+    padding-bottom: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-homepage-service-highlights .stzh-topnews-item {
+    padding-bottom: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-homepage-service-highlights .stzh-topnews-item {
+    padding-bottom: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-homepage-service-highlights .stzh-topnews-item {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-homepage-service-highlights .stzh-topnews-item {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-homepage-service-highlights .stzh-topnews-item {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-homepage-service-highlights .stzh-topnews-item {
+    padding-left: calc(((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2));
+  }
+}
+.stzh-homepage-service-highlights .stzh-topnews-item--has-link {
+  transition: background-color 150ms ease;
+  text-decoration: none;
+}
+.stzh-homepage-service-highlights .stzh-topnews-item--has-link:hover {
+  background-color: var(--stzh-color-secondary40);
+}
+.stzh-homepage-service-highlights .stzh-topnews-item--highlighted {
+  background-color: var(--stzh-color-lemonyellow50);
+}
+.stzh-homepage-service-highlights .stzh-topnews-item--highlighted.stzh-topnews-item--has-link:hover {
+  background-color: var(--stzh-color-lemonyellow60);
+}
+.stzh-homepage-service-highlights .stzh-topnews-item__subtitle {
+  --color: var(--stzh-color-primary70);
+}
+.stzh-homepage-service-highlights .stzh-topnews-item--highlighted .stzh-topnews-item__subtitle {
+  --color: var(--stzh-color-secondary60);
+}
+.stzh-homepage-service-highlights .stzh-topnews-item.stzh-topnews-item--has-link:not(.stzh-topnews-item--highlighted):hover .stzh-topnews-item__label {
+  --color: var(--stzh-color-primary80);
+}
+.stzh-homepage-service-highlights .stzh-topnews-item--highlighted:hover .stzh-topnews-item__subtitle {
+  --color: var(--stzh-color-primary70);
+}
+.stzh-homepage-service-highlights__topnews {
+  background-color: var(--background-color-topnews);
+}
+.stzh-homepage-service-highlights__mostsearched {
+  background-color: var(--background-color-mostsearched);
+  padding-top: var(--stzh-space-medium);
+  padding-right: var(--stzh-space-large);
+  padding-bottom: var(--stzh-space-medium);
+  padding-left: var(--stzh-space-large);
+}
+@media screen and (min-width: 600px) {
+  .stzh-homepage-service-highlights__mostsearched {
+    padding-top: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-homepage-service-highlights__mostsearched {
+    padding-top: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-homepage-service-highlights__mostsearched {
+    padding-top: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-homepage-service-highlights__mostsearched {
+    padding-bottom: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-homepage-service-highlights__mostsearched {
+    padding-bottom: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-homepage-service-highlights__mostsearched {
+    padding-bottom: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-homepage-service-highlights__mostsearched {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-homepage-service-highlights__mostsearched {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-homepage-service-highlights:not(.stzh-homepage-service-highlights--has-topnews) .stzh-homepage-service-highlights__mostsearched {
+    display: grid;
+    gap: 0 var(--stzh-space-large);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-homepage-service-highlights:not(.stzh-homepage-service-highlights--has-topnews) .stzh-homepage-service-highlights__mostsearched {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-homepage-service-highlights:not(.stzh-homepage-service-highlights--has-topnews) .stzh-homepage-service-highlights__mostsearched {
+    padding-left: calc(((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2));
+    padding-right: calc(((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2));
+  }
+}
+.stzh-homepage-service-highlights .stzh-mostsearched-item {
+  padding-top: var(--stzh-space-xsmall);
+  padding-bottom: var(--stzh-space-xsmall);
+}
+@media screen and (min-width: 900px) {
+  .stzh-homepage-service-highlights .stzh-mostsearched-item {
+    padding-top: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-homepage-service-highlights .stzh-mostsearched-item {
+    padding-top: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-homepage-service-highlights .stzh-mostsearched-item {
+    padding-bottom: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-homepage-service-highlights .stzh-mostsearched-item {
+    padding-bottom: var(--stzh-space-medium);
+  }
+}
+.stzh-homepage-service-highlights .stzh-mostsearched-item__link {
+  --text-decoration-line: none;
+  --hover-text-decoration-line: none;
+  --hover-color: $linkColor;
+  transition: transform 150ms ease;
+}
+@media screen and (min-width: 900px) {
+  .stzh-homepage-service-highlights .stzh-mostsearched-item__link:hover {
+    transform: translateX(1.25rem);
+  }
+}

package/dist/collection/components/stzh-homepage-service-highlights/stzh-homepage-service-highlights.e2e.js

@@ -0,0 +1,23 @@
+import { test } from "@playwright/test";
+import { visualDiff } from "../../../.build/test/utils";
+const URL = "components-pagetitle";
+const STORIES = [
+  "default",
+  "without-image",
+  "without-lead",
+  "without-image-and-background",
+  "with-tag-without-image",
+  "with-disturber",
+];
+test.describe("pagetitle", () => {
+  STORIES.forEach((storyId) => {
+    test(`story ${storyId} visual diff`, async ({ page }) => {
+      await visualDiff({
+        storyId,
+        page,
+        url: URL
+      });
+    });
+  });
+});
+//# sourceMappingURL=stzh-homepage-service-highlights.e2e.js.map

package/dist/collection/components/stzh-homepage-service-highlights/stzh-homepage-service-highlights.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-homepage-service-highlights.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-homepage-service-highlights/stzh-homepage-service-highlights.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,sBAAsB,CAAC;AAEnC,MAAM,OAAO,GAAG;EACd,SAAS;EACT,eAAe;EACf,cAAc;EACd,8BAA8B;EAC9B,wBAAwB;EACxB,gBAAgB;CACjB,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EAC9B,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtD,MAAM,UAAU,CAAC;QACf,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,GAAG;OACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"components-pagetitle\";\n\nconst STORIES = [\n  \"default\",\n  \"without-image\",\n  \"without-lead\",\n  \"without-image-and-background\",\n  \"with-tag-without-image\",\n  \"with-disturber\",\n];\n\ntest.describe(\"pagetitle\", () => {\n  STORIES.forEach((storyId) => {\n    test(`story ${storyId} visual diff`, async ({ page }) => {\n      await visualDiff({\n        storyId,\n        page,\n        url: URL\n      });\n    });\n  });\n});\n"]}

package/dist/collection/components/stzh-homepage-service-highlights/stzh-homepage-service-highlights.js

@@ -0,0 +1,159 @@
+import { Fragment, h, Host } from "@stencil/core";
+export class StzhHomepageServiceHighlights {
+  constructor() {
+    this._topnewsItems = [];
+    this._mostsearchedItems = [];
+    this.init = () => {
+      this.topnewsItemsWatcher(this.topnewsItems);
+      this.mostsearchedItemsWatcher(this.mostsearchedItems);
+    };
+    this.topnewsItems = [];
+    this.mostsearchedItems = [];
+  }
+  topnewsItemsWatcher(newValue) {
+    if (!newValue) {
+      this._topnewsItems = [];
+    }
+    else if (typeof newValue === "string") {
+      try {
+        const parsed = JSON.parse(newValue);
+        this._topnewsItems = this.ensureSingleHighlight(parsed);
+      }
+      catch (e) {
+        this._topnewsItems = [];
+      }
+    }
+    else {
+      this._topnewsItems = this.ensureSingleHighlight(newValue);
+    }
+  }
+  mostsearchedItemsWatcher(newValue) {
+    if (!newValue) {
+      this._mostsearchedItems = [];
+    }
+    else if (typeof newValue === "string") {
+      try {
+        this._mostsearchedItems = JSON.parse(newValue);
+      }
+      catch (e) {
+        this._mostsearchedItems = [];
+      }
+    }
+    else {
+      this._mostsearchedItems = newValue;
+    }
+  }
+  ensureSingleHighlight(items) {
+    let foundHighlighted = false;
+    return items.map(item => {
+      if (item.isHighlighted) {
+        if (!foundHighlighted) {
+          foundHighlighted = true;
+          return item;
+        }
+        else {
+          // Remove highlight from subsequent items
+          return Object.assign(Object.assign({}, item), { isHighlighted: false });
+        }
+      }
+      return item;
+    });
+  }
+  connectedCallback() {
+    this.init();
+  }
+  renderTopnewsItemInner(item) {
+    return (h(Fragment, null, !!item.subtitle && h("stzh-text", { class: "stzh-topnews-item__subtitle" }, item.subtitle), h("stzh-heading", { class: "stzh-topnews-item__label" }, item.label)));
+  }
+  render() {
+    const classes = {
+      "stzh-homepage-service-highlights": true,
+      "stzh-homepage-service-highlights--has-topnews": this._topnewsItems.length > 0,
+    };
+    return (h(Host, null, h("div", { class: classes }, this._topnewsItems.length > 0 && (h("div", { class: "stzh-homepage-service-highlights__topnews" }, this._topnewsItems.map(item => !!item.href ? (h("a", { href: item.href, class: {
+        "stzh-topnews-item": true,
+        "stzh-topnews-item--highlighted": item.isHighlighted,
+        "stzh-topnews-item--has-link": true,
+      } }, this.renderTopnewsItemInner(item))) : (h("div", { class: {
+        "stzh-topnews-item": true,
+        "stzh-topnews-item--highlighted": item.isHighlighted,
+      } }, this.renderTopnewsItemInner(item)))))), this._mostsearchedItems.length > 0 && (h("div", { class: "stzh-homepage-service-highlights__mostsearched" }, this._mostsearchedItems.map(item => (h("div", { class: {
+        "stzh-mostsearched-item": true,
+      } }, h("stzh-link", { class: "stzh-mostsearched-item__link", href: item.href, icon: "arrow-right" }, item.label)))))))));
+  }
+  static get is() { return "stzh-homepage-service-highlights"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-homepage-service-highlights.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-homepage-service-highlights.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "topnewsItems": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhTopnewsItem[] | string",
+          "resolved": "StzhTopnewsItem[] | string",
+          "references": {
+            "StzhTopnewsItem": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhTopnewsItem"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Top news items"
+        },
+        "attribute": "topnews-items",
+        "reflect": false,
+        "defaultValue": "[]"
+      },
+      "mostsearchedItems": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhMostsearchedItem[] | string",
+          "resolved": "StzhMostsearchedItem[] | string",
+          "references": {
+            "StzhMostsearchedItem": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhMostsearchedItem"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Most searched items"
+        },
+        "attribute": "mostsearched-items",
+        "reflect": false,
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "topnewsItems",
+        "methodName": "topnewsItemsWatcher"
+      }, {
+        "propName": "mostsearchedItems",
+        "methodName": "mostsearchedItemsWatcher"
+      }];
+  }
+}
+//# sourceMappingURL=stzh-homepage-service-highlights.js.map

package/dist/collection/components/stzh-homepage-service-highlights/stzh-homepage-service-highlights.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-homepage-service-highlights.js","sourceRoot":"","sources":["../../../../src/components/stzh-homepage-service-highlights/stzh-homepage-service-highlights.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhMostsearchedItem, StzhTopnewsItem } from \"../../index\";\n\n@Component({\n  tag: \"stzh-homepage-service-highlights\",\n  styleUrl: \"stzh-homepage-service-highlights.scss\",\n  scoped: true,\n})\nexport class StzhHomepageServiceHighlights {\n  @Element() element: HTMLStzhHomepageServiceHighlightsElement;\n\n  /** Top news items */\n  @Prop() topnewsItems: StzhTopnewsItem[] | string = [];\n  private _topnewsItems: StzhTopnewsItem[] = [];\n\n  /** Most searched items */\n  @Prop() mostsearchedItems: StzhMostsearchedItem[] | string = [];\n  private _mostsearchedItems: StzhMostsearchedItem[] = [];\n\n  @Watch(\"topnewsItems\")\n  topnewsItemsWatcher(newValue: StzhTopnewsItem[] | string) {\n    if (!newValue) {\n      this._topnewsItems = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        const parsed = JSON.parse(newValue);\n        this._topnewsItems = this.ensureSingleHighlight(parsed);\n      } catch (e) {\n        this._topnewsItems = [];\n      }\n    } else {\n      this._topnewsItems = this.ensureSingleHighlight(newValue);\n    }\n  }\n\n  @Watch(\"mostsearchedItems\")\n  mostsearchedItemsWatcher(newValue: StzhMostsearchedItem[] | string) {\n    if (!newValue) {\n      this._mostsearchedItems = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._mostsearchedItems = JSON.parse(newValue);\n      } catch (e) {\n        this._mostsearchedItems = [];\n      }\n    } else {\n      this._mostsearchedItems = newValue;\n    }\n  }\n\n  private ensureSingleHighlight(items: StzhTopnewsItem[]): StzhTopnewsItem[] {\n    let foundHighlighted = false;\n\n    return items.map(item => {\n      if (item.isHighlighted) {\n        if (!foundHighlighted) {\n          foundHighlighted = true;\n          return item;\n        } else {\n          // Remove highlight from subsequent items\n          return { ...item, isHighlighted: false };\n        }\n      }\n      return item;\n    });\n  }\n\n  private init = () => {\n    this.topnewsItemsWatcher(this.topnewsItems);\n    this.mostsearchedItemsWatcher(this.mostsearchedItems);\n  };\n\n  connectedCallback() {\n    this.init();\n  }\n\n  private renderTopnewsItemInner(item: StzhTopnewsItem): HTMLElement {\n    return (\n      <Fragment>\n        {!!item.subtitle && <stzh-text class=\"stzh-topnews-item__subtitle\">{item.subtitle}</stzh-text>}\n        <stzh-heading class=\"stzh-topnews-item__label\">{item.label}</stzh-heading>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const classes = {\n      \"stzh-homepage-service-highlights\": true,\n      \"stzh-homepage-service-highlights--has-topnews\": this._topnewsItems.length > 0,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this._topnewsItems.length > 0 && (\n            <div class=\"stzh-homepage-service-highlights__topnews\">\n              {this._topnewsItems.map(item =>\n                !!item.href ? (\n                  <a\n                    href={item.href}\n                    class={{\n                      \"stzh-topnews-item\": true,\n                      \"stzh-topnews-item--highlighted\": item.isHighlighted,\n                      \"stzh-topnews-item--has-link\": true,\n                    }}\n                  >\n                    {this.renderTopnewsItemInner(item)}\n                  </a>\n                ) : (\n                  <div\n                    class={{\n                      \"stzh-topnews-item\": true,\n                      \"stzh-topnews-item--highlighted\": item.isHighlighted,\n                    }}\n                  >\n                    {this.renderTopnewsItemInner(item)}\n                  </div>\n                )\n              )}\n            </div>\n          )}\n          {this._mostsearchedItems.length > 0 && (\n            <div class=\"stzh-homepage-service-highlights__mostsearched\">\n              {this._mostsearchedItems.map(item => (\n                <div\n                  class={{\n                    \"stzh-mostsearched-item\": true,\n                  }}\n                >\n                  <stzh-link class=\"stzh-mostsearched-item__link\" href={item.href} icon={\"arrow-right\"}>\n                    {item.label}\n                  </stzh-link>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-homepage-service-highlights/stzh-homepage-service-highlights.stories.js

@@ -0,0 +1,100 @@
+import { createComponentStory } from '../../utils/story-utils';
+import { withActions } from '@storybook/addon-actions/decorator';
+import readme from './readme.md?raw';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+const COMPONENT_NAME = 'stzh-homepage-service-highlights';
+const story = createComponentStory(COMPONENT_NAME);
+
+const TEMPLATE = `
+<stzh-homepage-service-highlights  ></stzh-homepage-service-highlights>;
+`;
+
+const topnewsItems = [
+  {
+    subtitle: 'Lorem Ipsum',
+    label: 'Fristerstreckung für die Steuerklärung 2023 beantragen',
+    href: '#',
+    isHighlighted: true
+  },
+  {
+    subtitle: 'Top News',
+    label: 'Schulferien publiziert',
+    href: '#'
+  },
+  {
+    subtitle: 'Top News',
+    label: 'Schulferien publiziert',
+    href: '#'
+  },
+  {
+    subtitle: 'Information',
+    label: 'Ohne Link'
+  }
+];
+
+const mostsearchedItems = [
+  {
+    label: 'Fristerstreckung für die Steuerklärung 2023 beantragen',
+    href: '#'
+  },
+  {
+    label: 'Schulferien 2024 / 2025',
+    href: '#'
+  },
+  {
+    label: 'Betreibungsauszug bestellen',
+    href: '#'
+  },
+  {
+    label: 'Tagesparkkarte kaufen',
+    href: '#'
+  },
+  {
+    label: 'Verkehrsbusse bezahlen',
+    href: '#'
+  },
+  {
+    label: 'Steuern verwalten',
+    href: '#'
+  },
+  {
+    label: 'Entsorgungskalender',
+    href: '#'
+  }
+];
+
+export default {
+  title: 'Components/HomepageServiceHighlights',
+  component: COMPONENT_NAME,
+  parameters: {
+    layout: 'fullwidth',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('Absolut Startseite'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [withActions, withDesign]
+};
+
+export const Default = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    'topnews-items': topnewsItems,
+    'mostsearched-items': mostsearchedItems
+  }
+};
+
+export const WithoutTopnews = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    'mostsearched-items': mostsearchedItems
+  }
+};

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */