@oiz/stzh-components 4.10.0-beta1 → 4.10.0

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

@@ -2,7 +2,12 @@ import { createComponentStory } from '../../utils/story-utils';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
-import { clickAndWait, expectIsVisible, getComponentByTestId} from "../../../.storybook/utils/component-test-utils.ts";
+import {
+  clickAndWait,
+  expectIsVisible,
+  expectIsVisuallyHidden,
+  getComponentByTestId
+} from "../../../.storybook/utils/component-test-utils.ts";
 import { expect } from "storybook/test";
 
 const COMPONENT_NAME = 'stzh-header';
@@ -112,25 +117,6 @@ const TEMPLATE_WITH_EMPTY_NAV = (args) => {
   `;
 };
 
-const TEMPLATE_ONLY_LANGNAV = (args) => {
-  return `
-<div>
-  <stzh-header data-testid="${HEADER_TEST_ID}">
-    ${substoryLogo({ slot: 'logo', _logo: args._logo }, SUBTEMPLATE_LOGO({ _logo: args._logo })).outerHTML}
-  </stzh-header>
-  ${
-    !args._hideText
-      ? `
-    <stzh-container>
-      ${SUBTEMPLATE_DUMMY_TEXT}
-    </stzh-container>
-  `
-      : ''
-  }
-</div>
-  `;
-};
-
 const TEMPLATE_WITH_APP_NAV = (args) => {
   return `
 <div>
@@ -154,6 +140,7 @@ const TEMPLATE_WITH_APP_NAV = (args) => {
 export default {
   title: 'Components/Header',
   component: COMPONENT_NAME,
+  excludeStories: ['OnlyLanguageMenu'],
   parameters: {
     layout: 'fullscreen',
     stzhActions: {
@@ -215,58 +202,6 @@ const menuItems = [
       }
     ]
   },
-  {
-    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 2',
-        href: '#'
-      },
-      {
-        label: 'Menu Level 2',
-        href: '#'
-      },
-      {
-        label: 'Menu Level 2',
-        href: '#'
-      },
-      {
-        label: 'Menu Level 2',
-        href: '#'
-      }
-    ]
-  },
   {
     label: 'Menu Level 1',
     href: '#'
@@ -277,13 +212,7 @@ const metanavItems = [
   {
     label: 'Jobs',
     href: '#',
-  },
-  {
-    label: 'Contact',
-    href: '#',
-    stay: true,
-    stayAndShowInMobileMenu: true,
-  },
+  }
 ];
 
 const metanavItemsNotLoggedIn = [
@@ -397,7 +326,7 @@ export const Default = {
     'menu-items': menuItems,
     'metanav-items': metanavItems,
     languages: languageDropdownOptions,
-    'language-active': '/en',
+    'language-active': '/en'
   },
   play: async ({ canvasElement, step }) => {
     stzhHeaderEl = await getComponentByTestId(canvasElement, HEADER_TEST_ID);
@@ -425,7 +354,7 @@ export const Default = {
       const menuNav = stzhHeaderEl.querySelector('nav.stzh-header__menu-nav');
       const level1List = menuNav.querySelector('ul.stzh-header__menu-list.is-level-1');
       const level1Items = level1List.querySelectorAll(':scope > li.stzh-header__menu-list-item');
-      expect(level1Items.length).toBe(5);
+      expect(level1Items.length).toBe(3);
 
       const firstMenuItemButton = level1Items[0].querySelector('button');
       expect(firstMenuItemButton).toHaveTextContent('Menu Level 1');
@@ -439,7 +368,7 @@ export const Default = {
       const level2Items = level2List.querySelectorAll(':scope > li.stzh-header__menu-list-item');
       expect(level2Items.length).toBe(4);
 
-      const level2Links = Array.from(level2Items).map(item => item.querySelector('a.is-level-2'));
+      const level2Links = Array.from(level2Items).map((item) => item.querySelector('a.is-level-2'));
       expect(level2Links.length).toBe(4);
       expect(level2Links[1]).toHaveTextContent('Menu Level 1');
       expect(level2Links[2]).toHaveTextContent('Menu Level 2');
@@ -453,7 +382,7 @@ export const Default = {
       const jobsItemEl = metabarNavEl.querySelector('a#metanav-submenu-0-button');
 
       expect(jobsItemEl).toHaveTextContent('Jobs');
-      expect(jobsItemEl).toHaveAttribute('href', '#')
+      expect(jobsItemEl).toHaveAttribute('href', '#');
     });
 
     await step('Assert language menu rendering', async () => {
@@ -468,13 +397,13 @@ export const Default = {
       expect(langItems.length).toBe(2);
 
       const firstLangItem = langItems[0].querySelector('a');
-      expect(firstLangItem).not.toHaveClass('stzh-menu-item--is-active')
+      expect(firstLangItem).not.toHaveClass('stzh-menu-item--is-active');
       expect(firstLangItem).toHaveAttribute('href', '/de');
       expect(firstLangItem).toHaveTextContent('Deutsch');
 
       // english is active
       const secondLangItem = langItems[1].querySelector('a');
-      expect(secondLangItem).toHaveClass('stzh-menu-item--is-active')
+      expect(secondLangItem).toHaveClass('stzh-menu-item--is-active');
       expect(secondLangItem).toHaveAttribute('href', '/en');
       expect(secondLangItem).toHaveTextContent('English');
 
@@ -502,9 +431,13 @@ export const WithUserMenu = {
     });
 
     await step('Assert user menu rendering', async () => {
-      const userMenuPopoverEl = stzhHeaderEl.querySelector('div.stzh-header__metabar-nav stzh-popover.stzh-header__metanav-popover');
+      const userMenuPopoverEl = stzhHeaderEl.querySelector(
+        'div.stzh-header__metabar-nav stzh-popover.stzh-header__metanav-popover'
+      );
 
-      const userMenuButtonEl = userMenuPopoverEl.querySelector('div.stzh-header__metabar-nav stzh-popover button#metaNavItemUser-button');
+      const userMenuButtonEl = userMenuPopoverEl.querySelector(
+        'div.stzh-header__metabar-nav stzh-popover button#metaNavItemUser-button'
+      );
       expect(userMenuButtonEl).toHaveTextContent('Max Mustermann');
 
       await clickAndWait(userMenuButtonEl);
@@ -518,7 +451,10 @@ export const WithUserMenu = {
       expect(firstUserMenuItem).toHaveTextContent('Services');
 
       const secondUserMenuItem = userMenuItems[1].querySelector('a');
-      expect(secondUserMenuItem).toHaveAttribute('href', 'https://www.stadt-zuerich.ch/app/mkfewww/web/auth/mitteilungen');
+      expect(secondUserMenuItem).toHaveAttribute(
+        'href',
+        'https://www.stadt-zuerich.ch/app/mkfewww/web/auth/mitteilungen'
+      );
       expect(secondUserMenuItem).toHaveTextContent('Messages');
 
       const thirdUserMenuItem = userMenuItems[2].querySelector('a');
@@ -558,7 +494,7 @@ export const WithAppNav = {
       const userMenuButtonEl = stzhHeaderEl.querySelector('button#anchorNavMain');
       expect(userMenuButtonEl).toBeNull();
 
-      const appNavEl = stzhHeaderEl.querySelector('stzh-app-nav[app-nav-id=anchorNavAppNav]')
+      const appNavEl = stzhHeaderEl.querySelector('stzh-app-nav[app-nav-id=anchorNavAppNav]');
       expect(appNavEl).not.toBeNull();
     });
   }
@@ -574,7 +510,7 @@ export const DALogoWithoutScrollbar = {
     'search-action': '/search.html',
     'language-active': '/en',
     languages: languageDropdownOptions
-  },
+  }
 };
 
 export const WithoutMetabar = {
@@ -594,19 +530,143 @@ export const WithoutMetabar = {
   }
 };
 
-export const SelectedMetanavItemsStayOnMobile = {
-  render: (args) => story(args, TEMPLATE_ONLY_LANGNAV(args)),
+const TEMPLATE_WITH_METANAVITEMS_MOBILE_DOC = (args) => {
+  return `
+<div>
+  <stzh-header data-testid="${HEADER_TEST_ID}">
+    ${substoryLogo({ slot: 'logo', _logo: args._logo }, SUBTEMPLATE_LOGO({ _logo: args._logo })).outerHTML}
+  </stzh-header>
+    <stzh-container>
+      <stzh-vspace size="section"></stzh-vspace>
+      <stzh-cspace>
+        <stzh-heading level="3">Metanav items</stzh-heading>
+        <stzh-vspace></stzh-vspace>
+        <stzh-text>On small screens, metanav items are hidden in the metanav and added into the burger menu by default. You can override this behavior by setting the metanav item with these properties:</stzh-text>
+        <stzh-vspace></stzh-vspace>
+        <stzh-text font="heavy">Show in metanav only</stzh-text>
+        <stzh-list>
+           <stzh-list-item><pre>stay: true</pre></stzh-list-item>
+           <stzh-list-item><pre>labelShort: 'MO'</pre> or</stzh-list-item>
+           <stzh-list-item><pre>icon: 'scan'</pre></stzh-list-item>
+        </stzh-list>
+        <stzh-text font="heavy">Show in metanav AND burger menu</stzh-text>
+        <stzh-list>
+           <stzh-list-item><pre>stayAndShowInMobileMenu: true</pre></stzh-list-item>
+           <stzh-list-item><pre>labelShort: 'M&M'</pre> or</stzh-list-item>
+           <stzh-list-item><pre>icon: 'scan'</pre></stzh-list-item>
+        </stzh-list>
+        <stzh-heading level="3">Language menu</stzh-heading>
+        <stzh-vspace></stzh-vspace>
+        <stzh-text>On small screens, the language menu will always be moved to the burger menu. Set 'language-stay' (on stzh-header) to true, to also keep it in metanav</stzh-text>
+      </stzh-cspace>
+      <stzh-vspace></stzh-vspace>
+      <stzh-vspace></stzh-vspace>
+    </stzh-container>
+</div>
+  `;
+};
+
+const metanavItemsMobile = [
+  {
+    label: 'Menu only',
+    href: '#',
+  },
+  {
+    label: 'Metanav & Menu',
+    labelShort: 'M&M',
+    stayAndShowInMobileMenu: true,
+    href: '#',
+  },
+  {
+    label: 'Metanav Only (Icon)',
+    icon: 'scan',
+    stay: true,
+    href: '#',
+  },
+  {
+    label: 'Metanav Only (Short label)',
+    labelShort: 'MO',
+    stay: true,
+    href: '#',
+  },
+];
+
+export const MetanavItemsOnSmallScreens = {
+  render: (args) => story(args, TEMPLATE_WITH_METANAVITEMS_MOBILE_DOC(args)),
   args: {
-    'metanav-items': metanavItems,
+    'menu-items': menuItems,
+    'metanav-items': metanavItemsMobile,
     'language-stay': true,
     languages: languageDropdownOptions
   },
+  // ToDo in PDESI-1521 (make defaultViewport work for test execution in CLI)
+  tags: ['!test'],
   play: async ({ canvasElement, step }) => {
     stzhHeaderEl = await getComponentByTestId(canvasElement, HEADER_TEST_ID);
 
-    await step('Assert metabar does not exist', async () => {
+    await step('Assert metanav items rendering in burger menu', async () => {
+      const menuButton = stzhHeaderEl.querySelector('div.stzh-header__metabar button#anchorNavMain');
+      await clickAndWait(menuButton);
+
+      const menuMetanavUl = stzhHeaderEl.querySelector('.stzh-header__menu-metanav ul.stzh-header__menu-metanav-list');
+      const menuMetanavItems = menuMetanavUl.querySelectorAll(':scope > li.stzh-header__menu-metanav-list-item');
+
+      // for a11y reasons all the metanav items exist, but some are visually hidden
+      expect(menuMetanavItems.length).toBe(5);
+
+      const menuOnlyItem =  menuMetanavItems[0];
+      expectIsVisible(menuOnlyItem, true);
+      expect(menuOnlyItem).toHaveTextContent('Menu only');
+
+      const metanavAndMenuItem =  menuMetanavItems[1];
+      expectIsVisible(metanavAndMenuItem, true);
+      expect(metanavAndMenuItem).toHaveTextContent('Metanav & Menu');
 
+      const metanavOnlyIconItem =  menuMetanavItems[2];
+      expectIsVisible(metanavOnlyIconItem, false);
+      expect(metanavOnlyIconItem).toHaveTextContent('Metanav Only (Icon)');
+
+      const metanavOnlyShortLabelItem =  menuMetanavItems[3];
+      expectIsVisible(metanavOnlyShortLabelItem, false);
+      expect(metanavOnlyShortLabelItem).toHaveTextContent('Metanav Only (Short label)');
+
+      const languageItem =  menuMetanavItems[4];
+      expectIsVisible(languageItem);
+      expect(languageItem).toHaveTextContent('Deutsch');
+
+      // reset
+      await clickAndWait(menuButton);
     });
+
+    await step('Assert metanav items rendering in metanav', async () => {
+      const metabarNavEl = stzhHeaderEl.querySelector('div#anchorNavMeta');
+      const metanavItems = metabarNavEl.querySelectorAll(':scope > a.stzh-header__metanav-item');
+
+      // for a11y reasons all the metanav items exist, but some are visually hidden.
+      expect(metanavItems.length).toBe(4);
+
+      const menuOnlyItem =  metanavItems[0];
+      expectIsVisible(menuOnlyItem, false);
+      expect(menuOnlyItem).toHaveTextContent('Menu only');
+
+      const metanavAndMenuItem =  metanavItems[1];
+      expectIsVisible(metanavAndMenuItem, true);
+      expect(metanavAndMenuItem).toHaveTextContent('M&M');
+
+      const metanavOnlyIconItem =  metanavItems[2];
+      expectIsVisible(metanavOnlyIconItem, true);
+      expect(metanavOnlyIconItem.querySelector('stzh-icon')).not.toBeNull();
+
+      const metanavOnlyShortLabelItem =  metanavItems[3];
+      expectIsVisible(metanavOnlyShortLabelItem, true);
+      expect(metanavOnlyShortLabelItem).toHaveTextContent('MO');
+    });
+  },
+  globals: {
+    viewport: {
+      value: 'small',
+      isRotated: false
+    }
   }
 };
 
@@ -618,3 +678,33 @@ export const NestedInContainer = {
     languages: languageDropdownOptions
   }
 };
+
+const TEMPLATE_ONLY_LANGNAV = (args) => {
+  return `
+      <div>
+        <stzh-header data-testid="${HEADER_TEST_ID}">
+          ${substoryLogo({ slot: 'logo', _logo: args._logo }, SUBTEMPLATE_LOGO({ _logo: args._logo })).outerHTML}
+        </stzh-header>
+        ${
+    !args._hideText
+      ? `
+          <stzh-container>
+            ${SUBTEMPLATE_DUMMY_TEXT}
+          </stzh-container>
+        `
+      : ''
+  }
+      </div>
+    `;
+};
+
+/** This story is excluded from being displayed Storybbook (see excludeStories). It's being used as template for microsite pages. */
+export const OnlyLanguageMenu = {
+  render: (args) => story(args, TEMPLATE_ONLY_LANGNAV(args)),
+  args: {
+    'metanav-items': metanavItems,
+    'language-stay': true,
+    languages: languageDropdownOptions,
+    'language-active': '/en',
+  }
+};

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

@@ -194,7 +194,10 @@
   --padding: var(--stzh-popover-padding);
   --content-padding: var(--stzh-popover-content-padding);
   --border-radius: var(--stzh-popover-border-radius);
-  --background-color: var(--stzh-popover-background, var(--stzh-popover-background-color));
+  --background-color: var(
+    --stzh-popover-background,
+    var(--stzh-popover-background-color)
+  );
   --backdrop-opacity: var(--stzh-dialog-backdrop-opacity);
   --backdrop-background-color: var(--stzh-dialog-backdrop-background-color);
 }