@pnx-mixtape/mxds 0.0.22 → 0.0.23

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

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

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

@@ -0,0 +1,90 @@
+import { Meta, StoryObj } from "@storybook/html-vite"
+import Component from "./accordion-item.twig"
+import AccordionMobile from "./twig/accordion-mobile.twig"
+import AccordionDiv from "./twig/accordion-div.twig"
+
+import "./Elements/Accordion"
+import "./Elements/AccordionMobile"
+import "./Elements/AccordionDiv"
+import "./accordion.css"
+import { AccordionItem as AccordionItemType } from "@pnx-mixtape/ids-shape"
+
+/**
+ * An HTML Details based accordion.
+ * For extra features like anchor opening, include the `Accordion` custom element javascript.
+ */
+const meta: Meta<AccordionItemType> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    title: "Music",
+    content:
+      "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.",
+    id: "music-accordion",
+    open: false,
+  },
+  argTypes: {
+    title: {
+      description: "The accordion title, shown as the toggle",
+      control: "text",
+      type: {
+        name: "string",
+        required: true,
+      },
+    },
+    content: {
+      description: "Content.",
+      control: "text",
+      type: {
+        name: "string",
+        required: true,
+      },
+      table: { type: { summary: "WysiwygText" } },
+    },
+    id: {
+      description: "The AccordionItem id",
+      type: {
+        name: "string",
+        required: true,
+      },
+    },
+    open: {
+      description: "Option to set the accordion as open by default.",
+      type: "boolean",
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<AccordionItemType>
+
+export const AccordionItem: Story = {}
+
+/**
+ * Open by default accordion.
+ */
+export const Open: Story = {
+  args: {
+    open: true,
+    id: "open-accordion-item",
+  },
+}
+
+/**
+ * A special version that is only collapsed on mobile viewports (used in the [Filters](/?path=/docs/component-filters--docs)).
+ * It requires the `AccordionMobile` custom element javascript, to toggle the `[open]` attributes based on viewport/resize.
+ */
+export const MobileOnly: Story = {
+  render: args => AccordionMobile({ ...args }),
+}
+
+/**
+ * A variant which used a Div rather than the HTML Details elements (should be avoided).
+ * It requires the `AccordionDiv` custom element javascript.
+ */
+export const Div: Story = {
+  render: args => AccordionDiv({ ...args }),
+}

package/src/Component/Accordion/Components/AccordionContent.tsx

@@ -8,11 +8,7 @@ const AccordionContent = ({ children }: PropsWithChildren): JSX.Element => {
     <div
       role="region"
       aria-labelledby={id}
-      className={classNames(
-        "mx-accordion__content",
-        "mx-rich-text",
-        "mx-vertical-flow",
-      )}
+      className={classNames("mx-accordion__content", "mx-rich-text", "mx-vertical-flow")}
       // @ts-expect-error inert is allowed.
       inert={!on ? "" : null}
     >

package/src/Component/Accordion/Components/AccordionTitle.tsx

@@ -6,10 +6,7 @@ type AccordionTitleProps = PropsWithChildren & {
   headingLevel?: HeadingTypes
 }
 
-const AccordionTitle = ({
-  children,
-  headingLevel = null,
-}: AccordionTitleProps): JSX.Element => {
+const AccordionTitle = ({ children, headingLevel = null }: AccordionTitleProps): JSX.Element => {
   const { id, on, toggle } = useAccordion()
   const Heading = headingLevel ? headingLevel : Fragment
 

package/src/Component/Accordion/Elements/Accordion.ts

@@ -73,7 +73,7 @@ export default class Accordion extends HTMLElement {
   }
 }
 
-customElements.define("mx-accordion", Accordion)
+if (!customElements.get("mx-accordion")) customElements.define("mx-accordion", Accordion)
 
 declare global {
   interface HTMLElementTagNameMap {