@pnx-mixtape/mxds 0.0.22 → 0.0.24

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">

package/src/Component/LinkList/link-list.css

@@ -9,8 +9,7 @@
 
     & li {
       min-block-size: var(--min-height, var(--spacing-xl));
-      border-block-end: var(--line-width, 1px) solid
-        var(--line-colour, var(--colour-border));
+      border-block-end: var(--line-width, 1px) solid var(--line-colour, var(--colour-border));
 
       &:last-child {
         border-block-end: 0;

package/src/Component/ListItem/Components/ListItemContent.tsx

@@ -2,11 +2,7 @@ import { JSX, PropsWithChildren } from "react"
 import classNames from "classnames"
 
 const ListItemContent = ({ children }: PropsWithChildren): JSX.Element => {
-  return (
-    <div className={classNames("mx-list-item__content", "mx-vertical-flow")}>
-      {children}
-    </div>
-  )
+  return <div className={classNames("mx-list-item__content", "mx-vertical-flow")}>{children}</div>
 }
 
 export default ListItemContent

package/src/Component/ListItem/Components/ListItemMedia.tsx

@@ -5,10 +5,7 @@ type CardProps = PropsWithChildren & {
   skeleton?: boolean
 }
 
-const ListItemMedia = ({
-  children,
-  skeleton = false,
-}: CardProps): JSX.Element => {
+const ListItemMedia = ({ children, skeleton = false }: CardProps): JSX.Element => {
   return (
     <figure className={classNames("mx-list-item__media", "stack")}>
       {skeleton && <div className="mx-skeleton mx-skeleton--bg"></div>}