@pnx-mixtape/mxds 0.0.19 → 0.0.21

package/src/Component/Tile/Tile.stories.tsx

@@ -1,21 +1,31 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
-import Component from "./Tile"
+import Card from "../Card/Card"
+import CardContent from "../Card/Components/CardContent"
 import "../Card/card.css"
-import { AsTags, HeadingLevels, TileSizes } from "../../enums"
+import { AsTags, BackgroundStyles } from "../../enums"
+import Heading from "../../Atom/Heading/Heading"
+import Text from "../../Atom/Text/Text"
+import Link from "../../Atom/Link/Link"
+import { HeadingTypes } from "@pnx-mixtape/ids-shape"
 
-const meta: Meta<typeof Component> = {
+const meta: Meta<typeof Card> = {
   tags: ["autodocs"],
-  component: Component,
+  component: Card,
   argTypes: {
-    size: { options: Object.values(TileSizes), control: "radio" },
-    headingLevel: { options: Object.values(HeadingLevels), control: "select" },
     as: { options: Object.values(AsTags), control: "select" },
   },
   args: {
-    title: "Tile title",
-    to: "http://example.com",
-    linkText: "Tile link",
-    size: TileSizes.SMALL,
+    block: true,
+    background: BackgroundStyles.BOX,
+    children: (
+      <CardContent>
+        <Heading as={HeadingTypes.THREE}>Tile title</Heading>
+        <Text>Tiles are just block cards without an image.</Text>
+        <Link more to="http://example.com">
+          Tile link
+        </Link>
+      </CardContent>
+    ),
   },
 }
 
@@ -23,8 +33,3 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Tile: Story = {}
-export const WithContent: Story = {
-  args: {
-    children: <p>Tile with some content</p>,
-  },
-}

package/src/Component/Tile/__snapshots__/Tile.stories.tsx.snap

@@ -1,28 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Tile Tile smoke-test 1`] = `
-<div class="mx-card mx-card--block mx-background--box">
-  <div class="mx-card__content mx-vertical-flow-flex">
-    <h3 class
-        id="tile-title"
-    >
-      Tile title
-    </h3>
-  </div>
-</div>
-`;
-
-exports[`Component/Tile WithContent smoke-test 1`] = `
-<div class="mx-card mx-card--block mx-background--box">
-  <div class="mx-card__content mx-vertical-flow-flex">
-    <h3 class
-        id="tile-title"
-    >
-      Tile title
-    </h3>
-    <p>
-      Tile with some content
-    </p>
-  </div>
+<div class="mx-container">
+  <article class="mx-card mx-card--block mx-background--box">
+    <div class="mx-card__content mx-vertical-flow">
+      <h3 class
+          id="tile-title"
+      >
+        Tile title
+      </h3>
+      <p class>
+        Tiles are just block cards without an image.
+      </p>
+      <a href="http://example.com"
+         class="mx-link mx-link--more"
+      >
+        Tile link
+      </a>
+    </div>
+  </article>
 </div>
 `;

package/src/Layout/Header/Elements/GlobalToggle.ts

@@ -3,6 +3,7 @@
  * @file Handle accessible trigger of menus on small screens.
  */
 
+import { createFocusTrap, FocusTrap } from "focus-trap"
 import {
   DisclosureWidget,
   DisclosureWidgetEvent,
@@ -12,13 +13,19 @@ export default class GlobalToggle extends HTMLElement {
   internals_: ElementInternals
   controller: AbortController
   widget!: DisclosureWidget
+  focusTrap!: FocusTrap
   controls?: string
   mq: string
   triggerText: string
-  closeIconClass: string = "icon--close"
-  menuIconClass: string = "icon--menu"
-  searchIconClass: string = "icon--search"
-  hideMenu: boolean
+  isOpen: boolean = false
+  closeIconClass: string = "mx-icon--close"
+  menuIconClass: string = "mx-icon--menu"
+  searchIconClass: string = "mx-icon--search"
+  backgroundClass: string = "mx-background--primary"
+  scrollLockClass: string = "body--scroll-lock"
+  isSearch?: boolean
+  hideOther?: boolean = true
+  otherTrigger?: HTMLButtonElement | null
 
   constructor() {
     super()
@@ -31,13 +38,39 @@ export default class GlobalToggle extends HTMLElement {
     if (!this.trigger || !this.target) return
 
     this.target?.setAttribute("role", "region")
+
+    const hideOther = this.trigger.getAttribute("hideOther")
+    if (hideOther === "false") this.hideOther = false
+    this.isSearch = this.controls.includes("search")
+    this.otherTrigger = document.querySelector(
+      this.isSearch ? `.${this.menuIconClass}` : `.${this.searchIconClass}`,
+    )
+
     this.widget = new DisclosureWidget(this.trigger, this.target)
     this.widget.init()
+    this.focusTrap = createFocusTrap(this.target, {
+      escapeDeactivates: false,
+      setReturnFocus: this.trigger,
+      allowOutsideClick: true,
+      onActivate: () => document.body.classList.add(this.scrollLockClass),
+      onDeactivate: () => document.body.classList.remove(this.scrollLockClass),
+      checkCanFocusTrap: ([trapContainer]) =>
+        new Promise<void>(resolve => {
+          const interval = setInterval(() => {
+            if (getComputedStyle(trapContainer).visibility !== "hidden") {
+              resolve()
+              clearInterval(interval)
+            }
+          }, 5)
+        }),
+    })
+
     const { signal }: AbortController = this.controller
     this.handleBreakpoint(this.breakpoint)
     this.breakpoint.addEventListener("change", this.handleBreakpoint, {
       signal,
     })
+    document.addEventListener("keydown", this.handleKeyDown, { signal })
   }
 
   disconnectedCallback(): void {
@@ -61,10 +94,12 @@ export default class GlobalToggle extends HTMLElement {
     } else {
       this.widget.detach()
       this.target.removeAttribute("inert")
+      this.target.classList.remove(this.scrollLockClass)
       this.trigger.removeEventListener(
         "disclosure-toggle",
         this.handleDisclosure,
       )
+      this.focusTrap.deactivate()
     }
   }
 
@@ -75,29 +110,27 @@ export default class GlobalToggle extends HTMLElement {
     const replaceText = !isOpen ? "Open" : "Close"
     this.trigger.textContent = this.triggerText.replace(origText, replaceText)
 
-    // Search is a little different.
-    const isSearch = this.controls === "primary-search"
-    if (isSearch) this.handleSearchDisclosure(isOpen)
+    isOpen ? this.focusTrap.activate() : this.focusTrap.deactivate()
+
+    // Close other trigger if it's open.
+    if (isOpen && this.hideOther && this.otherTrigger) {
+      if (this.otherTrigger.getAttribute("aria-expanded") === "true") {
+        this.otherTrigger.click()
+      }
+    }
 
     // Toggle trigger classes.
     this.trigger.classList.toggle(
-      isSearch ? this.searchIconClass : this.menuIconClass,
+      this.isSearch ? this.searchIconClass : this.menuIconClass,
     )
     this.trigger.classList.toggle(this.closeIconClass)
+    this.target.classList.toggle(this.backgroundClass)
+    this.trigger.removeAttribute("no-focus")
+    this.isOpen = isOpen
   }
 
-  handleSearchDisclosure = (isOpen?: boolean): void => {
-    if (this.hideMenu) {
-      // Search trigger should hide the menu trigger.
-      const menuTrigger = document.querySelector(`.${this.menuIconClass}`)
-      menuTrigger.toggleAttribute("hidden")
-    }
-    // Shift focus between search input and trigger.
-    if (!isOpen) {
-      this.trigger.focus()
-    } else {
-      this.target.querySelector("input")?.focus()
-    }
+  handleKeyDown = (event: KeyboardEvent): void => {
+    if (this.isOpen && event.key === "Escape") this.widget.handleToggle()
   }
 
   get trigger(): HTMLButtonElement {
@@ -133,7 +166,8 @@ export default class GlobalToggle extends HTMLElement {
   }
 }
 
-customElements.define("mx-global-toggle", GlobalToggle)
+if (!customElements.get("mx-global-toggle"))
+  customElements.define("mx-global-toggle", GlobalToggle)
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -18,7 +18,7 @@ exports[`Layout/Header Controls smoke-test 1`] = `
       <div class="mx-header__toggles">
         <mx-global-toggle>
           <button aria-controls="unique-0"
-                  class="mx-button mx-button--dark mx-button--icon-only mx-icon mx-icon--menu"
+                  class="mx-button mx-button--icon-only mx-icon mx-icon--menu"
           >
             Open Menu
           </button>
@@ -26,7 +26,7 @@ exports[`Layout/Header Controls smoke-test 1`] = `
       </div>
       <div class="mx-header__main">
         <div id="unique-0"
-             class="mx-header__nav"
+             class="mx-header__nav mx-header__collapse-toggle"
              aria-label="Primary navigation"
              role="region"
         >
@@ -93,7 +93,7 @@ exports[`Layout/Header Header smoke-test 1`] = `
       <div class="mx-header__toggles">
         <mx-global-toggle>
           <button aria-controls="unique-0"
-                  class="mx-button mx-button--dark mx-button--icon-only mx-icon mx-icon--menu"
+                  class="mx-button mx-button--icon-only mx-icon mx-icon--menu"
           >
             Open Menu
           </button>
@@ -101,7 +101,7 @@ exports[`Layout/Header Header smoke-test 1`] = `
       </div>
       <div class="mx-header__main">
         <div id="unique-0"
-             class="mx-header__nav"
+             class="mx-header__nav mx-header__collapse-toggle"
              aria-label="Primary navigation"
              role="region"
         >
@@ -157,7 +157,7 @@ exports[`Layout/Header Search smoke-test 1`] = `
         </a>
       </div>
       <div class="mx-header__toggles">
-        <mx-global-toggle hidemenu>
+        <mx-global-toggle>
           <button aria-controls="unique-0"
                   class="mx-button mx-button--icon-only mx-icon mx-icon--search"
           >
@@ -166,7 +166,7 @@ exports[`Layout/Header Search smoke-test 1`] = `
         </mx-global-toggle>
         <mx-global-toggle>
           <button aria-controls="unique-1"
-                  class="mx-button mx-button--dark mx-button--icon-only mx-icon mx-icon--menu"
+                  class="mx-button mx-button--icon-only mx-icon mx-icon--menu"
           >
             Open Menu
           </button>
@@ -174,7 +174,7 @@ exports[`Layout/Header Search smoke-test 1`] = `
       </div>
       <div class="mx-header__main">
         <div id="unique-0"
-             class="mx-header__nav"
+             class="mx-header__nav mx-header__collapse-toggle"
              aria-label="Primary navigation"
              role="region"
         >
@@ -209,7 +209,7 @@ exports[`Layout/Header Search smoke-test 1`] = `
           </mx-nav>
         </div>
         <div id="unique-1"
-             class="mx-header__search"
+             class="mx-header__search mx-header__collapse-toggle"
              aria-label="Search"
              role="region"
         >
@@ -258,7 +258,7 @@ exports[`Layout/Header Stacked smoke-test 1`] = `
         </a>
       </div>
       <div class="mx-header__toggles">
-        <mx-global-toggle hidemenu>
+        <mx-global-toggle>
           <button aria-controls="unique-0"
                   class="mx-button mx-button--icon-only mx-icon mx-icon--search"
           >
@@ -267,7 +267,7 @@ exports[`Layout/Header Stacked smoke-test 1`] = `
         </mx-global-toggle>
         <mx-global-toggle>
           <button aria-controls="unique-1"
-                  class="mx-button mx-button--dark mx-button--icon-only mx-icon mx-icon--menu"
+                  class="mx-button mx-button--icon-only mx-icon mx-icon--menu"
           >
             Open Menu
           </button>
@@ -275,7 +275,7 @@ exports[`Layout/Header Stacked smoke-test 1`] = `
       </div>
       <div class="mx-header__main">
         <div id="unique-0"
-             class="mx-header__search"
+             class="mx-header__search mx-header__collapse-toggle"
              aria-label="Search"
              role="region"
         >
@@ -306,7 +306,7 @@ exports[`Layout/Header Stacked smoke-test 1`] = `
     </div>
   </header>
   <div id="unique-1"
-       class="mx-header__nav mx-page"
+       class="mx-header__nav mx-page mx-header__collapse-toggle"
        aria-label="Primary navigation"
        role="region"
   >
@@ -474,7 +474,7 @@ exports[`Layout/Header WithTitle smoke-test 1`] = `
       <div class="mx-header__toggles">
         <mx-global-toggle>
           <button aria-controls="unique-0"
-                  class="mx-button mx-button--dark mx-button--icon-only mx-icon mx-icon--menu"
+                  class="mx-button mx-button--icon-only mx-icon mx-icon--menu"
           >
             Open Menu
           </button>
@@ -482,7 +482,7 @@ exports[`Layout/Header WithTitle smoke-test 1`] = `
       </div>
       <div class="mx-header__main">
         <div id="unique-0"
-             class="mx-header__nav"
+             class="mx-header__nav mx-header__collapse-toggle"
              aria-label="Primary navigation"
              role="region"
         >

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

@@ -4,12 +4,12 @@ exports[`Layout/Header PrimaryHeader smoke-test 1`] = `
 <header class="mx-page mx-header mx-section--s">
   <div class="mx-header__inner">
     <div class="mx-header__brand">
-      <a href="https://mixtape.pnx.io/"
+      <a href="https://mxds.pnx.io/"
          class="mx-logo"
       >
         <img alt="Mixtape"
              loading="eager"
-             src="https://mixtape.pnx.io/images/mixtape-logo.png"
+             src="https://mxds.pnx.io/images/mixtape-logo.png"
         >
       </a>
     </div>

package/src/Layout/Header/_header.css

@@ -4,7 +4,6 @@
 
 @layer design-system.layouts {
   .mx-header__inner {
-    position: relative;
     display: grid;
     grid-template-columns: 1fr auto;
     align-items: center;
@@ -27,53 +26,9 @@
     align-items: center;
   }
 
-  .mx-header__nav {
-    inline-size: 100%;
-    opacity: 1;
-    display: grid;
-
-    @starting-style {
-      opacity: 0;
-      display: grid;
-    }
-
-    @media (--global-nav-up) {
-      z-index: 2;
-      position: relative;
-      inline-size: auto;
-      block-size: auto;
-    }
-
-    &[inert] {
-      display: none;
-      opacity: 0;
-      transition-duration: 0.4s;
-    }
-  }
-
   .mx-header__search {
-    position: absolute;
-    z-index: 2;
-    inset-block-start: 2px;
-    inset-inline-start: 0;
-    inline-size: 100%;
-    opacity: 1;
-    display: flex;
-
-    @starting-style {
-      opacity: 0;
-      display: grid;
-    }
-
-    @media (--global-nav-up) {
-      position: relative;
-      inline-size: auto;
-    }
-
-    &[inert] {
-      display: none;
-      opacity: 0;
-      transition-duration: 0.4s;
+    & form {
+      margin-block: var(--spacing-m);
     }
 
     & input {

package/src/Layout/Header/_toggles.css

@@ -23,9 +23,45 @@
     }
   }
 
-  .global-nav-up-only {
+  .mx-header__collapse-toggle {
+    inline-size: 100%;
+    opacity: 1;
+    display: grid;
+    position: fixed;
+    inset: 0;
+    align-items: center;
+
+    @starting-style {
+      opacity: 0;
+      display: grid;
+    }
+
     @media (--global-nav-down) {
+      padding-inline: var(--gutter, var(--spacing-l));
+      grid-template-columns: inherit;
+
+      & .mx-header__nav-inner {
+        grid-column: full;
+      }
+    }
+
+    @media (--global-nav-up) {
+      z-index: 2;
+      position: relative;
+      inline-size: auto;
+      block-size: auto;
+    }
+
+    &[inert] {
       display: none;
+      opacity: 0;
+      transition-duration: 0.4s;
     }
   }
 }
+
+.global-nav-up-only {
+  @media (--global-nav-down) {
+    display: none;
+  }
+}

package/src/Layout/Header/header.twig

@@ -21,21 +21,21 @@
     {% if navigation is not empty or search is not empty %}
     <div class="mx-header__toggles">
       {% if search is not empty %}
-        <mx-global-toggle hideMenu><button aria-controls="primary-search" class="mx-button mx-button--icon-only mx-icon mx-icon--search" disabled>Open Search</button></mx-global-toggle>
+        <mx-global-toggle><button aria-controls="primary-search" class="mx-button mx-button--icon-only mx-icon mx-icon--search" disabled>Open Search</button></mx-global-toggle>
       {% endif %}
       {% if navigation is not empty %}
-        <mx-global-toggle><button aria-controls="primary-nav" class="mx-button mx-button--dark mx-button--icon-only mx-icon mx-icon--menu" disabled>Open Menu</button></mx-global-toggle>
+        <mx-global-toggle><button aria-controls="primary-nav" class="mx-button mx-button--icon-only mx-icon mx-icon--menu" disabled>Open Menu</button></mx-global-toggle>
       {% endif %}
     </div>
     {% endif %}
     <div class="mx-header__main">
       {% if navigation is not empty and not stacked %}
-        <div id="primary-nav" class="mx-header__nav global-nav-up-only" aria-label="Primary navigation">
+        <div id="primary-nav" class="mx-header__nav mx-header__collapse-toggle global-nav-up-only" aria-label="Primary navigation">
           {{ navigation }}
         </div>
       {% endif %}
       {% if search is not empty %}
-        <div id="primary-search" class="mx-header__search global-nav-up-only" aria-label="Search">
+        <div id="primary-search" class="mx-header__search mx-header__collapse-toggle global-nav-up-only" aria-label="Search">
           {{ search }}
         </div>
       {% endif %}
@@ -48,7 +48,7 @@
   </div>
 </header>
 {% if stacked and (navigation is not empty or controls is not empty) %}
-  <div id="primary-nav" class="mx-header__nav mx-page global-nav-up-only" aria-label="Primary navigation">
+  <div id="primary-nav" class="mx-header__nav mx-page mx-header__collapse-toggle global-nav-up-only" aria-label="Primary navigation">
     <div class="mx-header__nav-inner">
       {{ navigation }}
       {% if controls is not empty %}

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

@@ -2,6 +2,10 @@ import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Page"
 import { mixtapeHeader, mixtapeFooter } from "../../../mockups/constants"
 import HeroBanner from "../../Component/HeroBanner/HeroBanner"
+import Heading from "../../Atom/Heading/Heading"
+import { HeadingTypes } from "@pnx-mixtape/ids-shape"
+import { HeadingStyles, TextStyles } from "../../enums"
+import Text from "../../Atom/Text/Text"
 
 const meta: Meta<typeof Component> = {
   component: Component,
@@ -9,10 +13,15 @@ const meta: Meta<typeof Component> = {
     header: mixtapeHeader,
     footer: mixtapeFooter,
     children: (
-      <HeroBanner
-        title="Always put your best foot forward."
-        subtitle="Make the most of the opportunity by encouraging an action and keeping your copy clear and concise."
-      />
+      <HeroBanner>
+        <Heading as={HeadingTypes.ONE} modifier={HeadingStyles.HEADLINE}>
+          Always put your best foot forward.
+        </Heading>
+        <Text modifier={TextStyles.XL}>
+          Make the most of the opportunity by encouraging an action and keeping
+          your copy clear and concise.
+        </Text>
+      </HeroBanner>
     ),
   },
 }

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

@@ -5,12 +5,12 @@ exports[`Layout/Page Page smoke-test 1`] = `
   <header class="mx-page mx-header mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
-        <a href="https://mixtape.pnx.io/"
+        <a href="https://mxds.pnx.io/"
            class="mx-logo"
         >
           <img alt="Mixtape"
                loading="eager"
-               src="https://mixtape.pnx.io/images/mixtape-logo.png"
+               src="https://mxds.pnx.io/images/mixtape-logo.png"
           >
         </a>
       </div>

package/src/Layout/Page/page.css

@@ -7,7 +7,7 @@
     --plus: token("size.container.plus");
     --minus: token("size.container.minus");
     --diff: calc(var(--plus) - var(--minus));
-    --gutter: clamp(var(--spacing-s), 6vw, var(--spacing-l));
+    --gutter: clamp(var(--gutter-min), 6vw, var(--gutter-max));
     --full: minmax(var(--gutter), 1fr);
     --narrow: min(var(--container-max-width), 100% - (var(--gutter) * 2));
     --feature: minmax(0, var(--minus));

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Section Default smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page undefined">
   <div class="mx-page mx-section--xl mx-page--feature">
     <p>
       Some content
@@ -11,7 +11,7 @@ exports[`Layout/Section Default smoke-test 1`] = `
 `;
 
 exports[`Layout/Section List smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page undefined">
   <ul class="mx-page mx-section--s">
     <li>
       Item 1
@@ -27,7 +27,7 @@ exports[`Layout/Section List smoke-test 1`] = `
 `;
 
 exports[`Layout/Section Varied smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page undefined">
   <aside class="mx-page mx-section--top-m mx-section--bottom-xl">
     <p>
       Some content

package/src/Layout/Section/__snapshots__/SectionGrid.stories.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Section/SectionGrid List smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page undefined">
   <div class="mx-section--xl">
     <ul class="mx-grid mx-container">
       <li>
@@ -19,7 +19,7 @@ exports[`Layout/Section/SectionGrid List smoke-test 1`] = `
 `;
 
 exports[`Layout/Section/SectionGrid SectionGrid smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page undefined">
   <div class="mx-section--xl">
     <div class="mx-grid">
       <div>

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Sidebar NoSidebar smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page undefined">
   <div class="mx-grid--sidebar">
     <section>
       <p>
@@ -13,7 +13,7 @@ exports[`Layout/Sidebar NoSidebar smoke-test 1`] = `
 `;
 
 exports[`Layout/Sidebar Reverse smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page undefined">
   <div class="mx-grid--sidebar">
     <aside>
       <p>
@@ -30,7 +30,7 @@ exports[`Layout/Sidebar Reverse smoke-test 1`] = `
 `;
 
 exports[`Layout/Sidebar Sidebar smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page undefined">
   <div class="mx-grid--sidebar">
     <section>
       <p>

package/src/Utility/utilities.css

@@ -22,6 +22,14 @@
   [hidden] {
     display: none;
   }
+
+  /* Prevent scrolling on the body. */
+  .body--scroll-lock,
+  .body-dialog--open {
+    overflow: hidden;
+    position: fixed;
+    inline-size: 100vw;
+  }
 }
 
 /**