@pnx-mixtape/mxds 0.0.21 → 0.0.23

package/src/Component/HeroBanner/HeroBanner.stories.ts

@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
-import { Page } from "../../../.storybook/decorators"
 import Component from "./hero-banner.twig"
 import "./hero-banner.css"
 import {
@@ -18,28 +17,97 @@ import Icon from "../../Atom/Icon/icon.twig"
 // css
 import "../LinkList/link-list.css"
 
+/**
+ * Hero Banners are primary used to display the page title.
+ */
 const meta: Meta<HeroBannerType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
   args: {
+    title: Heading({
+      title: "Hero banner title",
+      as: HeadingTypes.ONE,
+    }),
     subtitle:
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
     image: Image({
       src: "https://picsum.photos/id/56/558/418?grayscale",
       alt: "Blurry bubbles",
     }),
-    title: Heading({
-      title: "Hero banner title",
-      as: HeadingTypes.ONE,
-    }),
+    modifiers: [HeroBannerModifier.WHITE],
   },
   argTypes: {
     modifiers: {
+      description: "Controls the background colour",
       options: Object.values(HeroBannerModifier),
-      control: "multi-select",
+      control: "check",
+      table: {
+        defaultValue: { summary: HeroBannerModifier.WHITE },
+        type: { summary: "enum" },
+      },
+    },
+    image: {
+      description: "Optional [Image](/?path=/docs/atom-image--docs) component.",
+      control: "text",
+      table: {
+        type: { summary: "Image" },
+        subcategory: "Hero content",
+      },
+    },
+    subtitle: {
+      description: "Content that is displayed in the `lede` style.",
+      control: "text",
+      table: {
+        type: { summary: "WysiwygText" },
+        subcategory: "Hero content",
+      },
+    },
+    title: {
+      description:
+        "A [Heading](/?path=/docs/atom-heading--docs) component, should be H1 if used as the page title.",
+      control: "text",
+      type: {
+        name: "string",
+        required: true,
+      },
+      table: {
+        type: { summary: "Heading" },
+        subcategory: "Hero content",
+      },
+    },
+    content: {
+      description: "Content.",
+      control: "text",
+      table: {
+        type: { summary: "WysiwygText" },
+        subcategory: "Hero content",
+      },
+    },
+    link: {
+      description:
+        "Optional content [Link](/?path=/docs/atom-link--docs) or [Button](/?path=/docs/atom-button--docs).",
+      control: "text",
+      table: {
+        type: { summary: "Link | Button" },
+        subcategory: "Hero content",
+      },
+    },
+    linkList: {
+      description: "Optional [LinkList](/?path=/docs/component-linklist--docs).",
+      control: "text",
+      table: {
+        type: { summary: "LinkList" },
+        subcategory: "Hero content",
+      },
+    },
+    highlight: {
+      description: "Makes a slightly larger hero, usually reserved for home pages.",
+      type: "boolean",
+      table: {
+        defaultValue: { summary: "false" },
+      },
     },
   },
-  decorators: [Page],
 }
 
 export default meta
@@ -47,6 +115,9 @@ type Story = StoryObj<HeroBannerType>
 
 export const HeroBanner: Story = {}
 
+/**
+ * Highlight is often reserved for the home or campaign type pages.
+ */
 export const Highlight: Story = {
   args: {
     highlight: true,
@@ -59,12 +130,18 @@ export const Highlight: Story = {
   },
 }
 
+/**
+ * The image is optional.
+ */
 export const WithoutImage: Story = {
   args: {
     image: null,
   },
 }
 
+/**
+ * A [LinkList](/?path=/docs/component-linklist--docs) component is useful for displaying popular links. It currently cannot be used with Image.
+ */
 export const WithLinkList: Story = {
   args: {
     link: null,

package/src/Component/HeroBanner/HeroBanner.stories.tsx

@@ -17,8 +17,8 @@ const meta: Meta<typeof Component> = {
           Always put your best foot forward.
         </Heading>
         <Text modifier={TextStyles.XL}>
-          Make the most of the opportunity by encouraging an action and keeping
-          your copy clear and concise.
+          Make the most of the opportunity by encouraging an action and keeping your copy clear and
+          concise.
         </Text>
       </>
     ),
@@ -39,8 +39,8 @@ export const Hero: Story = {
           Always put your best foot forward.
         </Heading>
         <Text modifier={TextStyles.XL}>
-          Make the most of the opportunity by encouraging an action and keeping
-          your copy clear and concise.
+          Make the most of the opportunity by encouraging an action and keeping your copy clear and
+          concise.
         </Text>
         <Button modifiers={[ButtonModifiers.DARK]}>Button</Button>
       </>

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

@@ -1,25 +1,23 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component/HeroBanner HeroBanner smoke-test 1`] = `
 <div class="mx-page default">
-  <div class="mx-page default">
-    <div class="mx-hero-banner ">
-      <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>
-        </div>
-        <div class="mx-hero-banner__aside mx-hero-banner__aside-image">
-          <picture>
-            <img src="https://picsum.photos/id/56/558/418?grayscale"
-                 alt="Blurry bubbles"
-            >
-          </picture>
-        </div>
+  <div class="mx-hero-banner">
+    <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>
+      </div>
+      <div class="mx-hero-banner__aside mx-hero-banner__aside-image">
+        <picture>
+          <img src="https://picsum.photos/id/56/558/418?grayscale"
+               alt="Blurry bubbles"
+          >
+        </picture>
       </div>
     </div>
   </div>
@@ -28,31 +26,29 @@ exports[`Component/HeroBanner HeroBanner smoke-test 1`] = `
 
 exports[`Component/HeroBanner Highlight smoke-test 1`] = `
 <div class="mx-page default">
-  <div class="mx-page default">
-    <div class="mx-hero-banner 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>
-          <a class="mx-link--more"
-             href="#"
+  <div class="mx-hero-banner 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>
+        <a class="mx-link--more"
+           href="#"
+        >
+          <span>
+            Find out more
+          </span>
+        </a>
+      </div>
+      <div class="mx-hero-banner__aside mx-hero-banner__aside-image">
+        <picture>
+          <img src="https://picsum.photos/id/56/558/418?grayscale"
+               alt="Blurry bubbles"
           >
-            <span>
-              Find out more
-            </span>
-          </a>
-        </div>
-        <div class="mx-hero-banner__aside mx-hero-banner__aside-image">
-          <picture>
-            <img src="https://picsum.photos/id/56/558/418?grayscale"
-                 alt="Blurry bubbles"
-            >
-          </picture>
-        </div>
+        </picture>
       </div>
     </div>
   </div>
@@ -61,51 +57,49 @@ exports[`Component/HeroBanner Highlight smoke-test 1`] = `
 
 exports[`Component/HeroBanner WithLinkList smoke-test 1`] = `
 <div class="mx-page default">
-  <div class="mx-page default">
-    <div class="mx-hero-banner ">
-      <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>
-        </div>
-        <div class="mx-hero-banner__aside mx-section--xl">
-          <h2 class=" mx-heading--m">
-            Popular links
-          </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>
-          </ul>
-        </div>
+  <div class="mx-hero-banner">
+    <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>
+      </div>
+      <div class="mx-hero-banner__aside mx-section--xl">
+        <h2 class="mx-heading--m">
+          Popular links
+        </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>
+        </ul>
       </div>
     </div>
   </div>
@@ -114,17 +108,15 @@ exports[`Component/HeroBanner WithLinkList smoke-test 1`] = `
 
 exports[`Component/HeroBanner WithoutImage smoke-test 1`] = `
 <div class="mx-page default">
-  <div class="mx-page default">
-    <div class="mx-hero-banner ">
-      <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>
-        </div>
+  <div class="mx-hero-banner">
+    <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>
       </div>
     </div>
   </div>

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

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

@@ -7,6 +7,7 @@ import {
   HeadingTypes,
   HeroSearch as HeroSearchType,
 } from "@pnx-mixtape/ids-shape"
+import HeroBanner from "../HeroBanner/HeroBanner.stories"
 import { Icons } from "../../enums"
 
 // Deps.
@@ -18,6 +19,9 @@ import SearchForm from "../../Form/Search/search-form.twig"
 // css
 import "../LinkList/link-list.css"
 
+/**
+ * The Hero Search component extends the [HeroBanner](/?path=/docs/component-herobanner--docs) with a search form.
+ */
 const meta: Meta<HeroSearchType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
@@ -32,11 +36,20 @@ const meta: Meta<HeroSearchType> = {
       action: "#search",
       id: "search-keyword",
     }),
+    modifiers: [HeroBannerModifier.WHITE],
   },
   argTypes: {
-    modifiers: {
-      options: Object.values(HeroBannerModifier),
-      control: "multi-select",
+    ...HeroBanner.argTypes,
+    search: {
+      description: "The [SearchForm](/?path=/docs/form-search--docs) component.",
+      control: "text",
+      table: {
+        type: { summary: "SearchForm" },
+      },
+      type: {
+        name: "string",
+        required: true,
+      },
     },
   },
   decorators: [Page],
@@ -45,8 +58,11 @@ const meta: Meta<HeroSearchType> = {
 export default meta
 type Story = StoryObj<HeroSearchType>
 
-export const HeroBanner: Story = {}
+export const HeroSearch: Story = {}
 
+/**
+ * Highlight is often reserved for the home or campaign type pages.
+ */
 export const Highlight: Story = {
   args: {
     highlight: true,
@@ -54,6 +70,9 @@ export const Highlight: Story = {
   },
 }
 
+/**
+ * A [LinkList](/?path=/docs/component-linklist--docs) component is useful for displaying popular links. It currently cannot be used with Image.
+ */
 export const WithLinkList: Story = {
   args: {
     link: null,

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

@@ -16,8 +16,8 @@ const meta: Meta<typeof Component> = {
           Always put your best foot forward.
         </Heading>
         <Text modifier={TextStyles.XL}>
-          Make the most of the opportunity by encouraging an action and keeping
-          your copy clear and concise.
+          Make the most of the opportunity by encouraging an action and keeping your copy clear and
+          concise.
         </Text>
       </>
     ),
@@ -38,8 +38,8 @@ export const Hero: Story = {
           Always put your best foot forward.
         </Heading>
         <Text modifier={TextStyles.XL}>
-          Make the most of the opportunity by encouraging an action and keeping
-          your copy clear and concise.
+          Make the most of the opportunity by encouraging an action and keeping your copy clear and
+          concise.
         </Text>
         <Button modifiers={[ButtonModifiers.DARK]}>Button</Button>
       </>

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

@@ -1,9 +1,9 @@
-// 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 mx-hero-search">
       <div class="mx-hero-banner__inner">
         <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
           <h1>
@@ -85,7 +85,7 @@ 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 mx-hero-search">
       <div class="mx-hero-banner__inner">
         <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
           <h1>
@@ -118,7 +118,7 @@ exports[`Component/HeroSearch WithLinkList smoke-test 1`] = `
           </form>
         </div>
         <div class="mx-hero-banner__aside mx-section--xl">
-          <h2 class=" mx-heading--m">
+          <h2 class="mx-heading--m">
             Popular searches
           </h2>
           <ul class="mx-link-list">
@@ -127,7 +127,7 @@ exports[`Component/HeroSearch WithLinkList smoke-test 1`] = `
                 <span>
                   Link one
                 </span>
-                <span class="mx-icon mx-icon--chevron-right ">
+                <span class="mx-icon mx-icon--chevron-right">
                 </span>
               </a>
             </li>
@@ -136,7 +136,7 @@ exports[`Component/HeroSearch WithLinkList smoke-test 1`] = `
                 <span>
                   Link two
                 </span>
-                <span class="mx-icon mx-icon--chevron-right ">
+                <span class="mx-icon mx-icon--chevron-right">
                 </span>
               </a>
             </li>
@@ -145,7 +145,7 @@ exports[`Component/HeroSearch WithLinkList smoke-test 1`] = `
                 <span>
                   Link three
                 </span>
-                <span class="mx-icon mx-icon--chevron-right ">
+                <span class="mx-icon mx-icon--chevron-right">
                 </span>
               </a>
             </li>
@@ -154,7 +154,7 @@ exports[`Component/HeroSearch WithLinkList smoke-test 1`] = `
                 <span>
                   Link four
                 </span>
-                <span class="mx-icon mx-icon--chevron-right ">
+                <span class="mx-icon mx-icon--chevron-right">
                 </span>
               </a>
             </li>
@@ -163,7 +163,7 @@ exports[`Component/HeroSearch WithLinkList smoke-test 1`] = `
                 <span>
                   Link five
                 </span>
-                <span class="mx-icon mx-icon--chevron-right ">
+                <span class="mx-icon mx-icon--chevron-right">
                 </span>
               </a>
             </li>

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>
     ),
   },