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

package/src/Component/HeroSearch/README.md

@@ -0,0 +1,217 @@
+# HeroSearch
+
+A variant of [HeroBanner](../HeroBanner/README.md) that includes a search form in the content column. Use at the top of search-driven pages — search results, knowledge bases, directories, homepages with prominent search intent. Shares all the layout, sizing, and background options of `HeroBanner`.
+
+## CSS Import
+
+`HeroSearch` does not ship its own CSS — it reuses the `HeroBanner` stylesheet (the `mx-hero-search` class exists as a hook only).
+
+```css
+@import "@pnx-mixtape/mxds/src/Component/HeroBanner/hero-banner.css";
+```
+
+---
+
+## Twig
+
+```twig
+{% include '@mixtape/Component/HeroSearch/hero-search.twig' with {
+  title: heading_component,
+  subtitle: 'Find what you need.',
+  search: search_form_component,
+  linkList: link_list_component,
+  highlight: false,
+  modifiers: ['white'],
+} %}
+```
+
+**hero-search.twig props** (`HeroSearch` type from `ids-shape`, extends `HeroBanner`):
+
+| Prop        | Type                     | Required | Description                                                                                  |
+| ----------- | ------------------------ | -------- | -------------------------------------------------------------------------------------------- |
+| `title`     | `Heading`                | yes      | Heading component — should render an `<h1>` when used as the page title                      |
+| `search`    | `SearchForm`             | yes      | The search form component (rendered below the title/subtitle/link inside the content column) |
+| `subtitle`  | `string` / `WysiwygText` | no       | Optional lede-styled paragraph shown below the title                                         |
+| `content`   | `WysiwygText`            | no       | Optional rich-text body content                                                              |
+| `link`      | `Link` \| `Button`       | no       | Optional call-to-action, rendered above the search form                                      |
+| `image`     | `Image`                  | no       | Optional aside image. Ignored when `linkList` is provided                                    |
+| `linkList`  | `LinkList`               | no       | Optional aside `LinkList`. Takes precedence over `image`                                     |
+| `highlight` | `boolean`                | no       | Renders the enlarged `--hero` variant. Default `false`                                       |
+| `modifiers` | `HeroBannerModifier[]`   | no       | Background colour modifiers. Default `[WHITE]` (no class)                                    |
+
+Notes:
+
+- `image` and `linkList` cannot be used together — the template renders `linkList` if present, otherwise `image`.
+- The rendered root element always carries both `mx-hero-banner` and `mx-hero-search` classes.
+
+---
+
+## HTML
+
+Minimal hero search with inline search form:
+
+```html
+<section class="mx-section--xl">
+  <div class="mx-hero-banner mx-hero-search">
+    <div class="mx-hero-banner__inner">
+      <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
+        <h1>Hero banner title</h1>
+        <p class="mx-text--lede">A short lead-in paragraph.</p>
+        <form class="mx-form mx-form--inline-button" role="search" action="#search">
+          <input
+            class="mx-input__text"
+            id="search-keyword"
+            name="search-form"
+            type="search"
+            value=""
+            aria-label="Search by keywords"
+            placeholder="Keywords..."
+          />
+          <button class="mx-button mx-button--icon-only" type="submit">
+            <span class="mx-icon mx-icon--search"></span>
+            <span class="sr-only">Search</span>
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</section>
+```
+
+With a LinkList aside (popular searches):
+
+```html
+<div class="mx-hero-banner mx-hero-search">
+  <div class="mx-hero-banner__inner">
+    <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
+      <h1>Search our collection</h1>
+      <form class="mx-form mx-form--inline-button" role="search" action="/search">
+        <!-- ... -->
+      </form>
+    </div>
+    <div class="mx-hero-banner__aside mx-section--xl">
+      <h2 class="mx-heading--m">Popular searches</h2>
+      <ul class="mx-link-list">
+        <!-- ... -->
+      </ul>
+    </div>
+  </div>
+</div>
+```
+
+Highlight variant with background:
+
+```html
+<div class="mx-hero-banner mx-hero-search mx-hero-banner--hero mx-background--primary">
+  <div class="mx-hero-banner__inner"><!-- ... --></div>
+</div>
+```
+
+---
+
+## React
+
+```tsx
+import { HeroSearch, Heading, Text, SearchForm } from "@pnx-mixtape/mxds/react"
+import { HeadingStyles, TextStyles } from "@pnx-mixtape/mxds/src/enums"
+import { HeadingTypes } from "@pnx-mixtape/ids-shape"
+
+// Standard hero search — pass the search form via the `search` prop
+<HeroSearch search={<SearchForm />}>
+  <Heading as={HeadingTypes.ONE}>
+    Search our collection
+  </Heading>
+  <Text modifier={TextStyles.XL}>
+    Find articles, guides and reference material.
+  </Text>
+</HeroSearch>
+
+// Enlarged "hero" variant
+<HeroSearch hero search={<SearchForm />}>
+  <Heading as={HeadingTypes.ONE} modifier={[HeadingStyles.HEADLINE]}>
+    Search our collection
+  </Heading>
+</HeroSearch>
+```
+
+**`HeroSearch` props:**
+
+| Prop        | Type        | Default | Description                                                                         |
+| ----------- | ----------- | ------- | ----------------------------------------------------------------------------------- |
+| `hero`      | `boolean`   | `false` | Applies the enlarged `--hero` variant (min block size `600px`, vertically centred). |
+| `center`    | `boolean`   | `false` | Centre-aligns the text content (`mx-text--center`).                                 |
+| `search`    | `ReactNode` | —       | Search form rendered after `children` inside the banner content area.               |
+| `className` | `string`    | —       | Extra class passed to the outer wrapping `Section`.                                 |
+| `children`  | `ReactNode` | —       | Title and lede content.                                                             |
+
+The component renders both `mx-hero-banner` and `mx-hero-search` on the inner wrapper — matching the Twig template — so existing CSS hooks for the search variant apply.
+
+---
+
+## Modifiers (`HeroBannerModifier` enum from `ids-shape`)
+
+HeroSearch uses the same modifier enum as HeroBanner. `WHITE` is the default and adds no class.
+
+| `HeroBannerModifier` value | String        | Maps to                  | Appearance                  |
+| -------------------------- | ------------- | ------------------------ | --------------------------- |
+| `WHITE`                    | `"white"`     | — (no class)             | Default page background     |
+| `GREY`                     | `"off-white"` | `mx-background--alt`     | Subtle off-white panel      |
+| `LIGHT`                    | `"light"`     | `mx-background--primary` | Brand primary background    |
+| `DARK`                     | `"dark"`      | `mx-background--reverse` | Dark background, light text |
+
+On dark backgrounds, ensure the search submit button style has sufficient contrast.
+
+---
+
+## Highlight / hero variant
+
+| Context | How to enable                                    |
+| ------- | ------------------------------------------------ |
+| React   | `<HeroSearch hero>`                              |
+| HTML    | add `mx-hero-banner--hero` to the banner `<div>` |
+| Twig    | `highlight: true`                                |
+
+Gives the banner `min-block-size: var(--hero-height, 600px)` and vertically centres content — best kept for homepage-level search intent.
+
+---
+
+## Layout behaviour
+
+HeroSearch reuses the `HeroBanner` layout:
+
+- Below the `--large-up` breakpoint: content (title + search form) stacks above any aside.
+- At `--large-up` and above: two columns, `50% / 50%` by default (tunable via `--hero-columns`).
+- When an aside is present, the content column gets `padding-inline-end: var(--gap-xl)`.
+- Headings and paragraphs inside the banner are width-capped to `var(--container-max-width-narrow)` with `text-wrap: balance`.
+
+---
+
+## Accessibility
+
+- The search form itself carries `role="search"` (supplied by the `SearchForm` component) — this creates a `search` landmark for assistive technology. Do not duplicate the role on the banner wrapper.
+- The search `<input>` has `aria-label="Search by keywords"` by default; the icon-only submit button exposes `<span class="sr-only">Search</span>` for screen readers.
+- The title should be a single `<h1>` when the banner is used at the top of a page.
+- Image asides need meaningful `alt` text (or `alt=""` for decorative).
+- A LinkList aside carries its own heading — typically `<h2>` — which becomes a sibling of the banner `<h1>`. Make sure this heading ordering matches the rest of the page outline.
+- Keyboard interaction comes entirely from the children — tab order is: any action links inside the content, then the search input, then the submit button, then any aside link list items.
+
+---
+
+## Customisation via CSS custom properties
+
+Shared with `HeroBanner`:
+
+```css
+.mx-hero-banner {
+  --hero-height: 600px; /* min-block-size of the --hero variant */
+  --hero-columns: 50% 50%; /* grid columns at --large-up */
+  --hero-align: center; /* align-self for content + aside (start | center | end) */
+  --hero-image-radius: var(--border-radius); /* border-radius on the image aside */
+}
+```
+
+The `mx-hero-search` class does not currently define any of its own custom properties — it exists as a styling hook for project overrides.
+
+---
+
+→ Used in context: `mockups/SearchResultPage.stories.ts:5`

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

@@ -79,8 +79,8 @@ exports[`With Link List 1`] = `
 <h2 class="mx-heading--m">Popular searches</h2>
 
 <ul class="mx-link-list">
-      <li>
-<a href="#">
+  
+<li><a href="#">
   
   <span>Link one</span>
     
@@ -88,8 +88,7 @@ exports[`With Link List 1`] = `
 
 </a>
 </li>
-      <li>
-<a href="#">
+<li><a href="#">
   
   <span>Link two</span>
     
@@ -97,8 +96,7 @@ exports[`With Link List 1`] = `
 
 </a>
 </li>
-      <li>
-<a href="#">
+<li><a href="#">
   
   <span>Link three</span>
     
@@ -106,8 +104,7 @@ exports[`With Link List 1`] = `
 
 </a>
 </li>
-      <li>
-<a href="#">
+<li><a href="#">
   
   <span>Link four</span>
     
@@ -115,8 +112,7 @@ exports[`With Link List 1`] = `
 
 </a>
 </li>
-      <li>
-<a href="#">
+<li><a href="#">
   
   <span>Link five</span>
     
@@ -124,7 +120,7 @@ exports[`With Link List 1`] = `
 
 </a>
 </li>
-  </ul>
+</ul>
 
       </div>
       </div>

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

@@ -1,5 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Hero 1`] = `"<div class="mx-page mx-section--xl"><div class="mx-hero-banner mx-vertical-flow mx-hero-banner--hero"><h1 class="mx-headline" id="always-put-your-best-">Always put your best foot forward.</h1><p class="mx-text--xl">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p><button class="mx-button mx-button--dark" type="button">Button</button></div></div>"`;
+exports[`Hero Search 1`] = `"<div class="mx-page mx-hero-banner"><div class="mx-hero-banner__inner"><div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl"><h1 class="" id="always-put-your-best">Always put your best foot forward.</h1><p class="mx-text--lede">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p><search><form class="mx-form mx-form--inline-button"><input class="mx-input__text" aria-label="Search by keywords" placeholder="Keywords..." type="search" value="" name="search-form"><button class="mx-button mx-button--icon-only" type="submit"><span class="mx-icon mx-icon--search" aria-hidden="true"></span><span class="sr-only">Search</span></button></form></search></div></div></div>"`;
 
-exports[`Hero Search 1`] = `"<div class="mx-page mx-section--xl"><div class="mx-hero-banner mx-vertical-flow"><h1 class="mx-headline" id="always-put-your-best-">Always put your best foot forward.</h1><p class="mx-text--xl">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p></div></div>"`;
+exports[`Highlight 1`] = `"<div class="mx-page mx-hero-banner mx-background--primary mx-hero-banner--hero"><div class="mx-hero-banner__inner"><div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl"><h1 class="mx-headline" id="always-put-your-best">Always put your best foot forward.</h1><p class="mx-text--lede">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p><search><form class="mx-form mx-form--inline-button"><input class="mx-input__text" aria-label="Search by keywords" placeholder="Keywords..." type="search" value="" name="search-form"><button class="mx-button mx-button--icon-only" type="submit"><span class="mx-icon mx-icon--search" aria-hidden="true"></span><span class="sr-only">Search</span></button></form></search></div></div></div>"`;
+
+exports[`With Link List 1`] = `"<div class="mx-page mx-hero-banner"><div class="mx-hero-banner__inner"><div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl"><h1 class="" id="always-put-your-best">Always put your best foot forward.</h1><p class="mx-text--lede">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p><search><form class="mx-form mx-form--inline-button"><input class="mx-input__text" aria-label="Search by keywords" placeholder="Keywords..." type="search" value="" name="search-form"><button class="mx-button mx-button--icon-only" type="submit"><span class="mx-icon mx-icon--search" aria-hidden="true"></span><span class="sr-only">Search</span></button></form></search></div><div class="mx-hero-banner__aside mx-section--xl"><h2 class="mx-heading--m" id="popular-searches">Popular searches</h2><ul class="mx-link-list"><li><a href="#1" class="mx-link">Page link #1<span class="mx-icon mx-icon--chevron-right"></span></a></li><li><a href="#2" class="mx-link">Page link #2<span class="mx-icon mx-icon--chevron-right"></span></a></li><li><a href="#3" class="mx-link">Page link #3<span class="mx-icon mx-icon--chevron-right"></span></a></li><li><a href="#4" class="mx-link">Page link #4<span class="mx-icon mx-icon--chevron-right"></span></a></li><li><a href="#5" class="mx-link">Page link #5<span class="mx-icon mx-icon--chevron-right"></span></a></li></ul></div></div></div>"`;

package/src/Component/InPageAlert/InPageAlert.figma.ts

@@ -0,0 +1,37 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=74-25
+// source=src/Component/InPageAlert/InPageAlert.tsx
+// component=InPageAlert
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const type = instance.getEnum("Type", {
+  Info: "InPageAlertTypes.INFO",
+  Error: "InPageAlertTypes.ERROR",
+  Warning: "InPageAlertTypes.WARNING",
+  Success: "InPageAlertTypes.SUCCESS",
+  // "Default" reproduces the Twig template's genuinely-typeless bare-box state
+  // (in-page-alert.twig: `type ? ... : null` — falsy type renders no colour/icon
+  // classes at all). React's `type` prop defaults to InPageAlertTypes.INFO when
+  // omitted, so this state has NO honest React equivalent — omitting the prop here
+  // still produces a type=INFO alert in real code, not a bare one. Documented, not
+  // silently guessed at.
+  Default: null,
+})
+
+// Real children — a proper Content SLOT (not a fixed text layer).
+const content = instance.getSlot("Content")
+
+const typeProp = type ? ` type={${type}}` : ""
+
+export default {
+  example: figma.code`<InPageAlert${typeProp}>${content}</InPageAlert>`,
+  imports: [
+    'import { InPageAlert } from "@pnx-mixtape/mxds/react"',
+    'import { InPageAlertTypes } from "@pnx-mixtape/ids-shape"',
+  ],
+  id: "in-page-alert",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Component/InPageAlert/InPageAlert.tsx

@@ -10,8 +10,8 @@ const InPageAlert = ({ children, type = InPageAlertTypes.INFO }: InPageAlertProp
   <div
     className={classNames("message", {
       [`message--${type}`]: type,
-      icon: type,
-      [`icon--${type}`]: type,
+      "mx-icon": type,
+      [`mx-icon--${type}`]: type,
     })}
   >
     <div className="message__content">{children}</div>

package/src/Component/InPageAlert/README.md

@@ -1,27 +1,185 @@
-# In Page Alert
+# InPageAlert
 
-### How to use
+A contextual message displayed inline within page content to communicate information, success, warning, or error states related to a specific section or user action. Use an InPageAlert when the message is tied to content or a task on the page; use `GlobalAlert` for site-wide notices that appear above the page (and can be dismissed and persisted via `localStorage`).
 
-**CSS**
+## CSS Import
 
-`@import '@pnx-mixtape/mxds/src/Component/InPageAlert/in-page-alert.css';`
+```css
+@import "@pnx-mixtape/mxds/src/Component/InPageAlert/in-page-alert.css";
+```
 
-**Twig**
+---
 
-You can setup a twig namespace in your project if you wish to use the twig files directly.
+## Twig
 
-- Eg: `{% extends '@mixtape/Component/InPageAlert/in-page-alert.twig' %}`
+```twig
+{% include '@mixtape/Component/InPageAlert/in-page-alert.twig' with {
+  type: 'warning',
+  title: heading_component,
+  content: 'Please review your submission before continuing.',
+  link: link_component,
+} %}
+```
 
-Alternatively copy/paste the file for more control.
+**in-page-alert.twig props** (`InPageAlert` type from `ids-shape`):
 
-**JSX Components**
+| Prop      | Type               | Description                                                                                               |
+| --------- | ------------------ | --------------------------------------------------------------------------------------------------------- |
+| `type`    | `InPageAlertTypes` | Visual intent — `info`, `success`, `warning`, or `error`. Omit for a plain message with no colour or icon |
+| `title`   | `Heading`          | Optional heading rendered above the content (a smaller heading modifier works best)                       |
+| `content` | `WysiwygText`      | Alert body text (required)                                                                                |
+| `link`    | `Link`             | Optional call-to-action link rendered after the content                                                   |
 
-JSX components are available for use with React.
+---
 
-- JSX import: `import { InPageAlert } from '@pnx-mixtape/mxds/react';`
+## HTML
 
-**Custom Element**
+Minimal markup for each type. The outer `<div>` takes `message`, a `message--<type>` modifier, and the matching icon classes.
 
-This javascript just adds the ability to close/dismiss a message, which is recorded in localStorage.
+```html
+<!-- Info -->
+<div class="message message--info mx-icon mx-icon--info">
+  <div class="message__content">
+    <p><b>Heads up.</b> Here's something you should know.</p>
+  </div>
+</div>
 
-- ES6 import: `import '@pnx-mixtape/mxds/src/Component/InPageAlert/Elements/InPageAlert';`
+<!-- Success -->
+<div class="message message--success mx-icon mx-icon--success">
+  <div class="message__content">
+    <p><b>Saved.</b> Your changes were saved successfully.</p>
+  </div>
+</div>
+
+<!-- Warning -->
+<div class="message message--warning mx-icon mx-icon--warning">
+  <div class="message__content">
+    <p><b>Careful.</b> This action can't be undone.</p>
+  </div>
+</div>
+
+<!-- Error -->
+<div class="message message--error mx-icon mx-icon--error">
+  <div class="message__content">
+    <p><b>Something went wrong.</b> <a href="#">Try again</a>.</p>
+  </div>
+</div>
+```
+
+With an optional heading and link inside the content area:
+
+```html
+<div class="message message--warning mx-icon mx-icon--warning">
+  <div class="message__content">
+    <h2 class="mx-heading--m">Action required</h2>
+    <p>Please review your submission before continuing.</p>
+    <a href="#"><span>Review now</span></a>
+  </div>
+</div>
+```
+
+---
+
+## React
+
+```tsx
+import { InPageAlert } from "@pnx-mixtape/mxds/react"
+import { InPageAlertTypes } from "@pnx-mixtape/ids-shape"
+
+// Info (default)
+<InPageAlert>
+  <p><b>Heads up.</b> Here's something you should know.</p>
+</InPageAlert>
+
+// Success
+<InPageAlert type={InPageAlertTypes.SUCCESS}>
+  <p><b>Saved.</b> Your changes were saved successfully.</p>
+</InPageAlert>
+
+// Warning
+<InPageAlert type={InPageAlertTypes.WARNING}>
+  <p><b>Careful.</b> This action can't be undone.</p>
+</InPageAlert>
+
+// Error
+<InPageAlert type={InPageAlertTypes.ERROR}>
+  <p><b>Something went wrong.</b> <a href="#">Try again</a>.</p>
+</InPageAlert>
+```
+
+**`InPageAlert` props:**
+
+| Prop       | Type               | Default                 | Description                                               |
+| ---------- | ------------------ | ----------------------- | --------------------------------------------------------- |
+| `type`     | `InPageAlertTypes` | `InPageAlertTypes.INFO` | Visual intent — `info`, `success`, `warning`, or `error`  |
+| `children` | `ReactNode`        | —                       | Alert content (typically a `<p>`, optionally with a link) |
+
+---
+
+## Modifiers
+
+Class modifier -> `InPageAlertTypes` enum value -> visual intent:
+
+| Class              | `InPageAlertTypes` value                 | Intent                                  |
+| ------------------ | ---------------------------------------- | --------------------------------------- |
+| `message--info`    | `InPageAlertTypes.INFO` (`"info"`)       | Neutral information or a helpful notice |
+| `message--success` | `InPageAlertTypes.SUCCESS` (`"success"`) | Confirms a successful action or outcome |
+| `message--warning` | `InPageAlertTypes.WARNING` (`"warning"`) | Highlights a caution or potential issue |
+| `message--error`   | `InPageAlertTypes.ERROR` (`"error"`)     | Signals a failure or blocking problem   |
+
+Each modifier also expects the matching icon class pair (`mx-icon mx-icon--<type>` in Twig/HTML; `icon icon--<type>` in the React output) on the same element. The component adds these automatically when `type` is set.
+
+---
+
+## Accessibility
+
+InPageAlert renders a plain `<div>` — the source component does not set an ARIA role. When the alert is static content already present on page load (for example, a page-level notice), no role is required.
+
+When you surface an alert dynamically (for example, after a form submission, when content updates, or when an error occurs), wrap or augment the alert so assistive technology announces it:
+
+- **`role="status"`** (or `aria-live="polite"`) for non-urgent info, success, and warning messages. The update is announced once the user is idle.
+- **`role="alert"`** (or `aria-live="assertive"`) for errors and other urgent messages that interrupt the user immediately.
+
+```html
+<div role="status" class="message message--success mx-icon mx-icon--success">
+  <div class="message__content">
+    <p>Your changes have been saved.</p>
+  </div>
+</div>
+
+<div role="alert" class="message message--error mx-icon mx-icon--error">
+  <div class="message__content">
+    <p>We couldn't submit the form. Please try again.</p>
+  </div>
+</div>
+```
+
+Additional notes:
+
+- Colour is not the only indicator — the icon and the bold lead text carry the same meaning for users who can't perceive colour.
+- Links inside an alert inherit `color: inherit` so they stay within the alert's colour family — ensure text remains underlined or otherwise distinguishable.
+- If the alert is dismissable (for example, wrapped in `<mx-closable-alert>`), ensure the close control is a real `<button>` with an accessible label.
+
+---
+
+## Customisation via CSS custom properties
+
+```css
+.message {
+  --background: var(--colour-background-alt); /* background colour */
+  --foreground: var(--colour-foreground); /* text and border colour */
+  --alert-scheme: light; /* color-scheme for the alert */
+  --icon-size: 1.25rem; /* icon size when .mx-icon is present */
+}
+```
+
+Per-type colours are derived from the corresponding design tokens and a 95% white mix:
+
+| Type              | `--foreground`          | `--background`                                          |
+| ----------------- | ----------------------- | ------------------------------------------------------- |
+| `info` / `status` | `var(--colour-info)`    | `color-mix(in oklch, var(--colour-info), white 95%)`    |
+| `success`         | `var(--colour-success)` | `color-mix(in oklch, var(--colour-success), white 95%)` |
+| `warning`         | `var(--colour-warning)` | `color-mix(in oklch, var(--colour-warning), white 95%)` |
+| `error`           | `var(--colour-error)`   | `color-mix(in oklch, var(--colour-error), white 95%)`   |
+
+Override the relevant `--colour-*` token (or set `--foreground` / `--background` directly on `.message`) to retheme alerts.

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

@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Error 1`] = `"<div class="message message--error icon icon--error"><div class="message__content"><p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p></div></div>"`;
+exports[`Error 1`] = `"<div class="message message--error mx-icon mx-icon--error"><div class="message__content"><p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p></div></div>"`;
 
-exports[`In Page Alert 1`] = `"<div class="message message--info icon icon--info"><div class="message__content"><p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p></div></div>"`;
+exports[`In Page Alert 1`] = `"<div class="message message--info mx-icon mx-icon--info"><div class="message__content"><p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p></div></div>"`;
 
-exports[`Success 1`] = `"<div class="message message--success icon icon--success"><div class="message__content"><p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p></div></div>"`;
+exports[`Success 1`] = `"<div class="message message--success mx-icon mx-icon--success"><div class="message__content"><p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p></div></div>"`;
 
-exports[`Warning 1`] = `"<div class="message message--warning icon icon--warning"><div class="message__content"><p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p></div></div>"`;
+exports[`Warning 1`] = `"<div class="message message--warning mx-icon mx-icon--warning"><div class="message__content"><p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p></div></div>"`;

package/src/Component/InPageNavigation/InPageNavigation.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=83-279
+// source=src/Component/InPageNavigation/InPageNavigation.tsx
+// component=InPageNavigation
+import figma from "figma"
+
+// Fully dynamic in real usage — headings come from useInPageNavigation() scanning a
+// live container ref's DOM at runtime, not from props. Only `title` is a real,
+// static prop; the link list itself can't be configured from Figma at all.
+export default {
+  example: figma.code`<InPageNavigation title="On this page" />`,
+  imports: ['import { InPageNavigation } from "@pnx-mixtape/mxds/react"'],
+  id: "in-page-navigation",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Component/InPageNavigation/InPageNavigation.stories.ts

@@ -29,6 +29,7 @@ const meta: Meta<InPageNavigationType> = {
       Link({
         href: "#section-1",
         title: "Section 1",
+        listItem: true,
         iconStart: Icon({
           icon: Icons.CHEVRON_RIGHT,
         }),
@@ -36,6 +37,7 @@ const meta: Meta<InPageNavigationType> = {
       Link({
         href: "#section-2",
         title: "Section 2",
+        listItem: true,
         iconStart: Icon({
           icon: Icons.CHEVRON_RIGHT,
         }),
@@ -43,11 +45,12 @@ const meta: Meta<InPageNavigationType> = {
       Link({
         href: "#section-3",
         title: "Section 3",
+        listItem: true,
         iconStart: Icon({
           icon: Icons.CHEVRON_RIGHT,
         }),
       }),
-    ],
+    ].join(""),
   },
   argTypes: {
     title: {
@@ -61,9 +64,10 @@ const meta: Meta<InPageNavigationType> = {
       },
     },
     items: {
-      description: "A list of [Link](/?path=/docs/atom-link--docs) objects to use for the menu.",
+      description:
+        "A concatenated string of [Link](/?path=/docs/atom-link--docs) markup (with `listItem: true`) to use for the menu.",
       table: {
-        type: { summary: "Link[]" },
+        type: { summary: "string" },
         subcategory: "Provided content",
       },
     },
@@ -91,7 +95,7 @@ export const InPageNavigation: Story = {}
  */
 export const GeneratedItems: Story = {
   args: {
-    items: [],
+    items: "",
   },
 }
 
@@ -100,7 +104,7 @@ export const GeneratedItems: Story = {
  */
 export const Nested: Story = {
   args: {
-    items: [],
+    items: "",
     levels: [HeadingTypes.TWO, HeadingTypes.THREE],
   },
 }
@@ -110,7 +114,7 @@ export const Nested: Story = {
  */
 export const NoHeadings: Story = {
   args: {
-    items: [],
+    items: "",
     levels: [HeadingTypes.FOUR],
   },
 }
@@ -120,7 +124,7 @@ export const NoHeadings: Story = {
  */
 export const OtherContainer: Story = {
   args: {
-    items: [],
+    items: "",
   },
   render: args => Other(args),
 }