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

@oiz/stzh-components 2.2.0 → 2.3.0-alpha2

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

package/dist/collection/pages/microsite.stories.js ADDED Viewed

@@ -0,0 +1,235 @@
+import { h } from '../utils/h';
+import { Default as JobDetails_Default } from '../patterns/jobdetails.stories';
+import { Default as TwoColumns_Default } from '../patterns/twocolumns.stories';
+import { Default as Pagebottom_Default } from '../components/stzh-pagebottom/stzh-pagebottom.stories';
+import { MetabarOnMobile as Header_MetabarOnMobile } from '../components/stzh-header/stzh-header.stories';
+import { Microsite as Footer_Microsite } from '../components/stzh-footer/stzh-footer.stories';
+import { Default as Figure_Default } from '../components/stzh-figure/stzh-figure.stories';
+import { CTA as Button_CTA } from '../components/stzh-button/stzh-button.stories';
+import { Default as Accordion_Default } from '../components/stzh-accordion/stzh-accordion.stories';
+import { Default as Chart_Default } from '../components/stzh-chart/stzh-chart.stories';
+import { Default as MicrositeTeaserlist_Default } from '../components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.stories';
+import {
+  WithPicture as PagetitleHero_WithPicture,
+  WithPictureAndBack as PagetitleHero_WithPictureAndBack
+} from '../components/stzh-pagetitle-hero/stzh-pagetitle-hero.stories';
+export default {
+  title: 'Pages/Microsite',
+  parameters: {
+    docs: {
+      inlineStories: false,
+    },
+    layout: 'fullscreen'
+  }
+};
+const Base = (args) => (
+  <div class="stzh-theme-*"> { /* use theme class on <html> class for each department (see themes documentation) */ }
+    <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>
+    {Header_MetabarOnMobile({ ...Header_MetabarOnMobile.args, _hideText: true })}
+    <stzh-section id="anchorContent">
+      <stzh-container>
+        <stzh-cspace>
+          {args.content}
+        </stzh-cspace>
+      </stzh-container>
+      <stzh-vspace curve="big"></stzh-vspace>
+    </stzh-section>
+    {Footer_Microsite({ ...Footer_Microsite.args })}
+  </div>
+);
+const TemplateHomePage = (args) => (
+  (Base({ content: (
+    <DocumentFragment>
+      {PagetitleHero_WithPicture({ ...PagetitleHero_WithPicture.args })}
+      <stzh-row justify="center">
+        <stzh-cell span-large="8">
+          <div class="mainparsys parsys">
+            <div class="section has-microsite-teaserlist">
+              {/* layout for sections with fullwidth components */}
+              <stzh-container>
+                {/* component here */}
+                {MicrositeTeaserlist_Default({ ...MicrositeTeaserlist_Default.args })}
+              </stzh-container>
+            </div>
+            {/* TODO: add Iframe component */}
+            <div class="section has-richtext">
+              <stzh-richtext>
+                <blockquote>
+                  <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
+                  <footer>Aenean imperdiet</footer>
+                </blockquote>
+              </stzh-richtext>
+            </div>
+            {/* TODO: add Iframe component (as fullwidth) */}
+          </div>
+          <div class="section has-pagebottom">
+            {Pagebottom_Default({ ...Pagebottom_Default.args })}
+          </div>
+        </stzh-cell>
+      </stzh-row>
+    </DocumentFragment>
+  ) }))
+);
+const TemplateContentPage = (args) => (
+  (Base({ content: (
+    <DocumentFragment>
+      {PagetitleHero_WithPictureAndBack({ ...PagetitleHero_WithPictureAndBack.args })}
+      <stzh-row justify="center">
+        <stzh-cell span-large="8">
+          <div class="mainparsys parsys">
+            <div class="section has-richtext">
+              <stzh-richtext>
+                <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.</p>
+                <ul>
+                  <li>Laboris laborum aute id laboris esse aliquip nisi anim velit</li>
+                  <li>Labore dolore id nostrud enim</li>
+                </ul>
+                <p><strong>Laboris laborum aute</strong> id laboris culpa esse <b>aliquip nisi anim</b> velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
+              </stzh-richtext>
+            </div>
+            <div class="section has-figure">
+              {/* layout for sections with fullwidth components */}
+              <stzh-container>
+                {/* component here */}
+                {Figure_Default({ ...Figure_Default.args })}
+              </stzh-container>
+            </div>
+            <div class="section has-accordion">
+              {Accordion_Default({ ...Accordion_Default.args })}
+            </div>
+            <div class="section has-chart">
+              {/* layout for sections with fullwidth components */}
+              <stzh-container>
+                {/* component here */}
+                <stzh-cspace>
+                  <stzh-heading level="2">Lorem ipsum</stzh-heading>
+                  {Chart_Default({ ...Chart_Default.args })}
+                </stzh-cspace>
+              </stzh-container>
+            </div>
+            <div class="section has-twocolumns">
+              {TwoColumns_Default({ ...TwoColumns_Default.args })}
+            </div>
+            <div class="section has-richtext">
+              <stzh-richtext>
+                <blockquote>
+                  <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
+                  <footer>Aenean imperdiet</footer>
+                </blockquote>
+              </stzh-richtext>
+            </div>
+            <div class="section has-invert">
+              {/* layout for inverted sections */}
+              <stzh-invert>
+                <stzh-container>
+                  <stzh-row justify="center">
+                    <stzh-cell span-large="8">
+                      {/* components here */}
+                      <stzh-richtext>
+                        <blockquote>
+                          <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
+                          <footer>Aenean imperdiet</footer>
+                        </blockquote>
+                      </stzh-richtext>
+                    </stzh-cell>
+                  </stzh-row>
+                </stzh-container>
+              </stzh-invert>
+            </div>
+            <div class="section has-figure">
+              {Figure_Default({ ...Figure_Default.args })}
+            </div>
+            <div class="section has-sticky">
+              <stzh-sticky breakout>
+                <stzh-container>
+                  <stzh-row justify="center">
+                    <stzh-cell span-large="8">
+                      <stzh-actions variant="cta">
+                        {Button_CTA({ ...Button_CTA.args, slot: 'primary' })}
+                      </stzh-actions>
+                    </stzh-cell>
+                  </stzh-row>
+                </stzh-container>
+              </stzh-sticky>
+            </div>
+            <div class="section has-pagebottom">
+              {Pagebottom_Default({ ...Pagebottom_Default.args })}
+            </div>
+          </div>
+        </stzh-cell>
+      </stzh-row>
+    </DocumentFragment>
+  ) }))
+);
+const TemplateJobDetail = (args) => (
+  (Base({ content: (
+    <DocumentFragment>
+      <stzh-pagetitle-hero heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
+        <picture slot="image">
+          <source srcset="media/images/example2.jpg?750x562, media/images/example2.jpg?1500x1124 2x" media="(min-width: 1024px)" />
+          <source srcset="media/images/example2.jpg?1025x576, media/images/example2.jpg?2050x1152 2x" media="(min-width: 600px)" />
+          <source srcset="media/images/example2.jpg?600x450, media/images/example2.jpg?1200x900 2x" />
+          <img loading="lazy" alt="Image description" src="media/images/example2.jpg?750x562" />
+        </picture>
+        <stzh-link slot="back-link" label="Back" href="#"></stzh-link>
+        <stzh-chip slot="tag" label="Permanent position" variant="filter" non-interactive></stzh-chip>
+      </stzh-pagetitle-hero>
+      <stzh-row justify="center">
+        <stzh-cell span-large="8">
+          <div class="mainparsys parsys">
+            {JobDetails_Default({ ...JobDetails_Default.args, _withoutCspace: true, _hideLogo: true })}
+          </div>
+          <div class="section has-pagebottom">
+            {Pagebottom_Default({ ...Pagebottom_Default.args })}
+          </div>
+        </stzh-cell>
+      </stzh-row>
+    </DocumentFragment>
+  ) }))
+);
+export const HomePage = TemplateHomePage.bind({});
+HomePage.args = {
+};
+export const ContentPage = TemplateContentPage.bind({});
+ContentPage.args = {
+};
+export const JobDetail = TemplateJobDetail.bind({});
+JobDetail.args = {
+};

package/dist/collection/pages/website.stories.js ADDED Viewed

@@ -0,0 +1,142 @@
+import { h } from '../utils/h';
+import { Default as JobDetails_Default } from '../patterns/jobdetails.stories';
+import { Default as Contact_Default } from '../patterns/contact.stories';
+import { Default as Pagebottom_Default } from '../components/stzh-pagebottom/stzh-pagebottom.stories';
+import { Default as Header_Default } from '../components/stzh-header/stzh-header.stories';
+import { Default as Footer_Default } from '../components/stzh-footer/stzh-footer.stories';
+import { Multicolumn as Anchornav_Multicolumn } from '../components/stzh-anchornav/stzh-anchornav.stories';
+import { Default as Textandimage_Default } from '../components/stzh-textandimage/stzh-textandimage.stories';
+import { Default as Accordion_Default } from '../components/stzh-accordion/stzh-accordion.stories';
+import { Floating as Button_Floating } from '../components/stzh-button/stzh-button.stories';
+export default {
+  title: 'Pages/Website',
+  parameters: {
+    docs: {
+      inlineStories: false,
+    },
+    layout: 'fullscreen'
+  }
+};
+const Base = (args) => (
+  <div class="stzh-theme-*"> { /* use theme class on <html> class for each department (see themes documentation) */ }
+    <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>
+    {Header_Default({ ...Header_Default.args, _hideText: true })}
+    <stzh-section id="anchorContent">
+      <stzh-vspace curve="big"></stzh-vspace>
+      <stzh-container>
+        <stzh-cspace>
+          {args.content}
+        </stzh-cspace>
+      </stzh-container>
+      <stzh-vspace curve="big"></stzh-vspace>
+      {args.floatingButton && Button_Floating({ ...Button_Floating.args })}
+    </stzh-section>
+    {Footer_Default({ ...Footer_Default.args })}
+  </div>
+);
+const TemplateContentPage = (args) => (
+  (Base({ floatingButton: true, content: (
+    <stzh-row>
+      <stzh-cell span-large="4"></stzh-cell>
+      <stzh-cell span-large="8">
+        <div class="section has-pagetitle">
+          <stzh-pagetitle>
+            <stzh-heading slot="heading">
+              Lorem ipsum dolor
+            </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://www.stadt-zuerich.ch/job-detail">
+              stadt-zuerich.ch/job-detail
+            </stzh-link>
+            <stzh-figure slot="image">
+              <img src="media/images/example.jpg" loading="lazy" alt="Example job image" />
+            </stzh-figure>
+          </stzh-pagetitle>
+        </div>
+        <div class="mainparsys parsys">
+          <div class="section has-anchornav">
+            {Anchornav_Multicolumn({ ...Anchornav_Multicolumn.args, 'with-border': true })}
+          </div>
+          <div class="section has-textandimage">
+            {Textandimage_Default({ ...Textandimage_Default.args })}
+          </div>
+          <div class="section has-contact">
+            {Contact_Default({ ...Contact_Default.args })}
+          </div>
+          {/* TODO: add Scrollup / Print component */}
+        </div>
+        <div class="contextparsys parsys">
+          <div class="section has-accordion">
+            {Accordion_Default({ ...Accordion_Default.args })}
+          </div>
+        </div>
+        <div class="section has-pagebottom">
+          {Pagebottom_Default({ ...Pagebottom_Default.args, 'with-border': true })}
+        </div>
+      </stzh-cell>
+    </stzh-row>
+  ) }))
+);
+const TemplateJobDetail = (args) => (
+  (Base({ content: (
+    <stzh-row>
+      <stzh-cell span-large="4"></stzh-cell>
+      <stzh-cell span-large="8">
+        <div class="section has-pagetitle">
+          <stzh-pagetitle>
+            <stzh-heading slot="heading">
+              Lorem ipsum dolor
+            </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://www.stadt-zuerich.ch/job-detail">
+              stadt-zuerich.ch/job-detail
+            </stzh-link>
+            <stzh-figure slot="image">
+              <img src="media/images/example.jpg" loading="lazy" alt="Example job image" />
+            </stzh-figure>
+          </stzh-pagetitle>
+        </div>
+        <div class="mainparsys parsys">
+          {JobDetails_Default({ ...JobDetails_Default.args, _withoutCspace: true })}
+        </div>
+        <div class="section has-pagebottom">
+          {Pagebottom_Default({ ...Pagebottom_Default.args, 'with-border': true })}
+        </div>
+      </stzh-cell>
+    </stzh-row>
+  ) }))
+);
+export const ContentPage = TemplateContentPage.bind({});
+ContentPage.args = {
+};
+export const JobDetail = TemplateJobDetail.bind({});
+JobDetail.args = {
+};

package/dist/collection/patterns/appointments.stories.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { h } from '../utils/h';
 import { withDesign } from 'storybook-addon-designs';
 import { getFigmaLink } from '../../figma';
-import { Default as Appointments } from '../components/stzh-appointments/stzh-appointments.stories'
+import { Default as Appointments_Default } from '../components/stzh-appointments/stzh-appointments.stories'
 export default {
   title: 'Patterns/Appointments',
@@ -28,7 +28,7 @@ const Template = (args) => (
       <stzh-section variant="highlight">
         <stzh-heading level="2" with-border>Select Date</stzh-heading>
         <stzh-vspace curve="medium"></stzh-vspace>
-        <Appointments {...Appointments.args}></Appointments>
+        {Appointments_Default({ ...Appointments_Default.args })}
         <stzh-vspace size="xlarge"></stzh-vspace>
         <stzh-actions variant="process" with-border>
           <stzh-button slot="primary" href="#" variant="primary">Next Step</stzh-button>

package/dist/collection/patterns/contact.stories.js CHANGED Viewed

@@ -3,19 +3,19 @@ import { withDesign } from 'storybook-addon-designs';
 import { getFigmaLink } from '../../figma';
 import {
-  OrganizationWithPobox as Contactaddress_OrganizationWithPobox,
-  FurtherContactOrganization as Contactaddress_FurtherContactOrganization,
-  WithImageAndAvailability as Contactaddress_WithImageAndAvailability,
-  MinimalOrganization as Contactaddress_MinimalOrganization,
-  FurtherContactPerson as Contactaddress_FurtherContactPerson
-} from '../components/stzh-contactaddress/stzh-contactaddress.stories';
+  OrganizationWithPobox as Contact_OrganizationWithPobox,
+  FurtherContactOrganization as Contact_FurtherContactOrganization,
+  ContactPersonWithImageAndAvailability as Contact_ContactPersonWithImageAndAvailability,
+  MinimalOrganization as Contact_MinimalOrganization,
+  FurtherContactPerson as Contact_FurtherContactPerson
+} from '../components/stzh-contact/stzh-contact.stories';
 import {
   Urls as Datalist_Urls
 } from '../components/stzh-datalist/stzh-datalist.stories';
 import {
-  Default as Contactform
+  Default as Contactform_Default
 } from './contactform.stories';
 export default {
@@ -27,7 +27,7 @@ export default {
     },
     design: {
       type: 'figma',
-      url: getFigmaLink('contact'),
+      url: getFigmaLink('pattern_contact'),
       allowFullscreen: true
     }
   },
@@ -41,14 +41,14 @@ const Template = (args) => (
     <stzh-heading level="2" with-border>Kontakt</stzh-heading>
     <stzh-vspace curve="medium"></stzh-vspace>
-    <Contactaddress_OrganizationWithPobox {... {...Contactaddress_OrganizationWithPobox.args, 'with-border': false } }></Contactaddress_OrganizationWithPobox>
+    {Contact_OrganizationWithPobox({ ...Contact_OrganizationWithPobox.args, 'with-border': false })}
     <stzh-vspace curve="small"></stzh-vspace>
     <stzh-datalist>
       <stzh-datalist-item value="Website" href="#"></stzh-datalist-item>
       <stzh-details>
         <stzh-datalist-item value="Kontaktformular"></stzh-datalist-item>
-        <Contactform {...Contactform.args} slot="content"></Contactform>
+        {Contactform_Default({ ...Contactform_Default.args, slot: 'content' })}
       </stzh-details>
     </stzh-datalist>
@@ -56,7 +56,7 @@ const Template = (args) => (
     <stzh-olmap></stzh-olmap>
     <stzh-vspace curve="medium"></stzh-vspace>
-    <Contactaddress_FurtherContactOrganization {... {...Contactaddress_FurtherContactOrganization.args, 'with-border': false } }></Contactaddress_FurtherContactOrganization>
+    {Contact_FurtherContactOrganization({ ...Contact_FurtherContactOrganization.args, 'with-border': false })}
     <stzh-vspace curve="small"></stzh-vspace>
     <stzh-datalist>
@@ -70,30 +70,30 @@ const TemplateFurtherContact = (args) => (
     <stzh-heading level="2" with-border>Kontakt</stzh-heading>
     <stzh-vspace curve="medium"></stzh-vspace>
-    <Contactaddress_MinimalOrganization {... {...Contactaddress_MinimalOrganization.args, 'with-border': false } }></Contactaddress_MinimalOrganization>
+    {Contact_MinimalOrganization({ ...Contact_MinimalOrganization.args, 'with-border': false })}
     <stzh-vspace curve="small"></stzh-vspace>
     <stzh-datalist>
       <stzh-details>
         <stzh-datalist-item value="Kontaktformular"></stzh-datalist-item>
-        <Contactform {...Contactform.args} slot="content"></Contactform>
+        {Contactform_Default({ ...Contactform_Default.args, slot: 'content' })}
       </stzh-details>
     </stzh-datalist>
     <stzh-vspace curve="medium"></stzh-vspace>
-    <Contactaddress_FurtherContactPerson {... {...Contactaddress_FurtherContactPerson.args, 'with-border': false } }></Contactaddress_FurtherContactPerson>
+    {Contact_FurtherContactPerson({ ...Contact_FurtherContactPerson.args, 'with-border': false })}
   </div>
 );
-const TemplateNew = (args) => (
+const TemplateContactPersonWithImageAndAvailability = (args) => (
   <div>
     <stzh-cspace>
-      <Contactaddress_WithImageAndAvailability {... {...Contactaddress_WithImageAndAvailability.args, 'with-border': false } }></Contactaddress_WithImageAndAvailability>
+      {Contact_ContactPersonWithImageAndAvailability({ ...Contact_ContactPersonWithImageAndAvailability.args, 'with-border': false })}
       <stzh-datalist>
         <stzh-details>
           <stzh-datalist-item value="Kontaktformular"></stzh-datalist-item>
-          <Contactform {...Contactform.args} slot="content"></Contactform>
+          {Contactform_Default({ ...Contactform_Default.args, slot: 'content' })}
         </stzh-details>
       </stzh-datalist>
@@ -125,7 +125,7 @@ const TemplateNew = (args) => (
       </stzh-richtext>
       <stzh-heading level="3" curve="h4">Linklist</stzh-heading>
-      <Datalist_Urls {...Datalist_Urls.args}></Datalist_Urls>
+      {Datalist_Urls({ ...Datalist_Urls.args })}
     </stzh-cspace>
   </div>
@@ -139,6 +139,6 @@ export const FurtherContact = TemplateFurtherContact.bind({});
 FurtherContact.args = {
 };
-export const New = TemplateNew.bind({});
-New.args = {
+export const ContactPersonWithImageAndAvailability = TemplateContactPersonWithImageAndAvailability.bind({});
+ContactPersonWithImageAndAvailability.args = {
 };

package/dist/collection/patterns/contactform.stories.js CHANGED Viewed

@@ -11,7 +11,7 @@ export default {
     },
     design: {
       type: 'figma',
-      url: getFigmaLink('contactform'),
+      url: getFigmaLink('pattern_contactform'),
       allowFullscreen: true
     }
   },
@@ -21,7 +21,7 @@ export default {
 };
 const Template = (args) => (
-  <form>
+  <form {...args}>
     <stzh-cspace>
       <stzh-fieldset>
         <stzh-row>