@pnx-mixtape/mxds 0.0.13 → 0.0.15

package/src/Component/Carousel/carousel.css

@@ -0,0 +1,119 @@
+/**
+ * Carousel.
+ */
+
+@layer design-system.components.carousel {
+  .mx-carousel {
+    display: block;
+  }
+
+  .mx-carousel__scrollable {
+    list-style: none;
+    display: flex;
+    block-size: var(--block-size, auto);
+    overflow: auto hidden;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+    scrollbar-color: var(--colour-foreground) var(--colour-background);
+
+    &::-webkit-scrollbar {
+      block-size: 1rem;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: var(--colour-background);
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--colour-foreground);
+      background-image: linear-gradient(
+        var(--colour-background) 0,
+        var(--colour-background) 0.25rem,
+        var(--colour-foreground) 0.25rem,
+        var(--colour-foreground) 0.75rem,
+        var(--colour-background) 0.75rem
+      );
+    }
+
+    & > li {
+      flex: 0 0 var(--inline-size, 25ch);
+      display: flex;
+      scroll-snap-align: start;
+
+      &[inert] {
+        opacity: 0.3;
+      }
+
+      & + li {
+        margin-inline-start: var(--gap);
+      }
+
+      & .mx-container {
+        inline-size: 100%;
+        display: flex;
+      }
+    }
+
+    &:not(:first-child) {
+      padding-block-start: var(--gap);
+    }
+
+    &.overflowing:not(.no-bar) {
+      padding-block-end: var(--gap);
+    }
+
+    &.no-bar {
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+
+  .mx-carousel__buttons {
+    &:not([hidden]) {
+      display: flex;
+      gap: var(--gap-s);
+    }
+
+    & button[disabled] {
+      opacity: 0.5;
+    }
+  }
+
+  .mx-carousel__pagination {
+    list-style: none;
+    padding-inline: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xxxs);
+
+    &[data-pagination="counter"] {
+      --border-radius: var(--border-radius-round);
+      --indent: 200%;
+    }
+
+    & button {
+      border-radius: var(--border-radius);
+      border: var(--line-width, 2px) solid
+        var(--line-colour, var(--colour-border));
+      background-color: var(--background, var(--colour-background));
+      color: var(--foreground, var(--colour-foreground));
+      min-block-size: 2em;
+      min-inline-size: 2em;
+      font-family: inherit;
+      text-align: center;
+      cursor: pointer;
+      overflow: hidden;
+      text-indent: var(--indent, unset);
+
+      &[disabled] {
+        --background: var(--active-background, var(--colour-border));
+
+        cursor: not-allowed;
+      }
+    }
+  }
+}

package/src/Component/Carousel/carousel.twig

@@ -0,0 +1,27 @@
+{% set classes = [
+  'mx-carousel',
+  'mx-vertical-flow'
+] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+
+<mx-carousel{{ attributes }} role="group" {% if loop %} loop{% endif %}>
+  <div class="mx-carousel__buttons" data-buttons hidden>
+    <button class="mx-carousel__prev mx-button mx-button--icon-only" type="button">
+      <span class="sr-only">previous</span>
+      <span class="mx-icon mx-icon--chevron-left"></span>
+    </button>
+    <button class="mx-carousel__next mx-button mx-button--icon-only" type="button">
+      <span class="sr-only">next</span>
+      <span class="mx-icon mx-icon--chevron-right"></span>
+    </button>
+  </div>
+  <ul class="mx-carousel__scrollable">
+    {% for item in items %}
+      <li>{{ item }}</li>
+    {% endfor %}
+  </ul>
+  {% if pagination or counter %}
+    {% set type = pagination ? 'pagination' : 'counter' %}
+    <ol class="mx-carousel__pagination" data-pagination="{{ type }}" hidden></ol>
+  {% endif %}
+</mx-carousel>

package/src/Component/ContentBlock/ContentBlock.stories.ts

@@ -1,18 +1,20 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./content-block.twig"
-import Heading from "../../Atom/Heading/heading.twig"
-import Link from "../../Atom/Link/link.twig"
-import Image from "../../Atom/Image/image.twig"
-import LinkList from "../LinkList/link-list.twig"
-import Icon from "../../Atom/Icon/icon.twig"
 import "./content-block.css"
-import "../LinkList/link-list.css"
 import {
   ContentBlock as ContentBlockType,
   HeadingTypes,
 } from "@pnx-mixtape/ids-shape"
 import { Icons } from "../../enums"
 
+// Deps.
+import Heading from "../../Atom/Heading/heading.twig"
+import Link from "../../Atom/Link/link.twig"
+import Image from "../../Atom/Image/image.twig"
+import LinkList from "../LinkList/link-list.twig"
+import Icon from "../../Atom/Icon/icon.twig"
+import "../LinkList/link-list.css"
+
 const meta: Meta<ContentBlockType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
@@ -30,24 +32,30 @@ const meta: Meta<ContentBlockType> = {
       "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
     linkList: LinkList({
       items: [
-        {
-          title: "Link one",
+        Link({
+          title: "Music",
           href: "#",
-        },
-        {
-          title: "Link two",
+          iconEnd: Icon({
+            icon: Icons.CHEVRON_RIGHT,
+          }),
+        }),
+        Link({
+          title: "Performances",
           href: "#",
-        },
-        {
-          title: "Link three",
+          iconEnd: Icon({
+            icon: Icons.CHEVRON_RIGHT,
+          }),
+        }),
+        Link({
+          title: "Get involved",
           href: "#",
-        },
+          iconEnd: Icon({
+            icon: Icons.CHEVRON_RIGHT,
+          }),
+        }),
       ],
     }),
   },
-  parameters: {
-    deepControls: { enabled: true },
-  },
   argTypes: {
     // @ts-expect-error The controls follow the shape
     "image.src": { control: "text" },

package/src/Component/ContentBlock/ContentBlock.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./ContentBlock"
 import Link from "../../Atom/Link/Link"
 import Text from "../../Atom/Text/Text"

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

@@ -1,105 +1,165 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/ContentBlock ContentBlock smoke-test 1`] = `
-<article class="mx-content-block">
-  <div class="mx-content-block__content mx-vertical-flow-flex">
-    <h3>
-      Content block title
-    </h3>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-    </p>
-    <ul class="mx-link-list">
-      <li>
-        [object Object]
-      </li>
-      <li>
-        [object Object]
-      </li>
-      <li>
-        [object Object]
-      </li>
-    </ul>
-    <a class="mx-link--more"
-       href="#"
-    >
-      <span>
-        Find out more
-      </span>
-    </a>
-  </div>
-</article>
+<div class="mx-page default">
+  <article class="mx-content-block">
+    <div class="mx-content-block__content mx-vertical-flow-flex">
+      <h3>
+        Content block title
+      </h3>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <ul class="mx-link-list">
+        <li>
+          <a href="#">
+            <span>
+              Music
+            </span>
+            <span class="mx-icon mx-icon--chevron-right ">
+            </span>
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <span>
+              Performances
+            </span>
+            <span class="mx-icon mx-icon--chevron-right ">
+            </span>
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <span>
+              Get involved
+            </span>
+            <span class="mx-icon mx-icon--chevron-right ">
+            </span>
+          </a>
+        </li>
+      </ul>
+      <a class="mx-link--more"
+         href="#"
+      >
+        <span>
+          Find out more
+        </span>
+      </a>
+    </div>
+  </article>
+</div>
 `;
 
 exports[`Component/ContentBlock WithIcon smoke-test 1`] = `
-<article class="mx-content-block">
-  <div class="mx-content-block__icon">
-    <span class="mx-icon mx-icon--heart-selected ">
-    </span>
-  </div>
-  <div class="mx-content-block__content mx-vertical-flow-flex">
-    <h3>
-      Content block title
-    </h3>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-    </p>
-    <ul class="mx-link-list">
-      <li>
-        [object Object]
-      </li>
-      <li>
-        [object Object]
-      </li>
-      <li>
-        [object Object]
-      </li>
-    </ul>
-    <a class="mx-link--more"
-       href="#"
-    >
-      <span>
-        Find out more
+<div class="mx-page default">
+  <article class="mx-content-block">
+    <div class="mx-content-block__icon">
+      <span class="mx-icon mx-icon--heart-selected ">
       </span>
-    </a>
-  </div>
-</article>
+    </div>
+    <div class="mx-content-block__content mx-vertical-flow-flex">
+      <h3>
+        Content block title
+      </h3>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <ul class="mx-link-list">
+        <li>
+          <a href="#">
+            <span>
+              Music
+            </span>
+            <span class="mx-icon mx-icon--chevron-right ">
+            </span>
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <span>
+              Performances
+            </span>
+            <span class="mx-icon mx-icon--chevron-right ">
+            </span>
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <span>
+              Get involved
+            </span>
+            <span class="mx-icon mx-icon--chevron-right ">
+            </span>
+          </a>
+        </li>
+      </ul>
+      <a class="mx-link--more"
+         href="#"
+      >
+        <span>
+          Find out more
+        </span>
+      </a>
+    </div>
+  </article>
+</div>
 `;
 
 exports[`Component/ContentBlock WithImage smoke-test 1`] = `
-<article class="mx-content-block">
-  <figure class="mx-content-block__media">
-    <picture>
-      <img src="https://picsum.photos/id/56/558/418?grayscale"
-           alt="Blurry bubbles"
+<div class="mx-page default">
+  <article class="mx-content-block">
+    <figure class="mx-content-block__media">
+      <picture>
+        <img src="https://picsum.photos/id/56/558/418?grayscale"
+             alt="Blurry bubbles"
+        >
+      </picture>
+    </figure>
+    <div class="mx-content-block__content mx-vertical-flow-flex">
+      <h3>
+        Content block title
+      </h3>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <ul class="mx-link-list">
+        <li>
+          <a href="#">
+            <span>
+              Music
+            </span>
+            <span class="mx-icon mx-icon--chevron-right ">
+            </span>
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <span>
+              Performances
+            </span>
+            <span class="mx-icon mx-icon--chevron-right ">
+            </span>
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <span>
+              Get involved
+            </span>
+            <span class="mx-icon mx-icon--chevron-right ">
+            </span>
+          </a>
+        </li>
+      </ul>
+      <a class="mx-link--more"
+         href="#"
       >
-    </picture>
-  </figure>
-  <div class="mx-content-block__content mx-vertical-flow-flex">
-    <h3>
-      Content block title
-    </h3>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-    </p>
-    <ul class="mx-link-list">
-      <li>
-        [object Object]
-      </li>
-      <li>
-        [object Object]
-      </li>
-      <li>
-        [object Object]
-      </li>
-    </ul>
-    <a class="mx-link--more"
-       href="#"
-    >
-      <span>
-        Find out more
-      </span>
-    </a>
-  </div>
-</article>
+        <span>
+          Find out more
+        </span>
+      </a>
+    </div>
+  </article>
+</div>
 `;

package/src/Component/Dialog/Dialog.stories.ts

@@ -1,28 +1,96 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./dialog.twig"
 import "./dialog.css"
+import "./Elements/Dialog"
+import {
+  ButtonModifiers,
+  Dialog as DialogType,
+  HeadingTypes,
+} from "@pnx-mixtape/ids-shape"
 
-type DialogType = {
+// Deps.
+import Heading from "../../Atom/Heading/heading.twig"
+import Button from "../../Atom/Button/button.twig"
+import Link from "../../Atom/Link/link.twig"
+import DrupalAttribute from "drupal-attribute"
+
+type MxDialogType = DialogType & {
   fullscreen?: boolean
 }
 
-const meta: Meta<DialogType> = {
-  tags: ["autodocs"],
+const meta: Meta<MxDialogType> = {
+  tags: ["autodocs", "ids-mvp"],
   component: Component,
+  args: {
+    id: "example-dialog",
+    title: Heading({
+      title: "Dialog heading",
+      as: HeadingTypes.TWO,
+    }),
+    content:
+      "<p>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.</p>",
+    link: Button({
+      title: "Let's go",
+      modifiers: [ButtonModifiers.DARK],
+
+      attributes: new DrupalAttribute()?.setAttribute("data-close", ""),
+    }),
+  },
   argTypes: {
+    open: { control: "boolean" },
+    modal: { control: "boolean" },
     fullscreen: { control: "boolean" },
   },
+  render: args => `
+    ${Link({
+      title: "Open dialog",
+      modifiers: [ButtonModifiers.DARK],
+      href: "#example-dialog",
+    })}
+    ${Component(args)}
+  `,
 }
 
 export default meta
-type Story = StoryObj<DialogType>
+type Story = StoryObj<MxDialogType>
+
+export const Dialog: Story = {}
 
-export const Dialog: Story = {
-  args: {},
+export const Modal: Story = {
+  args: {
+    id: "example-modal",
+    modal: true,
+  },
+  render: args => `
+    ${Button({
+      title: "Open modal",
+      modifiers: [ButtonModifiers.DARK],
+
+      attributes: new DrupalAttribute()?.setAttribute(
+        "aria-controls",
+        "example-modal",
+      ),
+    })}
+    ${Component(args)}
+  `,
 }
 
 export const Fullscreen: Story = {
   args: {
+    id: "example-fullscreen",
     fullscreen: true,
+    modal: true,
   },
+  render: args => `
+    ${Button({
+      title: "Open fullscreen modal",
+      modifiers: [ButtonModifiers.DARK],
+
+      attributes: new DrupalAttribute()?.setAttribute(
+        "aria-controls",
+        "example-fullscreen",
+      ),
+    })}
+    ${Component(args)}
+  `,
 }

package/src/Component/Dialog/Dialog.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Dialog"
 import Heading from "../../Atom/Heading/Heading"
 import Text from "../../Atom/Text/Text"

package/src/Component/Dialog/Elements/Dialog.ts

@@ -17,34 +17,18 @@ export default class Dialog extends HTMLElement {
   }
 
   connectedCallback(): void {
-    if (!this.openBtns || !this.dialog) return
+    if (!this.dialog) return
 
     const { signal }: AbortController = this.controller
 
     // Open on toggle click.
-    document.addEventListener(
-      "click",
-      (e: MouseEvent): void => {
-        if (![...this.openBtns].includes(e.target as HTMLButtonElement)) return
-        this.handleOpen()
-        e.preventDefault()
-      },
-      {
-        signal,
-      },
+    this.openBtns?.forEach(btn =>
+      btn.addEventListener("click", this.handleOpen, { signal }),
     )
 
     // Close on close button click.
-    this.dialog.addEventListener(
-      "click",
-      (e: MouseEvent): void => {
-        if (![...this.closeBtns].includes(e.target as HTMLButtonElement)) return
-        this.handleClose()
-        e.preventDefault()
-      },
-      {
-        signal,
-      },
+    this.closeBtns?.forEach(btn =>
+      btn.addEventListener("click", this.handleClose, { signal }),
     )
 
     // Close on outside click.
@@ -77,31 +61,32 @@ export default class Dialog extends HTMLElement {
   disconnectedCallback(): void {
     if (!this.dialog) return
     if (typeof this.dialog.close === "function") this.dialog.close()
-    this.openBtns.forEach((btn: Element) =>
+    this.openBtns?.forEach((btn: Element) =>
       btn.setAttribute("aria-expanded", "false"),
     )
-    document.body.classList.remove(this.scrollLockClass)
+    if (this.isModal) document.body.classList.remove(this.scrollLockClass)
     this.controller.abort()
   }
 
-  handleOpen = (): void => {
+  handleOpen = (event: MouseEvent): void => {
     if (!this.dialog) return
+    event.preventDefault()
     if (typeof this.dialog.show === "function") {
       this.isModal ? this.dialog.showModal() : this.dialog.show()
     }
-    this.openBtns.forEach((btn: Element) =>
+    this.openBtns?.forEach((btn: Element) =>
       btn.setAttribute("aria-expanded", "true"),
     )
-    document.body.classList.add(this.scrollLockClass)
+    if (this.isModal) document.body.classList.add(this.scrollLockClass)
   }
 
   handleClose = (): void => {
     if (!this.dialog) return
     if (typeof this.dialog.close === "function") this.dialog.close()
-    this.openBtns.forEach((btn: Element) =>
+    this.openBtns?.forEach((btn: Element) =>
       btn.setAttribute("aria-expanded", "false"),
     )
-    document.body.classList.remove(this.scrollLockClass)
+    if (this.isModal) document.body.classList.remove(this.scrollLockClass)
   }
 
   get dialog(): HTMLDialogElement | null {
@@ -116,12 +101,7 @@ export default class Dialog extends HTMLElement {
     const btns: NodeListOf<HTMLButtonElement> = document.querySelectorAll(
       `[href="#${this.id}"], [aria-controls="${this.id}"]`,
     )
-    if (!btns) {
-      throw new Error(
-        `${this.localName} must have an associated opening element.`,
-      )
-    }
-    btns.forEach((btn: HTMLButtonElement): void => {
+    btns?.forEach((btn: HTMLButtonElement): void => {
       btn.setAttribute("aria-controls", this.id)
     })
     return btns