@pnx-mixtape/mxds 0.0.1

package/src/Component/Navigation/Elements/Navigation.ts

@@ -0,0 +1,174 @@
+/**
+ * Main Navigation
+ * @file Drop down navigation handler.
+ */
+
+import {
+  Keyboard,
+  makeAnchor,
+  DisclosureWidget,
+  DisclosureWidgetEvent,
+} from "../../../Utility/utilities"
+
+type SubNavType = {
+  list: HTMLElement
+  trigger: HTMLButtonElement
+  link: HTMLAnchorElement
+  item?: HTMLLIElement
+  widget?: DisclosureWidget
+  linkWidget?: DisclosureWidget
+}
+
+export default class Navigation extends HTMLElement {
+  internals_: ElementInternals
+  controller: AbortController
+  keyboard: Keyboard
+  subNavs?: Map<string, SubNavType>
+  flyout?: boolean
+  edgeCheck!: boolean
+  mq!: string
+
+  constructor() {
+    super()
+    this.internals_ = this.attachInternals()
+    this.controller = new AbortController()
+    this.flyout = this.hasAttribute("flyout")
+  }
+
+  connectedCallback(): void {
+    const { signal }: AbortController = this.controller
+
+    // Add keyboard navigation events.
+    this.keyboard = new Keyboard()
+    this.keyboard.attachEventListeners(signal)
+
+    // Add keyboard focus handler for menu links.
+    this.addEventListener("focusin", () => {
+      this.keyboard.attachMenu(this, this.links)
+    })
+    this.addEventListener("focusout", () => {
+      this.keyboard.detachMenu()
+    })
+
+    if (!this.lists.length) return
+    this.subNavs = new Map()
+    this.lists.forEach((list: HTMLUListElement, index: number): void => {
+      const item: HTMLLIElement = list.closest("li")
+      const link: HTMLAnchorElement = item.querySelector(":scope > a")
+      const id: string = makeAnchor(`subnav-${index}-${link.textContent}`, 30)
+      const trigger: HTMLButtonElement = item.querySelector(
+        ":scope > button.nav__toggle",
+      )
+      if (item && link && trigger) {
+        const labelId = `list-label-${id}`
+        link.setAttribute("id", labelId)
+        list.setAttribute("id", id)
+        list.setAttribute("aria-labelledby", labelId)
+        const widget = new DisclosureWidget(trigger, list)
+        widget.init()
+        this.subNavs.set(id, { item, trigger, list, link, widget })
+      }
+    })
+
+    this.addEventListener("disclosure-toggle", this.handleDisclosure)
+
+    if (!this.flyout) return
+    this.edgeCheck = this.hasAttribute("edgeCheck")
+    this.mq = this.getAttribute("mq") || "(min-width: 720px)"
+    this.handleBreakpoint(this.breakpoint)
+    this.breakpoint.addEventListener("change", this.handleBreakpoint, {
+      signal,
+    })
+  }
+
+  disconnectedCallback(): void {
+    this.controller.abort()
+    this.subNavs.forEach((subNav: SubNavType): void => subNav.widget.detach())
+  }
+
+  handleDisclosure = ({ detail }: CustomEvent<DisclosureWidgetEvent>): void => {
+    const { isOpen, id } = detail
+    const { item } = this.subNavs.get(id)
+    item.classList.toggle("nav--open")
+    if (isOpen) {
+      this.keyboard.attachPopup(id, this.handleCloseAny)
+    } else {
+      this.keyboard.detachPopup(id)
+    }
+  }
+
+  handleCloseAny = (): void => {
+    this.subNavs.forEach(({ widget }: SubNavType): void => {
+      if (!widget) return
+      if (widget.isOpen) widget.handleToggle()
+    })
+  }
+
+  handleFlyout = (event: MouseEvent): void => {
+    const target = event.target as HTMLElement
+    const parent: HTMLLIElement = target.closest("li")
+    if (!parent) return
+    const subnav: HTMLUListElement = parent.querySelector(":scope > ul")
+    if (!subnav) return
+    this.subNavs.forEach(({ widget, list }: SubNavType): void => {
+      if (!widget) return
+      if (widget.isOpen) widget.handleToggle()
+      if (list.id === subnav.id) widget.handleToggle()
+    })
+  }
+
+  handleBreakpoint = ({
+    matches,
+  }: MediaQueryList | MediaQueryListEvent): void => {
+    if (matches) {
+      this.addEventListener("mouseover", this.handleFlyout)
+      this.addEventListener("mouseleave", this.handleCloseAny)
+      if (this.edgeCheck) this.handleEdgeCheck()
+    } else {
+      this.removeEventListener("mouseover", this.handleFlyout)
+      this.removeEventListener("mouseleave", this.handleCloseAny)
+    }
+  }
+
+  handleEdgeCheck() {
+    const windowInnerWidth: number = window.innerWidth
+    const edgeCheck: IntersectionObserver = new IntersectionObserver(
+      ([{ boundingClientRect, target }], obs) => {
+        if (windowInnerWidth < boundingClientRect.right)
+          target.classList.add("nav--reverse")
+        obs.disconnect()
+      },
+    )
+    this.subNavs.forEach(({ list }: SubNavType): void => {
+      edgeCheck.observe(list)
+      const nestedLists: NodeListOf<HTMLUListElement> =
+        list.querySelectorAll("ul")
+      nestedLists.forEach(nestedList => edgeCheck.observe(nestedList))
+    })
+  }
+
+  get links(): NodeListOf<HTMLAnchorElement> | null {
+    const links: NodeListOf<HTMLAnchorElement> | null =
+      this.querySelectorAll("a")
+    if (!links.length) {
+      throw new Error(`${this.localName} must links`)
+    }
+    return links
+  }
+
+  get lists(): NodeListOf<HTMLUListElement> | null {
+    return this.querySelectorAll("li > ul")
+  }
+
+  get breakpoint(): MediaQueryList {
+    return window.matchMedia(this.mq)
+  }
+}
+
+customElements.define("mx-nav", Navigation)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mx-nav": Navigation
+  }
+}

package/src/Component/Navigation/MegaNav.stories.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./navigation-mega-nav.twig"
+import "./navigation.css"
+import "./Elements/Navigation"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs", "no-snapshot"],
+  component: Component,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const MegaNav: Story = {
+  args: {},
+}

package/src/Component/Navigation/Navigation.stories.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./navigation.twig"
+import "./navigation.css"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Navigation: Story = {
+  args: {},
+}

package/src/Component/Navigation/Navigation.stories.tsx

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Navigation"
+import "./navigation.css"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    title: "Navigation",
+    items: [
+      {
+        id: "1",
+        title: "Home",
+        to: "#",
+      },
+      {
+        id: "2",
+        title: "About",
+        to: "#",
+      },
+      {
+        id: "3",
+        title: "Contact",
+        to: "#",
+      },
+    ],
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Navigation: Story = {}
+
+export const InlineNavigation: Story = {
+  args: {
+    inline: true,
+    title: "Inline Navigation",
+  },
+}

package/src/Component/Navigation/Navigation.tsx

@@ -0,0 +1,51 @@
+import { JSX, ComponentPropsWithoutRef } from "react"
+import classNames from "classnames"
+import Link from "../../Atom/Link/Link"
+
+export interface NavigationItem {
+  id: string
+  to: string
+  title: string
+  className?: string
+  items?: NavigationItem[]
+}
+
+type Navigationprops = ComponentPropsWithoutRef<"nav"> & {
+  title: string
+  items: NavigationItem[]
+  inline?: boolean
+  className?: string
+}
+
+const Navigation = ({
+  title,
+  items,
+  className,
+  inline = false,
+  ...props
+}: Navigationprops): JSX.Element => (
+  <nav
+    className={classNames(
+      "nav",
+      {
+        "nav--inline": inline,
+      },
+      className,
+    )}
+    aria-label={title}
+    {...props}
+  >
+    <ul>
+      {items &&
+        items.map((item: NavigationItem) => (
+          <li key={item.id} className={classNames(item.className)}>
+            <Link to={item.to} className={null}>
+              {item.title}
+            </Link>
+          </li>
+        ))}
+    </ul>
+  </nav>
+)
+
+export default Navigation

package/src/Component/Navigation/README.md

@@ -0,0 +1,17 @@
+# Navigation
+
+### How to use
+
+**CSS**
+
+`@import '@pnx-mixtape/mxds/navigation.css';`
+
+**@TODO Vanilla JS**
+
+- ES6 import: `import { Navigation, NavigationFlyout } from '@pnx-mixtape/mxds/mavigation';`
+- ES6 submodule import: `import NavigationFlyout from '@pnx-mixtape/mxds/mavigation/navigation-flyout';`
+- Script tag: `<script src="dist/navigation.js" type="text/javascript"></script>`
+
+**HTML**
+
+See various twig files.

package/src/Component/Navigation/__snapshots__/Collapsible.stories.ts.snap

@@ -0,0 +1,123 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Navigation/Collapsible Collapsible smoke-test 1`] = `
+<mx-nav>
+  <nav class="nav nav--collapsible">
+    <ul class="nav__level-1">
+      <li class="nav__has-subnav">
+        <a href="#"
+           aria-current="page"
+           id="unique-0"
+        >
+          1.1 Level 1 Title
+        </a>
+        <button class="nav__toggle icon icon--chevron-down icon--only"
+                aria-expanded="false"
+                aria-controls="unique-0"
+        >
+          Sub-navigation
+        </button>
+        <ul class="nav__level-2"
+            inert
+            id="unique-1"
+            aria-labelledby="unique-1"
+        >
+          <li class="nav__has-subnav">
+            <a href="/">
+              1.1.1 Level 2 Title
+            </a>
+          </li>
+          <li class="nav__has-subnav">
+            <a href="/">
+              1.1.2 Level 2 Title
+            </a>
+          </li>
+          <li class="nav__has-subnav">
+            <a href="/">
+              1.1.3 Level 2 Title Longer
+            </a>
+          </li>
+          <li class="nav__has-subnav">
+            <a href="/">
+              1.1.4 Level 2 Title
+            </a>
+          </li>
+          <li class="nav__has-subnav">
+            <a href="/">
+              1.1.5 Level 2 Title
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li class="nav__has-subnav">
+        <a href="/"
+           id="unique-2"
+        >
+          1.2 Level 1 Title
+        </a>
+        <button class="nav__toggle icon icon--chevron-down icon--only"
+                aria-expanded="false"
+                aria-controls="unique-2"
+        >
+          Sub-navigation
+        </button>
+        <ul class="nav__level-2"
+            inert
+            id="unique-3"
+            aria-labelledby="unique-3"
+        >
+          <li>
+            <a href="/">
+              1.2.1 Level 2 Title
+            </a>
+          </li>
+          <li>
+            <a href="/">
+              1.2.2 Level 2 Title Longer
+            </a>
+          </li>
+          <li>
+            <a href="/">
+              1.2.1 Level 2 Title
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li class="nav__has-subnav">
+        <a href="/"
+           id="unique-4"
+        >
+          1.3 Level 1 Title
+        </a>
+        <button class="nav__toggle icon icon--chevron-down icon--only"
+                aria-expanded="false"
+                aria-controls="unique-4"
+        >
+          Sub-navigation
+        </button>
+        <ul class="nav__level-2"
+            inert
+            id="unique-5"
+            aria-labelledby="unique-5"
+        >
+          <li class="nav__has-subnav">
+            <a href="/">
+              1.3.1 Level 2 Title
+            </a>
+          </li>
+          <li>
+            <a href="/">
+              1.3.2 Level 2 Title
+            </a>
+          </li>
+          <li>
+            <a href="/">
+              1.3.3 Level 2 Title
+            </a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+</mx-nav>
+`;

package/src/Component/Navigation/__snapshots__/Dropdown.stories.ts.snap

@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Navigation/Dropdown Dropdown smoke-test 1`] = `
+<mx-nav flyout>
+  <nav class="nav nav--dropdown "
+       aria-label="Primary menu"
+  >
+    <ul class="nav__level-1">
+      <li class="nav__has-subnav">
+        <a href="#"
+           aria-current="page"
+           id="unique-0"
+        >
+          1.1 Level 1 Title
+        </a>
+        <button class="nav__toggle icon icon--chevron-down icon--only"
+                aria-expanded="false"
+                aria-controls="unique-0"
+        >
+          Sub-navigation
+        </button>
+        <ul class="nav__level-2"
+            inert
+            id="unique-1"
+            aria-labelledby="unique-1"
+        >
+          <li class="nav__has-subnav">
+            <a href="/">
+              1.1.1 Level 2 Title
+            </a>
+          </li>
+          <li class="nav__has-subnav">
+            <a href="/">
+              1.1.2 Level 2 Title
+            </a>
+          </li>
+          <li class="nav__has-subnav">
+            <a href="/">
+              1.1.3 Level 2 Title Longer
+            </a>
+          </li>
+          <li class="nav__has-subnav">
+            <a href="/">
+              1.1.4 Level 2 Title
+            </a>
+          </li>
+          <li class="nav__has-subnav">
+            <a href="/">
+              1.1.5 Level 2 Title
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li class="nav__has-subnav">
+        <a href="/"
+           id="unique-2"
+        >
+          1.2 Level 1 Title
+        </a>
+        <button class="nav__toggle icon icon--chevron-down icon--only"
+                aria-expanded="false"
+                aria-controls="unique-2"
+        >
+          Sub-navigation
+        </button>
+        <ul class="nav__level-2"
+            inert
+            id="unique-3"
+            aria-labelledby="unique-3"
+        >
+          <li>
+            <a href="/">
+              1.2.1 Level 2 Title
+            </a>
+          </li>
+          <li>
+            <a href="/">
+              1.2.2 Level 2 Title Longer
+            </a>
+          </li>
+          <li>
+            <a href="/">
+              1.2.1 Level 2 Title
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li class="nav__has-subnav">
+        <a href="/"
+           id="unique-4"
+        >
+          1.3 Level 1 Title
+        </a>
+        <button class="nav__toggle icon icon--chevron-down icon--only"
+                aria-expanded="false"
+                aria-controls="unique-4"
+        >
+          Sub-navigation
+        </button>
+        <ul class="nav__level-2"
+            inert
+            id="unique-5"
+            aria-labelledby="unique-5"
+        >
+          <li class="nav__has-subnav">
+            <a href="/">
+              1.3.1 Level 2 Title
+            </a>
+          </li>
+          <li>
+            <a href="/">
+              1.3.2 Level 2 Title
+            </a>
+          </li>
+          <li>
+            <a href="/">
+              1.3.3 Level 2 Title
+            </a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+</mx-nav>
+`;

package/src/Component/Navigation/__snapshots__/Dropdown.stories.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Navigation/Dropdown Dropdown smoke-test 1`] = `
+<nav class="nav nav--dropdown"
+     aria-label="Menu"
+     id="navigation"
+>
+  <ul class="nav__level-1">
+    <li class="nav__has-subnav">
+      <a href="#"
+         class
+      >
+        Home
+      </a>
+      <button aria-controls="unique-0"
+              aria-expanded="false"
+              class="nav__toggle icon icon--only icon--chevron-down"
+              type="button"
+      >
+        Sub-navigation
+      </button>
+    </li>
+    <li class>
+      <a href="#"
+         class
+      >
+        About
+      </a>
+    </li>
+    <li class>
+      <a href="#"
+         class
+      >
+        Contact
+      </a>
+    </li>
+  </ul>
+</nav>
+`;

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

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Navigation Navigation smoke-test 1`] = `
+<nav class="nav "
+     aria-label="Navigation"
+>
+  <ul>
+    <li>
+      <a href="#">
+        Secondary Title
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        Secondary Title
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        Secondary Title
+      </a>
+    </li>
+  </ul>
+</nav>
+`;

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

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Navigation InlineNavigation smoke-test 1`] = `
+<nav class="nav nav--inline"
+     aria-label="Inline Navigation"
+>
+  <ul>
+    <li class>
+      <a href="#"
+         class
+      >
+        Home
+      </a>
+    </li>
+    <li class>
+      <a href="#"
+         class
+      >
+        About
+      </a>
+    </li>
+    <li class>
+      <a href="#"
+         class
+      >
+        Contact
+      </a>
+    </li>
+  </ul>
+</nav>
+`;
+
+exports[`Components/Navigation Navigation smoke-test 1`] = `
+<nav class="nav"
+     aria-label="Navigation"
+>
+  <ul>
+    <li class>
+      <a href="#"
+         class
+      >
+        Home
+      </a>
+    </li>
+    <li class>
+      <a href="#"
+         class
+      >
+        About
+      </a>
+    </li>
+    <li class>
+      <a href="#"
+         class
+      >
+        Contact
+      </a>
+    </li>
+  </ul>
+</nav>
+`;