@pnx-mixtape/mxds 0.0.21 → 0.0.23

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 {

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

@@ -37,11 +37,7 @@ export default class AccordionDiv extends HTMLElement {
     this.controller.abort()
   }
 
-  attributeChangedCallback(
-    name: string,
-    oldValue: string,
-    newValue: string,
-  ): void {
+  attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
     const isClosed = newValue === null
     this.content?.toggleAttribute("inert", isClosed)
   }
@@ -54,8 +50,7 @@ export default class AccordionDiv extends HTMLElement {
   }
 
   get trigger(): HTMLButtonElement {
-    const trigger: HTMLButtonElement | null =
-      this.querySelector(":scope > button")
+    const trigger: HTMLButtonElement | null = this.querySelector(":scope > button")
     if (!trigger) {
       throw new Error(`${this.localName} must contain a <button> element.`)
     }
@@ -66,15 +61,13 @@ export default class AccordionDiv extends HTMLElement {
     const content: HTMLDivElement | null | undefined = this.trigger
       ?.nextElementSibling as HTMLDivElement
     if (!content) {
-      throw new Error(
-        `${this.localName} must contain a <div> element after the <button>.`,
-      )
+      throw new Error(`${this.localName} must contain a <div> element after the <button>.`)
     }
     return content
   }
 }
 
-customElements.define("mx-accordiondiv", AccordionDiv)
+if (!customElements.get("mx-accordiondiv")) customElements.define("mx-accordiondiv", AccordionDiv)
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -53,51 +53,37 @@ export default class AccordionGroup extends HTMLElement {
   }
 
   handleToggle = () => {
-    this.expandTrigger.disabled = [...this.accordions].every(
-      details => details.open === true,
-    )
-    this.collapseTrigger.disabled = [...this.accordions].every(
-      details => details.open !== true,
-    )
+    this.expandTrigger.disabled = [...this.accordions].every(details => details.open === true)
+    this.collapseTrigger.disabled = [...this.accordions].every(details => details.open !== true)
   }
 
   get accordions(): NodeListOf<HTMLDetailsElement> | null {
-    const accordions: NodeListOf<HTMLDetailsElement> | null =
-      this.querySelectorAll("details")
+    const accordions: NodeListOf<HTMLDetailsElement> | null = this.querySelectorAll("details")
     if (!accordions.length) {
-      throw new Error(
-        `${this.localName} must contain at least one <details> element.`,
-      )
+      throw new Error(`${this.localName} must contain at least one <details> element.`)
     }
     return accordions
   }
 
   get expandTrigger(): HTMLButtonElement | null {
-    const trigger: HTMLButtonElement | null = this.querySelector(
-      "button[data-expand]",
-    )
+    const trigger: HTMLButtonElement | null = this.querySelector("button[data-expand]")
     if (!trigger) {
-      throw new Error(
-        `${this.localName} must contain a <button data-expand> element.`,
-      )
+      throw new Error(`${this.localName} must contain a <button data-expand> element.`)
     }
     return trigger
   }
 
   get collapseTrigger(): HTMLButtonElement | null {
-    const trigger: HTMLButtonElement | null = this.querySelector(
-      "button[data-collapse]",
-    )
+    const trigger: HTMLButtonElement | null = this.querySelector("button[data-collapse]")
     if (!trigger) {
-      throw new Error(
-        `${this.localName} must contain a <button data-collapse> element.`,
-      )
+      throw new Error(`${this.localName} must contain a <button data-collapse> element.`)
     }
     return trigger
   }
 }
 
-customElements.define("mx-accordion-group", AccordionGroup)
+if (!customElements.get("mx-accordion-group"))
+  customElements.define("mx-accordion-group", AccordionGroup)
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -15,6 +15,7 @@ export default class AccordionMobile extends Accordion {
   }
 
   connectedCallback(): void {
+    super.connectedCallback()
     this.handleBreakpoint(this.breakpoint)
     const { signal }: AbortController = this.controller
     this.breakpoint.addEventListener("change", this.handleBreakpoint, {
@@ -26,9 +27,7 @@ export default class AccordionMobile extends Accordion {
     this.controller.abort()
   }
 
-  handleBreakpoint = ({
-    matches,
-  }: MediaQueryList | MediaQueryListEvent): void => {
+  handleBreakpoint = ({ matches }: MediaQueryList | MediaQueryListEvent): void => {
     if (!this.details) return
     this.details.toggleAttribute("open", !matches)
   }
@@ -38,7 +37,8 @@ export default class AccordionMobile extends Accordion {
   }
 }
 
-customElements.define("mx-accordionmobile", AccordionMobile)
+if (!customElements.get("mx-accordionmobile"))
+  customElements.define("mx-accordionmobile", AccordionMobile)
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component/Accordion Accordion smoke-test 1`] = `
 <div class="mx-page default">
@@ -9,7 +9,9 @@ exports[`Component/Accordion Accordion smoke-test 1`] = `
       </h2>
     </div>
     <mx-accordion>
-      <details class="mx-accordion mx-accordion--divided">
+      <details class="mx-accordion mx-accordion--divided"
+               id="music"
+      >
         <summary class="mx-accordion__toggle">
           Music
           <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down"
@@ -23,7 +25,9 @@ exports[`Component/Accordion Accordion smoke-test 1`] = `
       </details>
     </mx-accordion>
     <mx-accordion>
-      <details class="mx-accordion mx-accordion--divided">
+      <details class="mx-accordion mx-accordion--divided"
+               id="performances"
+      >
         <summary class="mx-accordion__toggle">
           Performances
           <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down"
@@ -49,7 +53,9 @@ exports[`Component/Accordion DefaultOpen smoke-test 1`] = `
       </h2>
     </div>
     <mx-accordion>
-      <details class="mx-accordion mx-accordion--divided">
+      <details class="mx-accordion mx-accordion--divided"
+               id="music"
+      >
         <summary class="mx-accordion__toggle">
           Music
           <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down"
@@ -65,6 +71,7 @@ exports[`Component/Accordion DefaultOpen smoke-test 1`] = `
     <mx-accordion>
       <details class="mx-accordion mx-accordion--divided"
                open
+               id="performances-default-"
       >
         <summary class="mx-accordion__toggle">
           Performances (default open)
@@ -107,7 +114,9 @@ exports[`Component/Accordion ToggleAll smoke-test 1`] = `
         </div>
       </div>
       <mx-accordion>
-        <details class="mx-accordion mx-accordion--divided">
+        <details class="mx-accordion mx-accordion--divided"
+                 id="music"
+        >
           <summary class="mx-accordion__toggle">
             Music
             <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down"
@@ -121,7 +130,9 @@ exports[`Component/Accordion ToggleAll smoke-test 1`] = `
         </details>
       </mx-accordion>
       <mx-accordion>
-        <details class="mx-accordion mx-accordion--divided">
+        <details class="mx-accordion mx-accordion--divided"
+                 id="performances"
+        >
           <summary class="mx-accordion__toggle">
             Performances
             <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down"

package/src/Component/Accordion/__snapshots__/Accordion.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/Accordion Accordion smoke-test 1`] = `
 <div class="mx-accordion mx-accordion--divided"

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

@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Component/Accordion/AccordionItem AccordionItem smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-accordion>
+    <details class="mx-accordion mx-accordion--divided"
+             id="music-accordion"
+    >
+      <summary class="mx-accordion__toggle">
+        Music
+        <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down"
+              aria-hidden="true"
+        >
+        </span>
+      </summary>
+      <div class="mx-accordion__content mx-rich-text mx-vertical-flow">
+        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.
+      </div>
+    </details>
+  </mx-accordion>
+</div>
+`;
+
+exports[`Component/Accordion/AccordionItem Div smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-accordiondiv class="mx-accordion mx-accordion--divided">
+    <button type="button"
+            class="mx-accordion__toggle"
+            aria-expanded="false"
+            aria-controls="unique-0"
+    >
+      Music
+      <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down"
+            aria-hidden="true"
+      >
+      </span>
+    </button>
+    <div class="mx-accordion__content mx-rich-text mx-vertical-flow"
+         inert
+         role="region"
+    >
+      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.
+    </div>
+  </mx-accordiondiv>
+</div>
+`;
+
+exports[`Component/Accordion/AccordionItem MobileOnly smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-accordionmobile>
+    <details class="mx-accordion mx-accordion--divided"
+             id="music-accordion"
+             open
+    >
+      <summary class="mx-accordion__toggle">
+        Music
+        <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down"
+              aria-hidden="true"
+        >
+        </span>
+      </summary>
+      <div class="mx-accordion__content mx-rich-text mx-vertical-flow">
+        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.
+      </div>
+    </details>
+  </mx-accordionmobile>
+</div>
+`;
+
+exports[`Component/Accordion/AccordionItem Open smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-accordion>
+    <details class="mx-accordion mx-accordion--divided"
+             id="open-accordion-item"
+             open
+    >
+      <summary class="mx-accordion__toggle">
+        Music
+        <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down"
+              aria-hidden="true"
+        >
+        </span>
+      </summary>
+      <div class="mx-accordion__content mx-rich-text mx-vertical-flow">
+        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.
+      </div>
+    </details>
+  </mx-accordion>
+</div>
+`;

package/src/Component/Accordion/accordion.css

@@ -14,7 +14,7 @@
     }
   }
 
-  :is(mx-accordion, mx-accordiondiv, mx-accordionmobile) {
+  :is(mx-accordion, mx-accordiondiv, mx-accordionmobile, mx-accordion-group) {
     display: block;
   }
 
@@ -28,6 +28,10 @@
       padding: initial;
     }
   }
+
+  mx-accordion-group:not(:defined) .mx-accordions__toggle-all {
+    display: none;
+  }
 }
 
 @layer design-system.components {
@@ -79,8 +83,7 @@
   }
 
   .mx-accordion--divided {
-    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));
 
     & .mx-accordion__toggle {
       padding-block: var(--vertical-padding, var(--spacing-xxs));
@@ -93,8 +96,7 @@
 
     &:is([open], [data-open="true"]) {
       & > .mx-accordion__content {
-        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));
         padding-block: var(--vertical-padding, var(--spacing-xxs));
         padding-inline: var(--horizontal-padding, 0);
       }

package/src/Component/Accordion/twig/accordion-div.twig

@@ -1,13 +1,15 @@
-<mx-accordiondiv class="accordion {{ modifier_class }}">
-  {% block summary %}
-    <button type="button" class="accordion__toggle">
-      {{ title | default('Open Me') }}
-      <span class="button icon button--small button--icon-only icon--chevron-down" aria-hidden="true"></span>
-    </button>
-  {% endblock %}
-  <div class="accordion__content rich-text vertical-flow">
-    {% block content %}
-      <p>This content is hidden inside the accordion body until it is disclosed by clicking the accordion toggle.</p>
-    {% endblock %}
+{% set baseClass = 'mx-accordion' %}
+{% set classes = [
+  baseClass,
+  baseClass~'--divided',
+] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+<mx-accordiondiv{{ attributes }}>
+  <button type="button" class="mx-accordion__toggle">
+    {{ title }}
+    <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down" aria-hidden="true"></span>
+  </button>
+  <div class="mx-accordion__content mx-rich-text mx-vertical-flow">
+    {{ content }}
   </div>
 </mx-accordiondiv>

package/src/Component/Accordion/twig/accordion-mobile.twig

@@ -1,15 +1,17 @@
+{% set baseClass = 'mx-accordion' %}
+{% set classes = [
+  baseClass,
+  baseClass~'--divided',
+] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 <mx-accordionmobile>
-  <details class="accordion {{ modifier_class }}">
-    {% block summary %}
-      <summary class="accordion__toggle">
-        {{ title | default('Open Me') }}
-        <span class="button icon button--small button--icon-only icon--chevron-down" aria-hidden="true"></span>
-      </summary>
-    {% endblock %}
-    <div class="accordion__content rich-text vertical-flow">
-      {% block content %}
-        <p>This content is hidden inside the accordion body until it is disclosed by clicking the accordion toggle.</p>
-      {% endblock %}
+  <details{{ attributes }}{% if id is not empty %} id="{{ id }}"{% endif %}{% if open %} open{% endif %}>
+    <summary class="mx-accordion__toggle">
+      {{ title }}
+      <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down" aria-hidden="true"></span>
+    </summary>
+    <div class="mx-accordion__content mx-rich-text mx-vertical-flow">
+      {{ content }}
     </div>
   </details>
 </mx-accordionmobile>

package/src/Component/Breadcrumb/Breadcrumb.stories.ts

@@ -25,6 +25,20 @@ const meta: Meta<BreadcrumbsType> = {
       }),
     ],
   },
+  argTypes: {
+    items: {
+      description:
+        "A list of [Link](/?path=/docs/atom-link--docs) objects, where the last item gets the `current=true` flag.",
+      type: {
+        name: "other",
+        required: true,
+        value: "array",
+      },
+      table: {
+        type: { summary: "Link[]" },
+      },
+    },
+  },
 }
 
 export default meta

package/src/Component/Breadcrumb/Breadcrumb.tsx

@@ -9,19 +9,9 @@ type BreadcrumbProps = ComponentPropsWithoutRef<"nav"> & {
   className?: string
 }
 
-const Breadcrumb = ({
-  items,
-  title,
-  className,
-  ...props
-}: BreadcrumbProps): JSX.Element => (
+const Breadcrumb = ({ items, title, className, ...props }: BreadcrumbProps): JSX.Element => (
   <nav
-    className={classNames(
-      "mx-nav",
-      "mx-nav--breadcrumb",
-      "mx-nav--inline",
-      className,
-    )}
+    className={classNames("mx-nav", "mx-nav--breadcrumb", "mx-nav--inline", className)}
     aria-label="You are here"
     {...props}
   >

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

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

package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.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/Breadcrumb Breadcrumb smoke-test 1`] = `
 <nav class="mx-nav mx-nav--breadcrumb mx-nav--inline"

package/src/Component/Breadcrumb/breadcrumb.css

@@ -20,10 +20,7 @@
     }
 
     & > ul > li {
-      color: var(
-        --breadcrumb-foreground,
-        var(--foreground, var(--colour-foreground-alt))
-      );
+      color: var(--breadcrumb-foreground, var(--foreground, var(--colour-foreground-alt)));
       display: flex;
       align-items: center;
 

package/src/Component/Callout/Callout.stories.ts

@@ -14,6 +14,26 @@ const meta: Meta<CalloutType> = {
     }),
     content: "<p>Some callout content.</p>",
   },
+  argTypes: {
+    title: {
+      description: "Optional [Heading](/?path=/docs/atom-heading--docs).",
+      control: "text",
+      table: {
+        type: { summary: "Heading" },
+      },
+    },
+    content: {
+      description: "Content.",
+      control: "text",
+      type: {
+        name: "string",
+        required: true,
+      },
+      table: {
+        type: { summary: "WysiwygText" },
+      },
+    },
+  },
 }
 
 export default meta

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

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

package/src/Component/Callout/callout.css

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