@pnx-mixtape/mxds 0.1.0-rc.3 → 0.1.0-rc.5

package/src/Layout/Header/Header.stories.ts

@@ -1,24 +1,24 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
 import { expect } from "storybook/test"
+import { modes } from "../../../.storybook/modes"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 import Component from "./header.twig"
 import "./_header.css"
 import "./_toggles.css"
 import "./Elements/GlobalToggle"
-import { ButtonTypes, Header as HeaderType } from "@pnx-mixtape/ids-shape"
-import { Icons } from "../../enums"
+import { Header as HeaderType } from "@pnx-mixtape/ids-shape"
 
 // Deps.
-import Icon from "../../Atom/Icon/icon.twig"
 import Logo from "../Header/twig/logo.twig"
-import Button from "../../Atom/Button/button.twig"
 import Navigation from "../../Component/Navigation/navigation.twig"
 import SearchForm from "../../Form/Search/search-form.twig"
+import Translate from "../../Component/Translate/translate.twig"
 // js.
 import "../../Component/Navigation/Elements/Navigation"
+import "../../Component/Translate/Elements/Translate"
 // css.
 import "../../Component/Navigation/navigation.css"
-import { modes } from "../../../.storybook/modes"
-import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
+import "../../Component/Translate/translate.css"
 
 type MxHeaderType = Omit<HeaderType, "controls"> & {
   stacked: boolean
@@ -91,7 +91,7 @@ type Story = StoryObj<MxHeaderType>
 export const Header: Story = {
   play: async ({ canvas, canvasElement, userEvent, step }) => {
     // The toggle only attaches its click/keyboard handlers below the mobile breakpoint.
-    const isMobile = matchMedia("(max-width: 720px)").matches
+    const isMobile = matchMedia("(max-width: 767px)").matches
     if (!isMobile) return
 
     const trigger = canvas.getByRole("button", { name: "Open Menu" })
@@ -120,33 +120,54 @@ export const Header: Story = {
 
 /**
  * Steps a virtual screen reader through the page and asserts on what it announces.
+ *
+ * Below the `--global-nav-down` breakpoint the primary nav starts collapsed
+ * behind the "Open Menu" toggle (`inert`, so it's excluded from the
+ * accessibility tree entirely) - see `GlobalToggle.ts`. This branches on the
+ * real `matchMedia(...).matches`, same as the `Header` story above, and is
+ * paired with `chromatic.modes` on `meta` so both shapes get exercised in CI.
+ * See "Testing Mobile / matchMedia-Driven Behavior in Play Functions" in
+ * docs/Testing.md.
  */
 export const ScreenReaderAnnouncements: Story = {
   play: async () => {
+    const isMobile = matchMedia("(max-width: 767px)").matches
     const log = await runScreenReaderWalkthrough()
-    await expect(log).toEqual([
-      "document",
-      "banner",
-      "image, Mixtape",
-      "navigation, Primary navigation",
-      "list",
-      "listitem, level 1, position 1, set size 4",
-      "link, News",
-      "end of listitem, level 1, position 1, set size 4",
-      "listitem, level 1, position 2, set size 4",
-      "link, About us",
-      "end of listitem, level 1, position 2, set size 4",
-      "listitem, level 1, position 3, set size 4",
-      "link, Contact",
-      "end of listitem, level 1, position 3, set size 4",
-      "listitem, level 1, position 4, set size 4",
-      "link, Resources",
-      "end of listitem, level 1, position 4, set size 4",
-      "end of list",
-      "end of navigation, Primary navigation",
-      "end of banner",
-      "end of document",
-    ])
+
+    if (isMobile) {
+      await expect(log).toEqual([
+        "document",
+        "banner",
+        "image, Mixtape",
+        "button, Open Menu, 1 control, not expanded",
+        "end of banner",
+        "end of document",
+      ])
+    } else {
+      await expect(log).toEqual([
+        "document",
+        "banner",
+        "image, Mixtape",
+        "navigation, Primary navigation",
+        "list",
+        "listitem, level 1, position 1, set size 4",
+        "link, News",
+        "end of listitem, level 1, position 1, set size 4",
+        "listitem, level 1, position 2, set size 4",
+        "link, About us",
+        "end of listitem, level 1, position 2, set size 4",
+        "listitem, level 1, position 3, set size 4",
+        "link, Contact",
+        "end of listitem, level 1, position 3, set size 4",
+        "listitem, level 1, position 4, set size 4",
+        "link, Resources",
+        "end of listitem, level 1, position 4, set size 4",
+        "end of list",
+        "end of navigation, Primary navigation",
+        "end of banner",
+        "end of document",
+      ])
+    }
   },
 }
 
@@ -168,15 +189,7 @@ export const Search: Story = {
 
 export const Controls: Story = {
   args: {
-    controls: [
-      Button({
-        as: ButtonTypes.BUTTON,
-        title: "Translate",
-        iconEnd: Icon({
-          icon: Icons.CHEVRON_DOWN,
-        }),
-      }),
-    ].join(""),
+    controls: [Translate({})].join(""),
   },
 }
 
@@ -187,15 +200,7 @@ export const Stacked: Story = {
       action: "#search",
       id: "search-keyword",
     }),
-    controls: [
-      Button({
-        as: ButtonTypes.BUTTON,
-        title: "Translate",
-        iconEnd: Icon({
-          icon: Icons.CHEVRON_DOWN,
-        }),
-      }),
-    ].join(""),
+    controls: [Translate({})].join(""),
     navigation: Navigation({
       id: "header-stacked-story",
       type: "mega",

package/src/Layout/Header/Header.stories.tsx

@@ -20,7 +20,7 @@ export default meta
 export const PrimaryHeader: StoryObj<typeof meta> = {
   play: async ({ canvas, canvasElement, userEvent, step }) => {
     // The mobile toggle only renders below the header's mobile breakpoint.
-    const isMobile = matchMedia("(max-width: 720px)").matches
+    const isMobile = matchMedia("(max-width: 767px)").matches
     if (!isMobile) return
 
     const trigger = canvas.getByRole("button", { name: "Open menu" })
@@ -52,27 +52,40 @@ export const PrimaryHeader: StoryObj<typeof meta> = {
  */
 export const ScreenReaderAnnouncements: StoryObj<typeof meta> = {
   play: async () => {
+    const isMobile = matchMedia("(max-width: 767px)").matches
     const log = await runScreenReaderWalkthrough()
-    await expect(log).toEqual([
-      "document",
-      "banner",
-      "image, Mixtape",
-      "navigation, Primary Navigation",
-      "list",
-      "listitem, level 1, position 1, set size 3",
-      "link, Home",
-      "button, Sub-navigation, not expanded",
-      "end of listitem, level 1, position 1, set size 3",
-      "listitem, level 1, position 2, set size 3",
-      "link, About",
-      "end of listitem, level 1, position 2, set size 3",
-      "listitem, level 1, position 3, set size 3",
-      "link, Contact",
-      "end of listitem, level 1, position 3, set size 3",
-      "end of list",
-      "end of navigation, Primary Navigation",
-      "end of banner",
-      "end of document",
-    ])
+
+    if (isMobile) {
+      await expect(log).toEqual([
+        "document",
+        "banner",
+        "image, Mixtape",
+        "button, Open Menu, 1 control, not expanded",
+        "end of banner",
+        "end of document",
+      ])
+    } else {
+      await expect(log).toEqual([
+        "document",
+        "banner",
+        "image, Mixtape",
+        "navigation, Primary Navigation",
+        "list",
+        "listitem, level 1, position 1, set size 3",
+        "link, Home",
+        "button, Sub-navigation, not expanded",
+        "end of listitem, level 1, position 1, set size 3",
+        "listitem, level 1, position 2, set size 3",
+        "link, About",
+        "end of listitem, level 1, position 2, set size 3",
+        "listitem, level 1, position 3, set size 3",
+        "link, Contact",
+        "end of listitem, level 1, position 3, set size 3",
+        "end of list",
+        "end of navigation, Primary Navigation",
+        "end of banner",
+        "end of document",
+      ])
+    }
   },
 }

package/src/Layout/Header/Header.tsx

@@ -49,7 +49,7 @@ const Header = ({
             <GlobalToggle
               toggleId={id}
               icon={Icons.MENU}
-              name="menu"
+              name="Menu"
               open={isExpanded}
               onClick={() => toggle()}
             />
@@ -70,7 +70,7 @@ const Header = ({
                 title="Primary Navigation"
                 items={navigationItems}
                 mediaQuery={mediaQuery}
-                id={id}
+                id={`${id}-nav`}
               ></NavigationDropdown>
             </Wrapper>
           </div>

package/src/Layout/Header/__snapshots__/Header.stories.ts.snap

@@ -44,13 +44,15 @@ exports[`Controls 1`] = `
 
         </div>
                           
-  <button class="mx-button" type="button">
+<mx-translate class="mx-translate" closeonclick="" data-default-language="en" data-update-trigger-label="true">
+  <button id="unique-1" type="button" class="mx-button mx-button--light mx-button--small mx-translate__trigger mx-popover__trigger notranslate" popovertarget="translate" style="anchor-name: --translate" data-label="Language" aria-label="Language">
     
-    <span>Translate</span>
-    
-<span class="mx-icon mx-icon--chevron-down"></span>
-
+<span class="mx-icon mx-icon--globe"></span>
+    <span class="mx-translate__code">EN</span>
   </button>
+  <div class="mx-popover mx-translate__menu notranslate" id="translate" aria-describedby="unique-1" aria-labelledby="unique-1" style="position-anchor: --translate" data-placement="bottom-start" popover="" role="menu">
+      </div>
+</mx-translate>
 
           </div>
   </div>
@@ -337,13 +339,15 @@ exports[`Stacked 1`] = `
 
               <div class="mx-header__nav-right">
           
-  <button class="mx-button" type="button">
+<mx-translate class="mx-translate" closeonclick="" data-default-language="en" data-update-trigger-label="true">
+  <button id="unique-8" type="button" class="mx-button mx-button--light mx-button--small mx-translate__trigger mx-popover__trigger notranslate" popovertarget="translate" style="anchor-name: --translate" data-label="Language" aria-label="Language">
     
-    <span>Translate</span>
-    
-<span class="mx-icon mx-icon--chevron-down"></span>
-
+<span class="mx-icon mx-icon--globe"></span>
+    <span class="mx-translate__code">EN</span>
   </button>
+  <div class="mx-popover mx-translate__menu notranslate" id="translate" aria-describedby="unique-8" aria-labelledby="unique-8" style="position-anchor: --translate" data-placement="bottom-start" popover="" role="menu">
+      </div>
+</mx-translate>
 
         </div>
           </div>

package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Primary Header 1`] = `"<header class="mx-page mx-header mx-section--s"><div class="mx-header__inner"><div class="mx-header__brand"><img alt="Mixtape" src="mixtape-logo.png"></div><div class="mx-header__main"><div id="_r_0_" class="mx-header__nav mx-header__collapse-toggle"><nav class="mx-nav mx-nav--dropdown" aria-label="Primary Navigation" id="_r_0_"><ul class="mx-nav__level-1"><li class="mx-nav__has-subnav"><a href="http://example.com/#1" class="">Home</a><button aria-controls="_r_1_" aria-expanded="false" class="mx-nav__toggle mx-icon mx-icon--only mx-icon--chevron-down" type="button">Sub-navigation</button></li><li class=""><a href="http://example.com/#2" class="">About</a></li><li class=""><a href="http://example.com/#3" class="">Contact</a></li></ul></nav></div></div></div></header>"`;
+exports[`Primary Header 1`] = `"<header class="mx-page mx-header mx-section--s"><div class="mx-header__inner"><div class="mx-header__brand"><img alt="Mixtape" src="mixtape-logo.png"></div><div class="mx-header__main"><div id="_r_0_" class="mx-header__nav mx-header__collapse-toggle"><nav class="mx-nav mx-nav--dropdown" aria-label="Primary Navigation" id="_r_0_-nav"><ul class="mx-nav__level-1"><li class="mx-nav__has-subnav"><a href="http://example.com/#1" class="">Home</a><button aria-controls="_r_1_" aria-expanded="false" class="mx-nav__toggle mx-icon mx-icon--only mx-icon--chevron-down" type="button">Sub-navigation</button></li><li class=""><a href="http://example.com/#2" class="">About</a></li><li class=""><a href="http://example.com/#3" class="">Contact</a></li></ul></nav></div></div></div></header>"`;
 
-exports[`Screen Reader Announcements 1`] = `"<header class="mx-page mx-header mx-section--s"><div class="mx-header__inner"><div class="mx-header__brand"><img alt="Mixtape" src="mixtape-logo.png"></div><div class="mx-header__main"><div id="_r_7_" class="mx-header__nav mx-header__collapse-toggle"><nav class="mx-nav mx-nav--dropdown" aria-label="Primary Navigation" id="_r_7_"><ul class="mx-nav__level-1"><li class="mx-nav__has-subnav"><a href="http://example.com/#1" class="">Home</a><button aria-controls="_r_8_" aria-expanded="false" class="mx-nav__toggle mx-icon mx-icon--only mx-icon--chevron-down" type="button">Sub-navigation</button></li><li class=""><a href="http://example.com/#2" class="">About</a></li><li class=""><a href="http://example.com/#3" class="">Contact</a></li></ul></nav></div></div></div></header>"`;
+exports[`Screen Reader Announcements 1`] = `"<header class="mx-page mx-header mx-section--s"><div class="mx-header__inner"><div class="mx-header__brand"><img alt="Mixtape" src="mixtape-logo.png"></div><div class="mx-header__main"><div id="_r_7_" class="mx-header__nav mx-header__collapse-toggle"><nav class="mx-nav mx-nav--dropdown" aria-label="Primary Navigation" id="_r_7_-nav"><ul class="mx-nav__level-1"><li class="mx-nav__has-subnav"><a href="http://example.com/#1" class="">Home</a><button aria-controls="_r_8_" aria-expanded="false" class="mx-nav__toggle mx-icon mx-icon--only mx-icon--chevron-down" type="button">Sub-navigation</button></li><li class=""><a href="http://example.com/#2" class="">About</a></li><li class=""><a href="http://example.com/#3" class="">Contact</a></li></ul></nav></div></div></div></header>"`;

package/src/Layout/Header/_header.css

@@ -5,15 +5,17 @@
 @layer design-system.layouts {
   .mx-header__inner {
     display: grid;
-    grid-template-columns: 1fr auto;
+    grid-template-columns: minmax(var(--brand-logo-width, 120px), 1fr) auto;
     align-items: center;
+    gap: var(--header-gap, var(--spacing-xxxs));
   }
 
   .mx-header__brand {
     display: flex;
-    gap: var(--brand-gap, var(--gap));
+    gap: var(--brand-gap, var(--spacing-xxxs) var(--gap));
     align-items: center;
     margin-inline-end: auto;
+    flex-wrap: wrap;
   }
 
   .mx-header__name {

package/src/Layout/Header/_toggles.css

@@ -1,6 +1,7 @@
 /**
  * Global Header
  */
+@import "../../Utility/_mixins.css";
 
 @layer design-system.layouts {
   .mx-header__toggles {
@@ -9,6 +10,7 @@
     padding-inline-end: 2px;
     position: relative;
     z-index: var(--toggle-index, 3);
+    align-self: var(--toggle-align, start);
 
     @media (--global-nav-up) {
       display: none;
@@ -25,22 +27,23 @@
 
   .mx-header__collapse-toggle {
     inline-size: 100%;
-    opacity: 1;
     display: grid;
     position: fixed;
     z-index: var(--collapse-index, 2);
     inset: 0;
     align-items: center;
 
-    @starting-style {
-      opacity: 0;
-      display: grid;
-    }
-
     @media (--global-nav-down) {
+      @add-mixin transition;
+
       padding-inline: var(--gutter, var(--spacing-l));
       grid-template-columns: inherit;
 
+      @starting-style {
+        opacity: 0;
+        display: grid;
+      }
+
       & .mx-header__nav-inner {
         grid-column: full;
       }

package/src/Layout/Page/__snapshots__/Page.stories.tsx.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Page 1`] = `"<div class="mx-page"><header class="mx-page mx-header mx-section--s"><div class="mx-header__inner"><div class="mx-header__brand"><img alt="Mixtape" src="mixtape-logo.png"></div><div class="mx-header__main"><div id="_r_0_" class="mx-header__nav mx-header__collapse-toggle"><nav class="mx-nav mx-nav--dropdown" aria-label="Primary Navigation" id="_r_0_"><ul class="mx-nav__level-1"><li class="mx-nav__has-subnav"><a href="http://example.com/#1" class="">Home</a><button aria-controls="_r_1_" aria-expanded="false" class="mx-nav__toggle mx-icon mx-icon--only mx-icon--chevron-down" type="button">Sub-navigation</button></li><li class=""><a href="http://example.com/#2" class="">About</a></li><li class=""><a href="http://example.com/#3" class="">Contact</a></li></ul></nav></div></div></div></header><main id="main" class="mx-page"><div class="mx-page mx-hero-banner"><div class="mx-hero-banner__inner"><h1 class="mx-headline" id="always-put-your-best">Always put your best foot forward.</h1><p class="mx-text--xl">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p></div></div></main><footer class="mx-footer mx-section--l"><div class="mx-footer__inner"><span class="mx-footer__copyright mx-text--s">© 2022 Company Name</span></div></footer></div>"`;
+exports[`Page 1`] = `"<div class="mx-page"><header class="mx-page mx-header mx-section--s"><div class="mx-header__inner"><div class="mx-header__brand"><img alt="Mixtape" src="mixtape-logo.png"></div><div class="mx-header__main"><div id="_r_0_" class="mx-header__nav mx-header__collapse-toggle"><nav class="mx-nav mx-nav--dropdown" aria-label="Primary Navigation" id="_r_0_-nav"><ul class="mx-nav__level-1"><li class="mx-nav__has-subnav"><a href="http://example.com/#1" class="">Home</a><button aria-controls="_r_1_" aria-expanded="false" class="mx-nav__toggle mx-icon mx-icon--only mx-icon--chevron-down" type="button">Sub-navigation</button></li><li class=""><a href="http://example.com/#2" class="">About</a></li><li class=""><a href="http://example.com/#3" class="">Contact</a></li></ul></nav></div></div></div></header><main id="main" class="mx-page"><div class="mx-page mx-hero-banner"><div class="mx-hero-banner__inner"><h1 class="mx-headline" id="always-put-your-best">Always put your best foot forward.</h1><p class="mx-text--xl">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p></div></div></main><footer class="mx-footer mx-section--l"><div class="mx-footer__inner"><span class="mx-footer__copyright mx-text--s">© 2022 Company Name</span></div></footer></div>"`;