@pnx-mixtape/mxds 0.0.22 → 0.0.24

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

@@ -1,40 +1,38 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Component/HeroSearch HeroBanner smoke-test 1`] = `
+exports[`Component/HeroSearch HeroSearch smoke-test 1`] = `
 <div class="mx-page default">
-  <div class="mx-page default">
-    <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">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </p>
-          <form class="mx-form mx-form--inline-button"
-                role="search"
-                action="#search"
+  <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">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </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..."
           >
-            <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>
+          <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>
@@ -43,39 +41,37 @@ exports[`Component/HeroSearch HeroBanner smoke-test 1`] = `
 
 exports[`Component/HeroSearch Highlight smoke-test 1`] = `
 <div class="mx-page default">
-  <div class="mx-page default">
-    <div class="mx-hero-banner mx-hero-search mx-hero-banner--hero mx-background--primary">
-      <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">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </p>
-          <form class="mx-form mx-form--inline-button"
-                role="search"
-                action="#search"
+  <div class="mx-hero-banner mx-hero-search mx-hero-banner--hero mx-background--primary">
+    <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">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </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..."
           >
-            <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>
+          <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>
@@ -84,91 +80,89 @@ exports[`Component/HeroSearch Highlight smoke-test 1`] = `
 
 exports[`Component/HeroSearch WithLinkList smoke-test 1`] = `
 <div class="mx-page default">
-  <div class="mx-page default">
-    <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">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </p>
-          <form class="mx-form mx-form--inline-button"
-                role="search"
-                action="#search"
+  <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">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </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..."
           >
-            <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">
+          <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 class="mx-hero-banner__aside mx-section--xl">
+        <h2 class="mx-heading--m">
+          Popular searches
+        </h2>
+        <ul class="mx-link-list">
+          <li>
+            <a href="#">
+              <span>
+                Link one
+              </span>
+              <span class="mx-icon mx-icon--chevron-right">
+              </span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span>
+                Link two
+              </span>
+              <span class="mx-icon mx-icon--chevron-right">
+              </span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span>
+                Link three
+              </span>
+              <span class="mx-icon mx-icon--chevron-right">
+              </span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span>
+                Link four
+              </span>
+              <span class="mx-icon mx-icon--chevron-right">
+              </span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span>
+                Link five
               </span>
-              <span class="sr-only">
-                Search
+              <span class="mx-icon mx-icon--chevron-right">
               </span>
-            </button>
-          </form>
-        </div>
-        <div class="mx-hero-banner__aside mx-section--xl">
-          <h2 class=" mx-heading--m">
-            Popular searches
-          </h2>
-          <ul class="mx-link-list">
-            <li>
-              <a href="#">
-                <span>
-                  Link one
-                </span>
-                <span class="mx-icon mx-icon--chevron-right ">
-                </span>
-              </a>
-            </li>
-            <li>
-              <a href="#">
-                <span>
-                  Link two
-                </span>
-                <span class="mx-icon mx-icon--chevron-right ">
-                </span>
-              </a>
-            </li>
-            <li>
-              <a href="#">
-                <span>
-                  Link three
-                </span>
-                <span class="mx-icon mx-icon--chevron-right ">
-                </span>
-              </a>
-            </li>
-            <li>
-              <a href="#">
-                <span>
-                  Link four
-                </span>
-                <span class="mx-icon mx-icon--chevron-right ">
-                </span>
-              </a>
-            </li>
-            <li>
-              <a href="#">
-                <span>
-                  Link five
-                </span>
-                <span class="mx-icon mx-icon--chevron-right ">
-                </span>
-              </a>
-            </li>
-          </ul>
-        </div>
+            </a>
+          </li>
+        </ul>
       </div>
     </div>
   </div>

package/src/Component/HeroSearch/__snapshots__/HeroSearch.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/HeroSearch Hero smoke-test 1`] = `
 <div class="mx-page mx-section--xl">

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

@@ -7,18 +7,14 @@ import {
   InPageAlert as InPageAlertType,
   InPageAlertTypes,
 } from "@pnx-mixtape/ids-shape"
+import Heading from "../../Atom/Heading/heading.twig"
 
+/**
+ * In Page Alerts to highlight important information or notices.
+ */
 const meta: Meta<InPageAlertType> = {
   tags: ["autodocs"],
   component: Component,
-  argTypes: {
-    type: { options: Object.values(InPageAlertTypes), control: "radio" },
-    // @ts-expect-error The controls follow the shape
-    "title.title": { control: "text" },
-    "title.as": { options: Object.values(HeadingTypes), control: "select" },
-    "link.href": { control: "text" },
-    "link.title": { control: "text" },
-  },
   args: {
     content: "Something happened that requires your attention",
     link: Link({
@@ -26,9 +22,81 @@ const meta: Meta<InPageAlertType> = {
       href: "#",
     }),
   },
+  argTypes: {
+    type: {
+      options: Object.values(InPageAlertTypes),
+      control: "radio",
+      table: {
+        type: { summary: "enum" },
+      },
+    },
+    title: {
+      description:
+        "Optional content [Heading](/?path=/docs/atom-heading--docs). It is helpful to use a smaller heading modifier.",
+      control: "text",
+      table: {
+        type: { summary: "Heading" },
+        subcategory: "Alert content",
+      },
+    },
+    content: {
+      description: "Content.",
+      control: "text",
+      type: {
+        name: "string",
+        required: true,
+      },
+      table: {
+        type: { summary: "WysiwygText" },
+        subcategory: "Alert content",
+      },
+    },
+    link: {
+      description: "Optional content [Link](/?path=/docs/atom-link--docs).",
+      control: "text",
+      table: {
+        type: { summary: "Link" },
+        subcategory: "Alert content",
+      },
+    },
+  },
 }
 
 export default meta
 type Story = StoryObj<InPageAlertType>
 
 export const InPageAlert: Story = {}
+
+export const WithHeading: Story = {
+  args: {
+    title: Heading({
+      title: "In page alert",
+      as: HeadingTypes.TWO,
+      modifiers: [HeadingTypes.FOUR],
+    }),
+  },
+}
+
+export const Info: Story = {
+  args: {
+    type: InPageAlertTypes.INFO,
+  },
+}
+
+export const Success: Story = {
+  args: {
+    type: InPageAlertTypes.SUCCESS,
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    type: InPageAlertTypes.WARNING,
+  },
+}
+
+export const Error: Story = {
+  args: {
+    type: InPageAlertTypes.ERROR,
+  },
+}

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

@@ -9,8 +9,7 @@ const meta: Meta<typeof Component> = {
   args: {
     children: (
       <p>
-        <b>Something happened.</b> And if you&apos;d like to know what,{" "}
-        <a href="#">Click here</a>.
+        <b>Something happened.</b> And if you&apos;d like to know what, <a href="#">Click here</a>.
       </p>
     ),
   },

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 }