@oiz/stzh-components 3.0.0 → 3.1.0

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

@@ -0,0 +1,461 @@
+/**
+ * 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 --stzh-pagetitle-home-heading-color: Color of the heading
+  * @prop --stzh-pagetitle-home-subheading-color: Color of the subheading and readspeaker slot
+*/
+:host ::slotted([slot=image]) {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+:host ::slotted([slot=heading]) {
+  --color: var(--stzh-pagetitle-home-heading-color, var(--stzh-color-secondary50));
+}
+:host ::slotted([slot=subheading]) {
+  --color: var(--stzh-pagetitle-home-heading-color, var(--stzh-heading-color));
+}
+:host ::slotted([slot=readspeaker]) * {
+  --color: var(--stzh-pagetitle-home-subheading-color, var(--stzh-heading-color));
+  --hover-color: var(--stzh-pagetitle-home-subheading-color, var(--stzh-heading-color));
+}
+:host[has-image] ::slotted([slot=readspeaker]) * {
+  --color: var(--stzh-pagetitle-home-subheading-color, var(--stzh-color-white));
+  --hover-color: var(--stzh-pagetitle-home-subheading-color, var(--stzh-color-white));
+}
+:host[has-image] ::slotted([slot=heading]) {
+  --color: var(--stzh-pagetitle-home-heading-color, var(--stzh-color-lemonyellow50));
+}
+:host[has-image] ::slotted([slot=subheading]) {
+  --color: var(--stzh-pagetitle-home-subheading-color, var(--stzh-color-white));
+}
+
+.stzh-pagetitle-home {
+  position: relative;
+  padding-bottom: var(--stzh-space-xxlarge);
+  /* Has no image variant */
+  /* Has image variant */
+}
+@media screen and (min-width: 900px) {
+  .stzh-pagetitle-home {
+    padding-bottom: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pagetitle-home {
+    padding-bottom: var(--stzh-space-xxxxlarge);
+  }
+}
+.stzh-pagetitle-home__container {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
+@media screen and (min-width: 600px) {
+  .stzh-pagetitle-home__container {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pagetitle-home__container {
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pagetitle-home__container {
+    margin-left: 4rem;
+    margin-right: 4rem;
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-pagetitle-home__container {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 84.25rem;
+  }
+}
+.stzh-pagetitle-home__text {
+  padding-top: var(--stzh-space-xxlarge);
+  padding-bottom: var(--stzh-space-xxlarge);
+  -moz-column-gap: var(--stzh-grid-gutter);
+       column-gap: var(--stzh-grid-gutter);
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+@media screen and (min-width: 600px) {
+  .stzh-pagetitle-home__text {
+    padding-top: var(--stzh-space-xxxxlarge);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pagetitle-home__text {
+    padding-top: var(--stzh-space-xxxxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pagetitle-home__text {
+    padding-top: var(--stzh-space-xbig);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-pagetitle-home__text {
+    padding-bottom: var(--stzh-space-xxxxlarge);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pagetitle-home__text {
+    padding-bottom: var(--stzh-space-xxxxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pagetitle-home__text {
+    padding-bottom: var(--stzh-space-xbig);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-pagetitle-home__text {
+    -moz-column-gap: var(--stzh-grid-gutter-small);
+         column-gap: var(--stzh-grid-gutter-small);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pagetitle-home__text {
+    -moz-column-gap: var(--stzh-grid-gutter-medium);
+         column-gap: var(--stzh-grid-gutter-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pagetitle-home__text {
+    -moz-column-gap: var(--stzh-grid-gutter-large);
+         column-gap: var(--stzh-grid-gutter-large);
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-pagetitle-home__text {
+    -moz-column-gap: var(--stzh-grid-gutter-ultra);
+         column-gap: var(--stzh-grid-gutter-ultra);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pagetitle-home__text {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pagetitle-home__text {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+}
+.stzh-pagetitle-home__image-wrapper {
+  position: relative;
+}
+.stzh-pagetitle-home__image-inner-wrapper {
+  position: absolute;
+  inset: 0;
+  height: 100%;
+  margin-left: calc(1.25rem / -1);
+  margin-right: calc(1.25rem / -1);
+}
+@media screen and (min-width: 600px) {
+  .stzh-pagetitle-home__image-inner-wrapper {
+    margin-left: calc(2rem / -1);
+    margin-right: calc(2rem / -1);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pagetitle-home__image-inner-wrapper {
+    margin-left: 0;
+    margin-right: 0;
+    width: calc(100% + 2.5rem);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pagetitle-home__image-inner-wrapper {
+    width: calc(100% + 4rem);
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-pagetitle-home__image-inner-wrapper {
+    width: calc(100% + ((100rem - 84.25rem) / 2));
+  }
+}
+.stzh-pagetitle-home__image-gradient {
+  position: absolute;
+  background: linear-gradient(1.21deg, rgba(0, 0, 0, 0) 31.71%, rgba(0, 0, 0, 0.5) 83.84%);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+}
+@media screen and (min-width: 600px) {
+  .stzh-pagetitle-home__image-gradient {
+    background: linear-gradient(270deg, rgba(0, 0, 0, 0) 31.21%, rgba(0, 0, 0, 0.5) 91.45%);
+  }
+}
+.stzh-pagetitle-home__meta {
+  display: flex;
+  flex-direction: column-reverse;
+  row-gap: var(--stzh-space-xsmall);
+  margin-bottom: var(--stzh-space-medium);
+}
+@media screen and (min-width: 600px) {
+  .stzh-pagetitle-home__meta {
+    margin-bottom: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pagetitle-home__meta {
+    margin-bottom: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pagetitle-home__meta {
+    margin-bottom: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pagetitle-home__meta {
+    flex-direction: row;
+  }
+}
+@media screen and (min-width: 600px) and (max-width: 899px) {
+  .stzh-pagetitle-home__readspeaker {
+    --stzh-readspeaker-dropdown-position: relative;
+    --stzh-readspeaker-dropdown-top: auto;
+  }
+}
+.stzh-pagetitle-home__subheading {
+  --stzh-base-lead-color: var(--stzh-heading-color);
+}
+.stzh-pagetitle-home__heading:not(:empty) + .stzh-pagetitle-home__subheading:not(:empty) {
+  margin-top: var(--stzh-space-xsmall);
+}
+@media screen and (min-width: 900px) {
+  .stzh-pagetitle-home__heading:not(:empty) + .stzh-pagetitle-home__subheading:not(:empty) {
+    margin-top: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pagetitle-home__heading:not(:empty) + .stzh-pagetitle-home__subheading:not(:empty) {
+    margin-top: var(--stzh-space-medium);
+  }
+}
+.stzh-pagetitle-home__heading, .stzh-pagetitle-home__subheading, .stzh-pagetitle-home__meta {
+  grid-column: 1/span 4;
+}
+@media screen and (min-width: 900px) {
+  .stzh-pagetitle-home__heading, .stzh-pagetitle-home__subheading, .stzh-pagetitle-home__meta {
+    grid-column: 1/span 10;
+  }
+}
+.stzh-pagetitle-home--has-no-image .stzh-pagetitle-home__ratio {
+  display: none;
+}
+.stzh-pagetitle-home--has-no-image .stzh-pagetitle-home__text {
+  padding-top: var(--stzh-space-medium);
+}
+@media screen and (min-width: 600px) {
+  .stzh-pagetitle-home--has-no-image .stzh-pagetitle-home__text {
+    padding-top: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pagetitle-home--has-no-image .stzh-pagetitle-home__text {
+    padding-top: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pagetitle-home--has-no-image .stzh-pagetitle-home__text {
+    padding-top: var(--stzh-space-xxlarge);
+  }
+}
+.stzh-pagetitle-home--has-image {
+  padding-bottom: 0;
+}
+.stzh-pagetitle-home--has-image .stzh-pagetitle-home__container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1;
+}
+.stzh-pagetitle-home--has-image .stzh-pagetitle-home__text {
+  padding-top: var(--stzh-space-xxlarge);
+}
+@media screen and (min-width: 900px) {
+  .stzh-pagetitle-home--has-image .stzh-pagetitle-home__text {
+    padding-top: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pagetitle-home--has-image .stzh-pagetitle-home__text {
+    padding-top: var(--stzh-space-xxxxlarge);
+  }
+}

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

@@ -0,0 +1,23 @@
+import { test } from "@playwright/test";
+import { visualDiff } from "../../../.build/test/utils";
+const URL = "components-pagetitle-home";
+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-pagetitle-home.e2e.js.map

package/dist/collection/components/stzh-pagetitle-home/stzh-pagetitle-home.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-pagetitle-home.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-pagetitle-home/stzh-pagetitle-home.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,2BAA2B,CAAC;AAExC,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-home\";\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-pagetitle-home/stzh-pagetitle-home.js

@@ -0,0 +1,86 @@
+import { h, Host } from "@stencil/core";
+import { hasSlot, setPropsIfNull } from "../../utils/utils";
+import { addMediaChangeListener, media, removeMediaChangeListener } from "../../utils/media-utils";
+/**
+ * @slot heading - Slot for `stzh-heading` element
+ * @slot image - Slot for `stzh-figure` or `img` element
+ * @slot subheading - Slot for `stzh-text` element
+ * @slot readspeaker - Slot for `stzh-readspeaker` element
+ */
+export class StzhPagetitleHome {
+  constructor() {
+    this.mediaChangeHandler = () => {
+      this.isSmall = media("small").matches;
+    };
+    this.init = () => {
+      const heading = this.element.querySelector('stzh-heading[slot="heading"], [slot="heading"] stzh-heading');
+      const subheading = this.element.querySelector('stzh-text[slot="subheading"], [slot="subheading"] stzh-text');
+      const readspeakerButton = this.element.querySelector('[slot="readspeaker"] stzh-button');
+      if (heading) {
+        setPropsIfNull(heading, {
+          curve: "h1home",
+          level: "1",
+        });
+      }
+      if (readspeakerButton) {
+        setPropsIfNull(readspeakerButton, {
+          variant: "tertiary-plain",
+          noPaddingLeft: true,
+          noPaddingRight: true,
+          size: "small",
+          sizeMedium: "tiny",
+          buttonAccesskey: "L",
+        });
+      }
+      if (subheading) {
+        setPropsIfNull(subheading, {
+          curve: "hero",
+          lead: true,
+        });
+      }
+    };
+    this.isSmall = undefined;
+  }
+  componentDidRender() { }
+  connectedCallback() {
+    console.log("1234");
+    this.init();
+    this.mediaChangeHandler();
+    addMediaChangeListener(this.mediaChangeHandler);
+  }
+  disconnectedCallback() {
+    removeMediaChangeListener(this.mediaChangeHandler);
+  }
+  render() {
+    const imageSlotUsed = hasSlot(this.element, "image");
+    const subheadingSlotUsed = hasSlot(this.element, "subheading");
+    const readspeakerSlotUsed = hasSlot(this.element, "readspeaker");
+    const classes = {
+      "stzh-pagetitle-home": true,
+      "stzh-pagetitle-home--has-image": imageSlotUsed,
+      "stzh-pagetitle-home--has-no-image": !imageSlotUsed,
+      "stzh-pagetitle-home--has-subheading": subheadingSlotUsed,
+      "stzh-pagetitle-home--has-meta": readspeakerSlotUsed,
+    };
+    return (h(Host, { "has-image": imageSlotUsed }, h("div", { class: classes }, h("div", { class: "stzh-pagetitle-home__image-wrapper" }, h("stzh-ratio", { ratio: "4:3", portrait: !this.isSmall, ratioSmall: "16:9", ratioMedium: "2:1", ratioLarge: "21:9", class: "stzh-pagetitle-home__ratio" }), h("div", { class: "stzh-pagetitle-home__image-gradient" }), h("div", { class: "stzh-pagetitle-home__image-inner-wrapper" }, h("slot", { name: "image" }))), h("div", { class: "stzh-pagetitle-home__container" }, h("div", { class: "stzh-pagetitle-home__wrapper" }, h("div", { class: "stzh-pagetitle-home__text" }, h("div", { class: "stzh-pagetitle-home__meta" }, h("div", { class: "stzh-pagetitle-home__readspeaker" }, h("slot", { name: "readspeaker" }))), h("div", { class: "stzh-pagetitle-home__heading" }, h("slot", { name: "heading" })), h("div", { class: "stzh-pagetitle-home__subheading" }, h("slot", { name: "subheading" }))))))));
+  }
+  static get is() { return "stzh-pagetitle-home"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-pagetitle-home.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-pagetitle-home.css"]
+    };
+  }
+  static get states() {
+    return {
+      "isSmall": {}
+    };
+  }
+  static get elementRef() { return "element"; }
+}
+//# sourceMappingURL=stzh-pagetitle-home.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-pagetitle-home.js","sourceRoot":"","sources":["../../../../src/components/stzh-pagetitle-home/stzh-pagetitle-home.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, State } from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot subheading - Slot for `stzh-text` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n */\n@Component({\n  tag: \"stzh-pagetitle-home\",\n  styleUrl: \"stzh-pagetitle-home.scss\",\n  scoped: true,\n})\nexport class StzhPagetitleHome {\n  @Element() element: HTMLStzhPagetitleHomeElement;\n\n  @State() isSmall: boolean;\n\n  private mediaChangeHandler = () => {\n    this.isSmall = media(\"small\").matches;\n  };\n\n  private init = () => {\n    const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const subheading = this.element.querySelector('stzh-text[slot=\"subheading\"], [slot=\"subheading\"] stzh-text');\n    const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n\n    if (heading) {\n      setPropsIfNull(heading, {\n        curve: \"h1home\",\n        level: \"1\",\n      } as HTMLStzhHeadingElement);\n    }\n\n    if (readspeakerButton) {\n      setPropsIfNull(readspeakerButton, {\n        variant: \"tertiary-plain\",\n        noPaddingLeft: true,\n        noPaddingRight: true,\n        size: \"small\",\n        sizeMedium: \"tiny\",\n        buttonAccesskey: \"L\",\n      } as HTMLStzhButtonElement);\n    }\n\n    if (subheading) {\n      setPropsIfNull(subheading, {\n        curve: \"hero\",\n        lead: true,\n      } as HTMLStzhTextElement);\n    }\n  };\n\n  componentDidRender() {}\n\n  connectedCallback() {\n    console.log(\"1234\");\n    this.init();\n    this.mediaChangeHandler();\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const imageSlotUsed = hasSlot(this.element, \"image\");\n    const subheadingSlotUsed = hasSlot(this.element, \"subheading\");\n    const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n\n    const classes = {\n      \"stzh-pagetitle-home\": true,\n      \"stzh-pagetitle-home--has-image\": imageSlotUsed,\n      \"stzh-pagetitle-home--has-no-image\": !imageSlotUsed,\n      \"stzh-pagetitle-home--has-subheading\": subheadingSlotUsed,\n      \"stzh-pagetitle-home--has-meta\": readspeakerSlotUsed,\n    };\n\n    return (\n      <Host has-image={imageSlotUsed}>\n        <div class={classes}>\n          <div class=\"stzh-pagetitle-home__image-wrapper\">\n            <stzh-ratio\n              ratio={\"4:3\"}\n              portrait={!this.isSmall}\n              ratioSmall={\"16:9\"}\n              ratioMedium={\"2:1\"}\n              ratioLarge={\"21:9\"}\n              class=\"stzh-pagetitle-home__ratio\"\n            ></stzh-ratio>\n            <div class=\"stzh-pagetitle-home__image-gradient\"></div>\n            <div class=\"stzh-pagetitle-home__image-inner-wrapper\">\n              <slot name=\"image\"></slot>\n            </div>\n          </div>\n          <div class=\"stzh-pagetitle-home__container\">\n            <div class=\"stzh-pagetitle-home__wrapper\">\n              <div class=\"stzh-pagetitle-home__text\">\n                <div class=\"stzh-pagetitle-home__meta\">\n                  <div class=\"stzh-pagetitle-home__readspeaker\">\n                    <slot name=\"readspeaker\"></slot>\n                  </div>\n                </div>\n\n                <div class=\"stzh-pagetitle-home__heading\">\n                  <slot name=\"heading\"></slot>\n                </div>\n\n                <div class=\"stzh-pagetitle-home__subheading\">\n                  <slot name=\"subheading\"></slot>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,99 @@
+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-pagetitle-home';
+const story = createComponentStory(COMPONENT_NAME);
+
+const TEMPLATE = `
+<stzh-pagetitle-home>
+  <stzh-readspeaker slot="readspeaker" href="https://app-eu.readspeaker.com/cgi-bin/rsent?customerid=4490&lang=de_de&readid=content&url=https://www.stadt-zuerich.ch/portal/de/index/service/kontakt.html">
+    <stzh-button>
+      Read page
+    </stzh-button>
+  </stzh-readspeaker>
+  <stzh-heading slot="heading" id="anchorContent">Eros scelerisque justo maximus tempor est venenatis</stzh-heading>
+  <img slot="image" src="media/images/example.jpg" loading="lazy" alt="Example image" />
+  <stzh-text slot="subheading">
+    Eros scelerisque justo maximus tempor est venenatis
+  </stzh-text>
+</stzh-pagetitle-home>
+`;
+
+const TEMPLATE_WITHOUT_IMAGE = `
+<stzh-pagetitle-home>
+  <stzh-readspeaker slot="readspeaker" href="https://app-eu.readspeaker.com/cgi-bin/rsent?customerid=4490&lang=de_de&readid=content&url=https://www.stadt-zuerich.ch/portal/de/index/service/kontakt.html">
+    <stzh-button>
+      Read page
+    </stzh-button>
+  </stzh-readspeaker>
+  <stzh-heading slot="heading" id="anchorContent">Eros scelerisque justo maximus tempor est venenatis</stzh-heading>
+  <stzh-text slot="subheading">
+    Eros scelerisque justo maximus tempor est venenatis
+  </stzh-text>
+</stzh-pagetitle-home>
+`;
+
+const TEMPLATE_WITHOUT_IMAGE_AND_SUBHEADING = `
+<stzh-pagetitle-home>
+  <stzh-readspeaker slot="readspeaker" href="https://app-eu.readspeaker.com/cgi-bin/rsent?customerid=4490&lang=de_de&readid=content&url=https://www.stadt-zuerich.ch/portal/de/index/service/kontakt.html">
+    <stzh-button>
+      Read page
+    </stzh-button>
+  </stzh-readspeaker>
+  <stzh-heading slot="heading" id="anchorContent">Eros scelerisque justo maximus tempor est venenatis</stzh-heading>
+</stzh-pagetitle-home>
+`;
+
+const TEMPLATE_WITHOUT_SUBHEADING = `
+<stzh-pagetitle-home>
+  <stzh-readspeaker slot="readspeaker" href="https://app-eu.readspeaker.com/cgi-bin/rsent?customerid=4490&lang=de_de&readid=content&url=https://www.stadt-zuerich.ch/portal/de/index/service/kontakt.html">
+    <stzh-button>
+      Read page
+    </stzh-button>
+  </stzh-readspeaker>
+  <stzh-heading slot="heading" id="anchorContent">Eros scelerisque justo maximus tempor est venenatis</stzh-heading>
+  <img slot="image" src="media/images/example.jpg" loading="lazy" alt="Example image" />
+</stzh-pagetitle-home>
+`;
+
+export default {
+  title: 'Components/PagetitleHome',
+  component: COMPONENT_NAME,
+  parameters: {
+    layout: 'fullwidth',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('pagetitle'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [withActions, withDesign]
+};
+
+export const Default = {
+  render: (args) => story(args, TEMPLATE),
+  args: {}
+};
+
+export const WithoutImage = {
+  render: (args) => story(args, TEMPLATE_WITHOUT_IMAGE),
+  args: {}
+};
+
+export const WithoutSubheading = {
+  render: (args) => story(args, TEMPLATE_WITHOUT_SUBHEADING),
+  args: {}
+};
+
+export const WithoutImageAndSubheading = {
+  render: (args) => story(args, TEMPLATE_WITHOUT_IMAGE_AND_SUBHEADING),
+  args: {}
+};

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

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