@oiz/stzh-components 0.0.1-pretest → 1.5.0-alpha

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

@@ -1,50 +1,50 @@
-import { h } from '../../utils/h';
-import readme from './readme.md';
-import { withDesign } from 'storybook-addon-designs';
-import { getFigmaLink } from '../../../figma';
-
-export default {
-  title: 'Components/Overlay',
-  component: 'stzh-overlay',
-  parameters: {
-    actions: {
-      handles: ['stzhOpen', 'stzhClose']
-    },
-    docs: {
-      inlineStories: false,
-      description: {
-        component: readme
-      }
-    },
-    design: {
-      type: 'figma',
-      url: getFigmaLink('overlay'),
-      allowFullscreen: true
-    }
-  },
-  decorators: [
-    withDesign
-  ]
-};
-
-const Template = (args) => (
-  <div>
-    <stzh-text>
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
-    </stzh-text>
-    <stzh-overlay {...args}>
-      <p>Content</p>
-    </stzh-overlay>
-  </div>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  open: true,
-  stay: true,
-  'a11y-label': 'Test Overlay'
-};
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Overlay',
+  component: 'stzh-overlay',
+  parameters: {
+    actions: {
+      handles: ['stzhOpen', 'stzhClose']
+    },
+    docs: {
+      inlineStories: false,
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('overlay'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <div>
+    <stzh-text>
+      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+    </stzh-text>
+    <stzh-overlay {...args}>
+      <p>Content</p>
+    </stzh-overlay>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  open: true,
+  stay: true,
+  'a11y-label': 'Test Overlay'
+};

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

@@ -1,41 +1,41 @@
-import { Host, h } from "@stencil/core";
-/**
- * @slot - Slot for `stzh-skiplink` elements
- */
-export class StzhPageSkiplinks {
-  constructor() {
-    this.init = () => {
-      const links = this.element.querySelectorAll('stzh-skiplink');
-      links.forEach((link) => {
-        link.setAttribute("role", "listitem");
-      });
-    };
-  }
-  connectedCallback() {
-    this.init();
-    this.observer = new MutationObserver(this.init);
-    this.observer.observe(this.element, {
-      childList: true,
-      subtree: true
-    });
-  }
-  disconnectedCallback() {
-    this.observer.disconnect();
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "stzh-page-skiplinks", role: "list" }, h("slot", null))));
-  }
-  static get is() { return "stzh-page-skiplinks"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["stzh-page-skiplinks.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["stzh-page-skiplinks.css"]
-    };
-  }
-  static get elementRef() { return "element"; }
-}
+import { Host, h } from "@stencil/core";
+/**
+ * @slot - Slot for `stzh-skiplink` elements
+ */
+export class StzhPageSkiplinks {
+  constructor() {
+    this.init = () => {
+      const links = this.element.querySelectorAll('stzh-skiplink');
+      links.forEach((link) => {
+        link.setAttribute("role", "listitem");
+      });
+    };
+  }
+  connectedCallback() {
+    this.init();
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "stzh-page-skiplinks", role: "list" }, h("slot", null))));
+  }
+  static get is() { return "stzh-page-skiplinks"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-page-skiplinks.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-page-skiplinks.css"]
+    };
+  }
+  static get elementRef() { return "element"; }
+}

package/dist/collection/components/stzh-page-skiplinks/stzh-page-skiplinks.stories.js

@@ -1,43 +1,43 @@
-import { h } from '../../utils/h';
-import readme from './readme.md';
-import { withDesign } from 'storybook-addon-designs';
-import { getFigmaLink } from '../../../figma';
-
-export default {
-  title: 'Components/PageSkiplinks',
-  component: 'stzh-page-skiplinks',
-  parameters: {
-    actions: {
-      handles: []
-    },
-    docs: {
-      description: {
-        component: readme
-      }
-    },
-    design: {
-      type: 'figma',
-      url: getFigmaLink('pageskiplinks'),
-      allowFullscreen: true
-    }
-  },
-  decorators: [
-    withDesign
-  ]
-};
-
-const Template = (args) => (
-  <div>
-    <stzh-page-skiplinks {...args}>
-      <stzh-skiplink href="#anchorNavMeta" link-accesskey="1" link-title="[ALT + 1]">Skip to navigation</stzh-skiplink>
-      <stzh-skiplink href="#anchorContent" link-accesskey="2" link-title="[ALT + 2]">Skip to content</stzh-skiplink>
-    </stzh-page-skiplinks>
-    <stzh-text>
-      <p>Use <code>tab</code> key to go through skiplinks.</p>
-    </stzh-text>
-  </div>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-};
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/PageSkiplinks',
+  component: 'stzh-page-skiplinks',
+  parameters: {
+    actions: {
+      handles: []
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('pageskiplinks'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <div>
+    <stzh-page-skiplinks {...args}>
+      <stzh-skiplink href="#anchorNavMeta" link-accesskey="1" link-title="[ALT + 1]">Skip to navigation</stzh-skiplink>
+      <stzh-skiplink href="#anchorContent" link-accesskey="2" link-title="[ALT + 2]">Skip to content</stzh-skiplink>
+    </stzh-page-skiplinks>
+    <stzh-text>
+      <p>Use <code>tab</code> key to go through skiplinks.</p>
+    </stzh-text>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};

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

@@ -1,76 +1,76 @@
-import { Host, h } from "@stencil/core";
-import { hasSlot, setPropsIfNull } from "../../utils/utils";
-/**
- * @slot image - Slot for image
- */
-export class StzhPagetitle {
-  constructor() {
-    this.init = () => {
-      const headings = this.element.querySelectorAll('stzh-heading[slot="heading"], [slot="heading"] stzh-heading');
-      const leads = this.element.querySelectorAll('stzh-text[slot="lead"], [slot="lead"] stzh-text');
-      const actions = this.element.querySelectorAll('stzh-link[slot="action-left"], stzh-link[slot="action-right"], [slot="action-left"] stzh-link, [slot="action-right"] stzh-link');
-      const actionsRight = this.element.querySelectorAll('stzh-link[slot="action-right"], [slot="action-right"] stzh-link');
-      headings.forEach((heading) => {
-        setPropsIfNull(heading, {
-          withBorder: true
-        });
-      });
-      leads.forEach((lead) => {
-        setPropsIfNull(lead, {
-          lead: true
-        });
-      });
-      actionsRight.forEach((link) => {
-        setPropsIfNull(link, {
-          icon: "web-link"
-        });
-      });
-      actions.forEach((link) => {
-        setPropsIfNull(link, {
-          size: "small"
-        });
-      });
-    };
-  }
-  connectedCallback() {
-    this.init();
-    this.observer = new MutationObserver(this.init);
-    this.observer.observe(this.element, {
-      childList: true,
-      subtree: true
-    });
-  }
-  disconnectedCallback() {
-    this.observer.disconnect();
-  }
-  render() {
-    const headingSlotUsed = hasSlot(this.element, 'heading');
-    const imageSlotUsed = hasSlot(this.element, 'image');
-    const leadSlotUsed = hasSlot(this.element, 'lead');
-    const actionLeftSlotUsed = hasSlot(this.element, 'action-left');
-    const actionRightSlotUsed = hasSlot(this.element, 'action-right');
-    const classes = {
-      "stzh-pagetitle": true,
-      "stzh-pagetitle--has-heading": headingSlotUsed,
-      "stzh-pagetitle--has-image": imageSlotUsed,
-      "stzh-pagetitle--has-lead": leadSlotUsed,
-      "stzh-pagetitle--has-action": actionLeftSlotUsed || actionRightSlotUsed,
-      "stzh-pagetitle--has-action-left": actionLeftSlotUsed,
-      "stzh-pagetitle--has-action-right": actionRightSlotUsed,
-    };
-    return (h(Host, null, h("div", { class: classes }, h("slot", { name: "heading" }), h("div", { class: "stzh-pagetitle__actions" }, h("slot", { name: "action-left" }), h("slot", { name: "action-right" })), h("slot", { name: "image" }), h("slot", { name: "lead" }))));
-  }
-  static get is() { return "stzh-pagetitle"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["stzh-pagetitle.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["stzh-pagetitle.css"]
-    };
-  }
-  static get elementRef() { return "element"; }
-}
+import { Host, h } from "@stencil/core";
+import { hasSlot, setPropsIfNull } from "../../utils/utils";
+/**
+ * @slot image - Slot for image
+ */
+export class StzhPagetitle {
+  constructor() {
+    this.init = () => {
+      const headings = this.element.querySelectorAll('stzh-heading[slot="heading"], [slot="heading"] stzh-heading');
+      const leads = this.element.querySelectorAll('stzh-text[slot="lead"], [slot="lead"] stzh-text');
+      const actions = this.element.querySelectorAll('stzh-link[slot="action-left"], stzh-link[slot="action-right"], [slot="action-left"] stzh-link, [slot="action-right"] stzh-link');
+      const actionsRight = this.element.querySelectorAll('stzh-link[slot="action-right"], [slot="action-right"] stzh-link');
+      headings.forEach((heading) => {
+        setPropsIfNull(heading, {
+          withBorder: true
+        });
+      });
+      leads.forEach((lead) => {
+        setPropsIfNull(lead, {
+          lead: true
+        });
+      });
+      actionsRight.forEach((link) => {
+        setPropsIfNull(link, {
+          icon: "web-link"
+        });
+      });
+      actions.forEach((link) => {
+        setPropsIfNull(link, {
+          size: "small"
+        });
+      });
+    };
+  }
+  connectedCallback() {
+    this.init();
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    const headingSlotUsed = hasSlot(this.element, 'heading');
+    const imageSlotUsed = hasSlot(this.element, 'image');
+    const leadSlotUsed = hasSlot(this.element, 'lead');
+    const actionLeftSlotUsed = hasSlot(this.element, 'action-left');
+    const actionRightSlotUsed = hasSlot(this.element, 'action-right');
+    const classes = {
+      "stzh-pagetitle": true,
+      "stzh-pagetitle--has-heading": headingSlotUsed,
+      "stzh-pagetitle--has-image": imageSlotUsed,
+      "stzh-pagetitle--has-lead": leadSlotUsed,
+      "stzh-pagetitle--has-action": actionLeftSlotUsed || actionRightSlotUsed,
+      "stzh-pagetitle--has-action-left": actionLeftSlotUsed,
+      "stzh-pagetitle--has-action-right": actionRightSlotUsed,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("slot", { name: "heading" }), h("div", { class: "stzh-pagetitle__actions" }, h("slot", { name: "action-left" }), h("slot", { name: "action-right" })), h("slot", { name: "image" }), h("slot", { name: "lead" }))));
+  }
+  static get is() { return "stzh-pagetitle"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-pagetitle.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-pagetitle.css"]
+    };
+  }
+  static get elementRef() { return "element"; }
+}

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

@@ -1,107 +1,107 @@
-import { h } from '../../utils/h';
-import readme from './readme.md';
-import { withDesign } from 'storybook-addon-designs';
-import { getFigmaLink } from '../../../figma';
-
-export default {
-  title: 'Components/Pagetitle',
-  component: 'stzh-pagetitle',
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component: readme
-      }
-    },
-    design: {
-      type: 'figma',
-      url: getFigmaLink('pagetitle'),
-      allowFullscreen: true
-    }
-  },
-  decorators: [
-    withDesign
-  ]
-};
-
-const Template = (args) => (
-  <stzh-pagetitle {...args}>
-    <stzh-heading slot="heading">
-      Main title
-    </stzh-heading>
-    <stzh-text slot="lead">
-      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
-    </stzh-text>
-  </stzh-pagetitle>
-);
-
-const TemplateWithActions = (args) => (
-  <stzh-pagetitle {...args}>
-    <stzh-heading slot="heading">
-      Main title
-    </stzh-heading>
-    <stzh-readspeaker slot="action-left" 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-link link-accesskey="L">
-        Read site
-      </stzh-link>
-    </stzh-readspeaker>
-    <stzh-link slot="action-right" href="http://stadt-zuerich.ch">
-      stadt-zuerich.ch
-    </stzh-link>
-    <stzh-text slot="lead">
-      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
-    </stzh-text>
-  </stzh-pagetitle>
-);
-
-const TemplateWithOneAction = (args) => (
-  <stzh-pagetitle {...args}>
-    <stzh-heading slot="heading">
-      Main title
-    </stzh-heading>
-    <stzh-link slot="action-right" href="http://stadt-zuerich.ch">
-      stadt-zuerich.ch
-    </stzh-link>
-    <stzh-text slot="lead">
-      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
-    </stzh-text>
-  </stzh-pagetitle>
-);
-
-const TemplateWithImageAndActions = (args) => (
-  <stzh-pagetitle {...args}>
-    <stzh-heading slot="heading">
-      Main title
-    </stzh-heading>
-    <stzh-readspeaker slot="action-left" 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-link link-accesskey="L">
-        Read page
-      </stzh-link>
-    </stzh-readspeaker>
-    <stzh-link slot="action-right" href="http://stadt-zuerich.ch">
-      stadt-zuerich.ch
-    </stzh-link>
-    <stzh-figure slot="image" caption="Laboris laborum aute id laboris culpa esse aliquip nisi anim velit.">
-      <img src="media/images/example.jpg" loading="lazy" alt="Example image" />
-    </stzh-figure>
-    <stzh-text slot="lead">
-      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
-    </stzh-text>
-  </stzh-pagetitle>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-};
-
-export const DefaultWithActions = TemplateWithActions.bind({});
-DefaultWithActions.args = {
-};
-
-export const DefaultWithOneAction = TemplateWithOneAction.bind({});
-DefaultWithOneAction.args = {
-};
-
-export const DefaultWithImageAndActions = TemplateWithImageAndActions.bind({});
-DefaultWithImageAndActions.args = {
-};
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Pagetitle',
+  component: 'stzh-pagetitle',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('pagetitle'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-pagetitle {...args}>
+    <stzh-heading slot="heading">
+      Main title
+    </stzh-heading>
+    <stzh-text slot="lead">
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
+    </stzh-text>
+  </stzh-pagetitle>
+);
+
+const TemplateWithActions = (args) => (
+  <stzh-pagetitle {...args}>
+    <stzh-heading slot="heading">
+      Main title
+    </stzh-heading>
+    <stzh-readspeaker slot="action-left" 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-link link-accesskey="L">
+        Read site
+      </stzh-link>
+    </stzh-readspeaker>
+    <stzh-link slot="action-right" href="http://stadt-zuerich.ch">
+      stadt-zuerich.ch
+    </stzh-link>
+    <stzh-text slot="lead">
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
+    </stzh-text>
+  </stzh-pagetitle>
+);
+
+const TemplateWithOneAction = (args) => (
+  <stzh-pagetitle {...args}>
+    <stzh-heading slot="heading">
+      Main title
+    </stzh-heading>
+    <stzh-link slot="action-right" href="http://stadt-zuerich.ch">
+      stadt-zuerich.ch
+    </stzh-link>
+    <stzh-text slot="lead">
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
+    </stzh-text>
+  </stzh-pagetitle>
+);
+
+const TemplateWithImageAndActions = (args) => (
+  <stzh-pagetitle {...args}>
+    <stzh-heading slot="heading">
+      Main title
+    </stzh-heading>
+    <stzh-readspeaker slot="action-left" 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-link link-accesskey="L">
+        Read page
+      </stzh-link>
+    </stzh-readspeaker>
+    <stzh-link slot="action-right" href="http://stadt-zuerich.ch">
+      stadt-zuerich.ch
+    </stzh-link>
+    <stzh-figure slot="image" caption="Laboris laborum aute id laboris culpa esse aliquip nisi anim velit.">
+      <img src="media/images/example.jpg" loading="lazy" alt="Example image" />
+    </stzh-figure>
+    <stzh-text slot="lead">
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
+    </stzh-text>
+  </stzh-pagetitle>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};
+
+export const DefaultWithActions = TemplateWithActions.bind({});
+DefaultWithActions.args = {
+};
+
+export const DefaultWithOneAction = TemplateWithOneAction.bind({});
+DefaultWithOneAction.args = {
+};
+
+export const DefaultWithImageAndActions = TemplateWithImageAndActions.bind({});
+DefaultWithImageAndActions.args = {
+};