@pnx-mixtape/mxds 0.0.22 → 0.0.23

package/dist/build/utility-list.entry.js

@@ -0,0 +1,80 @@
+class UtilityList extends HTMLElement {
+  internals_;
+  controller;
+  copyOriginalText;
+  copyOriginalIcon;
+  constructor() {
+    super();
+    this.internals_ = this.attachInternals();
+    this.controller = new AbortController();
+    this.copyOriginalIcon = "mx-icon--link";
+  }
+  connectedCallback() {
+    const { signal } = this.controller;
+    this.copyBtn?.addEventListener(
+      "click",
+      () => {
+        void this.handleCopy();
+      },
+      { signal }
+    );
+    this.printBtn?.addEventListener(
+      "click",
+      () => {
+        this.handlePrint();
+      },
+      { signal }
+    );
+    this.pdfBtn?.addEventListener(
+      "click",
+      () => {
+        this.handlePDF();
+      },
+      { signal }
+    );
+  }
+  disconnectedCallback() {
+    this.controller.abort();
+  }
+  handleCopy = async () => {
+    try {
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          ["text/plain"]: window.location.href
+        })
+      ]).then(() => {
+        this.copyLabel.textContent = "Copied!";
+        this.copyIcon.classList.replace(this.copyOriginalIcon, "mx-icon--tick");
+        setTimeout(() => {
+          this.copyLabel.textContent = this.copyOriginalText;
+          this.copyIcon.classList.replace("mx-icon--tick", this.copyOriginalIcon);
+        }, 3e3);
+      });
+    } catch {
+      console.error("Could not copy the url to clipboard");
+    }
+  };
+  handlePrint = () => window.print();
+  // Defaults to Print dialog, to allow Save to PDF.
+  // if this needs to be changed, please extend the class.
+  handlePDF = () => window.print();
+  get copyBtn() {
+    return this.querySelector("button[data-copy]");
+  }
+  get copyLabel() {
+    const el = this.copyBtn.querySelector("span[data-copy-label]");
+    this.copyOriginalText = el?.textContent ?? void 0;
+    return el;
+  }
+  get copyIcon() {
+    return this.copyBtn.querySelector(".mx-icon");
+  }
+  get printBtn() {
+    return this.querySelector("button[data-print]");
+  }
+  get pdfBtn() {
+    return this.querySelector("button[data-pdf]");
+  }
+}
+if (!customElements.get("mx-utility-list")) customElements.define("mx-utility-list", UtilityList);
+//# sourceMappingURL=utility-list.entry.js.map

package/dist/build/utility-list.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utility-list.entry.js","sources":["../../src/Component/UtilityList/Elements/UtilityList.ts"],"sourcesContent":["/**\n * UtilityList\n * @file Support copy and print functions.\n */\n\nexport default class UtilityList extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  copyOriginalText?: string\n  copyOriginalIcon?: string\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n    this.copyOriginalIcon = \"mx-icon--link\"\n  }\n\n  connectedCallback(): void {\n    const { signal }: AbortController = this.controller\n\n    // Handle copy.\n    this.copyBtn?.addEventListener(\n      \"click\",\n      (): void => {\n        void this.handleCopy()\n      },\n      { signal },\n    )\n\n    // Handle print.\n    this.printBtn?.addEventListener(\n      \"click\",\n      (): void => {\n        this.handlePrint()\n      },\n      { signal },\n    )\n\n    // Handle PDF.\n    this.pdfBtn?.addEventListener(\n      \"click\",\n      (): void => {\n        this.handlePDF()\n      },\n      { signal },\n    )\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleCopy = async (): Promise<void> => {\n    try {\n      await navigator.clipboard\n        .write([\n          new ClipboardItem({\n            [\"text/plain\"]: window.location.href,\n          }),\n        ])\n        .then(() => {\n          this.copyLabel.textContent = \"Copied!\"\n          this.copyIcon.classList.replace(this.copyOriginalIcon, \"mx-icon--tick\")\n          setTimeout(() => {\n            this.copyLabel.textContent = this.copyOriginalText\n            this.copyIcon.classList.replace(\"mx-icon--tick\", this.copyOriginalIcon)\n          }, 3000)\n        })\n    } catch {\n      console.error(\"Could not copy the url to clipboard\")\n    }\n  }\n\n  handlePrint = (): void => window.print()\n\n  // Defaults to Print dialog, to allow Save to PDF.\n  // if this needs to be changed, please extend the class.\n  handlePDF = (): void => window.print()\n\n  get copyBtn(): HTMLButtonElement | null {\n    return this.querySelector(\"button[data-copy]\")\n  }\n\n  get copyLabel(): HTMLSpanElement | null {\n    const el: HTMLSpanElement = this.copyBtn.querySelector(\"span[data-copy-label]\")\n    this.copyOriginalText = el?.textContent ?? undefined\n    return el\n  }\n\n  get copyIcon(): HTMLSpanElement | null {\n    return this.copyBtn.querySelector(\".mx-icon\")\n  }\n\n  get printBtn(): HTMLButtonElement | null {\n    return this.querySelector(\"button[data-print]\")\n  }\n\n  get pdfBtn(): HTMLButtonElement | null {\n    return this.querySelector(\"button[data-pdf]\")\n  }\n}\n\nif (!customElements.get(\"mx-utility-list\")) customElements.define(\"mx-utility-list\", UtilityList)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-utility-list\": UtilityList\n  }\n}\n"],"names":[],"mappings":"AAKA,MAAqB,oBAAoB,YAAY;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA,cAAc;AACZ,UAAA;AACA,SAAK,aAAa,KAAK,gBAAA;AACvB,SAAK,aAAa,IAAI,gBAAA;AACtB,SAAK,mBAAmB;AAAA,EAC1B;AAAA,EAEA,oBAA0B;AACxB,UAAM,EAAE,WAA4B,KAAK;AAGzC,SAAK,SAAS;AAAA,MACZ;AAAA,MACA,MAAY;AACV,aAAK,KAAK,WAAA;AAAA,MACZ;AAAA,MACA,EAAE,OAAA;AAAA,IAAO;AAIX,SAAK,UAAU;AAAA,MACb;AAAA,MACA,MAAY;AACV,aAAK,YAAA;AAAA,MACP;AAAA,MACA,EAAE,OAAA;AAAA,IAAO;AAIX,SAAK,QAAQ;AAAA,MACX;AAAA,MACA,MAAY;AACV,aAAK,UAAA;AAAA,MACP;AAAA,MACA,EAAE,OAAA;AAAA,IAAO;AAAA,EAEb;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW,MAAA;AAAA,EAClB;AAAA,EAEA,aAAa,YAA2B;AACtC,QAAI;AACF,YAAM,UAAU,UACb,MAAM;AAAA,QACL,IAAI,cAAc;AAAA,UAChB,CAAC,YAAY,GAAG,OAAO,SAAS;AAAA,QAAA,CACjC;AAAA,MAAA,CACF,EACA,KAAK,MAAM;AACV,aAAK,UAAU,cAAc;AAC7B,aAAK,SAAS,UAAU,QAAQ,KAAK,kBAAkB,eAAe;AACtE,mBAAW,MAAM;AACf,eAAK,UAAU,cAAc,KAAK;AAClC,eAAK,SAAS,UAAU,QAAQ,iBAAiB,KAAK,gBAAgB;AAAA,QACxE,GAAG,GAAI;AAAA,MACT,CAAC;AAAA,IACL,QAAQ;AACN,cAAQ,MAAM,qCAAqC;AAAA,IACrD;AAAA,EACF;AAAA,EAEA,cAAc,MAAY,OAAO,MAAA;AAAA;AAAA;AAAA,EAIjC,YAAY,MAAY,OAAO,MAAA;AAAA,EAE/B,IAAI,UAAoC;AACtC,WAAO,KAAK,cAAc,mBAAmB;AAAA,EAC/C;AAAA,EAEA,IAAI,YAAoC;AACtC,UAAM,KAAsB,KAAK,QAAQ,cAAc,uBAAuB;AAC9E,SAAK,mBAAmB,IAAI,eAAe;AAC3C,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,WAAmC;AACrC,WAAO,KAAK,QAAQ,cAAc,UAAU;AAAA,EAC9C;AAAA,EAEA,IAAI,WAAqC;AACvC,WAAO,KAAK,cAAc,oBAAoB;AAAA,EAChD;AAAA,EAEA,IAAI,SAAmC;AACrC,WAAO,KAAK,cAAc,kBAAkB;AAAA,EAC9C;AACF;AAEA,IAAI,CAAC,eAAe,IAAI,iBAAiB,EAAG,gBAAe,OAAO,mBAAmB,WAAW;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnx-mixtape/mxds",
   "description": "The Mixtape Design System",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "dependencies": {
     "@floating-ui/dom": "^1.7.3",
     "@oddbird/popover-polyfill": "^0.6.1",
@@ -20,14 +20,13 @@
     "@csstools/postcss-global-data": "^3.0.0",
     "@csstools/stylelint-formatter-github": "^1.0.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "@storybook/addon-a11y": "^9.1.2",
-    "@storybook/addon-docs": "^9.1.2",
-    "@storybook/addon-links": "^9.1.2",
-    "@storybook/html": "^9.1.7",
-    "@storybook/html-vite": "^9.1.2",
-    "@storybook/react": "^9.1.7",
-    "@storybook/react-vite": "^9.1.2",
-    "@storybook/test-runner": "^0.23.0",
+    "@storybook/addon-a11y": "^10.0.7",
+    "@storybook/addon-docs": "^10.0.7",
+    "@storybook/addon-links": "^10.0.7",
+    "@storybook/html-vite": "^10.0.7",
+    "@storybook/react": "^10.0.7",
+    "@storybook/react-vite": "^10.0.7",
+    "@storybook/test-runner": "^0.24.1",
     "@svgr/rollup": "^8.1.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
@@ -55,7 +54,7 @@
     "postcss-preset-env": "^10.2.4",
     "postcss-pxtorem": "^6.1.0",
     "prettier": "^3.6.2",
-    "storybook": "^9.1.7",
+    "storybook": "^10.0.7",
     "stylelint": "^16.23.1",
     "stylelint-config-standard": "^39.0.0",
     "stylelint-use-logical-spec": "^5.0.1",

package/src/Atom/{Base.mdx → Atom.mdx}

@@ -1,6 +1,6 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs/blocks"
 
-<Meta title="Atom/Base" />
+<Meta title="Atom/Atom" />
 
 # Base
 

package/src/Atom/Background/Backgrounds.stories.ts

@@ -7,34 +7,51 @@ type BackgroundsType = {
   modifier?: BackgroundStyles
 }
 
+/**
+ * Background colours also set appropriate foreground colours to ensure contrast is met.
+ */
 const meta: Meta<BackgroundsType> = {
   title: "Atom/Backgrounds",
   tags: ["autodocs"],
   component: Component,
   argTypes: {
-    modifier: { options: Object.values(BackgroundStyles), control: "select" },
+    modifier: {
+      description: "Define the colour the use.",
+      options: Object.values(BackgroundStyles),
+      control: "select",
+      table: {
+        type: { summary: "enum" },
+      },
+    },
   },
 }
 
 export default meta
 type Story = StoryObj<BackgroundsType>
 
-export const Backgrounds: Story = {
-  args: {},
-}
+export const Backgrounds: Story = {}
 
+/**
+ * Nested elements can have their background reset to the default using the `.mx-background--reset` class.
+ */
 export const Alt: Story = {
   args: {
     modifier: BackgroundStyles.ALT,
   },
 }
 
+/**
+ * Dark background set the colour scheme to `dark` to ensure foreground text meets contrast requirements.
+ */
 export const Reverse: Story = {
   args: {
     modifier: BackgroundStyles.REVERSE,
   },
 }
 
+/**
+ * Link and line colour can also be customised per background.
+ */
 export const Primary: Story = {
   args: {
     modifier: BackgroundStyles.PRIMARY,

package/src/Atom/Background/__snapshots__/Backgrounds.stories.ts.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Atom/Backgrounds Accent smoke-test 1`] = `
 <div class="mx-page default">

package/src/Atom/Background/_background.css

@@ -42,8 +42,7 @@
       position: absolute;
       inline-size: 100%;
       min-block-size: 100%;
-      filter: brightness(var(--bg-img-brightness, 1))
-        saturate(var(--bg-img-saturate, 1.25))
+      filter: brightness(var(--bg-img-brightness, 1)) saturate(var(--bg-img-saturate, 1.25))
         opacity(var(--bg-img-opacity, 0.5));
     }
   }

package/src/Atom/Blockquote/_blockquote.css

@@ -1,7 +1,6 @@
 @layer design-system.defaults {
   blockquote {
     padding-inline-start: var(--line-gap, var(--gap));
-    border-inline-start: var(--line-width, 6px) solid
-      var(--line-colour, var(--colour-border));
+    border-inline-start: var(--line-width, 6px) solid var(--line-colour, var(--colour-border));
   }
 }

package/src/Atom/Button/Button.stories.ts

@@ -2,13 +2,12 @@ import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./button.twig"
 import Icon from "../Icon/icon.twig"
 import "./button.css"
-import {
-  Button as ButtonType,
-  ButtonModifiers,
-  ButtonTypes,
-} from "@pnx-mixtape/ids-shape"
+import { Button as ButtonType, ButtonModifiers, ButtonTypes } from "@pnx-mixtape/ids-shape"
 import { Icons } from "../../enums"
 
+/**
+ * A button atom with optional icon.
+ */
 const meta: Meta<ButtonType> = {
   title: "Atom/Button",
   tags: ["autodocs", "ids-mvp"],
@@ -18,40 +17,124 @@ const meta: Meta<ButtonType> = {
     as: ButtonTypes.BUTTON,
   },
   argTypes: {
+    title: {
+      description: "The button label",
+      type: {
+        name: "string",
+        required: true,
+      },
+    },
+    as: {
+      description: "Choose the type of button, or use a link instead.",
+      options: Object.values(ButtonTypes),
+      control: "select",
+      table: {
+        defaultValue: { summary: ButtonTypes.BUTTON },
+        type: { summary: "enum" },
+      },
+    },
+    href: {
+      description: "When using a Link, set the `href` value.",
+      type: "string",
+      if: { arg: "as", eq: ButtonTypes.LINK },
+    },
     modifiers: {
+      description:
+        "Define the style of the button. **outline** and **full-width** can be used with the other colour options.",
       options: Object.values(ButtonModifiers),
       control: "multi-select",
+      table: {
+        type: { summary: "enum" },
+      },
+    },
+    disabled: {
+      description: "Add the `[disabled]` attribute to the button.",
+      type: "boolean",
+      table: { defaultValue: { summary: "false" } },
+      if: { arg: "as", neq: ButtonTypes.LINK },
+    },
+    iconStart: {
+      description:
+        "An [Icon](/?path=/docs/atom-icon--docs) object, to display **before** the title.",
+      table: {
+        subcategory: "Icon",
+      },
+    },
+    iconEnd: {
+      description:
+        "An [Icon](/?path=/docs/atom-icon--docs) object, to display **after** the title.",
+      table: {
+        subcategory: "Icon",
+      },
+    },
+    iconOnly: {
+      description:
+        "When an icon is added, visually hide the button text so that only the icon is displayed.",
+      control: "boolean",
+      table: {
+        defaultValue: { summary: "false" },
+        subcategory: "Icon",
+      },
     },
-    as: { options: Object.values(ButtonTypes), control: "select" },
-    title: { control: "text" },
-    href: { control: "text" },
-    disabled: { control: "boolean" },
-    // @ts-expect-error The controls follow the shape
-    "iconStart.icon": { options: Object.values(Icons), control: "select" },
-    "iconEnd.icon": { options: Object.values(Icons), control: "select" },
-    iconOnly: { control: "boolean" },
   },
 }
 
 export default meta
 type Story = StoryObj<ButtonType>
 
-export const Button: Story = {
-  args: {},
-}
+export const Button: Story = {}
 
-export const Primary: Story = {
+/**
+ * Primary style uses the **dark** modifier.
+ */
+export const Dark: Story = {
   args: {
     modifiers: [ButtonModifiers.DARK],
   },
 }
 
-export const Text: Story = {
+/**
+ * Outline can be combined with the **dark** or **destructive** modifier.
+ */
+export const Outline: Story = {
+  args: {
+    modifiers: [ButtonModifiers.DARK, ButtonModifiers.OUTLINE],
+  },
+}
+
+/**
+ * Buttons can look more like hyperlinks by using the **light** modifier.
+ */
+export const Light: Story = {
   args: {
     modifiers: [ButtonModifiers.LIGHT],
   },
 }
 
+/**
+ * Destructive style should be reserved for cancel or delete buttons.
+ */
+export const Destructive: Story = {
+  args: {
+    modifiers: [ButtonModifiers.DESTRUCTIVE],
+  },
+}
+
+/**
+ * White style is useful when on a dark background or overlaying an image.
+ */
+export const White: Story = {
+  args: {
+    modifiers: [ButtonModifiers.WHITE],
+  },
+  globals: {
+    background: "mx-background--alt",
+  },
+}
+
+/**
+ * Button's can be a hyperlink element, though this usage should be limited (or combined with the **light** modifier).
+ */
 export const Link: Story = {
   args: {
     as: ButtonTypes.LINK,
@@ -59,10 +142,36 @@ export const Link: Story = {
   },
 }
 
-export const IconButton: Story = {
+/**
+ * Icons can be added after the button text.
+ */
+export const IconEnd: Story = {
   args: {
     iconEnd: Icon({
       icon: Icons.ARROW_RIGHT,
     }),
   },
 }
+
+/**
+ * Icons can be added before the button text.
+ */
+export const IconStart: Story = {
+  args: {
+    iconStart: Icon({
+      icon: Icons.ARROW_LEFT,
+    }),
+  },
+}
+
+/**
+ * Or the icon can visually hide the button text.
+ */
+export const IconOnly: Story = {
+  args: {
+    iconStart: Icon({
+      icon: Icons.SEARCH,
+    }),
+    iconOnly: true,
+  },
+}

package/src/Atom/Button/__snapshots__/Button.stories.ts.snap

@@ -1,8 +1,8 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Atom/Button Button smoke-test 1`] = `
 <div class="mx-page default">
-  <button class="mx-button "
+  <button class="mx-button"
           type="button"
   >
     <span>
@@ -12,15 +12,79 @@ exports[`Atom/Button Button smoke-test 1`] = `
 </div>
 `;
 
-exports[`Atom/Button IconButton smoke-test 1`] = `
+exports[`Atom/Button Dark smoke-test 1`] = `
 <div class="mx-page default">
-  <button class="mx-button "
+  <button class="mx-button mx-button--dark"
           type="button"
   >
     <span>
       Button
     </span>
-    <span class="mx-icon mx-icon--arrow-right ">
+  </button>
+</div>
+`;
+
+exports[`Atom/Button Destructive smoke-test 1`] = `
+<div class="mx-page default">
+  <button class="mx-button mx-button--destructive"
+          type="button"
+  >
+    <span>
+      Button
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Atom/Button IconEnd smoke-test 1`] = `
+<div class="mx-page default">
+  <button class="mx-button"
+          type="button"
+  >
+    <span>
+      Button
+    </span>
+    <span class="mx-icon mx-icon--arrow-right">
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Atom/Button IconOnly smoke-test 1`] = `
+<div class="mx-page default">
+  <button class="mx-button mx-button--icon-only"
+          type="button"
+  >
+    <span class="mx-icon mx-icon--search">
+    </span>
+    <span class="sr-only">
+      Button
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Atom/Button IconStart smoke-test 1`] = `
+<div class="mx-page default">
+  <button class="mx-button"
+          type="button"
+  >
+    <span class="mx-icon mx-icon--arrow-left">
+    </span>
+    <span>
+      Button
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Atom/Button Light smoke-test 1`] = `
+<div class="mx-page default">
+  <button class="mx-button mx-button--light"
+          type="button"
+  >
+    <span>
+      Button
     </span>
   </button>
 </div>
@@ -28,7 +92,7 @@ exports[`Atom/Button IconButton smoke-test 1`] = `
 
 exports[`Atom/Button Link smoke-test 1`] = `
 <div class="mx-page default">
-  <a class="mx-button "
+  <a class="mx-button"
      href="#"
   >
     <span>
@@ -38,9 +102,9 @@ exports[`Atom/Button Link smoke-test 1`] = `
 </div>
 `;
 
-exports[`Atom/Button Primary smoke-test 1`] = `
+exports[`Atom/Button Outline smoke-test 1`] = `
 <div class="mx-page default">
-  <button class="mx-button  mx-button--dark"
+  <button class="mx-button mx-button--dark mx-button--outline"
           type="button"
   >
     <span>
@@ -50,9 +114,9 @@ exports[`Atom/Button Primary smoke-test 1`] = `
 </div>
 `;
 
-exports[`Atom/Button Text smoke-test 1`] = `
-<div class="mx-page default">
-  <button class="mx-button  mx-button--light"
+exports[`Atom/Button White smoke-test 1`] = `
+<div class="mx-page mx-background--alt">
+  <button class="mx-button mx-button--white"
           type="button"
   >
     <span>

package/src/Atom/Button/__snapshots__/Button.stories.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Atom/Button Button smoke-test 1`] = `
 <button class="mx-button"

package/src/Atom/Button/_buttons.css

@@ -13,8 +13,7 @@
     font-weight: var(--font-weight-bold);
     font-family: var(--font-family);
     line-height: var(--line-height-ui);
-    border: var(--line-width, 2px) solid
-      var(--line-colour, var(--colour-border));
+    border: var(--line-width, 2px) solid var(--line-colour, var(--colour-border));
     border-radius: var(--radius, var(--border-radius-l));
     padding-block: var(--vertical-padding, var(--spacing-xxs));
     padding-inline: var(--horizontal-padding, var(--spacing-m));
@@ -49,9 +48,7 @@
     --horizontal-padding: var(--spacing-s);
   }
 
-  .mx-icon.mx-button--icon-only {
-    --icon-size: 100%;
-
+  .mx-button--icon-only {
     inline-size: var(--spacing-xl);
     block-size: var(--spacing-xl);
     padding: 0;
@@ -61,6 +58,8 @@
 
     &::before,
     &::after {
+      --icon-size: 100%;
+
       mask-size: var(--spacing-s);
     }
 

package/src/Atom/DefinitionList/DefinitionList.stories.ts

@@ -2,7 +2,12 @@ import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./definition-list.twig"
 import "../_base.css"
 import { DefinitionList as DefinitionListType } from "@pnx-mixtape/ids-shape"
+import { Icons } from "../../enums"
 
+/**
+ * The definition list is useful for categorising short pieces of content.
+ * It uses `subgrid` to maintain alignment.
+ */
 const meta: Meta<DefinitionListType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
@@ -22,11 +27,23 @@ const meta: Meta<DefinitionListType> = {
       },
     ],
   },
+  argTypes: {
+    items: {
+      description:
+        "A list of title/content objects to use, where title is the `<dt>` value and content is the `<dd>` value.",
+      type: {
+        name: "other",
+        required: true,
+        value: "array",
+      },
+      table: {
+        type: { summary: "{ title: string, content: string }[]" },
+      },
+    },
+  },
 }
 
 export default meta
 type Story = StoryObj<DefinitionListType>
 
-export const DefinitionList: Story = {
-  args: {},
-}
+export const DefinitionList: Story = {}

package/src/Atom/DefinitionList/DefinitionList.stories.tsx

@@ -7,15 +7,9 @@ const meta: Meta<typeof Component> = {
   args: {
     children: (
       <>
-        <DefinitionListItem title="Item #1">
-          Data for item #1
-        </DefinitionListItem>
-        <DefinitionListItem title="Item #2">
-          Data for item #2
-        </DefinitionListItem>
-        <DefinitionListItem title="Item #3">
-          Data for item #3
-        </DefinitionListItem>
+        <DefinitionListItem title="Item #1">Data for item #1</DefinitionListItem>
+        <DefinitionListItem title="Item #2">Data for item #2</DefinitionListItem>
+        <DefinitionListItem title="Item #3">Data for item #3</DefinitionListItem>
       </>
     ),
   },

package/src/Atom/DefinitionList/DefinitionList.tsx

@@ -2,10 +2,9 @@ import { JSX, ComponentPropsWithoutRef, PropsWithChildren } from "react"
 
 type DefinitionListProps = ComponentPropsWithoutRef<"dl"> & PropsWithChildren
 
-const DefinitionList = ({
-  children,
-  ...props
-}: DefinitionListProps): JSX.Element => <dl {...props}>{children}</dl>
+const DefinitionList = ({ children, ...props }: DefinitionListProps): JSX.Element => (
+  <dl {...props}>{children}</dl>
+)
 
 type DefinitionListItemProps = ComponentPropsWithoutRef<"div"> &
   PropsWithChildren & {

package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.ts.snap

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

package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Atom/Definition List DefinitionList smoke-test 1`] = `
 <dl>