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

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

@@ -12,7 +12,7 @@ exports[`Block Link 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
         
       
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   
   <span>Find out more</span>
     
@@ -42,7 +42,7 @@ exports[`Card 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
         
       
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   
   <span>Find out more</span>
     
@@ -73,7 +73,7 @@ exports[`Collapse 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
         
       
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   
   <span>Find out more</span>
     
@@ -104,7 +104,7 @@ exports[`Date 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
         
       
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   
   <span>Find out more</span>
     
@@ -139,7 +139,7 @@ exports[`Icon Tile 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   
   <span>Find out more</span>
     
@@ -163,7 +163,7 @@ exports[`Reverse 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
         
       
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   
   <span>Find out more</span>
     
@@ -193,7 +193,7 @@ exports[`Tile 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   
   <span>Find out more</span>
     
@@ -218,8 +218,8 @@ exports[`With Link List 1`] = `
         
 
 <ul class="mx-link-list">
-      <li>
-<a href="#">
+  
+<li><a href="#">
   
   <span>Link one</span>
     
@@ -227,8 +227,7 @@ exports[`With Link List 1`] = `
 
 </a>
 </li>
-      <li>
-<a href="#">
+<li><a href="#">
   
   <span>Link two</span>
     
@@ -236,8 +235,7 @@ exports[`With Link List 1`] = `
 
 </a>
 </li>
-      <li>
-<a href="#">
+<li><a href="#">
   
   <span>Link three</span>
     
@@ -245,7 +243,7 @@ exports[`With Link List 1`] = `
 
 </a>
 </li>
-  </ul>
+</ul>
 
     
   </div>
@@ -267,13 +265,18 @@ exports[`With Tags 1`] = `
     <div class="mx-card__content mx-vertical-flow-flex">
     
 <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>
 
         
 <h3>Card title</h3>
@@ -281,7 +284,7 @@ exports[`With Tags 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
         
       
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   
   <span>Find out more</span>
     

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

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Block Link 1`] = `"<div class="mx-container"><article class="mx-card mx-card--block"><figure class="mx-card__media stack"><div class="mx-skeleton mx-skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow"><h2 class="" id="key-feature-or-sectio">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;
+exports[`Block Link 1`] = `"<div class="mx-container"><article class="mx-card mx-card--block"><figure class="mx-card__media stack"><div class="mx-skeleton mx-skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow-flex"><h2 class="" id="key-feature-or-secti">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;
 
-exports[`Card 1`] = `"<div class="mx-container"><article class="mx-card"><figure class="mx-card__media stack"><div class="mx-skeleton mx-skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow"><h2 class="" id="key-feature-or-sectio">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;
+exports[`Card 1`] = `"<div class="mx-container"><article class="mx-card"><figure class="mx-card__media stack"><div class="mx-skeleton mx-skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow-flex"><h2 class="" id="key-feature-or-secti">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;
 
-exports[`Reverse 1`] = `"<div class="mx-container"><article class="mx-card mx-card--reversed"><figure class="mx-card__media stack"><div class="mx-skeleton mx-skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow"><h2 class="" id="key-feature-or-sectio">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;
+exports[`Reverse 1`] = `"<div class="mx-container"><article class="mx-card mx-card--reversed"><figure class="mx-card__media stack"><div class="mx-skeleton mx-skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow-flex"><h2 class="" id="key-feature-or-secti">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;

package/src/Component/Card/card.css

@@ -3,6 +3,7 @@
  */
 
 @layer design-system.components {
+  /* @public --card-gap --card-alignment --large-card-gap */
   .mx-card {
     block-size: 100%;
     display: grid;
@@ -11,7 +12,7 @@
     &[class*="mx-background--"] {
       border-radius: var(--border-radius);
 
-      @container (min-width: token("breakpoint.contentCard")) {
+      @container card (min-width: token("breakpoint.contentCard")) {
         --content-min-spacing: var(--content-max-spacing, var(--spacing-m));
       }
 
@@ -37,7 +38,7 @@
     &:has(.mx-card__media) {
       grid-template: "media" "content" 1fr / 1fr;
 
-      @container (min-width: token("breakpoint.contentCard")) {
+      @container card (min-width: token("breakpoint.contentCard")) {
         --card-gap: var(--gap-l);
         --card-alignment: center;
 
@@ -49,12 +50,12 @@
         }
       }
 
-      @container (min-width: token("breakpoint.l")) {
+      @container card (min-width: token("breakpoint.l")) {
         --card-gap: var(--large-card-gap, 6rem);
       }
 
       &[class*="mx-background--"] {
-        @container (min-width: token("breakpoint.contentCard")) {
+        @container card (min-width: token("breakpoint.contentCard")) {
           & .mx-card__content {
             padding-block-start: var(--content-min-spacing, var(--spacing-s));
           }
@@ -115,6 +116,10 @@
     inline-size: min(100%, var(--max-card-width, 37ch));
     margin-inline: auto;
   }
+
+  .mx-container:has(> .mx-card) {
+    --container-name: card;
+  }
 }
 
 /**
@@ -142,7 +147,7 @@
 
     &:has(a .sr-only:only-child) {
       & a {
-        margin-block-start: calc(var(--gap) * -1);
+        margin-block-start: calc(var(--flow-gap, var(--gap)) * -1);
       }
 
       &:hover :is(h2, h3, h4) {
@@ -165,25 +170,32 @@
 /*
   * Collapsed on mobile.
  */
-@media (--collapse-card-down) {
-  .mx-card--collapse {
-    --gap: var(--spacing-xxxs);
 
+.mx-card--collapse {
+  @media (--small-down) {
     & :is(p, .mx-text--lede) {
       display: none;
     }
+  }
+
+  @media (--collapse-card-down) {
+    --flow-gap: var(--spacing-xxxs);
 
     &:has(.mx-card__media) {
       --collapsed-media-col: var(--collapsed-image-width, 100px);
       --ratio: 1;
 
-      grid-template-areas: "content media";
-      grid-template-columns: var(--collapsed-content-col, 1fr) var(--collapsed-media-col, 1fr);
+      grid-template: "content media" / var(--collapsed-content-col, 1fr) var(
+          --collapsed-media-col,
+          1fr
+        );
     }
   }
+}
 
-  :is(.mx-card--collapse, .mx-container:has(> .mx-card--collapse)) {
-    &:where(:not(:first-child)) {
+:is(.mx-card--collapse:where(:not(.mx-list-item)), .mx-container:has(> .mx-card--collapse)) {
+  &:where(:not(:first-child)) {
+    @media (--medium-down) {
       border-block-start: var(--line-width, 1px) solid var(--line-colour, var(--colour-border));
       padding-block-start: var(--gap);
     }

package/src/Component/Carousel/Carousel.figma.ts

@@ -0,0 +1,32 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=75-62
+// source=src/Component/Carousel/Carousel.tsx
+// component=Carousel
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+// `pagination`/`counter` are mutually exclusive in effect (pagination wins if both
+// are true) — consolidated into one Figma variant rather than exposing two
+// independent booleans that would allow a nonsensical "both on" state.
+const navigation = instance.getEnum("Navigation", {
+  None: "none",
+  Pagination: "pagination",
+  Counter: "counter",
+})
+const paginationProp = navigation === "pagination" ? " pagination" : ""
+const counterProp = navigation === "counter" ? " counter" : ""
+
+// `items` is a ReactNode[] ARRAY PROP, not children between tags — deliberately NOT
+// read from the Items slot (getSlot() returns rendered JSX sections with no clean
+// per-item boundary to split into a valid array literal). The Items slot exists so a
+// designer can place real card/content instances directly in Figma; a developer
+// translates the visual result into the real array by hand — this example uses a
+// fixed representative array instead of attempting to auto-generate one.
+export default {
+  example: figma.code`<Carousel${paginationProp}${counterProp} items={["Item 1", "Item 2", "Item 3"]} />`,
+  imports: ['import { Carousel } from "@pnx-mixtape/mxds/react"'],
+  id: "carousel",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Component/Carousel/Carousel.stories.ts

@@ -10,6 +10,8 @@ import "../Card/card.css"
 import Heading from "../../Atom/Heading/heading.twig"
 import Link from "../../Atom/Link/link.twig"
 import { BackgroundStyles } from "../../enums"
+import { modes } from "../../../.storybook/modes"
+import { expect, waitFor } from "storybook/test"
 
 /**
  * A carousel of GridItems (usually Cards), that natively scrolls.
@@ -181,19 +183,19 @@ const meta: Meta<CarouselType> = {
         background: BackgroundStyles.BOX,
         modifiers: [ListItemModifiers.BLOCK],
       }),
-    ],
+    ].join(""),
   },
   argTypes: {
     items: {
       description:
-        "A list of `GridItem` objects, usually [Cards](/?path=/docs/component-card--docs) or [ContentBlocks](/?path=/docs/component-contentblock--docs).",
+        "A concatenated string of `GridItem` markup, usually [Cards](/?path=/docs/component-card--docs) or [ContentBlocks](/?path=/docs/component-contentblock--docs).",
       type: {
         name: "other",
         required: true,
-        value: "array",
+        value: "string",
       },
       table: {
-        type: { summary: "GridItem[]" },
+        type: { summary: "string" },
       },
     },
     loop: {
@@ -219,12 +221,68 @@ const meta: Meta<CarouselType> = {
       },
     },
   },
+  parameters: {
+    chromatic: {
+      modes: {
+        mobile: modes["xs"],
+        desktop: modes["xl"],
+      },
+    },
+  },
 }
 
 export default meta
 type Story = StoryObj<CarouselType>
 
-export const Carousel: Story = {}
+export const Carousel: Story = {
+  play: async ({ canvas, canvasElement, userEvent, step }) => {
+    const back = await canvas.findByRole("button", { name: "previous page" }, { timeout: 2000 })
+    const next = await canvas.findByRole("button", { name: "next page" }, { timeout: 2000 })
+    // The custom element's IntersectionObserver populates its internal item
+    // map asynchronously after mount - wait for its first pass (visible via
+    // the resulting `aria-hidden`) before clicking, or navigation can run
+    // against an empty item map.
+    await waitFor(
+      () => expect(canvasElement.querySelector('[data-index="0"]')).toHaveAttribute("aria-hidden"),
+      { timeout: 2000 },
+    )
+    await step("Has prev/next buttons", async () => {
+      await expect(back).toHaveAttribute("disabled")
+      await expect(next).not.toHaveAttribute("disabled")
+    })
+    await step("Navigates on click", async () => {
+      await userEvent.click(next)
+      await waitFor(
+        () => {
+          expect(back).not.toHaveAttribute("disabled")
+          expect(next).not.toHaveAttribute("disabled")
+        },
+        { timeout: 2000 },
+      )
+      await userEvent.click(next)
+      await waitFor(
+        () => {
+          expect(back).not.toHaveAttribute("disabled")
+          expect(next).toHaveAttribute("disabled")
+        },
+        { timeout: 2000 },
+      )
+    })
+    await step("Navigates back", async () => {
+      await userEvent.click(back)
+      await userEvent.click(back)
+      await waitFor(
+        () => {
+          expect(back).toHaveAttribute("disabled")
+          expect(next).not.toHaveAttribute("disabled")
+        },
+        { timeout: 2000 },
+      )
+      // Remove focus
+      await userEvent.click(canvasElement)
+    })
+  },
+}
 
 /**
  * Display counter dot navigation.
@@ -233,6 +291,46 @@ export const Counters: Story = {
   args: {
     counter: true,
   },
+  play: async ({ canvas, canvasElement, userEvent, step }) => {
+    const pagination = await canvas.findByLabelText("Page controls", {}, { timeout: 2000 })
+    const back = await canvas.findByRole("button", { name: "previous page" }, { timeout: 2000 })
+    const button1 = await canvas.findByRole("button", { name: "Page 1" })
+    const button2 = await canvas.findByRole("button", { name: "Page 2" })
+    await step("Has pager buttons", async () => {
+      await expect(pagination).not.toHaveAttribute("hidden")
+      await expect(button1).toBeInTheDocument()
+      await expect(button1).toHaveAttribute("aria-current", "page")
+      await expect(button2).toBeInTheDocument()
+      await expect(button2).not.toHaveAttribute("aria-current")
+    })
+    await step("Navigates on click", async () => {
+      await userEvent.click(button2)
+      // The pagination buttons' `aria-current` and the quick-nav buttons'
+      // `disabled` are both set inside the same debounced scroll handler, so
+      // waiting on the former also guarantees the latter has settled.
+      await waitFor(
+        () => {
+          expect(button1).not.toHaveAttribute("aria-current")
+          expect(button2).toHaveAttribute("aria-current", "page")
+          expect(back).not.toHaveAttribute("disabled")
+        },
+        { timeout: 2000 },
+      )
+    })
+    await step("Navigates back", async () => {
+      await userEvent.click(back)
+      await waitFor(
+        () => {
+          expect(button2).not.toHaveAttribute("aria-current")
+          expect(button1).toHaveAttribute("aria-current", "page")
+          expect(back).toHaveAttribute("disabled")
+        },
+        { timeout: 2000 },
+      )
+      // Remove focus
+      await userEvent.click(canvasElement)
+    })
+  },
 }
 
 /**
@@ -242,6 +340,46 @@ export const Paginated: Story = {
   args: {
     pagination: true,
   },
+  play: async ({ canvas, canvasElement, userEvent, step }) => {
+    const pagination = await canvas.findByLabelText("Page controls", {}, { timeout: 2000 })
+    const back = await canvas.findByRole("button", { name: "previous page" }, { timeout: 2000 })
+    const button1 = await canvas.findByRole("button", { name: "Page 1" })
+    const button2 = await canvas.findByRole("button", { name: "Page 2" })
+    await step("Has pager buttons", async () => {
+      await expect(pagination).not.toHaveAttribute("hidden")
+      await expect(button1).toBeInTheDocument()
+      await expect(button1).toHaveAttribute("aria-current", "page")
+      await expect(button2).toBeInTheDocument()
+      await expect(button2).not.toHaveAttribute("aria-current")
+    })
+    await step("Navigates on click", async () => {
+      await userEvent.click(button2)
+      // The pagination buttons' `aria-current` and the quick-nav buttons'
+      // `disabled` are both set inside the same debounced scroll handler, so
+      // waiting on the former also guarantees the latter has settled.
+      await waitFor(
+        () => {
+          expect(button1).not.toHaveAttribute("aria-current")
+          expect(button2).toHaveAttribute("aria-current", "page")
+          expect(back).not.toHaveAttribute("disabled")
+        },
+        { timeout: 2000 },
+      )
+    })
+    await step("Navigates back", async () => {
+      await userEvent.click(back)
+      await waitFor(
+        () => {
+          expect(button2).not.toHaveAttribute("aria-current")
+          expect(button1).toHaveAttribute("aria-current", "page")
+          expect(back).toHaveAttribute("disabled")
+        },
+        { timeout: 2000 },
+      )
+      // Remove focus
+      await userEvent.click(canvasElement)
+    })
+  },
 }
 
 /**
@@ -251,4 +389,56 @@ export const Loop: Story = {
   args: {
     loop: true,
   },
+  play: async ({ canvas, canvasElement, userEvent, step }) => {
+    const back = await canvas.findByRole("button", { name: "previous page" }, { timeout: 2000 })
+    const next = await canvas.findByRole("button", { name: "next page" }, { timeout: 2000 })
+    // The custom element's IntersectionObserver populates its internal item
+    // map asynchronously after mount - wait for its first pass (visible via
+    // the resulting `aria-hidden`) before clicking, or navigation can run
+    // against an empty item map.
+    await waitFor(
+      () => expect(canvasElement.querySelector('[data-index="0"]')).toHaveAttribute("aria-hidden"),
+      { timeout: 2000 },
+    )
+    await step("Has prev/next buttons", async () => {
+      await expect(back).toHaveAttribute("disabled")
+      await expect(next).not.toHaveAttribute("disabled")
+    })
+    await step("Navigates on click", async () => {
+      await userEvent.click(next)
+      await waitFor(
+        () => {
+          expect(back).not.toHaveAttribute("disabled")
+          expect(next).not.toHaveAttribute("disabled")
+        },
+        { timeout: 2000 },
+      )
+      await userEvent.click(next)
+      await waitFor(
+        () => {
+          expect(back).not.toHaveAttribute("disabled")
+          expect(next).not.toHaveAttribute("disabled")
+        },
+        { timeout: 2000 },
+      )
+      // With `loop`, `next` is never `disabled` at the end - the custom
+      // element instead marks it `data-restart` once its debounced scroll
+      // handler has confirmed the end was reached. Wait for that marker
+      // before the "Loops back" step's click, or it can race the debounce
+      // and request an out-of-range page.
+      await waitFor(() => expect(next).toHaveAttribute("data-restart"), { timeout: 2000 })
+    })
+    await step("Loops back", async () => {
+      await userEvent.click(next)
+      await waitFor(
+        () => {
+          expect(back).toHaveAttribute("disabled")
+          expect(next).not.toHaveAttribute("disabled")
+        },
+        { timeout: 2000 },
+      )
+      // Remove focus
+      await userEvent.click(canvasElement)
+    })
+  },
 }