@pnx-mixtape/mxds 0.0.1

package/src/Layout/Grid/twig/old-grid.twig

@@ -0,0 +1,46 @@
+<div class="grid">
+  <div class="grid--12-col">12</div>
+</div>
+
+<div class="grid">
+  <div class="grid--11-col">11</div>
+  <div class="grid--1-col">1</div>
+</div>
+
+<div class="grid">
+  <div class="grid--10-col">10</div>
+  <div class="grid--2-col">2</div>
+</div>
+
+<div class="grid">
+  <div class="grid--9-col">9</div>
+  <div class="grid--3-col">3</div>
+</div>
+
+<div class="grid">
+  <div class="grid--8-col">8</div>
+  <div class="grid--4-col">4</div>
+</div>
+
+<div class="grid">
+  <div class="grid--7-col">7</div>
+  <div class="grid--5-col">5</div>
+</div>
+
+<div class="grid">
+  <div class="grid--6-col">6</div>
+  <div class="grid--6-col">6</div>
+</div>
+
+<div class="grid">
+  <div class="grid--4-col">4</div>
+  <div class="grid--4-col">4</div>
+  <div class="grid--4-col">4</div>
+</div>
+
+<div class="grid">
+  <div class="grid--3-col">3</div>
+  <div class="grid--3-col">3</div>
+  <div class="grid--3-col">3</div>
+  <div class="grid--3-col">3</div>
+</div>

package/src/Layout/Header/Components/GlobalToggle.tsx

@@ -0,0 +1,35 @@
+import { JSX } from "react"
+import Button, { ButtonType } from "../../../Atom/Button/Button"
+import { Icons } from "../../../enums"
+import { ButtonModifiers } from "@pnx-mixtape/ids-shape"
+
+type GlobalToggleProps = ButtonType & {
+  icon: Icons
+  name: string
+  toggleId: string
+  open?: boolean
+}
+
+const GlobalToggle = ({
+  open = false,
+  icon,
+  name,
+  toggleId,
+  ...props
+}: GlobalToggleProps): JSX.Element => {
+  return (
+    <Button
+      iconOnly={true}
+      icon={open ? Icons.CLOSE : icon}
+      modifiers={[ButtonModifiers.DARK]}
+      className="global__toggle__menu"
+      aria-expanded={open}
+      aria-controls={toggleId}
+      {...props}
+    >
+      {open ? "Close" : "Open"} {name}
+    </Button>
+  )
+}
+
+export default GlobalToggle

package/src/Layout/Header/Components/Logo.tsx

@@ -0,0 +1,17 @@
+import { JSX } from "react"
+import Link from "../../../Atom/Link/Link"
+import Media from "../../../Atom/Media/Media"
+
+type LogoProps = {
+  to: string
+  src: string
+  alt: string
+}
+
+const Logo = ({ to, src, alt }: LogoProps): JSX.Element => (
+  <Link to={to} className="logo">
+    <Media src={src} alt={alt} loading="eager"></Media>
+  </Link>
+)
+
+export default Logo

package/src/Layout/Header/Elements/GlobalToggle.ts

@@ -0,0 +1,137 @@
+/**
+ * Header
+ * @file Handle accessible trigger of menus on small screens.
+ */
+
+import {
+  DisclosureWidget,
+  DisclosureWidgetEvent,
+} from "../../../Utility/utilities"
+
+export default class GlobalToggle extends HTMLElement {
+  internals_: ElementInternals
+  controller: AbortController
+  widget!: DisclosureWidget
+  controls?: string
+  mq: string
+  triggerText: string
+  closeIconClass: string = "icon--close"
+  menuIconClass: string = "icon--menu"
+  searchIconClass: string = "icon--search"
+  hideMenu: boolean
+
+  constructor() {
+    super()
+    this.internals_ = this.attachInternals()
+    this.controller = new AbortController()
+    this.mq = this.getAttribute("mq") || "(max-width: 720px)"
+  }
+
+  connectedCallback(): void {
+    if (!this.trigger || !this.target) return
+
+    this.target?.setAttribute("role", "region")
+    this.widget = new DisclosureWidget(this.trigger, this.target)
+    this.widget.init()
+    const { signal }: AbortController = this.controller
+    this.handleBreakpoint(this.breakpoint)
+    this.breakpoint.addEventListener("change", this.handleBreakpoint, {
+      signal,
+    })
+  }
+
+  disconnectedCallback(): void {
+    this.widget.detach()
+    this.controller.abort()
+  }
+
+  handleBreakpoint = ({
+    matches,
+  }: MediaQueryList | MediaQueryListEvent): void => {
+    if (!this.trigger) return
+    if (matches) {
+      this.widget.attach()
+      this.target.setAttribute("inert", "")
+      this.trigger.addEventListener("disclosure-toggle", this.handleDisclosure)
+    } else {
+      this.widget.detach()
+      this.target.removeAttribute("inert")
+      this.trigger.removeEventListener(
+        "disclosure-toggle",
+        this.handleDisclosure,
+      )
+    }
+  }
+
+  handleDisclosure = ({ detail }: CustomEvent<DisclosureWidgetEvent>): void => {
+    const { isOpen } = detail
+    // Toggle toggle text.
+    const origText = !isOpen ? "Close" : "Open"
+    const replaceText = !isOpen ? "Open" : "Close"
+    this.trigger.textContent = this.triggerText.replace(origText, replaceText)
+
+    // Search is a little different.
+    const isSearch = this.controls === "primary-search"
+    if (isSearch) this.handleSearchDisclosure(isOpen)
+
+    // Toggle trigger classes.
+    this.trigger.classList.toggle(
+      isSearch ? this.searchIconClass : this.menuIconClass,
+    )
+    this.trigger.classList.toggle(this.closeIconClass)
+  }
+
+  handleSearchDisclosure = (isOpen?: boolean): void => {
+    if (this.hideMenu) {
+      // Search trigger should hide the menu trigger.
+      const menuTrigger = document.querySelector(`.${this.menuIconClass}`)
+      menuTrigger.toggleAttribute("hidden")
+    }
+    // Shift focus between search input and trigger.
+    if (!isOpen) {
+      this.trigger.focus()
+    } else {
+      this.target.querySelector("input")?.focus()
+    }
+  }
+
+  get trigger(): HTMLButtonElement {
+    const trigger: HTMLButtonElement | null =
+      this.querySelector(":scope > button")
+    const controls = trigger.getAttribute("aria-controls")
+    if (!trigger || !controls) {
+      throw new Error(
+        `${this.localName} must contain a <button aria-controls="element-to-trigger"> element.`,
+      )
+    }
+    trigger.removeAttribute("disabled")
+    this.controls = controls
+    this.triggerText = trigger.textContent
+    return trigger
+  }
+
+  get target(): HTMLDivElement {
+    const target: HTMLDivElement | null = document.querySelector(
+      `div[id="${this.controls}"]`,
+    )
+    if (!target) {
+      throw new Error(
+        `${this.localName} must contain a target <div id="${this.controls}">.`,
+      )
+    }
+    target.classList.remove("global-nav-up-only")
+    return target
+  }
+
+  get breakpoint(): MediaQueryList {
+    return window.matchMedia(this.mq)
+  }
+}
+
+customElements.define("mx-global-toggle", GlobalToggle)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mx-trigger": GlobalToggle
+  }
+}

package/src/Layout/Header/Header.stories.ts

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./header.twig"
+import "./_toggles.css"
+import "./_header.css"
+import "./Elements/GlobalToggle"
+
+const meta: Meta<typeof Component> = {
+  title: "Layout/Header/Primary",
+  tags: ["autodocs"],
+  component: Component,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {},
+}

package/src/Layout/Header/Header.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Header"
+import { mixtapeLogo, navigationItems } from "../../../mockups/constants"
+import "./header.css"
+
+const meta: Meta<typeof Component> = {
+  title: "Layout/Header",
+  component: Component,
+  args: {
+    logo: mixtapeLogo,
+    navigationItems: navigationItems,
+  },
+}
+
+export default meta
+
+export const PrimaryHeader: StoryObj<typeof meta> = {}

package/src/Layout/Header/Header.tsx

@@ -0,0 +1,73 @@
+import { JSX, PropsWithChildren, ReactNode, useId } from "react"
+import classNames from "classnames"
+import Section from "../Section/Section"
+import GlobalToggle from "./Components/GlobalToggle"
+import NavigationDropdown from "../../Component/Navigation/Dropdown"
+import useToggle from "../../Utility/Hooks/useToggle"
+import useMediaQuery from "../../Utility/Hooks/useMediaQuery"
+import { Icons, SectionStyles, SectionTags } from "../../enums.js"
+import { NavigationItem } from "../../Component/Navigation/Navigation"
+
+type PrimaryHeaderProps = PropsWithChildren & {
+  logo?: ReactNode
+  navigationItems?: NavigationItem[]
+  mediaQuery?: string
+  size?: SectionStyles | SectionStyles[]
+  className?: string
+}
+
+const Header = ({
+  logo,
+  navigationItems,
+  mediaQuery = "(max-width: 720px)",
+  size = SectionStyles.S,
+  children,
+  className,
+}: PrimaryHeaderProps): JSX.Element => {
+  const id: string = useId()
+  const [on, toggle] = useToggle(false)
+  const isMobile: boolean = useMediaQuery(mediaQuery)
+
+  return (
+    <Section
+      as={SectionTags.HEADER}
+      sizes={size}
+      className={classNames("global__primary", className)}
+      containing
+    >
+      <div className="flex">
+        {logo}
+
+        {isMobile === true && (
+          <div className="global__toggles">
+            <GlobalToggle
+              toggleId={id}
+              icon={Icons.MENU}
+              name="menu"
+              open={on}
+              onClick={() => toggle()}
+            />
+          </div>
+        )}
+
+        <div
+          id={id}
+          className="global__primary__nav"
+          // @ts-expect-error inert is allowed.
+          inert={!on && isMobile ? "" : null}
+        >
+          <NavigationDropdown
+            title="Primary Navigation"
+            items={navigationItems}
+            mediaQuery={mediaQuery}
+            id={id}
+          ></NavigationDropdown>
+        </div>
+
+        {children}
+      </div>
+    </Section>
+  )
+}
+
+export default Header

package/src/Layout/Header/Stacked/Stacked.stories.ts

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