@pnx-mixtape/mxds 0.0.13 → 0.0.15

package/src/Component/Card/card.css

@@ -4,19 +4,33 @@
 
 @layer design-system.components {
   .mx-card {
+    block-size: 100%;
     display: grid;
     gap: var(--card-gap, var(--gap));
 
     &[class*="mx-background--"] {
       border-radius: var(--border-radius);
 
+      @container (min-width: token("breakpoint.contentCard")) {
+        --content-min-spacing: var(--content-max-spacing, var(--spacing-m));
+      }
+
       & .mx-card__content {
         padding-inline: var(--content-min-spacing, var(--spacing-s));
         padding-block-end: var(--content-min-spacing, var(--spacing-s));
+      }
 
-        @container (min-width: token("breakpoint.contentCard")) {
-          --content-min-spacing: var(--content-max-spacing, var(--spacing-m));
-        }
+      &:not(:has(.mx-card__media, .mx-card__icon)) .mx-card__content {
+        padding-block-start: var(--content-min-spacing, var(--spacing-s));
+      }
+
+      & .mx-card__icon {
+        padding-inline: var(--content-min-spacing, var(--spacing-s));
+        padding-block-start: var(--content-min-spacing, var(--spacing-s));
+      }
+
+      &.mx-background--box {
+        padding-inline: unset;
       }
     }
 
@@ -26,20 +40,19 @@
       @container (min-width: token("breakpoint.contentCard")) {
         --card-gap: var(--gap-l);
 
-        grid-template: "media content" 1fr / 1fr 1fr;
-        align-items: center;
+        grid-template: "media content" 1fr / var(--media-col, 1fr) var(
+            --content-col,
+            1fr
+          );
 
         &.mx-card--reversed {
           grid-template-areas: "content media";
-        }
-
-        & .mx-card__content {
-          justify-content: center;
+          grid-template-columns: var(--content-col, 1fr) var(--media-col, 1fr);
         }
       }
 
       @container (min-width: token("breakpoint.l")) {
-        --card-gap: 6rem;
+        --card-gap: var(--large-card-gap, 6rem);
       }
 
       &[class*="mx-background--"] {
@@ -60,25 +73,24 @@
 
       & .mx-card__content {
         grid-area: content;
+        align-self: var(--align-content, center);
       }
 
-      & :is(.mx-card__media, figure) {
+      & .mx-card__media {
         grid-area: media;
-        display: grid;
-        margin: auto;
-        position: relative;
+        align-self: var(--align-media, center);
         inline-size: 100%;
 
         & img {
           aspect-ratio: var(--ratio);
           border-radius: var(--border-radius);
           object-fit: cover;
-          display: block;
+          inline-size: 100%;
         }
+      }
 
-        & .mx-skeleton--bg {
-          aspect-ratio: var(--ratio);
-        }
+      & .mx-skeleton--bg {
+        grid-area: media;
       }
 
       & .mx-card__icon {
@@ -90,6 +102,10 @@
       inline-size: 100%;
     }
   }
+
+  .mx-card__content > a:last-child {
+    margin-block-start: auto;
+  }
 }
 
 /**
@@ -99,8 +115,7 @@
 @layer design-system.components {
   .mx-grid:has(> *:nth-child(2):last-child)
     > :is(.mx-card, .mx-container:has(.mx-card)) {
-    inline-size: 100%;
-    max-inline-size: var(--max-card-width, 37ch);
+    inline-size: min(100%, var(--max-card-width, 37ch));
     margin-inline: auto;
   }
 }
@@ -119,19 +134,7 @@
   .mx-card--block {
     position: relative;
 
-    &:focus-within {
-      border-radius: var(--border-radius);
-      outline: var(--outline-width) var(--outline-style) var(--outline-color);
-      outline-offset: 2px;
-    }
-
-    & :is(a[href], button) {
-      &:focus-visible {
-        outline: none;
-      }
-    }
-
-    & a::after {
+    & a::before {
       content: "";
       position: absolute;
       inset-block-start: 0;

package/src/Component/Card/card.twig

@@ -1,6 +1,6 @@
 {% set baseClass = 'mx-card' %}
 {% set classes = [baseClass] %}
-{% set background = null %}
+{% set background = background ? "mx-background--"~background : null %}
 {% for modifier in modifiers %}
   {% if modifier == "dark" %}
     {% set background = 'mx-background--reverse' %}
@@ -19,11 +19,6 @@
 
 <div class="mx-container">
 <article{{ attributes }}>
-  {% if image is not empty %}
-  <figure class="mx-card__media">
-    {{ image }}
-  </figure>
-  {% endif %}
   {% if icon is not empty %}
     <div class="mx-card__icon">
       {{ icon }}
@@ -41,5 +36,10 @@
     {{ linkList }}
     {{ link }}
   </div>
+  {% if image is not empty %}
+    <figure class="mx-card__media">
+      {{ image }}
+    </figure>
+  {% endif %}
 </article>
 </div>

package/src/Component/Carousel/Carousel.stories.ts

@@ -0,0 +1,201 @@
+import { Meta, StoryObj } from "@storybook/html-vite"
+import Component from "./carousel.twig"
+import "./carousel.css"
+import "./Elements/Carousel"
+import {
+  CardCarousel as CarouselType,
+  HeadingTypes,
+  ListItemModifiers,
+} from "@pnx-mixtape/ids-shape"
+
+// Deps.
+import Card from "../Card/card.twig"
+import "../Card/card.css"
+import Heading from "../../Atom/Heading/heading.twig"
+import Link from "../../Atom/Link/link.twig"
+import { BackgroundStyles } from "../../enums"
+
+const meta: Meta<CarouselType> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    items: [
+      Card({
+        title: Heading({
+          title: "Tile 1",
+          as: HeadingTypes.THREE,
+        }),
+        link: Link({
+          href: "#",
+          title: "Find out more",
+          more: true,
+        }),
+        content: "<p>Tiles are just block cards without an image.</p>",
+        background: BackgroundStyles.BOX,
+        modifiers: [ListItemModifiers.BLOCK],
+      }),
+      Card({
+        title: Heading({
+          title: "Tile 2",
+          as: HeadingTypes.THREE,
+        }),
+        link: Link({
+          href: "#",
+          title: "Find out more",
+          more: true,
+        }),
+        content: "<p>Tiles are just block cards without an image.</p>",
+        background: BackgroundStyles.BOX,
+        modifiers: [ListItemModifiers.BLOCK],
+      }),
+      Card({
+        title: Heading({
+          title: "Tile 3",
+          as: HeadingTypes.THREE,
+        }),
+        link: Link({
+          href: "#",
+          title: "Find out more",
+          more: true,
+        }),
+        content: "<p>Tiles are just block cards without an image.</p>",
+        background: BackgroundStyles.BOX,
+        modifiers: [ListItemModifiers.BLOCK],
+      }),
+      Card({
+        title: Heading({
+          title: "Tile 4",
+          as: HeadingTypes.THREE,
+        }),
+        link: Link({
+          href: "#",
+          title: "Find out more",
+          more: true,
+        }),
+        content: "<p>Tiles are just block cards without an image.</p>",
+        background: BackgroundStyles.BOX,
+        modifiers: [ListItemModifiers.BLOCK],
+      }),
+      Card({
+        title: Heading({
+          title: "Tile 5",
+          as: HeadingTypes.THREE,
+        }),
+        link: Link({
+          href: "#",
+          title: "Find out more",
+          more: true,
+        }),
+        content:
+          "<p>Tiles are just block cards without an image but may have longer text and trigger height changes..</p>",
+        background: BackgroundStyles.BOX,
+        modifiers: [ListItemModifiers.BLOCK],
+      }),
+      Card({
+        title: Heading({
+          title: "Tile 6",
+          as: HeadingTypes.THREE,
+        }),
+        link: Link({
+          href: "#",
+          title: "Find out more",
+          more: true,
+        }),
+        content: "<p>Tiles are just block cards without an image.</p>",
+        background: BackgroundStyles.BOX,
+        modifiers: [ListItemModifiers.BLOCK],
+      }),
+      Card({
+        title: Heading({
+          title: "Tile 7",
+          as: HeadingTypes.THREE,
+        }),
+        link: Link({
+          href: "#",
+          title: "Find out more",
+          more: true,
+        }),
+        content: "<p>Tiles are just block cards without an image.</p>",
+        background: BackgroundStyles.BOX,
+        modifiers: [ListItemModifiers.BLOCK],
+      }),
+      Card({
+        title: Heading({
+          title: "Tile 8",
+          as: HeadingTypes.THREE,
+        }),
+        link: Link({
+          href: "#",
+          title: "Find out more",
+          more: true,
+        }),
+        content: "<p>Tiles are just block cards without an image.</p>",
+        background: BackgroundStyles.BOX,
+        modifiers: [ListItemModifiers.BLOCK],
+      }),
+      Card({
+        title: Heading({
+          title: "Tile 9",
+          as: HeadingTypes.THREE,
+        }),
+        link: Link({
+          href: "#",
+          title: "Find out more",
+          more: true,
+        }),
+        content: "<p>Tiles are just block cards without an image.</p>",
+        background: BackgroundStyles.BOX,
+        modifiers: [ListItemModifiers.BLOCK],
+      }),
+      Card({
+        title: Heading({
+          title: "Tile 10",
+          as: HeadingTypes.THREE,
+        }),
+        link: Link({
+          href: "#",
+          title: "Find out more",
+          more: true,
+        }),
+        content: "<p>Tiles are just block cards without an image.</p>",
+        background: BackgroundStyles.BOX,
+        modifiers: [ListItemModifiers.BLOCK],
+      }),
+      Card({
+        title: Heading({
+          title: "Tile 11",
+          as: HeadingTypes.THREE,
+        }),
+        link: Link({
+          href: "#",
+          title: "Find out more",
+          more: true,
+        }),
+        content: "<p>Tiles are just block cards without an image.</p>",
+        background: BackgroundStyles.BOX,
+        modifiers: [ListItemModifiers.BLOCK],
+      }),
+    ],
+    loop: false,
+    pagination: false,
+    counter: false,
+  },
+}
+
+export default meta
+type Story = StoryObj<CarouselType>
+
+export const Carousel: Story = {}
+
+export const Counters: Story = {
+  args: {
+    counter: true,
+  },
+}
+
+export const Paginated: Story = {
+  args: {
+    pagination: true,
+    loop: true,
+  },
+}

package/src/Component/Carousel/Elements/Carousel.ts

@@ -0,0 +1,241 @@
+/**
+ * Carousel
+ * @file Support scrolling with buttons.
+ */
+
+import { createElement } from "../../../Utility/utilities"
+
+export default class Carousel extends HTMLElement {
+  internals_: ElementInternals
+  controller: AbortController
+  debounced: ReturnType<typeof setTimeout>
+  loop?: boolean
+  paginationType?: "pagination" | "counter"
+  activePage?: number
+  itemMap?: Map<HTMLLIElement, boolean>
+
+  constructor() {
+    super()
+    this.internals_ = this.attachInternals()
+    this.controller = new AbortController()
+  }
+
+  connectedCallback(): void {
+    if (!this.list) return
+    if (this.buttons) this.buttons.hidden = false
+
+    this.activePage = 0
+    this.list.scrollLeft = 0
+    this.debounced = null
+    this.loop = this.hasAttribute("loop")
+
+    const { signal }: AbortController = this.controller
+    if (this.prev) {
+      this.prev.disabled = true
+      this.prev.addEventListener(
+        "click",
+        () => this.handleNavigation(this.activePage - 1),
+        { signal },
+      )
+    }
+    if (this.next)
+      this.next.addEventListener(
+        "click",
+        () => this.handleNavigation(this.activePage + 1),
+        { signal },
+      )
+    this.list.addEventListener("scroll", this.handleScroll, { signal })
+
+    if (this.pagination) {
+      this.paginationType = this.pagination.getAttribute("data-pagination") as
+        | "pagination"
+        | "counter"
+
+      this.pagination.addEventListener("click", this.handlePagination, {
+        signal,
+      })
+    }
+
+    const items: NodeListOf<HTMLLIElement> =
+      this.list.querySelectorAll(":scope > li")
+    this.itemMap = new Map()
+    const iO = new IntersectionObserver(
+      entries => {
+        entries.forEach(({ target, intersectionRatio }) => {
+          const li = target as HTMLLIElement
+          if (intersectionRatio > 0.5) {
+            li.removeAttribute("inert")
+            this.itemMap.set(li, true)
+          } else {
+            li.setAttribute("inert", "")
+            this.itemMap.set(li, false)
+          }
+        })
+      },
+      {
+        root: this.list,
+        threshold: 0.5,
+      },
+    )
+    items.forEach(item => iO.observe(item))
+
+    const rO = new ResizeObserver(entries => {
+      entries.forEach(() => this.handleOverflow())
+    })
+    rO.observe(this.list)
+
+    const mO = new MutationObserver(entries => {
+      entries.forEach(() => this.handleOverflow())
+    })
+    mO.observe(this.list, { childList: true })
+  }
+
+  disconnectedCallback(): void {
+    this.controller.abort()
+  }
+
+  handleNavigation = (page: number, type: "arrow" | "pagination" = "arrow") => {
+    const goesForward = page > this.activePage
+    const hasRestart = this.loop && this.next.hasAttribute("data-restart")
+    if (!this.pagination) this.activePage = page
+    if (page === 0 || (hasRestart && goesForward && type === "arrow")) {
+      // Scroll to the start.
+      this.items[0].scrollIntoView({ inline: "start", block: "center" })
+      this.next.removeAttribute("data-restart")
+      return
+    }
+    // Scroll to the first item of a page.
+    this.items[this.visibleCount * page].scrollIntoView({
+      inline: "start",
+      block: "center",
+    })
+    if (hasRestart && !goesForward) this.next.removeAttribute("data-restart")
+  }
+
+  handleDisabled = () => {
+    let isEnd = false
+    if (this.prev) this.prev.disabled = this.list.scrollLeft < 1
+    if (this.next || this.pagination) {
+      isEnd =
+        this.list.scrollLeft === this.list.scrollWidth - this.list.offsetWidth
+    }
+    if (this.next) {
+      if (!this.loop) {
+        this.next.disabled = isEnd
+      } else if (isEnd) {
+        this.next.setAttribute("data-restart", "")
+      }
+    }
+    if (this.pagination) {
+      // Set the activePage based on scroll.
+      const startPosition = this.list.offsetLeft + this.list.scrollLeft
+      if (isEnd) {
+        // If it's the end, the last page is active.
+        this.activePage = this.pageStartItems.length - 1
+      } else {
+        // Otherwise when the start of a page reaches the start of it's container, then set it to the active page.
+        this.pageStartItems.forEach((item, index) => {
+          if (item.offsetLeft === startPosition) this.activePage = index
+        })
+      }
+
+      this.pagination.querySelectorAll("button").forEach(button => {
+        const index = button.getAttribute("data-index")
+        if (!index) return
+        const page = parseInt(index, 10)
+        button.disabled = page === this.activePage
+      })
+    }
+  }
+
+  handleScroll = () => {
+    window.clearTimeout(this.debounced)
+    this.debounced = setTimeout(
+      this.handleDisabled,
+      this.pagination ? 100 : 200,
+    )
+  }
+
+  handleOverflow = () => {
+    const { scrollWidth, clientWidth } = this.list
+    const hasOverflow = scrollWidth > clientWidth
+    this.list.classList.toggle("overflowing", hasOverflow)
+    if (this.pagination && hasOverflow) {
+      // Timeout needed for this.itemMap to get populated by i0.
+      setTimeout(this.buildPagination, 200)
+    }
+  }
+
+  buildPagination = () => {
+    if (!this.pagination.hidden) {
+      // Existing pagination
+      const currentPages = this.pagination.querySelectorAll(":scope > li")
+      if (currentPages.length === this.pageStartItems.length) return
+      // If the number of pages changes, remove current ones so it can be rebuilt.
+      currentPages.forEach(li => li.remove())
+    }
+    const pages = new Array(this.pageStartItems.length).fill(null)
+    pages.forEach((_, index) => {
+      const li = createElement(
+        `<li><button type="button" data-index="${index}">${index + 1}</button>`,
+      )
+      this.pagination.append(li)
+      pages[index] = li
+    })
+    const firstPage = pages[0] as HTMLLIElement
+    firstPage.querySelector("button").disabled = true
+    this.pagination.hidden = false
+  }
+
+  handlePagination = (event: MouseEvent) => {
+    const target = event.target as HTMLButtonElement
+    const index = target.getAttribute("data-index")
+    if (!index) return
+    const page: number = parseInt(index, 10)
+    this.handleNavigation(page, "pagination")
+  }
+
+  get list(): HTMLUListElement | null {
+    const list: HTMLUListElement | null = this.querySelector(":scope > ul")
+    if (!list) {
+      throw new Error(`${this.localName} must contain a <ul> element.`)
+    }
+    return list
+  }
+
+  get buttons(): HTMLElement | null {
+    return this.querySelector("[data-buttons]")
+  }
+
+  get prev(): HTMLButtonElement | null {
+    return this.buttons.querySelector(".mx-carousel__prev")
+  }
+
+  get next(): HTMLButtonElement | null {
+    return this.buttons.querySelector(".mx-carousel__next")
+  }
+
+  get pagination(): HTMLOListElement | null {
+    return this.querySelector("[data-pagination]")
+  }
+
+  get items(): HTMLLIElement[] {
+    return [...this.itemMap.keys()]
+  }
+
+  get visibleCount(): number {
+    return [...this.itemMap.values()].filter(visible => visible).length
+  }
+
+  get pageStartItems(): HTMLLIElement[] {
+    return [...this.items].filter((_, index) => index % this.visibleCount == 0)
+  }
+}
+
+customElements.define("mx-carousel", Carousel)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mx-carousel": Carousel
+  }
+}