@pnx-mixtape/mxds 0.0.21 → 0.0.23

package/src/Atom/Media/Media.stories.ts

@@ -5,6 +5,9 @@ import Image from "../Image/image.twig"
 import "../_base.css"
 import { Media as MediaType, MediaAlignmentTypes } from "@pnx-mixtape/ids-shape"
 
+/**
+ * Media atom with caption and alignment options.
+ */
 const meta: Meta<MediaType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
@@ -17,11 +20,37 @@ const meta: Meta<MediaType> = {
     type: "image",
   },
   argTypes: {
-    align: { options: Object.values(MediaAlignmentTypes), control: "select" },
-    // @ts-expect-error The controls follow the shape
-    "item.src": { control: "text" },
-    "item.alt": { control: "text" },
-    "item.title": { control: "text" },
+    item: {
+      description:
+        "An [Image](/?path=/docs/atom-image--docs) or [Video](/?path=/docs/atom-video--docs) object.",
+      type: {
+        name: "string",
+        required: true,
+      },
+      table: {
+        type: { summary: "Image | Video" },
+      },
+    },
+    caption: {
+      description: "An optional caption to display underneath.",
+    },
+    type: {
+      description: "Clarify the item type",
+      options: ["image", "video"],
+      control: "check",
+      table: {
+        defaultValue: { summary: "image" },
+      },
+    },
+    align: {
+      description:
+        "Align the image (left/right will float the image so that text can wrap around it).",
+      options: Object.values(MediaAlignmentTypes),
+      control: "radio",
+      table: {
+        type: { summary: "enum" },
+      },
+    },
   },
 }
 

package/src/Atom/Media/Media.tsx

@@ -17,12 +17,7 @@ export type ImageProps = ComponentPropsWithoutRef<"img"> & {
   align?: MediaAlignmentTypes
 }
 
-const Media = ({
-  align,
-  caption,
-  className,
-  ...props
-}: ImageProps): JSX.Element => {
+const Media = ({ align, caption, className, ...props }: ImageProps): JSX.Element => {
   const ImageComponent = useImageComponent()
 
   return (

package/src/Atom/Media/__snapshots__/Media.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/Media Media smoke-test 1`] = `
 <div class="mx-page default">
-  <figure class="mx-media mx-media--image ">
+  <figure class="mx-media mx-media--image">
     <picture>
       <img src="https://picsum.photos/id/56/558/418?grayscale"
            alt="Some blurry bubble image"

package/src/Atom/Media/__snapshots__/Media.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/Image Caption smoke-test 1`] = `
 <figure class="mx-media--left">

package/src/Atom/Media/_media.css

@@ -24,22 +24,14 @@
     margin-inline: auto;
   }
 
-  :is(
-    .mx-media--left,
-    [dir="rtl"] .mx-media--right,
-    .translated-rtl .mx-media--right
-  ) {
+  :is(.mx-media--left, [dir="rtl"] .mx-media--right, .translated-rtl .mx-media--right) {
     @media (--small-up) {
       float: left;
       margin-inline: 0 var(--spacing-m);
     }
   }
 
-  :is(
-    .mx-media--right,
-    [dir="rtl"] .mx-media--left,
-    .translated-rtl .mx-media--left
-  ) {
+  :is(.mx-media--right, [dir="rtl"] .mx-media--left, .translated-rtl .mx-media--left) {
     @media (--small-up) {
       float: right;
       margin-inline: var(--spacing-m) 0;

package/src/Atom/Spacing/Spacing.stories.ts

@@ -1,48 +1,62 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./spacing.twig"
-import "../_base.css"
 
 const modifierOptions: string[] = [
-  "spacing--xs",
-  "spacing--s",
-  "spacing--m",
-  "spacing--l",
-  "spacing--xl",
-  "spacing--top-xs",
-  "spacing--top-s",
-  "spacing--top-m",
-  "spacing--top-l",
-  "spacing--top-xl",
-  "spacing--bottom-xs",
-  "spacing--bottom-s",
-  "spacing--bottom-m",
-  "spacing--bottom-l",
-  "spacing--bottom-xl",
-  "spacing--left-xs",
-  "spacing--left-s",
-  "spacing--left-m",
-  "spacing--left-l",
-  "spacing--left-xl",
-  "spacing--right-xs",
-  "spacing--right-s",
-  "spacing--right-m",
-  "spacing--right-l",
-  "spacing--right-xl",
+  "xs",
+  "s",
+  "m",
+  "l",
+  "xl",
+  "top-xs",
+  "top-s",
+  "top-m",
+  "top-l",
+  "top-xl",
+  "bottom-xs",
+  "bottom-s",
+  "bottom-m",
+  "bottom-l",
+  "bottom-xl",
+  "left-xs",
+  "left-s",
+  "left-m",
+  "left-l",
+  "left-xl",
+  "right-xs",
+  "right-s",
+  "right-m",
+  "right-l",
+  "right-xl",
+  "reset",
+  "reset-top",
+  "reset-bottom",
+  "reset-left",
+  "reset-right",
 ]
 
 type SpacingType = {
-  modifier_class?: (typeof modifierOptions)[number]
+  modifier?: (typeof modifierOptions)[number]
 }
 
+/**
+ * Demonstration of the spacing helper classes that are available to add padding to an element.
+ */
 const meta: Meta<SpacingType> = {
-  title: "Atom/Spacing",
   tags: ["autodocs"],
   component: Component,
+  args: {
+    modifier: modifierOptions[0],
+  },
+  argTypes: {
+    modifier: {
+      description: "The spacing option",
+      options: modifierOptions,
+      control: "select",
+    },
+  },
 }
 
 export default meta
 type Story = StoryObj<SpacingType>
 
-export const Spacing: Story = {
-  args: {},
-}
+export const Spacing: Story = {}

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

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

package/src/Atom/Spacing/spacing.twig

@@ -1,3 +1,6 @@
-<div class="mx-spacing {{ modifier_class }}">
-  <p>{{ modifier_class }}</p>
+{% set baseClass = "mx-spacing" %}
+{% set class = baseClass ~ '--' ~ modifier %}
+{% set attributes = (attributes ?? create_attribute()).addClass(class) %}
+<div{{ attributes }}>
+  <div>{{ class }}</div>
 </div>

package/src/Atom/Table/__snapshots__/Table.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/Table Flush smoke-test 1`] = `
 <div class="mx-page default">

package/src/Atom/Table/__snapshots__/TableResponsive.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/Table/Responsive TableResponsive smoke-test 1`] = `
 <div class="mx-page default">

package/src/Atom/Table/_table.css

@@ -11,8 +11,7 @@
 
     & :is(td, th) {
       padding: var(--spacing-xxs);
-      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));
       vertical-align: top;
     }
 

package/src/Atom/Text/Text.stories.ts

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from "@storybook/html-vite"
+import Component from "./text-style.twig"
+import ExampleComponent from "./text-styles-example.twig"
+import "../_base.css"
+import { TextStyles } from "../../enums"
+
+enum TextAlign {
+  LEFT = "mx-text--left",
+  RIGHT = "mx-text--right",
+  CENTER = "mx-text--center",
+}
+
+type TextProps = {
+  modifier?: TextStyles
+  alignment?: TextAlign
+  content: string
+}
+
+/**
+ * Demonstration of the text helper classes that are available to control typographic sizes.
+ */
+const meta: Meta<TextProps> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    content:
+      "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 (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.",
+  },
+  argTypes: {
+    modifier: {
+      description: "Set the size of the text",
+      options: Object.values(TextStyles),
+      control: "select",
+      table: {
+        type: { summary: "enum" },
+      },
+    },
+    alignment: {
+      description: "Set the alignment of the text",
+      options: Object.values(TextAlign),
+      control: "select",
+      table: {
+        type: { summary: "enum" },
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<TextProps>
+
+export const Text: Story = {}
+
+export const Center: Story = {
+  args: {
+    alignment: TextAlign.CENTER,
+  },
+}
+
+export const Example: Story = {
+  render: args => `<div class="mx-rich-text mx-vertical-flow">${ExampleComponent(args)}</div>`,
+}

package/src/Atom/Text/__snapshots__/{TextSizes.stories.ts.snap → Text.stories.ts.snap}

@@ -1,35 +1,22 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Atom/Typography/Text Sizes Example smoke-test 1`] = `
+exports[`Atom/Text Center smoke-test 1`] = `
 <div class="mx-page default">
-  <div class="vertical-flow">
+  <div class="mx-rich-text mx-vertical-flow mx-section--narrow mx-text--center">
+    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 (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+  </div>
+</div>
+`;
+
+exports[`Atom/Text Example smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-rich-text mx-vertical-flow">
     <p class="mx-text--embellished-headline">
       Embelished headline: Lorem ipsum dolor sit amet consectetur
     </p>
     <p class="mx-text--section-headline">
       Section headline: Lorem ipsum dolor sit amet consectetur
     </p>
-    <h2 class="mx-headline">
-      Headline: Lorem ipsum dolor sit amet consectetur
-    </h2>
-    <p class="mx-heading--xxl">
-      Heading xxl: Lorem ipsum dolor sit amet consectetur
-    </p>
-    <p class="mx-heading--xl">
-      Heading xl: Lorem ipsum dolor sit amet consectetur
-    </p>
-    <p class="mx-heading--l">
-      Heading l: Lorem ipsum dolor sit amet consectetur
-    </p>
-    <p class="mx-heading--m">
-      Heading m: Lorem ipsum dolor sit amet consectetur
-    </p>
-    <p class="mx-heading--s">
-      Heading s: Lorem ipsum dolor sit amet consectetur
-    </p>
-    <p class="mx-heading--xs">
-      Heading xs: Lorem ipsum dolor sit amet consectetur
-    </p>
     <p class="mx-text--xxxl">
       Text xxxl: Lorem ipsum dolor sit amet consectetur
     </p>
@@ -58,10 +45,10 @@ exports[`Atom/Typography/Text Sizes Example smoke-test 1`] = `
 </div>
 `;
 
-exports[`Atom/Typography/Text Sizes TextSizes smoke-test 1`] = `
+exports[`Atom/Text Text smoke-test 1`] = `
 <div class="mx-page default">
-  <p class>
+  <div class="mx-rich-text mx-vertical-flow mx-section--narrow">
     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 (also called greeking). 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>
 `;

package/src/Atom/Text/__snapshots__/Text.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/Typography/Text Text smoke-test 1`] = `
 <p class>

package/src/Atom/Text/_text-sizes.css

@@ -26,9 +26,7 @@
       .mx-text--xxxl,
       .mx-text--fluid
     ) {
-      --font-min: calc(
-        var(--font-size) - var(--font-size) * var(--font-size-diff, 0.3)
-      );
+      --font-min: calc(var(--font-size) - var(--font-size) * var(--font-size-diff, 0.3));
 
       font-size: clamp(
         max(var(--base-font-size), var(--font-min)),
@@ -71,7 +69,7 @@
       inline-size: var(--spacing-xxxl);
       block-size: 3px;
       background-color: var(--colour-primary);
-      inset-block-start: var(--gap);
+      inset-block-end: -8px;
     }
   }
 

package/src/Atom/Text/text-style.twig

@@ -1 +1,11 @@
-<p class="{{ modifier }}">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 (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+{% set classes = [
+  "mx-rich-text",
+  "mx-vertical-flow",
+  "mx-section--narrow",
+  modifier,
+  alignment
+] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+<div{{ attributes }}>
+  {{ content }}
+</div>

package/src/Atom/Text/text-styles-example.twig

@@ -1,22 +1,8 @@
-<div class="vertical-flow">
+
 <p class="mx-text--embellished-headline">Embelished headline: Lorem ipsum dolor sit amet consectetur</p>
 
 <p class="mx-text--section-headline">Section headline: Lorem ipsum dolor sit amet consectetur</p>
 
-<h2 class="mx-headline">Headline: Lorem ipsum dolor sit amet consectetur</h2>
-
-<p class="mx-heading--xxl">Heading xxl: Lorem ipsum dolor sit amet consectetur</p>
-
-<p class="mx-heading--xl">Heading xl: Lorem ipsum dolor sit amet consectetur</p>
-
-<p class="mx-heading--l">Heading l: Lorem ipsum dolor sit amet consectetur</p>
-
-<p class="mx-heading--m">Heading m: Lorem ipsum dolor sit amet consectetur</p>
-
-<p class="mx-heading--s">Heading s: Lorem ipsum dolor sit amet consectetur</p>
-
-<p class="mx-heading--xs">Heading xs: Lorem ipsum dolor sit amet consectetur</p>
-
 <p class="mx-text--xxxl">Text xxxl: Lorem ipsum dolor sit amet consectetur</p>
 
 <p class="mx-text--xxl">Text xxl: Lorem ipsum dolor sit amet consectetur</p>
@@ -32,4 +18,4 @@
 <p class="mx-text--s">Text s: Lorem ipsum dolor sit amet consectetur</p>
 
 <p class="mx-text--xs">Text xs: Lorem ipsum dolor sit amet consectetur</p>
-</div>
+

package/src/Atom/Video/Video.stories.ts

@@ -1,9 +1,11 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./video.twig"
-import "../_base.css"
+import { Video as VideoType } from "@pnx-mixtape/ids-shape"
 
-const meta: Meta<typeof Component> = {
-  title: "Atom/Video",
+/**
+ * A simple video embed atom.
+ */
+const meta: Meta<VideoType> = {
   tags: ["autodocs"],
   component: Component,
   args: {
@@ -13,6 +15,6 @@ const meta: Meta<typeof Component> = {
 }
 
 export default meta
-type Story = StoryObj<typeof meta>
+type Story = StoryObj<VideoType>
 
 export const Video: Story = {}

package/src/Atom/Video/Video.tsx

@@ -4,11 +4,7 @@ import classNames from "classnames"
 
 type VideoProps = ComponentPropsWithoutRef<"iframe">
 
-const Video = ({
-  title,
-  className = null,
-  ...props
-}: VideoProps): JSX.Element => (
+const Video = ({ title, className = null, ...props }: VideoProps): JSX.Element => (
   <figure className={classNames("mx-video", className)}>
     <iframe title={title} {...props} />
   </figure>

package/src/Atom/Video/__snapshots__/Video.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/Video Video smoke-test 1`] = `
 <div class="mx-page default">

package/src/Atom/_generic.css

@@ -11,8 +11,7 @@
     margin: 0;
     opacity: 1;
     transition-property:
-      opacity, color, background-color, border-color, transform, rotate,
-      display, overlay;
+      opacity, color, background-color, border-color, transform, rotate, display, overlay;
     transition-duration: 0.5s;
     transition-timing-function: var(--ease);
     transition-behavior: allow-discrete;
@@ -27,8 +26,7 @@
   }
 
   :focus-visible {
-    outline: var(--outline-size, 2px) var(--outline-style, solid)
-      var(--outline-color, currentcolor);
+    outline: var(--outline-size, 2px) var(--outline-style, solid) var(--outline-color, currentcolor);
     outline-offset: var(--outline-offset, var(--outline-size, 2px));
   }
 
@@ -50,6 +48,8 @@
     accent-color: var(--colour-primary);
     text-rendering: optimizespeed;
     block-size: 100%;
+    padding-inline: unset;
+    padding-block: unset;
   }
 
   :target,

package/src/Atom/_hr.css

@@ -3,8 +3,7 @@
     display: block;
     block-size: 0;
     border: 0;
-    border-block-start: var(--line-width, 1px) solid
-      var(--line-colour, var(--colour-border));
+    border-block-start: var(--line-width, 1px) solid var(--line-colour, var(--colour-border));
     margin-block: var(--line-gap, var(--spacing-m));
   }
 }

package/src/Component/Accordion/Accordion.stories.ts

@@ -2,12 +2,11 @@ import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./accordion.twig"
 import AccordionItem from "./accordion-item.twig"
 import Heading from "../../Atom/Heading/heading.twig"
+import "./Elements/Accordion"
 import "./Elements/AccordionGroup"
+import "./Elements/AccordionMobile"
 import "./accordion.css"
-import {
-  Accordion as AccordionType,
-  HeadingTypes,
-} from "@pnx-mixtape/ids-shape"
+import { Accordion as AccordionType, HeadingTypes } from "@pnx-mixtape/ids-shape"
 
 const meta: Meta<AccordionType> = {
   tags: ["autodocs", "ids-mvp"],
@@ -31,10 +30,29 @@ const meta: Meta<AccordionType> = {
     ],
   },
   argTypes: {
-    toggleAll: { control: "boolean" },
-    // @ts-expect-error The controls follow the shape
-    "title.title": { control: "text" },
-    "title.as": { options: Object.values(HeadingTypes), control: "select" },
+    toggleAll: {
+      control: "boolean",
+      description: "Include the **Expand all / Collapse all** behaviour.",
+      table: { defaultValue: { summary: "false" } },
+      type: "boolean",
+    },
+    title: {
+      description:
+        "Optional [Heading](/?path=/docs/atom-heading--docs) component, displayed above the accordions.",
+      control: "text",
+    },
+    items: {
+      description:
+        "A list of [AccordionItem](/?path=/docs/component-accordion-accordionitem--docs) objects.",
+      type: {
+        name: "other",
+        required: true,
+        value: "array",
+      },
+      table: {
+        type: { summary: "AccordionItem[]" },
+      },
+    },
   },
 }
 

package/src/Component/Accordion/Accordion.stories.tsx

@@ -17,11 +17,10 @@ const meta: Meta<typeof Component> = {
           <AccordionTitleIcon />
         </AccordionTitle>
         <AccordionContent>
-          I'm baby air plant hashtag letterpress blue bottle. Cloud bread
-          dreamcatcher everyday carry lumbersexual, iceland cardigan swag
-          chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch
-          cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier
-          health goth.
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday
+          carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan
+          XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug
+          glossier health goth.
         </AccordionContent>
       </>
     ),
@@ -39,11 +38,10 @@ export const HeadingLevel: StoryObj<typeof meta> = {
           <AccordionTitleIcon />
         </AccordionTitle>
         <AccordionContent>
-          I'm baby air plant hashtag letterpress blue bottle. Cloud bread
-          dreamcatcher everyday carry lumbersexual, iceland cardigan swag
-          chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch
-          cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier
-          health goth.
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday
+          carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan
+          XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug
+          glossier health goth.
         </AccordionContent>
       </>
     ),

package/src/Component/Accordion/Accordion.tsx

@@ -1,12 +1,4 @@
-import {
-  JSX,
-  PropsWithChildren,
-  useEffect,
-  useId,
-  createContext,
-  use,
-  useMemo,
-} from "react"
+import { JSX, PropsWithChildren, useEffect, useId, createContext, use, useMemo } from "react"
 import classNames from "classnames"
 import useToggle from "../../Utility/Hooks/useToggle"
 
@@ -40,10 +32,7 @@ const Accordion = ({
     }
   }, [accordionId])
 
-  const values = useMemo(
-    () => ({ on, toggle, id: accordionId }),
-    [on, toggle, accordionId],
-  )
+  const values = useMemo(() => ({ on, toggle, id: accordionId }), [on, toggle, accordionId])
 
   return (
     <AccordionContext value={values}>