@oiz/stzh-components 3.0.0 → 3.1.0

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

@@ -3,6 +3,7 @@ import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 import { withDesign } from 'storybook-addon-designs';
 import { getFigmaLink } from '../../../figma';
+import { OnsiteBreakout as SearchAsOverlay } from '../stzh-search/stzh-search.stories';
 
 const COMPONENT_NAME = 'stzh-header';
 const story = createComponentStory(COMPONENT_NAME);
@@ -47,7 +48,7 @@ const SUBTEMPLATE_LOGO = ({ _logo = 'media/logo/stzh-default.svg' }) => {
       alt="Logo City Zürich, go to homepage"
     />
   `;
-}
+};
 
 const TEMPLATE = (args) => {
   return `
@@ -55,14 +56,44 @@ const TEMPLATE = (args) => {
   <stzh-header>
     ${substoryLogo({ slot: 'logo', _logo: args._logo }, SUBTEMPLATE_LOGO({ _logo: args._logo })).outerHTML}
   </stzh-header>
-  ${!args._hideText ? `
+  ${
+    !args._hideText
+      ? `
     <stzh-container>
       ${SUBTEMPLATE_DUMMY_TEXT}
     </stzh-container>
-  ` : ''}
+  `
+      : ''
+  }
 </div>
   `;
-}
+};
+
+const TEMPLATE_WITH_SLOTTED_SEARCH = (args) => {
+  return `
+<div>
+  <stzh-header>
+    ${substoryLogo({ slot: 'logo', _logo: args._logo }, SUBTEMPLATE_LOGO({ _logo: args._logo })).outerHTML}
+    <div slot="search">
+      ${
+        SearchAsOverlay.render({
+          ...SearchAsOverlay.args
+        }).outerHTML
+      }
+    </div>
+  </stzh-header>
+  ${
+    !args._hideText
+      ? `
+    <stzh-container>
+      ${SUBTEMPLATE_DUMMY_TEXT}
+    </stzh-container>
+  `
+      : ''
+  }
+</div>
+  `;
+};
 
 const TEMPLATE_NESTED_IN_CONTAINER = (args) => {
   return `
@@ -73,7 +104,7 @@ const TEMPLATE_NESTED_IN_CONTAINER = (args) => {
   ${!args._hideText ? SUBTEMPLATE_DUMMY_TEXT : ''}
 </stzh-container>
   `;
-}
+};
 
 const TEMPLATE_WITH_EMPTY_NAV = (args) => {
   return `
@@ -81,14 +112,18 @@ const TEMPLATE_WITH_EMPTY_NAV = (args) => {
   <stzh-header>
     ${substoryLogo({ slot: 'logo', _logo: args._logo }, SUBTEMPLATE_LOGO({ _logo: args._logo })).outerHTML}
   </stzh-header>
-  ${!args._hideText ? `
+  ${
+    !args._hideText
+      ? `
     <stzh-container>
       ${SUBTEMPLATE_DUMMY_TEXT}
     </stzh-container>
-  ` : ''}
+  `
+      : ''
+  }
 </div>
   `;
-}
+};
 
 const TEMPLATE_ONLY_LANGNAV = (args) => {
   return `
@@ -96,14 +131,18 @@ const TEMPLATE_ONLY_LANGNAV = (args) => {
   <stzh-header>
     ${substoryLogo({ slot: 'logo', _logo: args._logo }, SUBTEMPLATE_LOGO({ _logo: args._logo })).outerHTML}
   </stzh-header>
-  ${!args._hideText ? `
+  ${
+    !args._hideText
+      ? `
     <stzh-container>
       ${SUBTEMPLATE_DUMMY_TEXT}
     </stzh-container>
-  ` : ''}
+  `
+      : ''
+  }
 </div>
   `;
-}
+};
 
 export default {
   title: 'Components/Header',
@@ -113,6 +152,8 @@ export default {
     actions: {
       handles: [
         'stzhMetanavItemClick',
+        'stzhMetanavItemButtonClick',
+        'stzhMetanavItemChildClick',
         'stzhMenuItemClick',
         'stzhLanguageChange',
         'stzhSearchChange',
@@ -131,190 +172,195 @@ export default {
       allowFullscreen: true
     }
   },
-  decorators: [
-    withActions,
-    withDesign
-  ]
+  decorators: [withActions, withDesign]
 };
 
 const menuItems = [
   {
-    "label": "Menu Level 1",
-    "href": "#",
-    "items": [
+    label: 'Menu Level 1',
+    href: '#',
+    items: [
       {
-        "label": "Menu Level 2",
-        "href": "#"
+        label: 'Menu Level 2',
+        href: '#'
       },
       {
-        "label": "Menu Level 2",
-        "href": "#"
+        label: 'Menu Level 2',
+        href: '#'
       }
     ]
   },
   {
-    "label": "Menu Level 1",
-    "href": "#",
-    "items": [
+    label: 'Menu Level 1',
+    href: '#',
+    items: [
       {
-        "label": "Menu Level 2",
-        "href": "#"
+        label: 'Menu Level 2',
+        href: '#'
       },
       {
-        "label": "Menu Level 2",
-        "href": "#"
+        label: 'Menu Level 2',
+        href: '#'
       },
       {
-        "label": "Menu Level 2",
-        "href": "#"
+        label: 'Menu Level 2',
+        href: '#'
       }
     ]
   },
   {
-    "label": "Menu Level 1",
-    "href": "#",
-    "items": [
+    label: 'Menu Level 1',
+    href: '#',
+    items: [
       {
-        "label": "Menu Level 2",
-        "href": "#"
+        label: 'Menu Level 2',
+        href: '#'
       },
       {
-        "label": "Menu Level 2",
-        "href": "#"
+        label: 'Menu Level 2',
+        href: '#'
       },
       {
-        "label": "Menu Level 2",
-        "href": "#"
+        label: 'Menu Level 2',
+        href: '#'
       },
       {
-        "label": "Menu Level 2",
-        "href": "#"
+        label: 'Menu Level 2',
+        href: '#'
       },
       {
-        "label": "Menu Level 2",
-        "href": "#"
+        label: 'Menu Level 2',
+        href: '#'
       },
       {
-        "label": "Menu Level 2",
-        "href": "#"
+        label: 'Menu Level 2',
+        href: '#'
       }
     ]
   },
   {
-    "label": "Menu Level 1",
-    "href": "#",
-    "items": [
+    label: 'Menu Level 1',
+    href: '#',
+    items: [
       {
-        "label": "Menu Level 2",
-        "href": "#"
+        label: 'Menu Level 2',
+        href: '#'
       },
       {
-        "label": "Menu Level 2",
-        "href": "#"
+        label: 'Menu Level 2',
+        href: '#'
       },
       {
-        "label": "Menu Level 2",
-        "href": "#"
+        label: 'Menu Level 2',
+        href: '#'
       },
       {
-        "label": "Menu Level 2",
-        "href": "#"
+        label: 'Menu Level 2',
+        href: '#'
       }
     ]
   },
   {
-    "label": "Menu Level 1",
-    "href": "#"
+    label: 'Menu Level 1',
+    href: '#'
   }
 ];
 
 const metanavItems = [
   {
-    "stay": true,
-    "label": "Cart",
-    "labelHidden": true,
-    "href": "#",
-    "icon": "cart"
+    stay: true,
+    label: 'Cart',
+    labelHidden: true,
+    href: '#',
+    target: '_blank',
+    icon: 'cart'
   },
   {
-    "important": true,
-    "label": "Max Mustermann",
-    "labelShort": "MM",
-    "badgeEmpty": true,
-    "stayAndShowInMobileMenu": true,
-    "variant": "secondary",
-    "icon": "user",
-    "items": [
+    important: true,
+    label: 'Max Mustermann',
+    labelShort: 'MM',
+    badgeEmpty: true,
+    stayAndShowInMobileMenu: true,
+    variant: 'secondary',
+    icon: 'user',
+    items: [
       {
-        "label": "Services",
-        "icon": "services-2",
-        "href": "https://www.stadt-zuerich.ch/app/mkfewww/web/auth/services"
+        label: 'Services',
+        icon: 'services-2',
+        href: 'https://www.stadt-zuerich.ch/app/mkfewww/web/auth/services',
+        target: '_blank',
+        id: 'servicesId'
       },
       {
-        "label": "Messages",
-        "icon": "mail",
-        "counter": 3,
-        "href": "https://www.stadt-zuerich.ch/app/mkfewww/web/auth/mitteilungen"
+        label: 'Messages',
+        icon: 'mail',
+        counter: 3,
+        href: 'https://www.stadt-zuerich.ch/app/mkfewww/web/auth/mitteilungen',
+        id: 'messagesId'
       },
       {
-        "label": "Settings",
-        "icon": "gear",
-        "href": "https://www.stadt-zuerich.ch/app/mkfewww/web/auth/settings"
+        label: 'Settings',
+        icon: 'gear',
+        href: 'https://www.stadt-zuerich.ch/app/mkfewww/web/auth/settings',
+        id: 'settingsId'
       },
       {
-        "label": "About Mein Konto",
-        "icon": "info-help",
-        "href": "https://www.stadt-zuerich.ch/about-meinkonto"
+        label: 'About Mein Konto',
+        icon: 'info-help',
+        href: 'https://www.stadt-zuerich.ch/about-meinkonto',
+        id: 'aboutId'
       }
     ],
-    "itemButton": {
-      "label": "Anmelden",
-      "href": "#"
+    itemButton: {
+      label: 'Anmelden',
+      href: '#',
+      target: '_blank',
+      id: 'anmeldenId'
     }
   },
   {
-    "label": "Jobs",
-    "href": "#"
+    label: 'Jobs',
+    href: '#'
   }
 ];
 
 const metanavItemsNotLoggedIn = [
   {
-    "stay": true,
-    "label": "Cart",
-    "labelHidden": true,
-    "href": "#",
-    "icon": "cart"
+    stay: true,
+    label: 'Cart',
+    labelHidden: true,
+    href: '#',
+    icon: 'cart'
   },
   {
-    "important": false,
-    "label": "Mein Konto",
-    "labelShort": "",
-    "badgeEmpty": false,
-    "stayAndShowInMobileMenu": true,
-    "variant": "secondary",
-    "icon": "user",
-    "items": [
+    important: false,
+    label: 'Mein Konto',
+    labelShort: '',
+    badgeEmpty: false,
+    stayAndShowInMobileMenu: true,
+    variant: 'secondary',
+    icon: 'user',
+    items: [
       {
-        "label": "About Mein Konto",
-        "icon": "info-help",
-        "href": "https://www.stadt-zuerich.ch/about-meinkonto"
+        label: 'About Mein Konto',
+        icon: 'info-help',
+        href: 'https://www.stadt-zuerich.ch/about-meinkonto'
       }
     ],
-    "itemButton": {
-      "label": "Anmelden",
-      "href": "#"
+    itemButton: {
+      label: 'Anmelden',
+      href: '#'
     }
   },
   {
-    "label": "Jobs",
-    "href": "#"
+    label: 'Jobs',
+    href: '#'
   }
 ];
 
 const languages = [
-  { "text": "Deutsch", "value": "/de" },
-  { "text": "English", "value": "/en" }
+  { text: 'Deutsch', value: '/de' },
+  { text: 'English', value: '/en' }
 ];
 
 export const Default = {
@@ -324,7 +370,17 @@ export const Default = {
     'metanav-items': metanavItems,
     'search-action': '/search.html',
     'language-active': '/en',
-    'languages': languages,
+    languages: languages
+  }
+};
+
+export const WithSlottedOverlaySearch = {
+  render: (args) => story(args, TEMPLATE_WITH_SLOTTED_SEARCH(args)),
+  args: {
+    'menu-items': menuItems,
+    'metanav-items': metanavItems,
+    'language-active': '/en',
+    languages: languages
   }
 };
 
@@ -335,9 +391,9 @@ export const NotLoggedIn = {
     'metanav-items': metanavItemsNotLoggedIn,
     'search-action': '/search.html',
     'language-active': '/en',
-    'languages': languages,
+    languages: languages
   }
-}
+};
 
 export const WithoutScrollbar = {
   render: (args) => story(args, TEMPLATE(args)),
@@ -347,7 +403,7 @@ export const WithoutScrollbar = {
     'metanav-items': metanavItems,
     'search-action': '/search.html',
     'language-active': '/en',
-    'languages': languages,
+    languages: languages
   }
 };
 
@@ -361,7 +417,7 @@ export const NestedInContainer = {
   args: {
     'metanav-items': metanavItems,
     'language-active': '/en',
-    'languages': languages,
+    languages: languages
   }
 };
 
@@ -370,6 +426,6 @@ export const OnlyLanguageStayOnMobile = {
   args: {
     'language-stay': true,
     'language-active': '/en',
-    'languages': languages,
+    languages: languages
   }
-}
+};

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */
@@ -518,4 +521,37 @@
     line-height: var(--stzh-font-curve-hero-ultra-heading-line-height, var(--stzh-font-hero-text-line-height));
     letter-spacing: var(--stzh-font-curve-hero-ultra-heading-letter-spacing, var(--stzh-font-hero-text-letter-spacing));
   }
+}
+.stzh-heading--curve-h1home {
+  font-size: var(--stzh-font-curve-h1home-default-font-size, var(--stzh-font-mega-font-size));
+  line-height: var(--stzh-font-curve-h1home-default-heading-line-height, var(--stzh-font-mega-text-line-height));
+  letter-spacing: var(--stzh-font-curve-h1home-default-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing));
+}
+@media screen and (min-width: 600px) {
+  .stzh-heading--curve-h1home {
+    font-size: var(--stzh-font-curve-h1home-small-font-size, var(--stzh-font-giga-font-size));
+    line-height: var(--stzh-font-curve-h1home-small-heading-line-height, var(--stzh-font-giga-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h1home-small-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing));
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-heading--curve-h1home {
+    font-size: var(--stzh-font-curve-h1home-medium-font-size, var(--stzh-font-peta-font-size));
+    line-height: var(--stzh-font-curve-h1home-medium-heading-line-height, var(--stzh-font-peta-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h1home-medium-heading-letter-spacing, var(--stzh-font-peta-text-letter-spacing));
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-heading--curve-h1home {
+    font-size: var(--stzh-font-curve-h1home-large-font-size, var(--stzh-font-exa-font-size));
+    line-height: var(--stzh-font-curve-h1home-large-heading-line-height, var(--stzh-font-exa-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h1home-large-heading-letter-spacing, var(--stzh-font-exa-text-letter-spacing));
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-heading--curve-h1home {
+    font-size: var(--stzh-font-curve-h1home-ultra-font-size, var(--stzh-font-zetta-font-size));
+    line-height: var(--stzh-font-curve-h1home-ultra-heading-line-height, var(--stzh-font-zetta-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h1home-ultra-heading-letter-spacing, var(--stzh-font-zetta-text-letter-spacing));
+  }
 }

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

@@ -53,7 +53,7 @@ export class StzhHeading {
         "mutable": false,
         "complexType": {
           "original": "Font.Curves | \"auto\"",
-          "resolved": "\"auto\" | \"caption\" | \"default\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"hero\" | \"lead\" | \"none\" | \"p1\" | \"p2\"",
+          "resolved": "\"auto\" | \"caption\" | \"default\" | \"h1\" | \"h1home\" | \"h2\" | \"h3\" | \"h4\" | \"hero\" | \"lead\" | \"none\" | \"p1\" | \"p2\"",
           "references": {
             "Font": {
               "location": "import",