@pnx-mixtape/mxds 0.0.1

package/src/Component/DropMenu/Components/DropMenuItem.tsx

@@ -0,0 +1,35 @@
+import { JSX, ComponentPropsWithoutRef } from "react"
+import { useDropMenuContext } from "./DropMenuContext"
+
+export type DropMenuItemProps = ComponentPropsWithoutRef<"button"> & {
+  label: string
+  id: string
+  role?: "menuitemradio" | "menuitemcheckbox"
+  selected?: boolean
+}
+
+const DropMenuItem = ({
+  id,
+  label,
+  role = "menuitemradio",
+  ...props
+}: DropMenuItemProps): JSX.Element => {
+  const { selected, handleClick, handleKeydown } = useDropMenuContext()
+  const isSelected: boolean = selected.includes(id)
+
+  return (
+    <button
+      type="button"
+      data-id={id}
+      aria-checked={isSelected}
+      role={role}
+      onClick={event => handleClick(event, id)}
+      onKeyDown={event => handleKeydown(event, id)}
+      {...props}
+    >
+      {label}
+    </button>
+  )
+}
+
+export default DropMenuItem

package/src/Component/DropMenu/DropMenu.stories.ts

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./drop-menu.twig"
+import "./drop-menu.css"
+import "./Elements/DropMenu"
+
+type DropMenuItemType = {
+  label: string
+  href?: string
+  id?: string
+}
+
+type DropMenuType = {
+  items: DropMenuItemType[]
+  label: string
+  id?: string
+}
+
+const meta: Meta<DropMenuType> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    label: "Categories",
+    items: [
+      { label: "News", href: "#news" },
+      { label: "Events", href: "#events" },
+      { label: "Stories", id: "stories" },
+    ],
+  },
+}
+
+export default meta
+type Story = StoryObj<DropMenuType>
+
+export const DropMenu: Story = {
+  args: {},
+}

package/src/Component/DropMenu/DropMenu.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Components/DropMenuContext"
+import DropMenuContainer from "./DropMenu"
+import DropMenuItem from "./Components/DropMenuItem"
+import "./drop-menu.css"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    closeOnClick: true,
+    multiple: false,
+    id: "drop-menu-storybook",
+    children: (
+      <DropMenuContainer label="Categories">
+        <DropMenuItem label="News" id="news" />
+        <DropMenuItem label="Events" id="events" />
+        <DropMenuItem label="Stories" id="stories" />
+      </DropMenuContainer>
+    ),
+  },
+}
+export default meta
+export const DropMenu: StoryObj<typeof Component> = {}

package/src/Component/DropMenu/DropMenu.tsx

@@ -0,0 +1,81 @@
+import { ComponentPropsWithoutRef, JSX, PropsWithChildren } from "react"
+import classNames from "classnames"
+import { useDropMenuContext } from "./Components/DropMenuContext"
+
+type ContainerProps = ComponentPropsWithoutRef<"div"> &
+  PropsWithChildren & {
+    condition: boolean
+  }
+
+const Container = ({
+  condition,
+  children,
+  ...props
+}: ContainerProps): JSX.Element =>
+  condition ? <div {...props}>{children}</div> : <>{children}</>
+
+type DropMenuProps = PropsWithChildren & {
+  label: string
+  inline?: boolean
+  className?: string
+  triggerClassNames?: string[]
+  popoverClassName?: string
+  role?: "menu" | "tablist"
+  ariaLabel?: string
+  description?: string
+}
+
+const defaultTriggerClasses: string[] = [
+  "button",
+  "icon",
+  "icon--chevron-down",
+  "icon--end",
+]
+
+const DropMenu = ({
+  label,
+  children,
+  className,
+  triggerClassNames = defaultTriggerClasses,
+  popoverClassName,
+  role = "menu",
+  ariaLabel,
+  description = "Results will update when you make a selection. Press escape to close.",
+}: DropMenuProps): JSX.Element => {
+  const { dropMenuId, triggerId, descriptionId, popoverRef } =
+    useDropMenuContext()
+
+  return (
+    <Container className={classNames(className)} condition={!!className}>
+      <button
+        id={triggerId}
+        type="button"
+        className={classNames([...triggerClassNames, "drop-menu__trigger"])}
+        popovertarget={dropMenuId}
+        // @ts-expect-error anchorName is a valid style.
+        style={{ anchorName: `--drop-menu-${dropMenuId}` }}
+      >
+        {label}
+      </button>
+      <div
+        id={dropMenuId}
+        className={classNames("drop-menu", popoverClassName)}
+        popover=""
+        // @ts-expect-error positionAnchor is a valid style.
+        style={{ positionAnchor: `--drop-menu-${dropMenuId}` }}
+        ref={popoverRef}
+        aria-labelledby={ariaLabel ? null : triggerId}
+        aria-label={ariaLabel}
+        aria-describedby={descriptionId}
+        role={role}
+      >
+        <div id={descriptionId} className="sr-only">
+          {description}
+        </div>
+        {children}
+      </div>
+    </Container>
+  )
+}
+
+export default DropMenu

package/src/Component/DropMenu/Elements/DropMenu.ts

@@ -0,0 +1,172 @@
+/**
+ * DropMenu
+ * @file Create a DropMenu using the Popover and Anchor APIs
+ */
+
+import { Keyboard, makeAnchor } from "../../../Utility/utilities"
+
+export type DropMenuEvent = CustomEvent<{
+  event: MouseEvent | KeyboardEvent
+  target: HTMLButtonElement | HTMLAnchorElement
+}>
+
+export default class DropMenu extends HTMLElement {
+  internals_: ElementInternals
+  controller: AbortController
+  keyboard: Keyboard = new Keyboard()
+  closeOnClick: boolean
+
+  constructor() {
+    super()
+    this.internals_ = this.attachInternals()
+    this.controller = new AbortController()
+  }
+
+  async connectedCallback() {
+    if (!this.menu || !this.trigger) return
+
+    // Polyfill anchor (everywhere so far).
+    if (!("anchorName" in document.documentElement.style)) {
+      const { default: Polyfills } = await import("../polyfills.js")
+      new Polyfills(this.menu) // eslint-disable-line no-new
+    }
+    // Polyfill popover (FF only)
+    if (!Object.hasOwn(HTMLElement, "popover")) {
+      await import("@oddbird/popover-polyfill")
+    }
+    this.closeOnClick = this.hasAttribute("closeonclick")
+
+    const { signal }: AbortController = this.controller
+    document.addEventListener(
+      "click",
+      (event: MouseEvent): void => {
+        const { target } = event
+        if (
+          (target as HTMLElement) !== this.menu &&
+          ![...this.items].includes(
+            target as HTMLButtonElement | HTMLAnchorElement,
+          )
+        )
+          return
+        this.handleSelect(event)
+        event.preventDefault()
+      },
+      {
+        signal,
+      },
+    )
+
+    document.addEventListener(
+      "keydown",
+      (event: KeyboardEvent): void => {
+        const { target, key } = event
+        if (
+          (target as HTMLElement) !== this.menu &&
+          ![...this.items].includes(
+            target as HTMLButtonElement | HTMLAnchorElement,
+          )
+        )
+          return
+        if (key === "Enter") this.handleSelect(event)
+        event.preventDefault()
+      },
+      {
+        signal,
+      },
+    )
+
+    this.keyboard.attachEventListeners(signal)
+    this.menu.addEventListener("focusin", this.attachKeyboardMenu, {
+      signal,
+    })
+    this.menu.addEventListener("focusout", this.detachKeyboardMenu, {
+      signal,
+    })
+    this.menu.addEventListener("toggle", this.handleToggle, {
+      signal,
+    })
+  }
+
+  disconnectedCallback(): void {
+    this.controller.abort()
+    this.keyboard.detachMenu()
+  }
+
+  handleSelect = (event: MouseEvent | KeyboardEvent): void => {
+    const target = event.target as HTMLButtonElement | HTMLAnchorElement
+    this.items.forEach(item => {
+      if (!(item instanceof HTMLButtonElement)) return
+      item.setAttribute("aria-checked", String(item === target))
+    })
+    const newEvent: DropMenuEvent = new CustomEvent("drop-menu-select", {
+      bubbles: true,
+      cancelable: true,
+      detail: {
+        event,
+        target,
+      },
+    })
+    this.menu.dispatchEvent(newEvent)
+    if (this.closeOnClick) this.menu.togglePopover()
+  }
+
+  handleToggle = ({ newState }: ToggleEvent): void => {
+    const handleClose = () => this.menu.togglePopover()
+    if (newState === "open") {
+      this.keyboard.attachPopup(this.menu.id, handleClose)
+    } else {
+      this.keyboard.detachPopup(this.menu.id)
+    }
+  }
+
+  attachKeyboardMenu = (): void => {
+    this.keyboard.attachMenu(this.menu, this.items)
+  }
+
+  detachKeyboardMenu = (): void => {
+    this.keyboard.detachMenu()
+  }
+
+  get menu(): HTMLDivElement | null {
+    const menu: HTMLDivElement | null = this.querySelector("[popover]")
+    if (!menu) {
+      throw new Error(`${this.localName} must contain a <div popover> element.`)
+    }
+    menu.id = menu.id || this.generatedId()
+    return menu
+  }
+
+  get items(): NodeListOf<HTMLButtonElement | HTMLAnchorElement> {
+    const items: NodeListOf<HTMLButtonElement | HTMLAnchorElement> =
+      this.menu.querySelectorAll(":scope > *")
+    if (!items) {
+      throw new Error(`${this.localName} must contain some menu items.`)
+    }
+    return items
+  }
+
+  get trigger(): HTMLButtonElement | null {
+    const trigger: HTMLButtonElement | null = this.querySelector(
+      `[popovertarget=${this.menu?.id}]`,
+    )
+    if (!trigger) {
+      throw new Error(
+        `${this.localName} must contain a <button popovertarget="${this.menu.id}">`,
+      )
+    }
+    return trigger
+  }
+
+  generatedId = (): string => {
+    const string: string | undefined = this.trigger?.textContent?.trim()
+    return !string ? "" : makeAnchor(string)
+  }
+}
+
+customElements.define("mx-dropmenu", DropMenu)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mx-dropmenu": DropMenu
+  }
+}

package/src/Component/DropMenu/README.md

@@ -0,0 +1,11 @@
+# Drop Menu
+
+Documentation and examples: [drop-menu](https://mixtape.pnx.io/drop-menu)
+
+### How to use
+
+**CSS**
+
+`@import '@pnx-mixtape/mxds/drop-menu.css';`
+
+**@todo JS**

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

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/DropMenu DropMenu smoke-test 1`] = `
+<mx-dropmenu closeonclick>
+  <button id="unique-0"
+          class="drop-menu__trigger button icon icon--chevron-down icon--end"
+          popovertarget="dropdown-menu"
+          style="anchor-name: --drop-menu-dropdown-menu"
+  >
+    Categories
+  </button>
+  <div class="drop-menu"
+       id="dropdown-menu"
+       aria-labelledby="unique-0"
+       style="position-anchor: --drop-menu-dropdown-menu"
+       popover
+  >
+    <a href="#news">
+      News
+    </a>
+    <a href="#events">
+      Events
+    </a>
+    <button type="button"
+            data-id="stories"
+            aria-checked="false"
+    >
+      Stories
+    </button>
+  </div>
+</mx-dropmenu>
+`;

package/src/Component/DropMenu/__snapshots__/DropMenu.stories.tsx.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/DropMenu DropMenu smoke-test 1`] = `
+<button id="unique-0"
+        type="button"
+        class="button icon icon--chevron-down icon--end drop-menu__trigger"
+        popovertarget="drop-menu-storybook"
+        style="anchor-name: --drop-menu-drop-menu-storybook;"
+>
+  Categories
+</button>
+<div id="drop-menu-storybook"
+     class="drop-menu"
+     popover
+     aria-labelledby="unique-0"
+     aria-describedby="unique-0"
+     role="menu"
+     style="position-anchor: --drop-menu-drop-menu-storybook;"
+>
+  <div id="drop-menu-storybook-description"
+       class="sr-only"
+  >
+    Results will update when you make a selection. Press escape to close.
+  </div>
+  <button type="button"
+          data-id="news"
+          aria-checked="false"
+          role="menuitemradio"
+  >
+    News
+  </button>
+  <button type="button"
+          data-id="events"
+          aria-checked="false"
+          role="menuitemradio"
+  >
+    Events
+  </button>
+  <button type="button"
+          data-id="stories"
+          aria-checked="false"
+          role="menuitemradio"
+  >
+    Stories
+  </button>
+</div>
+`;

package/src/Component/DropMenu/drop-menu.css

@@ -0,0 +1,68 @@
+/* stylelint-disable selector-class-pattern, function-no-unknown, property-no-unknown, selector-pseudo-class-no-unknown */
+
+/**
+ * Drop menu
+ *
+ * **Experimental** Using new CSS Anchoring and Popover API's, requires JS polyfill.
+ */
+
+@layer elements {
+  .drop-menu__trigger {
+    anchor-name: --drop-menu;
+
+    &:has(~ :popover-open)::before {
+      rotate: 180deg;
+    }
+  }
+
+  .drop-menu {
+    position: absolute;
+    background-color: var(
+      --drop-menu-background,
+      var(--background, var(--colour-background))
+    );
+    color: var(
+      --drop-menu-foreground,
+      var(--foreground, var(--colour-foreground))
+    );
+    border: var(--line-width, 2px) solid
+      var(--line-colour, var(--colour-border));
+    margin: 0;
+
+    @supports (inline-size: anchor-size(width)) {
+      position-anchor: --drop-menu;
+      inset-area: bottom;
+      position-area: bottom;
+      position-try-options: flip-block;
+      position-try-fallback: flip-block;
+      min-inline-size: anchor-size(width);
+    }
+
+    &:popover-open {
+      display: flex;
+      flex-direction: column;
+    }
+
+    & button {
+      appearance: none;
+      line-height: inherit;
+      font-family: inherit;
+      font-size: inherit;
+      background-color: transparent;
+      color: inherit;
+      border: unset;
+      text-align: start;
+
+      &[aria-checked="true"] {
+        text-decoration-line: underline;
+      }
+    }
+
+    & :is(a, button) {
+      padding-block: var(--spacing-xxxs);
+      padding-inline: var(--spacing-xs);
+      cursor: pointer;
+      min-inline-size: 15ch;
+    }
+  }
+}

package/src/Component/DropMenu/drop-menu.twig

@@ -0,0 +1,27 @@
+<mx-dropmenu closeonclick>
+{% set id = id|default('dropdown-menu') %}
+{% set name = id ~ '-target' %}
+<button
+    id="{{ name }}"
+    class="drop-menu__trigger button icon icon--chevron-down icon--end"
+    popovertarget="{{ id }}"
+    style="anchor-name: --drop-menu-{{ id }}"
+>
+  {{ label }}
+</button>
+<div
+    class="drop-menu"
+    id="{{ id }}"
+    aria-labelledby="{{ name }}"
+    style="position-anchor: --drop-menu-{{ id }}"
+    popover
+>
+  {% for item in items %}
+    {% if item.href %}
+      <a href="{{ item.href }}">{{ item.label }}</a>
+    {% else %}
+      <button type="button" data-id="{{ item.id }}" aria-checked="false">{{ item.label }}</button>
+    {% endif %}
+  {% endfor %}
+</div>
+</mx-dropmenu>

package/src/Component/DropMenu/polyfills.js

@@ -0,0 +1,28 @@
+/**
+ * Helper function until [anchor] & [popover] is supported.
+ * @see https://drafts.csswg.org/css-anchor-position-1/
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#browser_compatibility
+ */
+import { computePosition } from "@floating-ui/dom"
+
+export default class Polyfills {
+  constructor(popover) {
+    this.popover = popover
+    this.trigger = document.querySelector(
+      `[popovertarget="${popover.getAttribute("id")}"`,
+    )
+    this.positionPopover = this.positionPopover.bind(this)
+    this.popover.addEventListener("toggle", this.positionPopover)
+  }
+
+  positionPopover = ({ newState }) => {
+    if (newState === "open") {
+      computePosition(this.trigger, this.popover, {
+        placement: "bottom-start",
+      }).then(({ x, y }) => {
+        this.popover.style.insetInlineStart = `${x}px`
+        this.popover.style.insetBlockStart = `${y}px`
+      })
+    }
+  }
+}

package/src/Component/HeroBanner/HeroBanner.stories.ts

@@ -0,0 +1,75 @@
+import { Meta, StoryObj } from "@storybook/html"
+import { Page } from "../../../.storybook/decorators"
+import Component from "./twig/hero-banner-story.twig"
+import "./hero-banner.css"
+import "../LinkList/link-list.css"
+import {
+  HeroBannerModifier,
+  HeadingTypes,
+  HeroBanner as HeroBannerType,
+} from "@pnx-mixtape/ids-shape"
+
+const meta: Meta<HeroBannerType> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    image: {
+      src: "https://picsum.photos/id/56/558/418?grayscale",
+      alt: "Blurry bubbles",
+    },
+    title: {
+      title: "Hero banner title",
+      as: HeadingTypes.ONE,
+    },
+    link: {
+      href: "#",
+      title: "Find out more",
+    },
+    subtitle:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+  parameters: {
+    deepControls: { enabled: true },
+  },
+  argTypes: {
+    modifiers: {
+      options: Object.values(HeroBannerModifier),
+      control: "multi-select",
+    },
+    // @ts-expect-error The controls follow the shape
+    "image.src": { control: "text" },
+    "image.alt": { control: "text" },
+    "title.title": { control: "text" },
+    "title.as": { options: Object.values(HeadingTypes), control: "select" },
+    "link.href": { control: "text" },
+    "link.title": { control: "text" },
+  },
+  decorators: [Page],
+}
+
+export default meta
+type Story = StoryObj<HeroBannerType>
+
+export const HeroBanner: Story = {}
+
+export const LinkList: Story = {
+  args: {
+    link: null,
+    linkList: {
+      items: [
+        {
+          title: "Link one",
+          href: "#",
+        },
+        {
+          title: "Link two",
+          href: "#",
+        },
+        {
+          title: "Link three",
+          href: "#",
+        },
+      ],
+    },
+  },
+}

package/src/Component/HeroBanner/HeroBanner.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./HeroBanner"
+import Button from "../../Atom/Button/Button"
+import "./hero-banner.css"
+import { ButtonModifiers, HeadingTypes } from "@pnx-mixtape/ids-shape"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    title: "Always put your best foot forward.",
+    subtitle:
+      "Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.",
+  },
+  argTypes: {
+    headingLevel: { options: Object.values(HeadingTypes), control: "select" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const HeroBanner: Story = {}
+
+export const Hero: Story = {
+  args: {
+    hero: true,
+    children: <Button modifiers={[ButtonModifiers.DARK]}>Button</Button>,
+  },
+}