@pnx-mixtape/mxds 0.0.21 → 0.0.23

package/src/Component/InPageAlert/InPageAlert.tsx

@@ -6,10 +6,7 @@ type InPageAlertProps = PropsWithChildren & {
   type?: InPageAlertTypes
 }
 
-const InPageAlert = ({
-  children,
-  type = InPageAlertTypes.INFO,
-}: InPageAlertProps): JSX.Element => (
+const InPageAlert = ({ children, type = InPageAlertTypes.INFO }: InPageAlertProps): JSX.Element => (
   <div
     className={classNames("message", {
       [`message--${type}`]: type,

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

@@ -1,9 +1,87 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Component/InPageAlert Error smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="message message--error mx-icon mx-icon--error">
+    <div class="message__content">
+      Something happened that requires your attention
+      <a href="#">
+        <span>
+          Click here
+        </span>
+      </a>
+    </div>
+  </div>
+</div>
+`;
 
 exports[`Component/InPageAlert InPageAlert smoke-test 1`] = `
 <div class="mx-page default">
-  <div class="message ">
+  <div class="message">
+    <div class="message__content">
+      Something happened that requires your attention
+      <a href="#">
+        <span>
+          Click here
+        </span>
+      </a>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Component/InPageAlert Info smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="message message--info mx-icon mx-icon--info">
+    <div class="message__content">
+      Something happened that requires your attention
+      <a href="#">
+        <span>
+          Click here
+        </span>
+      </a>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Component/InPageAlert Success smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="message message--success mx-icon mx-icon--success">
+    <div class="message__content">
+      Something happened that requires your attention
+      <a href="#">
+        <span>
+          Click here
+        </span>
+      </a>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Component/InPageAlert Warning smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="message message--warning mx-icon mx-icon--warning">
+    <div class="message__content">
+      Something happened that requires your attention
+      <a href="#">
+        <span>
+          Click here
+        </span>
+      </a>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Component/InPageAlert WithHeading smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="message">
     <div class="message__content">
+      <h2 class="mx-heading--m">
+        In page alert
+      </h2>
       Something happened that requires your attention
       <a href="#">
         <span>

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component/InPageAlert Error smoke-test 1`] = `
 <div class="message message--error icon icon--error">

package/src/Component/InPageNavigation/Elements/InPageNavigation.ts

@@ -1,6 +1,6 @@
 /**
- * DialogBase
- * @file Support opening/closing, and adding a scroll lock to the body.
+ * InPageNavigation
+ * @file Ensure headings have IDs and build the menu if not set.
  */
 
 import { makeAnchor, createElement } from "../../../Utility/utilities"
@@ -33,9 +33,7 @@ export default class InPageNavigation extends HTMLElement {
       })
     } else {
       this.links.forEach((link: HTMLAnchorElement) => {
-        const heading: HTMLHeadingElement = this.container.querySelector(
-          link.hash,
-        )
+        const heading: HTMLHeadingElement = this.container.querySelector(link.hash)
         if (!heading) return
         this.items.push({ link, heading })
       })
@@ -72,8 +70,7 @@ export default class InPageNavigation extends HTMLElement {
   }
 
   get menu(): HTMLUListElement | HTMLOListElement | null {
-    const menu: HTMLUListElement | HTMLOListElement | null =
-      this.querySelector("ul, ol")
+    const menu: HTMLUListElement | HTMLOListElement | null = this.querySelector("ul, ol")
     if (!menu) {
       throw new Error(`${this.localName} must contain a <ul> or <ol> element.`)
     }
@@ -91,7 +88,7 @@ export default class InPageNavigation extends HTMLElement {
   }
 
   get headings(): NodeListOf<HTMLHeadingElement> | undefined {
-    return this.container?.querySelectorAll(this.headingLevels)
+    return this.container?.querySelectorAll(`:is(${this.headingLevels}):not(.is-excluded)`)
   }
 
   get links(): NodeListOf<HTMLAnchorElement> | undefined {
@@ -126,7 +123,8 @@ export default class InPageNavigation extends HTMLElement {
   }
 }
 
-customElements.define("mx-in-page-navigation", InPageNavigation)
+if (!customElements.get("mx-in-page-navigation"))
+  customElements.define("mx-in-page-navigation", InPageNavigation)
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/Component/InPageNavigation/Hooks/useInPageNavigation.ts

@@ -32,11 +32,9 @@ const useInPageNavigation = ({
         }) as HeadingType,
     )
     setHeadings([...new Set(values)])
-    headingElements.forEach(
-      (heading: HTMLHeadingElement, index: number): void => {
-        if (!heading.id) heading.id = values[index].id
-      },
-    )
+    headingElements.forEach((heading: HTMLHeadingElement, index: number): void => {
+      if (!heading.id) heading.id = values[index].id
+    })
   }, [ref, levels])
 
   return { headings }

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

@@ -2,10 +2,7 @@ import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./twig/in-page-navigation-story.twig"
 import "./in-page-navigation.css"
 import "./Elements/InPageNavigation"
-import {
-  HeadingTypes,
-  InPageNavigation as InPageNavigationType,
-} from "@pnx-mixtape/ids-shape"
+import { HeadingTypes, InPageNavigation as InPageNavigationType } from "@pnx-mixtape/ids-shape"
 
 // Deps.
 import Heading from "../../Atom/Heading/heading.twig"
@@ -13,6 +10,10 @@ import Link from "../../Atom/Link/link.twig"
 import Icon from "../../Atom/Icon/icon.twig"
 import { Icons } from "../../enums"
 
+/**
+ * A table of contents with anchor links to the headings.
+ * It is enhanced by the `InPageNavigation` element javascript (not needed if all headings have IDs and the `items` are provided).
+ */
 const meta: Meta<InPageNavigationType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
@@ -47,13 +48,28 @@ const meta: Meta<InPageNavigationType> = {
     ],
   },
   argTypes: {
-    levels: { options: Object.values(HeadingTypes), control: "multi-select" },
-    // @ts-expect-error The controls follow the shape
-    "title.title": { control: "text" },
-    "title.as": { options: Object.values(HeadingTypes), control: "select" },
-    "title.modifiers": {
+    levels: {
+      description:
+        "If no `items` are provided, the javascript can build the items from the headings. This chooses the headings to include. eg; `h2,h3`",
       options: Object.values(HeadingTypes),
       control: "multi-select",
+      table: {
+        type: { summary: "enum" },
+        defaultValue: { summary: HeadingTypes.TWO },
+      },
+    },
+    title: {
+      description: "Optional [Heading](/?path=/docs/atom-heading--docs) component.",
+      control: "text",
+      table: {
+        type: { summary: "Heading" },
+      },
+    },
+    items: {
+      description: "A list of [Link](/?path=/docs/atom-link--docs) objects to use for the menu.",
+      table: {
+        type: { summary: "Link[]" },
+      },
     },
   },
 }
@@ -62,3 +78,22 @@ export default meta
 type Story = StoryObj<InPageNavigationType>
 
 export const InPageNavigation: Story = {}
+
+/**
+ * When the `items` are empty, the Javascript builds them.
+ */
+export const GeneratedItems: Story = {
+  args: {
+    items: [],
+  },
+}
+
+/**
+ * Adding levels builds a nested menu.
+ */
+export const Nested: Story = {
+  args: {
+    items: [],
+    levels: [HeadingTypes.TWO, HeadingTypes.THREE],
+  },
+}

package/src/Component/InPageNavigation/InPageNavigation.stories.tsx

@@ -14,69 +14,61 @@ const meta: Meta<typeof Component> = {
       <div className="mx-vertical-flow">
         <Heading level={HeadingLevels.TWO}>Section 1</Heading>
         <Text>
-          In publishing and graphic design, lorem ipsum is a placeholder text
-          commonly used to demonstrate the visual form of a document without
-          relying on meaningful content. Replacing the actual content with
-          placeholder text allows designers to design the form of the content
-          before the content itself has been produced.
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to
+          demonstrate the visual form of a document without relying on meaningful content. Replacing
+          the actual content with placeholder text allows designers to design the form of the
+          content before the content itself has been produced.
         </Text>
         <Heading level={HeadingLevels.TWO} id="anchor-test">
           Section 2
         </Heading>
         <Text>
-          In publishing and graphic design, lorem ipsum is a placeholder text
-          commonly used to demonstrate the visual form of a document without
-          relying on meaningful content. Replacing the actual content with
-          placeholder text allows designers to design the form of the content
-          before the content itself has been produced.
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to
+          demonstrate the visual form of a document without relying on meaningful content. Replacing
+          the actual content with placeholder text allows designers to design the form of the
+          content before the content itself has been produced.
         </Text>
         <Heading level={HeadingLevels.THREE}>Test level 3</Heading>
         <Text>
-          In publishing and graphic design, lorem ipsum is a placeholder text
-          commonly used to demonstrate the visual form of a document without
-          relying on meaningful content. Replacing the actual content with
-          placeholder text allows designers to design the form of the content
-          before the content itself has been produced.
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to
+          demonstrate the visual form of a document without relying on meaningful content. Replacing
+          the actual content with placeholder text allows designers to design the form of the
+          content before the content itself has been produced.
         </Text>
         <Heading level={HeadingLevels.TWO}>Section 3</Heading>
         <Text>
-          In publishing and graphic design, lorem ipsum is a placeholder text
-          commonly used to demonstrate the visual form of a document without
-          relying on meaningful content. Replacing the actual content with
-          placeholder text allows designers to design the form of the content
-          before the content itself has been produced.
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to
+          demonstrate the visual form of a document without relying on meaningful content. Replacing
+          the actual content with placeholder text allows designers to design the form of the
+          content before the content itself has been produced.
         </Text>
         <Heading level={HeadingLevels.TWO}>Section 4</Heading>
         <Text>
-          In publishing and graphic design, lorem ipsum is a placeholder text
-          commonly used to demonstrate the visual form of a document without
-          relying on meaningful content. Replacing the actual content with
-          placeholder text allows designers to design the form of the content
-          before the content itself has been produced.
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to
+          demonstrate the visual form of a document without relying on meaningful content. Replacing
+          the actual content with placeholder text allows designers to design the form of the
+          content before the content itself has been produced.
         </Text>
         <Heading level={HeadingLevels.TWO}>Section 5</Heading>
         <Text>
-          In publishing and graphic design, lorem ipsum is a placeholder text
-          commonly used to demonstrate the visual form of a document without
-          relying on meaningful content. Replacing the actual content with
-          placeholder text allows designers to design the form of the content
-          before the content itself has been produced.
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to
+          demonstrate the visual form of a document without relying on meaningful content. Replacing
+          the actual content with placeholder text allows designers to design the form of the
+          content before the content itself has been produced.
         </Text>
         <Heading level={HeadingLevels.THREE}>Test level 6</Heading>
         <Text>
-          In publishing and graphic design, lorem ipsum is a placeholder text
-          commonly used to demonstrate the visual form of a document without
-          relying on meaningful content. Replacing the actual content with
-          placeholder text allows designers to design the form of the content
-          before the content itself has been produced.
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to
+          demonstrate the visual form of a document without relying on meaningful content. Replacing
+          the actual content with placeholder text allows designers to design the form of the
+          content before the content itself has been produced.
         </Text>
         <Heading level={HeadingLevels.TWO}>Section 7</Heading>
         <Text>
-          In publishing and graphic design, lorem ipsum is a placeholder text
-          commonly used to demonstrate the visual form of a document without
-          relying on meaningful content. Replacing the actual content with
-          placeholder text allows designers to design the form of the content
-          before the content itself has been produced.
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to
+          demonstrate the visual form of a document without relying on meaningful content. Replacing
+          the actual content with placeholder text allows designers to design the form of the
+          content before the content itself has been produced.
         </Text>
       </div>
     </Sidebar>

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

@@ -1,4 +1,73 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Component/InPageNavigation GeneratedItems smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-in-page-navigation data-content=".js-content"
+                         data-headings
+  >
+    <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">
+      <h2 class="mx-heading--m">
+        On this page
+      </h2>
+      <ul>
+        <li class="mx-in-page-navigation__level--h2">
+          <a href="#section-1">
+            <span class="mx-icon mx-icon--chevron-right">
+            </span>
+            <span>
+              Section 1
+            </span>
+          </a>
+        </li>
+        <li class="mx-in-page-navigation__level--h2">
+          <a href="#section-2">
+            <span class="mx-icon mx-icon--chevron-right">
+            </span>
+            <span>
+              Section 2
+            </span>
+          </a>
+        </li>
+        <li class="mx-in-page-navigation__level--h2">
+          <a href="#section-3">
+            <span class="mx-icon mx-icon--chevron-right">
+            </span>
+            <span>
+              Section 3
+            </span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </mx-in-page-navigation>
+  <div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
+    <h2 id="section-1">
+      Section 1
+    </h2>
+    <p>
+      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+    </p>
+    <h2 id="section-2">
+      Section 2
+    </h2>
+    <p>
+      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+    </p>
+    <h3 id="test-level-3">
+      Test level 3
+    </h3>
+    <p>
+      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+    </p>
+    <h2 id="section-3">
+      Section 3
+    </h2>
+    <p>
+      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+    </p>
+  </div>
+</div>
+`;
 
 exports[`Component/InPageNavigation InPageNavigation smoke-test 1`] = `
 <div class="mx-page default">
@@ -6,13 +75,13 @@ exports[`Component/InPageNavigation InPageNavigation smoke-test 1`] = `
                          data-headings
   >
     <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">
-      <h2 class=" mx-heading--m">
+      <h2 class="mx-heading--m">
         On this page
       </h2>
       <ul>
         <li>
           <a href="#section-1">
-            <span class="mx-icon mx-icon--chevron-right ">
+            <span class="mx-icon mx-icon--chevron-right">
             </span>
             <span>
               Section 1
@@ -21,7 +90,7 @@ exports[`Component/InPageNavigation InPageNavigation smoke-test 1`] = `
         </li>
         <li>
           <a href="#section-2">
-            <span class="mx-icon mx-icon--chevron-right ">
+            <span class="mx-icon mx-icon--chevron-right">
             </span>
             <span>
               Section 2
@@ -30,7 +99,85 @@ exports[`Component/InPageNavigation InPageNavigation smoke-test 1`] = `
         </li>
         <li>
           <a href="#section-3">
-            <span class="mx-icon mx-icon--chevron-right ">
+            <span class="mx-icon mx-icon--chevron-right">
+            </span>
+            <span>
+              Section 3
+            </span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </mx-in-page-navigation>
+  <div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
+    <h2 id="section-1">
+      Section 1
+    </h2>
+    <p>
+      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+    </p>
+    <h2 id="section-2">
+      Section 2
+    </h2>
+    <p>
+      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+    </p>
+    <h3 id="test-level-3">
+      Test level 3
+    </h3>
+    <p>
+      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+    </p>
+    <h2 id="section-3">
+      Section 3
+    </h2>
+    <p>
+      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Component/InPageNavigation Nested smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-in-page-navigation data-content=".js-content"
+                         data-headings="h2,h3"
+  >
+    <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">
+      <h2 class="mx-heading--m">
+        On this page
+      </h2>
+      <ul>
+        <li class="mx-in-page-navigation__level--h2">
+          <a href="#section-1">
+            <span class="mx-icon mx-icon--chevron-right">
+            </span>
+            <span>
+              Section 1
+            </span>
+          </a>
+        </li>
+        <li class="mx-in-page-navigation__level--h2">
+          <a href="#section-2">
+            <span class="mx-icon mx-icon--chevron-right">
+            </span>
+            <span>
+              Section 2
+            </span>
+          </a>
+        </li>
+        <li class="mx-in-page-navigation__level--h3">
+          <a href="#test-level-3">
+            <span class="mx-icon mx-icon--chevron-right">
+            </span>
+            <span>
+              Test level 3
+            </span>
+          </a>
+        </li>
+        <li class="mx-in-page-navigation__level--h2">
+          <a href="#section-3">
+            <span class="mx-icon mx-icon--chevron-right">
             </span>
             <span>
               Section 3

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component/InPageNavigation InPageNavigation smoke-test 1`] = `
 <div class="mx-grid--sidebar">

package/src/Component/LinkList/LinkList.stories.ts

@@ -37,6 +37,26 @@ const meta: Meta<typeof Component> = {
       }),
     ],
   },
+  argTypes: {
+    title: {
+      description: "Optional [Heading](/?path=/docs/atom-heading--docs) component.",
+      control: "text",
+      table: {
+        type: { summary: "Heading" },
+      },
+    },
+    items: {
+      description: `A list of [Link](/?path=/docs/atom-link--docs) objects to use for the menu. These should include the \`${Icons.CHEVRON_RIGHT}\` [Icon](/?path=/docs/atom-icon--docs)`,
+      type: {
+        name: "other",
+        required: true,
+        value: "array",
+      },
+      table: {
+        type: { summary: "Link[]" },
+      },
+    },
+  },
 }
 
 export default meta
@@ -44,6 +64,9 @@ type Story = StoryObj<typeof meta>
 
 export const LinkList: Story = {}
 
+/**
+ * Adds a heading above the list.
+ */
 export const WithTitle: Story = {
   args: {
     title: Heading({

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component/LinkList LinkList smoke-test 1`] = `
 <div class="mx-page default">
@@ -8,7 +8,7 @@ exports[`Component/LinkList LinkList smoke-test 1`] = `
         <span>
           Music
         </span>
-        <span class="mx-icon mx-icon--chevron-right ">
+        <span class="mx-icon mx-icon--chevron-right">
         </span>
       </a>
     </li>
@@ -17,7 +17,7 @@ exports[`Component/LinkList LinkList smoke-test 1`] = `
         <span>
           Performances
         </span>
-        <span class="mx-icon mx-icon--chevron-right ">
+        <span class="mx-icon mx-icon--chevron-right">
         </span>
       </a>
     </li>
@@ -26,7 +26,7 @@ exports[`Component/LinkList LinkList smoke-test 1`] = `
         <span>
           Get involved
         </span>
-        <span class="mx-icon mx-icon--chevron-right ">
+        <span class="mx-icon mx-icon--chevron-right">
         </span>
       </a>
     </li>
@@ -36,7 +36,7 @@ exports[`Component/LinkList LinkList smoke-test 1`] = `
 
 exports[`Component/LinkList WithTitle smoke-test 1`] = `
 <div class="mx-page default">
-  <h2 class=" mx-heading--m">
+  <h2 class="mx-heading--m">
     Popular links
   </h2>
   <ul class="mx-link-list">
@@ -45,7 +45,7 @@ exports[`Component/LinkList WithTitle smoke-test 1`] = `
         <span>
           Music
         </span>
-        <span class="mx-icon mx-icon--chevron-right ">
+        <span class="mx-icon mx-icon--chevron-right">
         </span>
       </a>
     </li>
@@ -54,7 +54,7 @@ exports[`Component/LinkList WithTitle smoke-test 1`] = `
         <span>
           Performances
         </span>
-        <span class="mx-icon mx-icon--chevron-right ">
+        <span class="mx-icon mx-icon--chevron-right">
         </span>
       </a>
     </li>
@@ -63,7 +63,7 @@ exports[`Component/LinkList WithTitle smoke-test 1`] = `
         <span>
           Get involved
         </span>
-        <span class="mx-icon mx-icon--chevron-right ">
+        <span class="mx-icon mx-icon--chevron-right">
         </span>
       </a>
     </li>

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Navigation/Link List LinkList smoke-test 1`] = `
 <ul class="mx-link-list">