@pnx-mixtape/mxds 0.0.21 → 0.0.23

package/src/Layout/Grid/Grid.stories.ts

@@ -2,13 +2,11 @@ import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./grid.twig"
 import GridItem from "./grid-item.twig"
 import "./grid.css"
-import {
-  AsTypes,
-  Grid as GridType,
-  GridModifiers,
-  SectionTypes,
-} from "@pnx-mixtape/ids-shape"
+import { AsTypes, Grid as GridType, GridModifiers, SectionTypes } from "@pnx-mixtape/ids-shape"
 
+/**
+ * A CSS grid that is dynamic by default.
+ */
 const meta: Meta<GridType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
@@ -22,14 +20,33 @@ const meta: Meta<GridType> = {
       GridItem({ item: ["<span>item 6</span>"] }),
     ],
     as: SectionTypes.DIV,
-    modifiers: [GridModifiers.SM_2, GridModifiers.LG_4],
   },
   argTypes: {
     modifiers: {
+      description: "Grid modifiers.",
       options: Object.values(GridModifiers),
       control: "multi-select",
     },
-    as: { options: Object.values(SectionTypes), control: "select" },
+    as: {
+      description:
+        "Change the wrapper html element. When using lists make sure to also change the GridItem `as=li`",
+      options: Object.values(SectionTypes),
+      control: "select",
+      table: {
+        defaultValue: { summary: SectionTypes.DIV },
+      },
+    },
+    items: {
+      description: "A list of [GridItem](/?path=/docs/layout-grid-griditem--docs) objects.",
+      type: {
+        name: "other",
+        required: true,
+        value: "array",
+      },
+      table: {
+        type: { summary: "GridItem" },
+      },
+    },
   },
 }
 
@@ -38,6 +55,18 @@ type Story = StoryObj<GridType>
 
 export const Grid: Story = {}
 
+/**
+ * Column widths can be set for all or combined to control columns and specific breakpoints.
+ */
+export const Breakpoints: Story = {
+  args: {
+    modifiers: [GridModifiers.SM_2, GridModifiers.LG_4],
+  },
+}
+
+/**
+ * When using Grid as a list, be sure to set the GridItem `as=li`
+ */
 export const List: Story = {
   args: {
     as: SectionTypes.LIST,
@@ -55,6 +84,9 @@ export const List: Story = {
   },
 }
 
+/**
+ * GridItems can span multiple columns.
+ */
 export const Span: Story = {
   args: {
     modifiers: [GridModifiers.SM_2, GridModifiers.MD_3],

package/src/Layout/Grid/Grid.tsx

@@ -25,8 +25,7 @@ const Grid = ({
 
   const colClasses = useMemo<string[]>(() => {
     if (!cols) return []
-    if (Array.isArray(cols))
-      return cols.map((col: GridModifiers) => `mx-grid--cols-${col}`)
+    if (Array.isArray(cols)) return cols.map((col: GridModifiers) => `mx-grid--cols-${col}`)
     return [`mx-grid--cols-${cols}`]
   }, [cols])
 

package/src/Layout/Grid/GridItem.stories.ts

@@ -0,0 +1,63 @@
+import { Meta, StoryObj } from "@storybook/html-vite"
+import Component from "./grid-item.twig"
+import "./grid.css"
+import {
+  AsTypes,
+  GridItem as GridItemType,
+  GridModifiers,
+  SectionTypes,
+} from "@pnx-mixtape/ids-shape"
+
+/**
+ * Individual Grid Items have similar options, but aren't designed to be used outside th parent Grid context.
+ */
+const meta: Meta<GridItemType> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    // @ts-expect-error item is a collection.
+    item: ["<span>item 1</span>"],
+    as: AsTypes.DIV,
+  },
+  argTypes: {
+    modifiers: {
+      description: "Span modifiers.",
+      options: Object.values(GridModifiers),
+      control: "multi-select",
+    },
+    as: {
+      description:
+        "Change the wrapper html element. When using lists on the Parent grid make sure to also change the GridItem `as=li`",
+      options: Object.values(AsTypes),
+      control: "select",
+      table: {
+        defaultValue: { summary: SectionTypes.DIV },
+      },
+    },
+    item: {
+      description: "The content of the GridItem (can be anything)",
+      type: {
+        name: "other",
+        required: true,
+        value: "array",
+      },
+      table: {
+        type: { summary: "string | HTMLElement" },
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<GridItemType>
+
+export const GridItem: Story = {}
+
+/**
+ * Column spans can be set for all or combined to control columns and specific breakpoints. See [span example](/?path=/docs/layout-grid--docs#span-12)
+ */
+export const Breakpoints: Story = {
+  args: {
+    modifiers: [GridModifiers.SM_2, GridModifiers.LG_4],
+  },
+}

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

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Layout/Grid Grid smoke-test 1`] = `
+exports[`Layout/Grid Breakpoints smoke-test 1`] = `
 <div class="mx-page default">
   <div class="mx-grid mx-grid--cols-sm-2 mx-grid--cols-lg-4">
     <span>
@@ -25,13 +25,38 @@ exports[`Layout/Grid Grid smoke-test 1`] = `
 </div>
 `;
 
+exports[`Layout/Grid Grid smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-grid">
+    <span>
+      item 1
+    </span>
+    <span>
+      item 2
+    </span>
+    <span>
+      item 3
+    </span>
+    <span>
+      item 4
+    </span>
+    <span>
+      item 5
+    </span>
+    <span>
+      item 6
+    </span>
+  </div>
+</div>
+`;
+
 exports[`Layout/Grid List smoke-test 1`] = `
 <div class="mx-page default">
   <ul class="mx-grid mx-grid--cols-sm-2">
-    <li class>
+    <li>
       list item 1
     </li>
-    <li class>
+    <li>
       list item 2
     </li>
   </ul>

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Layout/Grid Breakpoints smoke-test 1`] = `
 <div class="mx-grid mx-grid--cols-md-2 mx-grid--cols-lg-4">

package/src/Layout/Grid/__snapshots__/GridItem.stories.ts.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Layout/Grid/GridItem Breakpoints smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-grid-item__span-sm-2 mx-grid-item__span-lg-4">
+    <span>
+      item 1
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Layout/Grid/GridItem GridItem smoke-test 1`] = `
+<div class="mx-page default">
+  <span>
+    item 1
+  </span>
+</div>
+`;

package/src/Layout/Grid/grid-item.twig

@@ -7,18 +7,12 @@
 
 {% if container %}
   <{{ as }}{{ attributes.addClass("mx-container") }}>
-    {% for i in item %}
-      {{ i }}
-    {% endfor %}
+    {{ item }}
   </{{ as }}>
 {% elseif classes is not empty or as != "div" %}
   <{{ as }}{{ attributes }}>
-    {% for i in item %}
-      {{ i }}
-    {% endfor %}
+    {{ item }}
   </{{ as }}>
 {% else %}
-  {% for i in item %}
-    {{ i }}
-  {% endfor %}
+  {{ item }}
 {% endif %}

package/src/Layout/Grid/grid.css

@@ -8,10 +8,7 @@
     --grid-min: 20ch;
 
     display: grid;
-    grid-template-columns: repeat(
-      var(--grid-repeat),
-      minmax(min(100%, var(--grid-min)), 1fr)
-    );
+    grid-template-columns: repeat(var(--grid-repeat), minmax(min(100%, var(--grid-min)), 1fr));
     grid-template-rows: 1fr;
     gap: var(--grid-gap, var(--gap));
 

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

@@ -4,10 +4,7 @@
  */
 
 import { createFocusTrap, FocusTrap } from "focus-trap"
-import {
-  DisclosureWidget,
-  DisclosureWidgetEvent,
-} from "../../../Utility/utilities"
+import { DisclosureWidget, DisclosureWidgetEvent } from "../../../Utility/utilities"
 
 export default class GlobalToggle extends HTMLElement {
   internals_: ElementInternals
@@ -78,27 +75,18 @@ export default class GlobalToggle extends HTMLElement {
     this.controller.abort()
   }
 
-  handleBreakpoint = ({
-    matches,
-  }: MediaQueryList | MediaQueryListEvent): void => {
+  handleBreakpoint = ({ matches }: MediaQueryList | MediaQueryListEvent): void => {
     if (!this.trigger) return
     const { signal }: AbortController = this.controller
     if (matches) {
       this.widget.attach()
       this.target.setAttribute("inert", "")
-      this.trigger.addEventListener(
-        "disclosure-toggle",
-        this.handleDisclosure,
-        { signal },
-      )
+      this.trigger.addEventListener("disclosure-toggle", this.handleDisclosure, { signal })
     } else {
       this.widget.detach()
       this.target.removeAttribute("inert")
       this.target.classList.remove(this.scrollLockClass)
-      this.trigger.removeEventListener(
-        "disclosure-toggle",
-        this.handleDisclosure,
-      )
+      this.trigger.removeEventListener("disclosure-toggle", this.handleDisclosure)
       this.focusTrap.deactivate()
     }
   }
@@ -120,9 +108,7 @@ export default class GlobalToggle extends HTMLElement {
     }
 
     // Toggle trigger classes.
-    this.trigger.classList.toggle(
-      this.isSearch ? this.searchIconClass : this.menuIconClass,
-    )
+    this.trigger.classList.toggle(this.isSearch ? this.searchIconClass : this.menuIconClass)
     this.trigger.classList.toggle(this.closeIconClass)
     this.target.classList.toggle(this.backgroundClass)
     this.trigger.removeAttribute("no-focus")
@@ -134,8 +120,7 @@ export default class GlobalToggle extends HTMLElement {
   }
 
   get trigger(): HTMLButtonElement {
-    const trigger: HTMLButtonElement | null =
-      this.querySelector(":scope > button")
+    const trigger: HTMLButtonElement | null = this.querySelector(":scope > button")
     const controls = trigger.getAttribute("aria-controls")
     if (!trigger || !controls) {
       throw new Error(
@@ -149,13 +134,9 @@ export default class GlobalToggle extends HTMLElement {
   }
 
   get target(): HTMLDivElement {
-    const target: HTMLDivElement | null = document.querySelector(
-      `div[id="${this.controls}"]`,
-    )
+    const target: HTMLDivElement | null = document.querySelector(`div[id="${this.controls}"]`)
     if (!target) {
-      throw new Error(
-        `${this.localName} must contain a target <div id="${this.controls}">.`,
-      )
+      throw new Error(`${this.localName} must contain a target <div id="${this.controls}">.`)
     }
     target.classList.remove("global-nav-up-only")
     return target
@@ -166,8 +147,7 @@ export default class GlobalToggle extends HTMLElement {
   }
 }
 
-if (!customElements.get("mx-global-toggle"))
-  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

@@ -1,19 +1,15 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Layout/Header Controls smoke-test 1`] = `
 <div class="mx-page default">
   <header class="mx-header mx-page mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
-        <a class="mx-logo"
-           href="/"
+        <img alt="Mixtape"
+             src="./mixtape-logo.png"
+             width="120"
+             height
         >
-          <img alt="Mixtape"
-               src="./mixtape-logo.png"
-               width="120"
-               height
-          >
-        </a>
       </div>
       <div class="mx-header__toggles">
         <mx-global-toggle>
@@ -60,13 +56,13 @@ exports[`Layout/Header Controls smoke-test 1`] = `
             </nav>
           </mx-nav>
         </div>
-        <button class="mx-button "
+        <button class="mx-button"
                 type="button"
         >
           <span>
             Translate
           </span>
-          <span class="mx-icon mx-icon--chevron-down ">
+          <span class="mx-icon mx-icon--chevron-down">
           </span>
         </button>
       </div>
@@ -80,15 +76,11 @@ exports[`Layout/Header Header smoke-test 1`] = `
   <header class="mx-header mx-page mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
-        <a class="mx-logo"
-           href="/"
+        <img alt="Mixtape"
+             src="./mixtape-logo.png"
+             width="120"
+             height
         >
-          <img alt="Mixtape"
-               src="./mixtape-logo.png"
-               width="120"
-               height
-          >
-        </a>
       </div>
       <div class="mx-header__toggles">
         <mx-global-toggle>
@@ -146,15 +138,11 @@ exports[`Layout/Header Search smoke-test 1`] = `
   <header class="mx-header mx-page mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
-        <a class="mx-logo"
-           href="/"
+        <img alt="Mixtape"
+             src="./mixtape-logo.png"
+             width="120"
+             height
         >
-          <img alt="Mixtape"
-               src="./mixtape-logo.png"
-               width="120"
-               height
-          >
-        </a>
       </div>
       <div class="mx-header__toggles">
         <mx-global-toggle>
@@ -247,15 +235,11 @@ exports[`Layout/Header Stacked smoke-test 1`] = `
   <header class="mx-header mx-page mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
-        <a class="mx-logo"
-           href="/"
+        <img alt="Mixtape"
+             src="./mixtape-logo.png"
+             width="120"
+             height
         >
-          <img alt="Mixtape"
-               src="./mixtape-logo.png"
-               width="120"
-               height
-          >
-        </a>
       </div>
       <div class="mx-header__toggles">
         <mx-global-toggle>
@@ -435,13 +419,13 @@ exports[`Layout/Header Stacked smoke-test 1`] = `
         </nav>
       </mx-nav>
       <div class="mx-header__nav-right">
-        <button class="mx-button "
+        <button class="mx-button"
                 type="button"
         >
           <span>
             Translate
           </span>
-          <span class="mx-icon mx-icon--chevron-down ">
+          <span class="mx-icon mx-icon--chevron-down">
           </span>
         </button>
       </div>
@@ -455,15 +439,11 @@ exports[`Layout/Header WithTitle smoke-test 1`] = `
   <header class="mx-header mx-page mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
-        <a class="mx-logo"
-           href="/"
+        <img alt="Mixtape"
+             src="./mixtape-logo.png"
+             width="120"
+             height
         >
-          <img alt="Mixtape"
-               src="./mixtape-logo.png"
-               width="120"
-               height
-          >
-        </a>
         <div class="mx-header__name">
           <strong>
             Design System

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Layout/Header PrimaryHeader smoke-test 1`] = `
 <header class="mx-page mx-header mx-section--s">
@@ -14,12 +14,12 @@ exports[`Layout/Header PrimaryHeader smoke-test 1`] = `
       </a>
     </div>
     <div class="mx-header__main">
-      <div id="«r0»"
+      <div id="_r_0_"
            class="mx-header__nav"
       >
         <nav class="mx-nav mx-nav--dropdown"
              aria-label="Primary Navigation"
-             id="«r0»"
+             id="_r_0_"
         >
           <ul class="mx-nav__level-1">
             <li class="mx-nav__has-subnav">

package/src/Layout/Header/_toggles.css

@@ -8,7 +8,7 @@
     gap: var(--toggle-gap, var(--spacing-xs));
     padding-inline-end: 2px;
     position: relative;
-    z-index: 1;
+    z-index: var(--toggle-index, 3);
 
     @media (--global-nav-up) {
       display: none;
@@ -28,6 +28,7 @@
     opacity: 1;
     display: grid;
     position: fixed;
+    z-index: var(--collapse-index, 2);
     inset: 0;
     align-items: center;
 
@@ -46,7 +47,6 @@
     }
 
     @media (--global-nav-up) {
-      z-index: 2;
       position: relative;
       inline-size: auto;
       block-size: auto;

package/src/Layout/Header/header.twig

@@ -9,7 +9,7 @@
   <div class="mx-header__inner">
     {% if logo is not empty or title is not empty or description is not empty %}
       <div class="mx-header__brand">
-        <a class="mx-logo" href="/">{{ logo }}</a>
+        {{ logo }}
         {% if title is not empty or description is not empty %}
           <div class="mx-header__name">
             {% if title is not empty %}<strong>{{ title }}</strong>{% endif %}

package/src/Layout/Masthead/Masthead.stories.ts

@@ -3,10 +3,7 @@ import Component from "./masthead.twig"
 import Link from "../../Atom/Link/link.twig"
 import Icon from "../../Atom/Icon/icon.twig"
 import "./masthead.css"
-import {
-  Masthead as MastheadType,
-  MastheadModifier,
-} from "@pnx-mixtape/ids-shape"
+import { Masthead as MastheadType, MastheadModifier } from "@pnx-mixtape/ids-shape"
 import { Icons } from "../../enums"
 
 const meta: Meta<MastheadType> = {

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Layout/Masthead Light smoke-test 1`] = `
 <div class="mx-page default">
@@ -77,14 +77,14 @@ exports[`Layout/Masthead WithLinks smoke-test 1`] = `
            aria-label="Additional links"
       >
         <a href="#">
-          <span class="mx-icon mx-icon--user ">
+          <span class="mx-icon mx-icon--user">
           </span>
           <span>
             Create account
           </span>
         </a>
         <a href="#">
-          <span class="mx-icon mx-icon--login ">
+          <span class="mx-icon mx-icon--login">
           </span>
           <span>
             Log in

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

@@ -18,8 +18,8 @@ const meta: Meta<typeof Component> = {
           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.
+          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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Layout/Page Page smoke-test 1`] = `
 <div class="mx-page">
@@ -15,12 +15,12 @@ exports[`Layout/Page Page smoke-test 1`] = `
         </a>
       </div>
       <div class="mx-header__main">
-        <div id="«r0»"
+        <div id="_r_0_"
              class="mx-header__nav"
         >
           <nav class="mx-nav mx-nav--dropdown"
                aria-label="Primary Navigation"
-               id="«r0»"
+               id="_r_0_"
           >
             <ul class="mx-nav__level-1">
               <li class="mx-nav__has-subnav">

package/src/Layout/Page/page.css

@@ -23,11 +23,7 @@
       var(--container) [container-end]
       var(--full) [full-end];
 
-    &
-      > :where(
-        *:not(.mx-page, [class*="mx-background--"]),
-        .mx-background--box
-      ) {
+    & > :where(*:not(.mx-page, [class*="mx-background--"]), .mx-background--box) {
       grid-column: var(--grid-column, container);
     }
 
@@ -37,11 +33,7 @@
       display: grid;
       grid-template-columns: subgrid;
 
-      &
-        > :where(
-          *:not(.mx-page, [class*="mx-background--"]),
-          .mx-background--box
-        ) {
+      & > :where(*:not(.mx-page, [class*="mx-background--"]), .mx-background--box) {
         grid-column: var(--grid-column, container);
       }
     }