npm - @oiz/stzh-components - Versions diffs - 0.0.1-pretest → 1.4.0-npmjstest - Mend

@oiz/stzh-components 0.0.1-pretest → 1.4.0-npmjstest

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (924) hide show

package/dist/collection/pages/meinkonto.stories.js CHANGED Viewed

@@ -1,661 +1,661 @@
-import { h } from '../utils/h';
-export default {
-  title: 'Pages/MeinKonto',
-  parameters: {
-    docs: {
-      inlineStories: false,
-    },
-    layout: 'fullscreen'
-  }
-};
-const TemplateServices = (args) => (
-  <div class="stzh-theme-ma"> { /* use theme class on <html> class */ }
-    <stzh-visuallyhidden>
-      <h1>Navigation</h1>
-      <h2>Skiplinks</h2>
-    </stzh-visuallyhidden>
-    <stzh-page-skiplinks>
-      <stzh-skiplink href="#anchorNavMeta" link-accesskey="1" link-title="[ALT + 1]">Main Navigation</stzh-skiplink>
-      <stzh-skiplink href="#anchorContent" link-accesskey="2" link-title="[ALT + 2]">Content</stzh-skiplink>
-    </stzh-page-skiplinks>
-    <stzh-header>
-      <img
-        slot="logo"
-        src="media/logo/stzh-default.svg"
-        alt="Logo Stadt Zürich"
-      ></img>
-      <nav slot="nav" id="anchorNavMeta">
-        <stzh-visuallyhidden>
-          <h2>Meta Navigation</h2>
-        </stzh-visuallyhidden>
-        <stzh-metanav>
-          <stzh-link href="#contact">Contact City Zürich</stzh-link>
-        </stzh-metanav>
-      </nav>
-      <stzh-popover label="Mein Konto" slot="login" placement="bottom-end">
-        <stzh-button
-          fullwidth
-          text-align="space-between"
-          icon-position="right"
-          icon="user"
-        >
-          Full Name
-        </stzh-button>
-        <stzh-menu slot="content">
-          <stzh-menu-item href="/app/mkfewww/web/auth" icon="bulleted-list">
-            Mein Konto
-          </stzh-menu-item>
-          <stzh-menu-item href="/app/mkfewww/web/auth/settings" icon="gear">
-            Settings
-          </stzh-menu-item>
-          <stzh-menu-item href="/about-meinkonto" icon="info-help">
-            About Mein Konto
-          </stzh-menu-item>
-        </stzh-menu>
-        <stzh-button href="/login/generic/logout" slot="action" variant="secondary" size="small">
-          Logout
-        </stzh-button>
-      </stzh-popover>
-      <stzh-appnav slot="appnav" app-title="Mein Konto" status="Preview" href="#">
-        <stzh-link href="#" icon="bulleted-list" active>
-          Services
-        </stzh-link>
-        <stzh-link href="#" badge="3" icon="mail">
-          Messages
-        </stzh-link>
-        <stzh-link href="#" badge="99" icon="reset-time">
-          Activities
-        </stzh-link>
-        <stzh-link href="#" icon="filtering">
-          Settings
-        </stzh-link>
-      </stzh-appnav>
-    </stzh-header>
-    <stzh-section id="anchorContent">
-      <stzh-vspace curve="big"></stzh-vspace>
-      <stzh-container>
-        <stzh-row span-small="6" span-medium="12">
-          <stzh-cell>
-            <stzh-row>
-              <stzh-cell span-small="12" span-medium="4">
-                <stzh-input label="Search services" type="search"></stzh-input>
-              </stzh-cell>
-            </stzh-row>
-            <stzh-vspace size-small="none" size-medium="medium"></stzh-vspace>
-          </stzh-cell>
-          <stzh-cell>
-            <stzh-chip-select
-              label="Services"
-              value="all"
-              data='[
-                {
-                  "label": "All Services",
-                  "value": "all",
-                  "variant": "filter",
-                  "type": "secondary",
-                  "counter": "4",
-                  "icon": "bulleted-list"
-                },
-                {
-                  "label": "My Services",
-                  "value": "my",
-                  "variant": "filter",
-                  "type": "secondary",
-                  "counter": "2",
-                  "icon": "star-filled"
-                },
-                {
-                  "label": "Information",
-                  "value": "information",
-                  "variant": "filter",
-                  "type": "secondary",
-                  "counter": "3"
-                },
-                {
-                  "label": "Taxes &amp; Finances",
-                  "value": "taxes",
-                  "variant": "filter",
-                  "type": "secondary",
-                  "counter": "1"
-                }
-              ]'
-            ></stzh-chip-select>
-          </stzh-cell>
-        </stzh-row>
-        <stzh-vspace curve="large"></stzh-vspace>
-        <stzh-servicecard-list show-toggle-link>
-          <stzh-text slot="description">
-            Services are shown here, which you marked with <stzh-icon name="star-filled"></stzh-icon>
-          </stzh-text>
-          <stzh-servicecard
-            collapsible
-            starrable
-            heading="Lorem ipsum 1"
-            subtitle="Dolor si 1"
-            actions='[
-              {
-                "id": "message",
-                "onlyCollapseText": true,
-                "icon": "mail",
-                "badge": "3",
-                "label": "Messages"
-              }
-            ]'
-          >
-            <div slot="left">Content Left</div>
-            <div slot="right">Content Right</div>
-          </stzh-servicecard>
-          <stzh-servicecard
-            collapsible
-            starrable
-            heading="Lorem ipsum 2"
-            subtitle='["Dolor si 2", "Dolor si 2.1", "Dolor si 2.2"]'
-            subtitle-interactive
-            actions='[
-              {
-                "id": "add",
-                "icon": "plus",
-                "label": "Add address"
-              },
-              {
-                "id": "edit",
-                "icon": "edit",
-                "label": "Edit"
-              },
-              {
-                "id": "delete",
-                "icon": "delete",
-                "label": "Remove"
-              },
-              {
-                "id": "message",
-                "onlyCollapseText": true,
-                "icon": "mail",
-                "badge": "3",
-                "label": "Messages"
-              }
-            ]'
-          >
-            <div slot="left">Content Left</div>
-            <table slot="middle">
-              <tr>
-                <th>Cell Label</th>
-                <td>Cell Value</td>
-              </tr>
-              <tr>
-                <th>Cell Label</th>
-                <td>Cell Value</td>
-              </tr>
-              <tr>
-                <th>Cell Label</th>
-                <td>Cell Value</td>
-              </tr>
-            </table>
-            <div slot="right">Content Right</div>
-          </stzh-servicecard>
-          <stzh-servicecard collapsible starrable heading="Lorem ipsum 3" subtitle="Dolor si 3">
-            <div slot="left">Content Left</div>
-            <stzh-button label="Button Right 1" slot="right" fullwidth></stzh-button>
-            <stzh-popover slot="right">
-              <stzh-button label="Button Right 2" fullwidth icon="angle-up" icon-position="right"></stzh-button>
-              <stzh-menu slot="content">
-                <stzh-menu-item label="Test"></stzh-menu-item>
-              </stzh-menu>
-            </stzh-popover>
-          </stzh-servicecard>
-          <stzh-servicecard collapsible starrable heading="Lorem ipsum 4">
-            <div slot="left">Content Left</div>
-            <stzh-section slot="middle">
-              Content Middle Section 1
-            </stzh-section>
-            <stzh-section slot="middle">
-              Content Middle Section 2
-            </stzh-section>
-            <stzh-button label="Button Right" slot="right" fullwidth></stzh-button>
-          </stzh-servicecard>
-        </stzh-servicecard-list>
-      </stzh-container>
-      <stzh-vspace curve="big"></stzh-vspace>
-    </stzh-section>
-    <stzh-footer variant="egov"></stzh-footer>
-  </div>
-);
-const TemplateMessages = (args) => (
-  <div class="stzh-theme-ma"> { /* use theme class on <html> class */ }
-    <stzh-visuallyhidden>
-      <h1>Navigation</h1>
-      <h2>Skiplinks</h2>
-    </stzh-visuallyhidden>
-    <stzh-page-skiplinks>
-      <stzh-skiplink href="#anchorNavMeta" link-accesskey="1" link-title="[ALT + 1]">Main Navigation</stzh-skiplink>
-      <stzh-skiplink href="#anchorContent" link-accesskey="2" link-title="[ALT + 2]">Content</stzh-skiplink>
-    </stzh-page-skiplinks>
-    <stzh-header>
-      <img
-        slot="logo"
-        src="media/logo/stzh-default.svg"
-        alt="Logo Stadt Zürich"
-      ></img>
-      <nav slot="nav" id="anchorNavMeta">
-        <stzh-visuallyhidden>
-          <h2>Meta Navigation</h2>
-        </stzh-visuallyhidden>
-        <stzh-metanav>
-          <stzh-link href="#contact">Contact City Zürich</stzh-link>
-        </stzh-metanav>
-      </nav>
-      <stzh-popover label="Mein Konto" slot="login" placement="bottom-end">
-        <stzh-button
-          fullwidth
-          text-align="space-between"
-          icon-position="right"
-          icon="user"
-        >
-          Full Name
-        </stzh-button>
-        <stzh-menu slot="content">
-          <stzh-menu-item href="/app/mkfewww/web/auth" icon="bulleted-list">
-            Mein Konto
-          </stzh-menu-item>
-          <stzh-menu-item href="/app/mkfewww/web/auth/settings" icon="gear">
-            Settings
-          </stzh-menu-item>
-          <stzh-menu-item href="/about-meinkonto" icon="info-help">
-            About Mein Konto
-          </stzh-menu-item>
-        </stzh-menu>
-        <stzh-button href="/login/generic/logout" slot="action" variant="secondary" size="small">
-          Logout
-        </stzh-button>
-      </stzh-popover>
-      <stzh-appnav slot="appnav" app-title="Mein Konto" status="Preview" href="#">
-        <stzh-link href="#" icon="bulleted-list">
-          Services
-        </stzh-link>
-        <stzh-link href="#" badge="3" icon="mail" active>
-          Messages
-        </stzh-link>
-        <stzh-link href="#" badge="99" icon="reset-time">
-          Activities
-        </stzh-link>
-        <stzh-link href="#" icon="filtering">
-          Settings
-        </stzh-link>
-      </stzh-appnav>
-    </stzh-header>
-    <stzh-section id="anchorContent">
-      <stzh-vspace curve="big"></stzh-vspace>
-      <stzh-container>
-        <stzh-row span-medium="8" span-large="6">
-          <stzh-cell>
-            <stzh-row>
-              <stzh-cell span-small="4">
-                <stzh-input label="Search" type="search"></stzh-input>
-              </stzh-cell>
-              <stzh-cell span-small="4">
-                <stzh-vspace size="xsmall" size-small="none"></stzh-vspace>
-                <stzh-dropdown
-                  label="Type"
-                  items='["all"]'
-                  options='[
-                    { "text": "All messages", "value": "all" },
-                    { "text": "Unread messages", "value": "unread" },
-                    { "text": "Read messages", "value": "read" }
-                  ]'
-                ></stzh-dropdown>
-              </stzh-cell>
-              <stzh-cell span-small="4">
-                <stzh-vspace size="xsmall" size-small="none"></stzh-vspace>
-                <stzh-dropdown
-                  label="Sort"
-                  items='["date"]'
-                  options='[
-                    { "text": "By Date", "value": "date" },
-                    { "text": "By Title", "value": "title" }
-                  ]'
-                ></stzh-dropdown>
-              </stzh-cell>
-            </stzh-row>
-          </stzh-cell>
-        </stzh-row>
-        <stzh-vspace size="large"></stzh-vspace>
-        <stzh-datamessagelist>
-          <stzh-datamessagelist-item
-            unread
-            heading="Lorem ipsum dolor"
-            href="#message1"
-            meta='[
-              {
-                "label": "Publish Date",
-                "value": "17.02.2022"
-              },
-              {
-                "label": "Creator",
-                "value": "John Smith"
-              }
-            ]'
-            tags='[
-              {
-                "icon": "warning",
-                "label": "Important",
-                "type": "important"
-              },
-              {
-                "icon": "lock",
-                "label": "Protected"
-              },
-              {
-                "icon": "paper-clip",
-                "label": "2 Attachments"
-              }
-            ]'
-            actions='[
-              {
-                "id": "read",
-                "icon": "read-mail",
-                "label": "Mark as read"
-              },
-              {
-                "id": "archive",
-                "icon": "archive-box",
-                "label": "Archive"
-              },
-              {
-                "id": "remove",
-                "icon": "delete",
-                "label": "Remove"
-              },
-              {
-                "id": "details",
-                "icon": "arrow-right",
-                "label": "Show details"
-              }
-            ]'
-          ></stzh-datamessagelist-item>
-          <stzh-datamessagelist-item
-            heading="Lorem ipsum dolor"
-            href="#message2"
-            meta='[
-              {
-                "label": "Publish Date",
-                "value": "17.02.2022"
-              },
-              {
-                "label": "Creator",
-                "value": "John Smith"
-              }
-            ]'
-            tags='[
-              {
-                "icon": "paper-clip",
-                "label": "2 Attachments"
-              }
-            ]'
-            actions='[
-              {
-                "id": "unread",
-                "icon": "mail",
-                "label": "Mark as unread"
-              },
-              {
-                "id": "archive",
-                "icon": "archive-box",
-                "label": "Archive"
-              },
-              {
-                "id": "remove",
-                "icon": "delete",
-                "label": "Remove"
-              },
-              {
-                "id": "details",
-                "icon": "arrow-right",
-                "label": "Show details"
-              }
-            ]'
-          ></stzh-datamessagelist-item>
-          <stzh-datamessagelist-item
-            heading="Lorem ipsum dolor"
-            href="#message3"
-            meta='[
-              {
-                "label": "Publish Date",
-                "value": "17.02.2022"
-              },
-              {
-                "label": "Creator",
-                "value": "John Smith"
-              }
-            ]'
-            tags='[
-              {
-                "icon": "lock",
-                "label": "Protected"
-              }
-            ]'
-            actions='[
-              {
-                "id": "unread",
-                "icon": "mail",
-                "label": "Mark as unread"
-              },
-              {
-                "id": "archive",
-                "icon": "archive-box",
-                "label": "Archive"
-              },
-              {
-                "id": "remove",
-                "icon": "delete",
-                "label": "Remove"
-              },
-              {
-                "id": "details",
-                "icon": "arrow-right",
-                "label": "Show details"
-              }
-            ]'
-          ></stzh-datamessagelist-item>
-        </stzh-datamessagelist>
-        <stzh-vspace size="large"></stzh-vspace>
-        <stzh-button variant="secondary" label="Show more"></stzh-button>
-      </stzh-container>
-      <stzh-vspace curve="big"></stzh-vspace>
-    </stzh-section>
-    <stzh-footer variant="egov"></stzh-footer>
-  </div>
-);
-const TemplateActivities = (args) => (
-  <div class="stzh-theme-ma"> { /* use theme class on <html> class */ }
-    <stzh-visuallyhidden>
-      <h1>Navigation</h1>
-      <h2>Skiplinks</h2>
-    </stzh-visuallyhidden>
-    <stzh-page-skiplinks>
-      <stzh-skiplink href="#anchorNavMeta" link-accesskey="1" link-title="[ALT + 1]">Main Navigation</stzh-skiplink>
-      <stzh-skiplink href="#anchorContent" link-accesskey="2" link-title="[ALT + 2]">Content</stzh-skiplink>
-    </stzh-page-skiplinks>
-    <stzh-header>
-      <img
-        slot="logo"
-        src="media/logo/stzh-default.svg"
-        alt="Logo Stadt Zürich"
-      ></img>
-      <nav slot="nav" id="anchorNavMeta">
-        <stzh-visuallyhidden>
-          <h2>Meta Navigation</h2>
-        </stzh-visuallyhidden>
-        <stzh-metanav>
-          <stzh-link href="#contact">Contact City Zürich</stzh-link>
-        </stzh-metanav>
-      </nav>
-      <stzh-popover label="Mein Konto" slot="login" placement="bottom-end">
-        <stzh-button
-          fullwidth
-          text-align="space-between"
-          icon-position="right"
-          icon="user"
-        >
-          Full Name
-        </stzh-button>
-        <stzh-menu slot="content">
-          <stzh-menu-item href="/app/mkfewww/web/auth" icon="bulleted-list">
-            Mein Konto
-          </stzh-menu-item>
-          <stzh-menu-item href="/app/mkfewww/web/auth/settings" icon="gear">
-            Settings
-          </stzh-menu-item>
-          <stzh-menu-item href="/about-meinkonto" icon="info-help">
-            About Mein Konto
-          </stzh-menu-item>
-        </stzh-menu>
-        <stzh-button href="/login/generic/logout" slot="action" variant="secondary" size="small">
-          Logout
-        </stzh-button>
-      </stzh-popover>
-      <stzh-appnav slot="appnav" app-title="Mein Konto" status="Preview" href="#">
-        <stzh-link href="#" icon="bulleted-list">
-          Services
-        </stzh-link>
-        <stzh-link href="#" badge="3" icon="mail">
-          Messages
-        </stzh-link>
-        <stzh-link href="#" badge="99" icon="reset-time" active>
-          Activities
-        </stzh-link>
-        <stzh-link href="#" icon="filtering">
-          Settings
-        </stzh-link>
-      </stzh-appnav>
-    </stzh-header>
-    <stzh-section id="anchorContent">
-      <stzh-vspace curve="big"></stzh-vspace>
-      <stzh-container>
-        <stzh-datamessagelist>
-          <stzh-datamessagelist-item
-            unread
-            heading="Lorem ipsum dolor"
-            href="#message1"
-            external-href="http://example.com"
-            meta='[
-              {
-                "label": "Publish Date",
-                "value": "17.02.2022"
-              },
-              {
-                "label": "Creator",
-                "value": "John Smith"
-              }
-            ]'
-            loading-status='{
-              "label": "Sent",
-              "percent": 50,
-              "type": "error"
-            }'
-          ></stzh-datamessagelist-item>
-          <stzh-datamessagelist-item
-            heading="Lorem ipsum dolor"
-            href="#message2"
-            external-href="http://example.com"
-            meta='[
-              {
-                "label": "Publish Date",
-                "value": "17.02.2022"
-              },
-              {
-                "label": "Creator",
-                "value": "John Smith"
-              }
-            ]'
-            loading-status='{
-              "label": "Received",
-              "percent": 75
-            }'
-          ></stzh-datamessagelist-item>
-          <stzh-datamessagelist-item
-            heading="Lorem ipsum dolor"
-            href="#message3"
-            external-href="http://example.com"
-            meta='[
-              {
-                "label": "Publish Date",
-                "value": "17.02.2022"
-              },
-              {
-                "label": "Creator",
-                "value": "John Smith"
-              }
-            ]'
-            loading-status='{
-              "label": "Done",
-              "percent": 100,
-              "type": "success"
-            }'
-          ></stzh-datamessagelist-item>
-        </stzh-datamessagelist>
-        <stzh-vspace size="large"></stzh-vspace>
-        <stzh-button variant="secondary" label="Show more"></stzh-button>
-      </stzh-container>
-      <stzh-vspace curve="big"></stzh-vspace>
-    </stzh-section>
-    <stzh-footer variant="egov"></stzh-footer>
-  </div>
-);
-export const Services = TemplateServices.bind({});
-Services.args = {
-};
-export const Messages = TemplateMessages.bind({});
-Messages.args = {
-};
-export const Activities = TemplateActivities.bind({});
-Activities.args = {
+import { h } from '../utils/h';
+export default {
+  title: 'Pages/MeinKonto',
+  parameters: {
+    docs: {
+      inlineStories: false,
+    },
+    layout: 'fullscreen'
+  }
+};
+const TemplateServices = (args) => (
+  <div class="stzh-theme-ma"> { /* use theme class on <html> class */ }
+    <stzh-visuallyhidden>
+      <h1>Navigation</h1>
+      <h2>Skiplinks</h2>
+    </stzh-visuallyhidden>
+    <stzh-page-skiplinks>
+      <stzh-skiplink href="#anchorNavMeta" link-accesskey="1" link-title="[ALT + 1]">Main Navigation</stzh-skiplink>
+      <stzh-skiplink href="#anchorContent" link-accesskey="2" link-title="[ALT + 2]">Content</stzh-skiplink>
+    </stzh-page-skiplinks>
+    <stzh-header>
+      <img
+        slot="logo"
+        src="media/logo/stzh-default.svg"
+        alt="Logo Stadt Zürich"
+      ></img>
+      <nav slot="nav" id="anchorNavMeta">
+        <stzh-visuallyhidden>
+          <h2>Meta Navigation</h2>
+        </stzh-visuallyhidden>
+        <stzh-metanav>
+          <stzh-link href="#contact">Contact City Zürich</stzh-link>
+        </stzh-metanav>
+      </nav>
+      <stzh-popover label="Mein Konto" slot="login" placement="bottom-end">
+        <stzh-button
+          fullwidth
+          text-align="space-between"
+          icon-position="right"
+          icon="user"
+        >
+          Full Name
+        </stzh-button>
+        <stzh-menu slot="content">
+          <stzh-menu-item href="/app/mkfewww/web/auth" icon="bulleted-list">
+            Mein Konto
+          </stzh-menu-item>
+          <stzh-menu-item href="/app/mkfewww/web/auth/settings" icon="gear">
+            Settings
+          </stzh-menu-item>
+          <stzh-menu-item href="/about-meinkonto" icon="info-help">
+            About Mein Konto
+          </stzh-menu-item>
+        </stzh-menu>
+        <stzh-button href="/login/generic/logout" slot="action" variant="secondary" size="small">
+          Logout
+        </stzh-button>
+      </stzh-popover>
+      <stzh-appnav slot="appnav" app-title="Mein Konto" status="Preview" href="#">
+        <stzh-link href="#" icon="bulleted-list" active>
+          Services
+        </stzh-link>
+        <stzh-link href="#" badge="3" icon="mail">
+          Messages
+        </stzh-link>
+        <stzh-link href="#" badge="99" icon="reset-time">
+          Activities
+        </stzh-link>
+        <stzh-link href="#" icon="filtering">
+          Settings
+        </stzh-link>
+      </stzh-appnav>
+    </stzh-header>
+    <stzh-section id="anchorContent">
+      <stzh-vspace curve="big"></stzh-vspace>
+      <stzh-container>
+        <stzh-row span-small="6" span-medium="12">
+          <stzh-cell>
+            <stzh-row>
+              <stzh-cell span-small="12" span-medium="4">
+                <stzh-input label="Search services" type="search"></stzh-input>
+              </stzh-cell>
+            </stzh-row>
+            <stzh-vspace size-small="none" size-medium="medium"></stzh-vspace>
+          </stzh-cell>
+          <stzh-cell>
+            <stzh-chip-select
+              label="Services"
+              value="all"
+              data='[
+                {
+                  "label": "All Services",
+                  "value": "all",
+                  "variant": "filter",
+                  "type": "secondary",
+                  "counter": "4",
+                  "icon": "bulleted-list"
+                },
+                {
+                  "label": "My Services",
+                  "value": "my",
+                  "variant": "filter",
+                  "type": "secondary",
+                  "counter": "2",
+                  "icon": "star-filled"
+                },
+                {
+                  "label": "Information",
+                  "value": "information",
+                  "variant": "filter",
+                  "type": "secondary",
+                  "counter": "3"
+                },
+                {
+                  "label": "Taxes &amp; Finances",
+                  "value": "taxes",
+                  "variant": "filter",
+                  "type": "secondary",
+                  "counter": "1"
+                }
+              ]'
+            ></stzh-chip-select>
+          </stzh-cell>
+        </stzh-row>
+        <stzh-vspace curve="large"></stzh-vspace>
+        <stzh-servicecard-list show-toggle-link>
+          <stzh-text slot="description">
+            Services are shown here, which you marked with <stzh-icon name="star-filled"></stzh-icon>
+          </stzh-text>
+          <stzh-servicecard
+            collapsible
+            starrable
+            heading="Lorem ipsum 1"
+            subtitle="Dolor si 1"
+            actions='[
+              {
+                "id": "message",
+                "onlyCollapseText": true,
+                "icon": "mail",
+                "badge": "3",
+                "label": "Messages"
+              }
+            ]'
+          >
+            <div slot="left">Content Left</div>
+            <div slot="right">Content Right</div>
+          </stzh-servicecard>
+          <stzh-servicecard
+            collapsible
+            starrable
+            heading="Lorem ipsum 2"
+            subtitle='["Dolor si 2", "Dolor si 2.1", "Dolor si 2.2"]'
+            subtitle-interactive
+            actions='[
+              {
+                "id": "add",
+                "icon": "plus",
+                "label": "Add address"
+              },
+              {
+                "id": "edit",
+                "icon": "edit",
+                "label": "Edit"
+              },
+              {
+                "id": "delete",
+                "icon": "delete",
+                "label": "Remove"
+              },
+              {
+                "id": "message",
+                "onlyCollapseText": true,
+                "icon": "mail",
+                "badge": "3",
+                "label": "Messages"
+              }
+            ]'
+          >
+            <div slot="left">Content Left</div>
+            <table slot="middle">
+              <tr>
+                <th>Cell Label</th>
+                <td>Cell Value</td>
+              </tr>
+              <tr>
+                <th>Cell Label</th>
+                <td>Cell Value</td>
+              </tr>
+              <tr>
+                <th>Cell Label</th>
+                <td>Cell Value</td>
+              </tr>
+            </table>
+            <div slot="right">Content Right</div>
+          </stzh-servicecard>
+          <stzh-servicecard collapsible starrable heading="Lorem ipsum 3" subtitle="Dolor si 3">
+            <div slot="left">Content Left</div>
+            <stzh-button label="Button Right 1" slot="right" fullwidth></stzh-button>
+            <stzh-popover slot="right">
+              <stzh-button label="Button Right 2" fullwidth icon="angle-up" icon-position="right"></stzh-button>
+              <stzh-menu slot="content">
+                <stzh-menu-item label="Test"></stzh-menu-item>
+              </stzh-menu>
+            </stzh-popover>
+          </stzh-servicecard>
+          <stzh-servicecard collapsible starrable heading="Lorem ipsum 4">
+            <div slot="left">Content Left</div>
+            <stzh-section slot="middle">
+              Content Middle Section 1
+            </stzh-section>
+            <stzh-section slot="middle">
+              Content Middle Section 2
+            </stzh-section>
+            <stzh-button label="Button Right" slot="right" fullwidth></stzh-button>
+          </stzh-servicecard>
+        </stzh-servicecard-list>
+      </stzh-container>
+      <stzh-vspace curve="big"></stzh-vspace>
+    </stzh-section>
+    <stzh-footer variant="egov"></stzh-footer>
+  </div>
+);
+const TemplateMessages = (args) => (
+  <div class="stzh-theme-ma"> { /* use theme class on <html> class */ }
+    <stzh-visuallyhidden>
+      <h1>Navigation</h1>
+      <h2>Skiplinks</h2>
+    </stzh-visuallyhidden>
+    <stzh-page-skiplinks>
+      <stzh-skiplink href="#anchorNavMeta" link-accesskey="1" link-title="[ALT + 1]">Main Navigation</stzh-skiplink>
+      <stzh-skiplink href="#anchorContent" link-accesskey="2" link-title="[ALT + 2]">Content</stzh-skiplink>
+    </stzh-page-skiplinks>
+    <stzh-header>
+      <img
+        slot="logo"
+        src="media/logo/stzh-default.svg"
+        alt="Logo Stadt Zürich"
+      ></img>
+      <nav slot="nav" id="anchorNavMeta">
+        <stzh-visuallyhidden>
+          <h2>Meta Navigation</h2>
+        </stzh-visuallyhidden>
+        <stzh-metanav>
+          <stzh-link href="#contact">Contact City Zürich</stzh-link>
+        </stzh-metanav>
+      </nav>
+      <stzh-popover label="Mein Konto" slot="login" placement="bottom-end">
+        <stzh-button
+          fullwidth
+          text-align="space-between"
+          icon-position="right"
+          icon="user"
+        >
+          Full Name
+        </stzh-button>
+        <stzh-menu slot="content">
+          <stzh-menu-item href="/app/mkfewww/web/auth" icon="bulleted-list">
+            Mein Konto
+          </stzh-menu-item>
+          <stzh-menu-item href="/app/mkfewww/web/auth/settings" icon="gear">
+            Settings
+          </stzh-menu-item>
+          <stzh-menu-item href="/about-meinkonto" icon="info-help">
+            About Mein Konto
+          </stzh-menu-item>
+        </stzh-menu>
+        <stzh-button href="/login/generic/logout" slot="action" variant="secondary" size="small">
+          Logout
+        </stzh-button>
+      </stzh-popover>
+      <stzh-appnav slot="appnav" app-title="Mein Konto" status="Preview" href="#">
+        <stzh-link href="#" icon="bulleted-list">
+          Services
+        </stzh-link>
+        <stzh-link href="#" badge="3" icon="mail" active>
+          Messages
+        </stzh-link>
+        <stzh-link href="#" badge="99" icon="reset-time">
+          Activities
+        </stzh-link>
+        <stzh-link href="#" icon="filtering">
+          Settings
+        </stzh-link>
+      </stzh-appnav>
+    </stzh-header>
+    <stzh-section id="anchorContent">
+      <stzh-vspace curve="big"></stzh-vspace>
+      <stzh-container>
+        <stzh-row span-medium="8" span-large="6">
+          <stzh-cell>
+            <stzh-row>
+              <stzh-cell span-small="4">
+                <stzh-input label="Search" type="search"></stzh-input>
+              </stzh-cell>
+              <stzh-cell span-small="4">
+                <stzh-vspace size="xsmall" size-small="none"></stzh-vspace>
+                <stzh-dropdown
+                  label="Type"
+                  items='["all"]'
+                  options='[
+                    { "text": "All messages", "value": "all" },
+                    { "text": "Unread messages", "value": "unread" },
+                    { "text": "Read messages", "value": "read" }
+                  ]'
+                ></stzh-dropdown>
+              </stzh-cell>
+              <stzh-cell span-small="4">
+                <stzh-vspace size="xsmall" size-small="none"></stzh-vspace>
+                <stzh-dropdown
+                  label="Sort"
+                  items='["date"]'
+                  options='[
+                    { "text": "By Date", "value": "date" },
+                    { "text": "By Title", "value": "title" }
+                  ]'
+                ></stzh-dropdown>
+              </stzh-cell>
+            </stzh-row>
+          </stzh-cell>
+        </stzh-row>
+        <stzh-vspace size="large"></stzh-vspace>
+        <stzh-datamessagelist>
+          <stzh-datamessagelist-item
+            unread
+            heading="Lorem ipsum dolor"
+            href="#message1"
+            meta='[
+              {
+                "label": "Publish Date",
+                "value": "17.02.2022"
+              },
+              {
+                "label": "Creator",
+                "value": "John Smith"
+              }
+            ]'
+            tags='[
+              {
+                "icon": "warning",
+                "label": "Important",
+                "type": "important"
+              },
+              {
+                "icon": "lock",
+                "label": "Protected"
+              },
+              {
+                "icon": "paper-clip",
+                "label": "2 Attachments"
+              }
+            ]'
+            actions='[
+              {
+                "id": "read",
+                "icon": "read-mail",
+                "label": "Mark as read"
+              },
+              {
+                "id": "archive",
+                "icon": "archive-box",
+                "label": "Archive"
+              },
+              {
+                "id": "remove",
+                "icon": "delete",
+                "label": "Remove"
+              },
+              {
+                "id": "details",
+                "icon": "arrow-right",
+                "label": "Show details"
+              }
+            ]'
+          ></stzh-datamessagelist-item>
+          <stzh-datamessagelist-item
+            heading="Lorem ipsum dolor"
+            href="#message2"
+            meta='[
+              {
+                "label": "Publish Date",
+                "value": "17.02.2022"
+              },
+              {
+                "label": "Creator",
+                "value": "John Smith"
+              }
+            ]'
+            tags='[
+              {
+                "icon": "paper-clip",
+                "label": "2 Attachments"
+              }
+            ]'
+            actions='[
+              {
+                "id": "unread",
+                "icon": "mail",
+                "label": "Mark as unread"
+              },
+              {
+                "id": "archive",
+                "icon": "archive-box",
+                "label": "Archive"
+              },
+              {
+                "id": "remove",
+                "icon": "delete",
+                "label": "Remove"
+              },
+              {
+                "id": "details",
+                "icon": "arrow-right",
+                "label": "Show details"
+              }
+            ]'
+          ></stzh-datamessagelist-item>
+          <stzh-datamessagelist-item
+            heading="Lorem ipsum dolor"
+            href="#message3"
+            meta='[
+              {
+                "label": "Publish Date",
+                "value": "17.02.2022"
+              },
+              {
+                "label": "Creator",
+                "value": "John Smith"
+              }
+            ]'
+            tags='[
+              {
+                "icon": "lock",
+                "label": "Protected"
+              }
+            ]'
+            actions='[
+              {
+                "id": "unread",
+                "icon": "mail",
+                "label": "Mark as unread"
+              },
+              {
+                "id": "archive",
+                "icon": "archive-box",
+                "label": "Archive"
+              },
+              {
+                "id": "remove",
+                "icon": "delete",
+                "label": "Remove"
+              },
+              {
+                "id": "details",
+                "icon": "arrow-right",
+                "label": "Show details"
+              }
+            ]'
+          ></stzh-datamessagelist-item>
+        </stzh-datamessagelist>
+        <stzh-vspace size="large"></stzh-vspace>
+        <stzh-button variant="secondary" label="Show more"></stzh-button>
+      </stzh-container>
+      <stzh-vspace curve="big"></stzh-vspace>
+    </stzh-section>
+    <stzh-footer variant="egov"></stzh-footer>
+  </div>
+);
+const TemplateActivities = (args) => (
+  <div class="stzh-theme-ma"> { /* use theme class on <html> class */ }
+    <stzh-visuallyhidden>
+      <h1>Navigation</h1>
+      <h2>Skiplinks</h2>
+    </stzh-visuallyhidden>
+    <stzh-page-skiplinks>
+      <stzh-skiplink href="#anchorNavMeta" link-accesskey="1" link-title="[ALT + 1]">Main Navigation</stzh-skiplink>
+      <stzh-skiplink href="#anchorContent" link-accesskey="2" link-title="[ALT + 2]">Content</stzh-skiplink>
+    </stzh-page-skiplinks>
+    <stzh-header>
+      <img
+        slot="logo"
+        src="media/logo/stzh-default.svg"
+        alt="Logo Stadt Zürich"
+      ></img>
+      <nav slot="nav" id="anchorNavMeta">
+        <stzh-visuallyhidden>
+          <h2>Meta Navigation</h2>
+        </stzh-visuallyhidden>
+        <stzh-metanav>
+          <stzh-link href="#contact">Contact City Zürich</stzh-link>
+        </stzh-metanav>
+      </nav>
+      <stzh-popover label="Mein Konto" slot="login" placement="bottom-end">
+        <stzh-button
+          fullwidth
+          text-align="space-between"
+          icon-position="right"
+          icon="user"
+        >
+          Full Name
+        </stzh-button>
+        <stzh-menu slot="content">
+          <stzh-menu-item href="/app/mkfewww/web/auth" icon="bulleted-list">
+            Mein Konto
+          </stzh-menu-item>
+          <stzh-menu-item href="/app/mkfewww/web/auth/settings" icon="gear">
+            Settings
+          </stzh-menu-item>
+          <stzh-menu-item href="/about-meinkonto" icon="info-help">
+            About Mein Konto
+          </stzh-menu-item>
+        </stzh-menu>
+        <stzh-button href="/login/generic/logout" slot="action" variant="secondary" size="small">
+          Logout
+        </stzh-button>
+      </stzh-popover>
+      <stzh-appnav slot="appnav" app-title="Mein Konto" status="Preview" href="#">
+        <stzh-link href="#" icon="bulleted-list">
+          Services
+        </stzh-link>
+        <stzh-link href="#" badge="3" icon="mail">
+          Messages
+        </stzh-link>
+        <stzh-link href="#" badge="99" icon="reset-time" active>
+          Activities
+        </stzh-link>
+        <stzh-link href="#" icon="filtering">
+          Settings
+        </stzh-link>
+      </stzh-appnav>
+    </stzh-header>
+    <stzh-section id="anchorContent">
+      <stzh-vspace curve="big"></stzh-vspace>
+      <stzh-container>
+        <stzh-datamessagelist>
+          <stzh-datamessagelist-item
+            unread
+            heading="Lorem ipsum dolor"
+            href="#message1"
+            external-href="http://example.com"
+            meta='[
+              {
+                "label": "Publish Date",
+                "value": "17.02.2022"
+              },
+              {
+                "label": "Creator",
+                "value": "John Smith"
+              }
+            ]'
+            loading-status='{
+              "label": "Sent",
+              "percent": 50,
+              "type": "error"
+            }'
+          ></stzh-datamessagelist-item>
+          <stzh-datamessagelist-item
+            heading="Lorem ipsum dolor"
+            href="#message2"
+            external-href="http://example.com"
+            meta='[
+              {
+                "label": "Publish Date",
+                "value": "17.02.2022"
+              },
+              {
+                "label": "Creator",
+                "value": "John Smith"
+              }
+            ]'
+            loading-status='{
+              "label": "Received",
+              "percent": 75
+            }'
+          ></stzh-datamessagelist-item>
+          <stzh-datamessagelist-item
+            heading="Lorem ipsum dolor"
+            href="#message3"
+            external-href="http://example.com"
+            meta='[
+              {
+                "label": "Publish Date",
+                "value": "17.02.2022"
+              },
+              {
+                "label": "Creator",
+                "value": "John Smith"
+              }
+            ]'
+            loading-status='{
+              "label": "Done",
+              "percent": 100,
+              "type": "success"
+            }'
+          ></stzh-datamessagelist-item>
+        </stzh-datamessagelist>
+        <stzh-vspace size="large"></stzh-vspace>
+        <stzh-button variant="secondary" label="Show more"></stzh-button>
+      </stzh-container>
+      <stzh-vspace curve="big"></stzh-vspace>
+    </stzh-section>
+    <stzh-footer variant="egov"></stzh-footer>
+  </div>
+);
+export const Services = TemplateServices.bind({});
+Services.args = {
+};
+export const Messages = TemplateMessages.bind({});
+Messages.args = {
+};
+export const Activities = TemplateActivities.bind({});
+Activities.args = {
 };