npm - @oiz/stzh-components - Versions diffs - 2.2.0 → 2.3.0-alpha - Mend

@oiz/stzh-components 2.2.0 → 2.3.0-alpha

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 (789) hide show

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

@@ -45,7 +45,7 @@ const actions2 = `[
   }
 ]`;
-const TemplateServices = (args) => (
+const Base = (args) => (
   <div class="stzh-theme-ma"> { /* use theme class on <html> class */ }
     <stzh-visuallyhidden>
       <h1>Navigation</h1>
@@ -119,118 +119,7 @@ const TemplateServices = (args) => (
       <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-card-list show-toggle-link sortable-enabled>
-          <stzh-text slot="description">
-            Services are shown here, which you marked with <stzh-icon name="star-filled"></stzh-icon>
-          </stzh-text>
-          <stzh-card collapsible starrable heading="Lorem ipsum 1" subtitle="Dolor si 1" header-actions={actions}>
-            <div slot="content">Content</div>
-          </stzh-card>
-          <stzh-card collapsible heading="Lorem ipsum 2" subtitle='["Dolor si 2", "Dolor si 2.1", "Dolor si 2.2"]' subtitle-interactive header-actions={actions2}>
-            <stzh-row slot="content" span-small="6">
-              <stzh-cell>
-                <stzh-datalist
-                  items='[
-                    {
-                      "label": "Label",
-                      "value": "Value 1",
-                      "meta": "Metainfo",
-                      "icon": "delete"
-                    },
-                    {
-                      "label": "Really Long Label",
-                      "value": "Value 2",
-                      "meta": "Metainfo",
-                      "icon": "delete"
-                    },
-                    {
-                      "label": "Label",
-                      "value": "Value 3",
-                      "meta": "Metainfo"
-                    }
-                  ]'></stzh-datalist>
-              </stzh-cell>
-              <stzh-cell>
-              <stzh-datalist
-                  items='[
-                    {
-                      "label": "Label",
-                      "value": "Value 4",
-                      "meta": "Metainfo",
-                      "icon": "delete"
-                    },
-                    {
-                      "label": "Label",
-                      "value": "Value 5",
-                      "icon": "delete",
-                      "href": "http://example.com"
-                    }
-                  ]'></stzh-datalist>
-              </stzh-cell>
-            </stzh-row>
-          </stzh-card>
-          <stzh-card collapsible starrable heading="Lorem ipsum 3" subtitle="Dolor si 3" footer-actions={actions2}>
-            <div slot="content">Content</div>
-          </stzh-card>
-          <stzh-card collapsible starrable heading="Lorem ipsum 4">
-            <stzh-cspace slot="content">
-              <p>Content with Input:</p>
-              <stzh-input></stzh-input>
-              <stzh-button label="Button Right" fullwidth></stzh-button>
-            </stzh-cspace>
-          </stzh-card>
-        </stzh-card-list>
+        {args.content}
       </stzh-container>
       <stzh-vspace curve="big"></stzh-vspace>
@@ -240,417 +129,384 @@ const TemplateServices = (args) => (
   </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 City Zürich, go to homepage"
-      ></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-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-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='[
+const TemplateServices = (args) => (
+  (Base({ content: (
+    <DocumentFragment>
+      <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='[
               {
-                "id": "unread",
-                "icon": "mail",
-                "label": "Mark as unread"
+                "label": "All Services",
+                "value": "all",
+                "variant": "filter",
+                "type": "secondary",
+                "counter": "4",
+                "icon": "bulleted-list"
               },
               {
-                "id": "archive",
-                "icon": "archive-box",
-                "label": "Archive"
+                "label": "My Services",
+                "value": "my",
+                "variant": "filter",
+                "type": "secondary",
+                "counter": "2",
+                "icon": "star-filled"
               },
               {
-                "id": "remove",
-                "icon": "delete",
-                "label": "Remove"
+                "label": "Information",
+                "value": "information",
+                "variant": "filter",
+                "type": "secondary",
+                "counter": "3"
               },
               {
-                "id": "details",
-                "icon": "arrow-right",
-                "label": "Show details"
+                "label": "Taxes &amp; Finances",
+                "value": "taxes",
+                "variant": "filter",
+                "type": "secondary",
+                "counter": "1"
               }
             ]'
-          ></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-chip-select>
+        </stzh-cell>
+      </stzh-row>
+      <stzh-vspace curve="large"></stzh-vspace>
+      <stzh-card-list show-toggle-link sortable-enabled>
+        <stzh-text slot="description">
+          Services are shown here, which you marked with <stzh-icon name="star-filled"></stzh-icon>
+        </stzh-text>
+        <stzh-card collapsible starrable heading="Lorem ipsum 1" subtitle="Dolor si 1" header-actions={actions}>
+          <div slot="content">Content</div>
+        </stzh-card>
+        <stzh-card collapsible heading="Lorem ipsum 2" subtitle='["Dolor si 2", "Dolor si 2.1", "Dolor si 2.2"]' subtitle-interactive header-actions={actions2}>
+          <stzh-row slot="content" span-small="6">
+            <stzh-cell>
+              <stzh-datalist
+                items='[
+                  {
+                    "label": "Label",
+                    "value": "Value 1",
+                    "meta": "Metainfo",
+                    "icon": "delete"
+                  },
+                  {
+                    "label": "Really Long Label",
+                    "value": "Value 2",
+                    "meta": "Metainfo",
+                    "icon": "delete"
+                  },
+                  {
+                    "label": "Label",
+                    "value": "Value 3",
+                    "meta": "Metainfo"
+                  }
+                ]'></stzh-datalist>
+            </stzh-cell>
+            <stzh-cell>
+            <stzh-datalist
+                items='[
+                  {
+                    "label": "Label",
+                    "value": "Value 4",
+                    "meta": "Metainfo",
+                    "icon": "delete"
+                  },
+                  {
+                    "label": "Label",
+                    "value": "Value 5",
+                    "icon": "delete",
+                    "href": "http://example.com"
+                  }
+                ]'></stzh-datalist>
+            </stzh-cell>
+          </stzh-row>
+        </stzh-card>
+        <stzh-card collapsible starrable heading="Lorem ipsum 3" subtitle="Dolor si 3" footer-actions={actions2}>
+          <div slot="content">Content</div>
+        </stzh-card>
+        <stzh-card collapsible starrable heading="Lorem ipsum 4">
+          <stzh-cspace slot="content">
+            <p>Content with Input:</p>
+            <stzh-input></stzh-input>
+            <stzh-button label="Button Right" fullwidth></stzh-button>
+          </stzh-cspace>
+        </stzh-card>
+      </stzh-card-list>
+    </DocumentFragment>
+  ) }))
+);
-    <stzh-footer variant="egov"></stzh-footer>
-  </div>
+const TemplateMessages = (args) => (
+  (Base({ content: (
+    <DocumentFragment>
+      <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-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-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>
+    </DocumentFragment>
+  ) }))
 );
 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 City Zürich, go to homepage"
-      ></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>
+  (Base({ content: (
+    <DocumentFragment>
+      <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>
+    </DocumentFragment>
+  ) }))
 );
 export const Services = TemplateServices.bind({});