@pnx-mixtape/mxds 0.0.30 → 0.1.0-rc.1

package/src/Component/ListItem/__snapshots__/ListItem.stories.ts.snap

@@ -2,7 +2,6 @@
 
 exports[`Block Link 1`] = `
 "  
-<div class="mx-container">
 <article class="mx-card mx-list-item mx-card--block">
   <div class="mx-card__content mx-vertical-flow">
             <div class="mx-heading--l">
@@ -18,13 +17,11 @@ exports[`Block Link 1`] = `
     
   </div>
   </article>
-</div>
 "
 `;
 
 exports[`Image Reverse 1`] = `
 "  
-<div class="mx-container">
 <article class="mx-card mx-list-item mx-card--collapse mx-card--reversed">
   <div class="mx-card__content mx-vertical-flow">
           <strong class="mx-text--s">Publication</strong>
@@ -48,13 +45,11 @@ exports[`Image Reverse 1`] = `
 
     </figure>
   </article>
-</div>
 "
 `;
 
 exports[`List Item 1`] = `
 "
-<div class="mx-container">
 <article class="mx-card mx-list-item">
   <div class="mx-card__content mx-vertical-flow">
             <div class="mx-heading--l">
@@ -70,13 +65,11 @@ exports[`List Item 1`] = `
     
   </div>
   </article>
-</div>
 "
 `;
 
 exports[`With Image 1`] = `
 "
-<div class="mx-container">
 <article class="mx-card mx-list-item mx-card--collapse">
   <div class="mx-card__content mx-vertical-flow">
           <strong class="mx-text--s">Publication</strong>
@@ -100,13 +93,11 @@ exports[`With Image 1`] = `
 
     </figure>
   </article>
-</div>
 "
 `;
 
 exports[`With Info 1`] = `
 "
-<div class="mx-container">
 <article class="mx-card mx-list-item">
   <div class="mx-card__content mx-vertical-flow">
           <strong class="mx-text--s">Publication</strong>
@@ -124,13 +115,11 @@ exports[`With Info 1`] = `
     
   </div>
   </article>
-</div>
 "
 `;
 
 exports[`With Tags 1`] = `
 "
-<div class="mx-container">
 <article class="mx-card mx-list-item">
   <div class="mx-card__content mx-vertical-flow">
           <strong class="mx-text--s">Resource</strong>
@@ -146,23 +135,26 @@ exports[`With Tags 1`] = `
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     
 <ul class="mx-tags">
-      <li>
-                    <span class="mx-tag">Music</span>
-            </li>
-      <li>
-                    <span class="mx-tag">News</span>
-            </li>
-  </ul>
+  <li>
+            <span class="mx-tag">
+          Music
+                  </span>
+    </li>
+<li>
+            <span class="mx-tag">
+          News
+                  </span>
+    </li>
+
+</ul>
 
   </div>
   </article>
-</div>
 "
 `;
 
 exports[`With Url 1`] = `
 "
-<div class="mx-container">
 <article class="mx-card mx-list-item">
   <div class="mx-card__content mx-vertical-flow">
             <div class="mx-heading--l">
@@ -179,6 +171,5 @@ exports[`With Url 1`] = `
     
   </div>
   </article>
-</div>
 "
 `;

package/src/Component/ListItem/list-item.css

@@ -7,6 +7,24 @@
     --media-col: var(--image-width, 200px);
     --ratio: 1;
     --large-card-gap: var(--gap-l);
+    --card-alignment: start;
+
+    &:where(:not(:first-child)) {
+      border-block-start: var(--line-width, 1px) solid var(--line-colour, var(--colour-border));
+      padding-block-start: var(--gap);
+      margin-block-start: var(--gap);
+    }
+
+    &:has(.mx-card__media) {
+      @media (--collapse-card-up) {
+        grid-template: "media content" 1fr / var(--media-col, 1fr) var(--content-col, 1fr);
+
+        &.mx-card--reversed {
+          grid-template-areas: "content media";
+          grid-template-columns: var(--content-col, 1fr) var(--media-col, 1fr);
+        }
+      }
+    }
 
     & .mx-card__content {
       --flow-gap: var(--gap-s);
@@ -28,13 +46,3 @@
     }
   }
 }
-
-:is(.mx-list-item, .mx-container:has(> .mx-list-item)) {
-  @media (--collapse-card-up) {
-    &:where(:not(:first-child)) {
-      border-block-start: var(--line-width, 1px) solid var(--line-colour, var(--colour-border));
-      padding-block-start: var(--gap);
-      margin-block-start: var(--gap);
-    }
-  }
-}

package/src/Component/ListItem/list-item.twig

@@ -9,7 +9,6 @@
 {% endfor %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
-<div class="mx-container">
 <article{{ attributes }}>
   <div class="mx-card__content mx-vertical-flow">
     {% if label is not empty %}
@@ -33,4 +32,3 @@
     </figure>
   {% endif %}
 </article>
-</div>

package/src/Component/Navigation/Components/DropdownLevel.tsx

@@ -6,8 +6,8 @@ import {
   useId,
 } from "react"
 import classNames from "classnames"
+import { useDisclosureState } from "react-stately"
 import Link from "../../../Atom/Link/Link"
-import useToggle from "../../../Utility/Hooks/useToggle"
 import { NavigationItem } from "../Navigation"
 
 type NavigationDropdownLevelProps = ComponentPropsWithoutRef<"li"> & {
@@ -22,7 +22,7 @@ const DropdownLevel = ({
   className = null,
   ...props
 }: NavigationDropdownLevelProps): JSX.Element => {
-  const [on, toggle] = useToggle(false)
+  const { isExpanded, toggle, expand, collapse } = useDisclosureState({ defaultExpanded: false })
   const dropdownId: string = useId()
 
   const handleClick: MouseEventHandler = (): void => {
@@ -34,12 +34,12 @@ const DropdownLevel = ({
     switch (key) {
       case "Escape":
       case "ArrowUp":
-        toggle(false)
+        collapse()
         break
       case "ArrowDown":
       case "Space":
       case "Enter":
-        toggle(true)
+        expand()
         break
       default:
         break
@@ -48,12 +48,12 @@ const DropdownLevel = ({
 
   const handleMouseEnter: MouseEventHandler = (): void => {
     if (isMobile) return
-    toggle(true)
+    expand()
   }
 
   const handleMouseLeave: MouseEventHandler = (): void => {
     if (isMobile) return
-    toggle(false)
+    collapse()
   }
 
   return (
@@ -75,16 +75,16 @@ const DropdownLevel = ({
             onClick={handleClick}
             onKeyDown={handleKeyDown}
             aria-controls={dropdownId}
-            aria-expanded={on}
+            aria-expanded={isExpanded}
             className={classNames("mx-nav__toggle", "mx-icon", "mx-icon--only", {
-              "mx-icon--chevron-down": !on,
-              "mx-icon--chevron-up": on,
+              "mx-icon--chevron-down": !isExpanded,
+              "mx-icon--chevron-up": isExpanded,
             })}
             type="button"
           >
             Sub-navigation
           </button>
-          {on && (
+          {isExpanded && (
             <ul id={dropdownId} className={classNames("mx-nav__level-2", "mx-nav--open")}>
               {item.items.map(subitem => (
                 <li key={subitem.id} className={classNames(subitem.className)}>

package/src/Component/Navigation/Dropdown.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
+import { expect } from "storybook/test"
 import Component from "./Dropdown"
 import "./navigation.css"
 import { Page } from "../../../.storybook-react/decorators"
@@ -45,4 +46,29 @@ const meta: Meta<typeof Component> = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Dropdown: Story = {}
+export const Dropdown: Story = {
+  play: async ({ canvas, canvasElement, userEvent, step }) => {
+    // This is a Disclosure pattern (plain links, not role="menu"), so focus
+    // should stay on the toggle button after it opens, not move into the submenu.
+    const trigger = canvas.getByRole("button", { name: "Sub-navigation" })
+
+    await step("Starts closed", async () => {
+      await expect(trigger).toHaveAttribute("aria-expanded", "false")
+    })
+
+    await step("Opens on ArrowDown, focus stays on the toggle", async () => {
+      trigger.focus()
+      await userEvent.keyboard("{ArrowDown}")
+      await expect(trigger).toHaveAttribute("aria-expanded", "true")
+      await expect(trigger).toHaveFocus()
+      await expect(canvas.getByRole("link", { name: "Child link 1" })).toBeInTheDocument()
+    })
+
+    await step("Closes on Escape", async () => {
+      await userEvent.keyboard("{Escape}")
+      await expect(trigger).toHaveAttribute("aria-expanded", "false")
+      // Remove focus
+      await userEvent.click(canvasElement)
+    })
+  },
+}

package/src/Component/Navigation/Elements/Navigation.ts

@@ -27,6 +27,7 @@ export default class Navigation extends HTMLElement {
   flyout?: boolean
   edgeCheck!: boolean
   mq!: string
+  iO?: IntersectionObserver
 
   constructor() {
     super()
@@ -82,6 +83,7 @@ export default class Navigation extends HTMLElement {
   disconnectedCallback(): void {
     this.controller.abort()
     this.subNavs?.forEach((subNav: SubNavType): void => subNav.widget.detach())
+    this.iO?.disconnect()
   }
 
   handleDisclosure = ({ detail }: CustomEvent<DisclosureWidgetEvent>): void => {
@@ -129,16 +131,16 @@ export default class Navigation extends HTMLElement {
 
   handleEdgeCheck() {
     const windowInnerWidth: number = window.innerWidth
-    const edgeCheck: IntersectionObserver = new IntersectionObserver(
-      ([{ boundingClientRect, target }], obs) => {
+    this.iO = new IntersectionObserver((entries, obs) => {
+      entries.forEach(({ boundingClientRect, target }) => {
         if (windowInnerWidth < boundingClientRect.right) target.classList.add("mx-nav--reverse")
-        obs.disconnect()
-      },
-    )
+        obs.unobserve(target)
+      })
+    })
     this.subNavs?.forEach(({ list }: SubNavType): void => {
-      edgeCheck.observe(list)
+      this.iO.observe(list)
       const nestedLists: NodeListOf<HTMLUListElement> = list.querySelectorAll("ul")
-      nestedLists?.forEach(nestedList => edgeCheck.observe(nestedList))
+      nestedLists?.forEach(nestedList => this.iO.observe(nestedList))
     })
   }
 

package/src/Component/Navigation/Navigation.figma.ts

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=83-354
+// source=src/Component/Navigation/Navigation.tsx
+// component=Navigation
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const inline = instance.getEnum("Inline", { Off: false, On: true })
+const inlineProp = inline ? " inline" : ""
+
+// `items` (NavigationItem[]) is a data-object array rendered internally as real
+// Link instances — fixed representative example, same reasoning as Breadcrumb.
+export default {
+  example: figma.code`<Navigation title="Main navigation"${inlineProp} items={[
+  { id: "1", to: "/", title: "Home" },
+  { id: "2", to: "/about", title: "About" },
+  { id: "3", to: "/contact", title: "Contact" },
+]} />`,
+  imports: ['import { Navigation } from "@pnx-mixtape/mxds/react"'],
+  id: "navigation",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Component/Navigation/Navigation.stories.ts

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
+import { expect } from "storybook/test"
 import Component from "./navigation.twig"
 import "./navigation.css"
 import "./Elements/Navigation"
@@ -223,6 +224,33 @@ export const Dropdown: Story = {
       },
     ],
   },
+  play: async ({ canvas, canvasElement, userEvent, step }) => {
+    const trigger = canvas.getByRole("button", { name: "Sub-navigation" })
+    // The submenu starts `inert`, so its links aren't in the accessibility
+    // tree yet - find it by DOM structure instead of role.
+    const submenu = trigger.closest("li").querySelector("ul") as HTMLElement
+
+    await step("Starts closed", async () => {
+      await expect(trigger).toHaveAttribute("aria-expanded", "false")
+      await expect(submenu).toHaveAttribute("inert")
+    })
+
+    await step("Opens on ArrowDown, focus stays on the toggle", async () => {
+      trigger.focus()
+      await userEvent.keyboard("{ArrowDown}")
+      await expect(trigger).toHaveAttribute("aria-expanded", "true")
+      await expect(submenu).not.toHaveAttribute("inert")
+      await expect(trigger).toHaveFocus()
+    })
+
+    await step("Closes on Escape", async () => {
+      await userEvent.keyboard("{Escape}")
+      await expect(trigger).toHaveAttribute("aria-expanded", "false")
+      await expect(submenu).toHaveAttribute("inert")
+      // Remove focus
+      await userEvent.click(canvasElement)
+    })
+  },
 }
 
 /**

package/src/Component/Navigation/Navigation.tsx

@@ -2,7 +2,7 @@ import { JSX, ComponentPropsWithoutRef } from "react"
 import classNames from "classnames"
 import Link from "../../Atom/Link/Link"
 
-export interface NavigationItem {
+export type NavigationItem = {
   id: string
   to: string
   title: string