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

package/src/Atom/Text/_text-styles.css

@@ -0,0 +1,165 @@
+@layer design-system.atoms {
+  :is(
+    .mx-text--eyebrow,
+    .mx-text--section-headline,
+    .mx-text--embellished-headline,
+    .mx-text--lede,
+    .mx-text--xs,
+    .mx-text--s,
+    .mx-text--m,
+    .mx-text--l,
+    .mx-text--xl,
+    .mx-text--xxl,
+    .mx-text--xxxl,
+    .mx-text--fluid
+  ) {
+    font-size: var(--font-size);
+  }
+
+  @supports (font-size: 1cqi) {
+    :is(
+      .mx-text--eyebrow,
+      .mx-text--section-headline,
+      .mx-text--embellished-headline,
+      .mx-text--xs,
+      .mx-text--s,
+      .mx-text--lede,
+      .mx-text--m,
+      .mx-text--l,
+      .mx-text--xl,
+      .mx-text--xxl,
+      .mx-text--xxxl,
+      .mx-text--fluid
+    ) {
+      --font-min: calc(var(--font-size) - var(--font-size) * var(--font-size-diff, 0.3));
+
+      font-size: clamp(
+        max(var(--font-size-xs), var(--font-min)),
+        var(--font-min) + 1cqi,
+        var(--font-size)
+      );
+    }
+  }
+
+  :is(.mx-text--eyebrow, .mx-text--section-headline, .mx-text--embellished-headline) {
+    --heading-font-size: var(--font-size-xs);
+    --font-size: var(--font-size-xs);
+
+    text-transform: var(--heading-transform, uppercase);
+    font-weight: var(--heading-font-weight, var(--font-weight-bold));
+    font-family: var(--heading-font-family);
+    line-height: var(--line-height-h);
+    text-wrap: balance;
+  }
+
+  :is(.mx-text--eyebrow, .mx-text--section-headline) {
+    margin-block: 0;
+
+    & + :is(h2, h3, p) {
+      --flow-gap: var(--spacing-xxxxs);
+    }
+  }
+
+  :is(.mx-text--embellished, .mx-text--embellished-headline) {
+    --contrast-color: contrast-color(var(--embellished-colour, var(--colour-accent)));
+
+    text-wrap: balance;
+    position: relative;
+    display: inline-block;
+    z-index: 1;
+
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      inline-size: min(var(--embellished-line-width, 6ch), 100%);
+      block-size: var(--embellished-line-height, 1ch);
+      background-color: var(--embellished-colour, var(--colour-accent));
+      inset-block-end: var(--embellished-offset, -0.25ch);
+      z-index: -1;
+
+      @container style((--contrast-color: white) and (--scheme: light)) {
+        background-color: var(--embellished-colour-rev, var(--colour-accent-light));
+      }
+    }
+
+    & + :is(h2, h3, p) {
+      --flow-gap: var(--spacing-l);
+    }
+  }
+
+  .mx-text--lede {
+    --font-size: var(--font-size-ml);
+  }
+
+  .mx-text--xxxl {
+    --font-size: var(--font-size-xxxl);
+
+    line-height: var(--line-height-h);
+    text-wrap: balance;
+  }
+
+  .mx-text--xxl {
+    --font-size: var(--font-size-xxl);
+
+    line-height: var(--line-height-h);
+    text-wrap: balance;
+  }
+
+  .mx-text--xl {
+    --font-size: var(--font-size-xl);
+
+    line-height: var(--line-height-h);
+  }
+
+  .mx-text--l {
+    --font-size: var(--font-size-l);
+
+    line-height: var(--line-height-h);
+  }
+
+  .mx-text--m {
+    --font-size: var(--font-size-m);
+  }
+
+  .mx-text--s {
+    --font-size: var(--font-size-s);
+  }
+
+  .mx-text--xs {
+    --font-size: var(--font-size-xs);
+  }
+
+  .mx-text--alt {
+    --foreground: var(--foreground-alt, var(--colour-foreground-alt));
+
+    color: var(--foreground);
+  }
+
+  .mx-text--primary {
+    --foreground: var(
+      --foreground-primary,
+      light-dark(var(--colour-primary), var(--colour-primary-light))
+    );
+
+    color: var(--foreground);
+  }
+
+  .mx-text--accent {
+    --foreground: var(--foreground-accent, var(--colour-accent));
+
+    color: var(--foreground);
+  }
+
+  :where([class*="mx-text--"][class*="mx-background--"]) {
+    background-color: var(--colour-background);
+    color: var(--colour-foreground);
+    color-scheme: var(--colour-scheme);
+
+    & > span {
+      background-color: var(--background, var(--colour-background));
+      color: var(--foreground, var(--colour-foreground));
+      color-scheme: var(--scheme, var(--colour-scheme));
+    }
+  }
+}

package/src/Atom/Text/twig/text-styles-example.twig

@@ -0,0 +1,22 @@
+<p class="mx-text--eyebrow mx-text--embellished">Embellished eyebrow</p>
+<p class="mx-text--eyebrow">Normal eyebrow</p>
+
+<p class="mx-text--xxxl">Text xxxl: Headliner size</p>
+<p class="mx-text--xxl">Text xxl: Heading 1 size</p>
+<p class="mx-text--xl">Text xl: Heading 2 size</p>
+<p class="mx-text--l">Text l: Heading 3 size</p>
+
+<p class="mx-text--lede">Text lede: Intro paragraph size</p>
+<p class="mx-text--m">Text m: Default body copy size</p>
+<p class="mx-text--s">Text s: Small content size</p>
+<p class="mx-text--xs">Text xs: Caption size</p>
+
+<p class="mx-text--alt">Text alt: Change the text colour to match the alternative foreground</p>
+<p class="mx-text--primary">Text primary: Change the text colour to match the primary colour</p>
+<p class="mx-text--m mx-background--alt"><span>Background colours can be added combined with the text classes (and a span) to have inline backgrounds on text. <br />The background should wrap with the text when it folds instead of creating a rectangle.</span></p>
+<p class="mx-text--accent mx-background--reverse"><span>Text accent: Some colours need different backgrounds to ensure sufficient contrast.</span></p>
+
+<blockquote class="mx-vertical-flow-flex">
+  <q class="mx-text--xxl mx-background--alt"><span>Blockquotes can be styled however <u>you</u> like</span></q>
+  <cite class="mx-text--s">Source: Rikki's infinite wisdom</cite>
+</blockquote>

package/src/Atom/Video/README.md

@@ -0,0 +1,67 @@
+# Video
+
+An `<iframe>` embed wrapped in a `<figure>` with a 16:9 aspect ratio. Used for YouTube, Vimeo, or any iframe-based video.
+
+## CSS Import
+
+```css
+@import "@pnx-mixtape/mxds/src/Atom/Video/_video.css";
+```
+
+## Twig
+
+```twig
+{% include '@mixtape/Atom/Video/video.twig' with {
+  src: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
+  title: 'Video title',
+} %}
+```
+
+**video.twig props** (`Video` type from `ids-shape`):
+
+| Prop         | Type        | Required | Description                                                                       |
+| ------------ | ----------- | -------- | --------------------------------------------------------------------------------- |
+| `src`        | `string`    | Yes      | iframe `src` URL — also mirrored to a `data-src` attribute on the `<figure>`      |
+| `title`      | `string`    | Yes      | Accessible title for the iframe — also mirrored to `data-title` on the `<figure>` |
+| `attributes` | `Attribute` | No       | Optional Drupal-style attributes object — `mx-video` is always merged on top      |
+
+The template always sets `allowfullscreen` on the iframe. The `Video` type's `duration` property is declared on the type but is not currently rendered by `video.twig`.
+
+## HTML
+
+```html
+<figure class="mx-video">
+  <iframe
+    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
+    title="Video title"
+    allow="fullscreen; picture-in-picture; encrypted-media; clipboard-write"
+    allowfullscreen
+  ></iframe>
+</figure>
+```
+
+## React
+
+```tsx
+import { Video } from "@pnx-mixtape/mxds/src/react"
+;<Video src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Video title" />
+```
+
+**Props:** `title: string` (required for accessibility), `src`, `allow` (default: `"fullscreen; picture-in-picture; encrypted-media; clipboard-write"`), `allowFullScreen` (default: `true`), `className`, plus all native `<iframe>` attributes.
+
+## Notes
+
+- Aspect ratio is fixed at `16 / 9` via `aspect-ratio` property
+- `inline-size: 100%` and `block-size: 100%` make it fill its container
+- `border: 0` removes the default iframe border
+- A `title` attribute on the `<iframe>` is required — screen readers use it as the frame's accessible name
+- The default `allow` permissions list covers the common embed cases (fullscreen toggle, picture-in-picture, DRM-protected playback, copying to clipboard). Override the prop or attribute to widen or narrow these permissions
+- For full-width video in a content region, wrap with `.mx-media--video`
+
+```html
+<div class="mx-media--video">
+  <figure class="mx-video">
+    <iframe src="..." title="..."></iframe>
+  </figure>
+</div>
+```

package/src/Atom/Video/Video.figma.ts

@@ -0,0 +1,18 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=47-108
+// source=src/Atom/Video/Video.tsx
+// component=Video
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const titleHandle = instance.findText("Placeholder label")
+const title = titleHandle.type === "TEXT" ? titleHandle.textContent : ""
+
+export default {
+  example: figma.code`<Video title="${title}" src="https://www.youtube.com/embed/VIDEO_ID" />`,
+  imports: ['import { Video } from "@pnx-mixtape/mxds/react"'],
+  id: "video",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Atom/Video/Video.tsx

@@ -4,9 +4,17 @@ import classNames from "classnames"
 
 type VideoProps = ComponentPropsWithoutRef<"iframe">
 
-const Video = ({ title, className = null, ...props }: VideoProps): JSX.Element => (
+const Video = ({
+  title,
+  allow = "fullscreen; picture-in-picture; encrypted-media; clipboard-write",
+  allowFullScreen = true,
+  className = null,
+  ...props
+}: VideoProps): JSX.Element => (
   <figure className={classNames("mx-video", className)}>
-    <iframe title={title} {...props} />
+    {/* Video embeds (YouTube/Vimeo) require the full iframe capabilities; sandbox omitted intentionally. */}
+    {/* oxlint-disable-next-line react/iframe-missing-sandbox */}
+    <iframe title={title} allow={allow} allowFullScreen={allowFullScreen} {...props} />
   </figure>
 )
 

package/src/Atom/Video/__snapshots__/Video.stories.ts.snap

@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Video 1`] = `
-"<figure class="mx-video">
-  <iframe src="https://www.youtube.com/embed/NpEaa2P7qZI" title="Something from youtube" allowfullscreen=""></iframe>
+"<figure class="mx-video" data-src="https://www.youtube.com/embed/NpEaa2P7qZI" data-title="Something from youtube">
+  <iframe src="https://www.youtube.com/embed/NpEaa2P7qZI" title="Something from youtube" allow="fullscreen; picture-in-picture; encrypted-media; clipboard-write" allowfullscreen=""></iframe>
 </figure>
 "
 `;

package/src/Atom/Video/video.twig

@@ -1,8 +1,9 @@
 {% set attributes = (attributes ?? create_attribute()).addClass("mx-video") %}
-<figure{{ attributes }}>
+<figure{{ attributes }} data-src="{{ src }}"{% if title is not empty %} data-title="{{ title }}"{% endif %}>
   <iframe
       src="{{ src }}"
       {% if title is not empty %} title="{{ title }}"{% endif %}
+      allow="fullscreen; picture-in-picture; encrypted-media; clipboard-write"
       allowfullscreen
   ></iframe>
 </figure>

package/src/Atom/_base.css

@@ -23,7 +23,7 @@
  * Text Sizes
  */
 
-@import "./Text/_text-sizes.css";
+@import "./Text/_text-styles.css";
 @import "./Text/_text-align.css";
 
 /**
@@ -54,9 +54,3 @@
  */
 
 @import "./Table/_table.css";
-
-/**
- * Print Stylesheet
- */
-
-@import "_print.css";

package/src/Atom/_generic.css

@@ -64,6 +64,13 @@
     font-weight: var(--font-weight-bold);
   }
 
+  u {
+    text-decoration-color: var(--embellished-colour, var(--colour-accent));
+    text-decoration-thickness: var(--embellished-line-height, 1ch);
+    text-decoration-skip-ink: none;
+    text-underline-offset: var(--embellished-offset, -0.35ch);
+  }
+
   :is(ol, ul) {
     padding-inline-start: var(--spacing-m);
 

package/src/Atom/base.css

@@ -1,4 +1,4 @@
-@layer popover-polyfill, design-system.defaults, design-system.atoms, design-system.layouts, design-system.utilities, design-system.components;
+@layer popover-polyfill, design-system.defaults, design-system.atoms, design-system.layouts, design-system.utilities, design-system.components, design-system.print;
 
 @import "./Background/_background.css";
 @import "_animated.css";

package/src/Component/Accordion/Accordion.figma.ts

@@ -0,0 +1,40 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=50-119
+// source=src/Component/Accordion/Accordion.tsx
+// component=Accordion
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const active = instance.getEnum("Open", { False: false, True: true })
+
+const title = instance.findConnectedInstances(node => node.codeConnectId() === "accordion-title")[0]
+const titleCode = title
+  ? title.executeTemplate().example
+  : figma.code`<AccordionTitle>Section title<AccordionTitleIcon /></AccordionTitle>`
+
+// The Closed Figma variant doesn't include a content instance (visual simplification —
+// AccordionContent is always present in real code, just `inert` when closed, not
+// absent from the DOM) — fall back to a representative default so the exported code
+// is correct regardless of which variant is selected.
+const content = instance.findConnectedInstances(
+  node => node.codeConnectId() === "accordion-content",
+)[0]
+const contentCode = content
+  ? content.executeTemplate().example
+  : figma.code`<AccordionContent>Accordion panel content goes here.</AccordionContent>`
+
+const activeProp = active ? " active" : ""
+
+export default {
+  example: figma.code`<Accordion${activeProp}>
+  ${titleCode}
+  ${contentCode}
+</Accordion>`,
+  imports: [
+    'import { Accordion, AccordionTitle, AccordionContent, AccordionTitleIcon } from "@pnx-mixtape/mxds/react"',
+  ],
+  id: "accordion",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Component/Accordion/Accordion.stories.ts

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
+import { expect } from "storybook/test"
 import Component from "./accordion.twig"
 import AccordionItem from "./accordion-item.twig"
 import Heading from "../../Atom/Heading/heading.twig"
@@ -27,7 +28,7 @@ const meta: Meta<AccordionType> = {
         content:
           "I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.",
       }),
-    ],
+    ].join(""),
   },
   argTypes: {
     toggleAll: {
@@ -43,14 +44,14 @@ const meta: Meta<AccordionType> = {
     },
     items: {
       description:
-        "A list of [AccordionItem](/?path=/docs/component-accordion-accordionitem--docs) objects.",
+        "A concatenated string of [AccordionItem](/?path=/docs/component-accordion-accordionitem--docs) markup.",
       type: {
         name: "other",
         required: true,
-        value: "array",
+        value: "string",
       },
       table: {
-        type: { summary: "AccordionItem[]" },
+        type: { summary: "string" },
       },
     },
   },
@@ -76,7 +77,7 @@ export const DefaultOpen: Story = {
         content:
           "I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.",
       }),
-    ],
+    ].join(""),
   },
 }
 
@@ -85,3 +86,43 @@ export const ToggleAll: Story = {
     toggleAll: true,
   },
 }
+
+export const Test: Story = {
+  parameters: {
+    docs: {
+      story: { autoplay: true },
+    },
+  },
+  args: {
+    toggleAll: true,
+  },
+  play: async ({ canvas, userEvent, mount, step }) => {
+    window.location.hash = "#music"
+    await mount()
+    const expandAll = canvas.getByRole("button", { name: "Expand all" })
+    const collapseAll = canvas.getByRole("button", { name: "Collapse all" })
+    const accordions = canvas.getAllByRole("group")
+    const summary = canvas.getByText("Music")
+    await step("Is open when URL has #music", async () => {
+      await expect(accordions[0]).toHaveAttribute("open")
+    })
+    await step("Closes on click", async () => {
+      await userEvent.click(summary)
+      await expect(accordions[0]).not.toHaveAttribute("open")
+    })
+    await step("Opens all on expand all", async () => {
+      await userEvent.click(expandAll)
+      for (const accordion in accordions) {
+        // oxlint-disable-next-line no-await-in-loop
+        await expect(accordions[accordion]).toHaveAttribute("open")
+      }
+    })
+    await step("Closes all on collapse all", async () => {
+      await userEvent.click(collapseAll)
+      for (const accordion in accordions) {
+        // oxlint-disable-next-line no-await-in-loop
+        await expect(accordions[accordion]).not.toHaveAttribute("open")
+      }
+    })
+  },
+}

package/src/Component/Accordion/Accordion.tsx

@@ -1,10 +1,10 @@
 import { JSX, PropsWithChildren, useEffect, useId, createContext, use, useMemo } from "react"
 import classNames from "classnames"
-import useToggle from "../../Utility/Hooks/useToggle"
+import { useDisclosureState } from "react-stately"
 
 type AccordionContextValues = {
   toggle: (value?: boolean) => void
-  on: boolean
+  isExpanded: boolean
   id: string
 }
 
@@ -14,33 +14,35 @@ export const useAccordion = () => use(AccordionContext)
 type AccordionProps = PropsWithChildren & {
   active?: boolean
   id?: string
+  className?: string
 }
 
 const Accordion = ({
   children,
   active = false,
   id = null,
+  className = "mx-accordion--divided",
   ...props
 }: AccordionProps): JSX.Element => {
-  const [on, toggle] = useToggle(active)
-  const accordionId: string = id || useId()
+  const { isExpanded, toggle, expand } = useDisclosureState({ defaultExpanded: active })
+  const rId = useId()
+  const accordionId: string = id || rId
 
   useEffect(() => {
     if (typeof window === "undefined") return
-    if (window.location.hash) {
-      toggle(window.location.hash === `#${accordionId}`)
+    if (window.location.hash && window.location.hash === `#${accordionId}`) {
+      expand()
     }
-  }, [accordionId])
+  }, [accordionId, expand])
 
-  const values = useMemo(() => ({ on, toggle, id: accordionId }), [on, toggle, accordionId])
+  const values = useMemo(
+    () => ({ isExpanded, toggle, id: accordionId }),
+    [isExpanded, toggle, accordionId],
+  )
 
   return (
     <AccordionContext value={values}>
-      <div
-        className={classNames("mx-accordion", "mx-accordion--divided")}
-        data-open={on}
-        {...props}
-      >
+      <div className={classNames("mx-accordion", className)} data-open={isExpanded} {...props}>
         {children}
       </div>
     </AccordionContext>

package/src/Component/Accordion/AccordionItem.stories.ts

@@ -1,13 +1,14 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
+import { expect } from "storybook/test"
+import { modes } from "../../../.storybook/modes"
 import Component from "./accordion-item.twig"
 import AccordionMobile from "./twig/accordion-mobile.twig"
 import AccordionDiv from "./twig/accordion-div.twig"
-
+import { AccordionItem as AccordionItemType } from "@pnx-mixtape/ids-shape"
 import "./Elements/Accordion"
 import "./Elements/AccordionMobile"
 import "./Elements/AccordionDiv"
 import "./accordion.css"
-import { AccordionItem as AccordionItemType } from "@pnx-mixtape/ids-shape"
 
 /**
  * An HTML Details based accordion.
@@ -56,6 +57,14 @@ const meta: Meta<AccordionItemType> = {
       },
     },
   },
+  parameters: {
+    chromatic: {
+      modes: {
+        mobile: modes["xs"],
+        desktop: modes["xl"],
+      },
+    },
+  },
 }
 
 export default meta
@@ -71,6 +80,10 @@ export const Open: Story = {
     open: true,
     id: "open-accordion-item",
   },
+  play: async ({ canvas }) => {
+    const accordion = canvas.getByRole("group")
+    await expect(accordion).toHaveAttribute("open")
+  },
 }
 
 /**
@@ -79,6 +92,15 @@ export const Open: Story = {
  */
 export const MobileOnly: Story = {
   render: args => AccordionMobile({ ...args }),
+  play: async ({ canvas }) => {
+    const accordion = canvas.getByRole("group")
+    const isMobile = matchMedia("(max-width: 767px)").matches
+    if (isMobile) {
+      await expect(accordion).not.toHaveAttribute("open")
+    } else {
+      await expect(accordion).toHaveAttribute("open")
+    }
+  },
 }
 
 /**
@@ -87,4 +109,24 @@ export const MobileOnly: Story = {
  */
 export const Div: Story = {
   render: args => AccordionDiv({ ...args }),
+  play: async ({ canvas, canvasElement, userEvent, step }) => {
+    const button = canvas.getByRole("button")
+    const content = canvas.getByRole("region", { hidden: true })
+    await step("Starts closes", async () => {
+      await expect(button).toHaveAttribute("aria-expanded", "false")
+      await expect(content).toHaveAttribute("inert")
+    })
+    await step("Opens on click", async () => {
+      await userEvent.click(button)
+      await expect(button).toHaveAttribute("aria-expanded", "true")
+      await expect(content).not.toHaveAttribute("inert")
+    })
+    await step("Closes on click", async () => {
+      await userEvent.click(button)
+      await expect(button).toHaveAttribute("aria-expanded", "false")
+      await expect(content).toHaveAttribute("inert")
+      // Remove focus
+      await userEvent.click(canvasElement)
+    })
+  },
 }

package/src/Component/Accordion/Components/AccordionContent.figma.ts

@@ -0,0 +1,17 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=50-103
+// source=src/Component/Accordion/Components/AccordionContent.tsx
+// component=AccordionContent
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const content = instance.getSlot("Content")
+
+export default {
+  example: figma.code`<AccordionContent>${content}</AccordionContent>`,
+  imports: ['import { AccordionContent } from "@pnx-mixtape/mxds/react"'],
+  id: "accordion-content",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Component/Accordion/Components/AccordionContent.tsx

@@ -3,17 +3,15 @@ import classNames from "classnames"
 import { useAccordion } from "../Accordion"
 
 const AccordionContent = ({ children }: PropsWithChildren): JSX.Element => {
-  const { id, on } = useAccordion()
+  const { id, isExpanded } = useAccordion()
   return (
-    <div
-      role="region"
+    <section
       aria-labelledby={id}
       className={classNames("mx-accordion__content", "mx-rich-text", "mx-vertical-flow")}
-      // @ts-expect-error inert is allowed.
-      inert={!on ? "" : null}
+      inert={!isExpanded}
     >
       {children}
-    </div>
+    </section>
   )
 }