@pnx-mixtape/mxds 0.0.1

package/src/Component/Sticky/Sticky.stories.ts

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

package/src/Component/Sticky/Sticky.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Sticky"
+import "./sticky.css"
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  args: {
+    children: <p>Element is sticky</p>,
+    offset: 150,
+  },
+}
+
+export default meta
+export const Sticky: StoryObj<typeof meta> = {}

package/src/Component/Sticky/Sticky.tsx

@@ -0,0 +1,34 @@
+import { JSX, PropsWithChildren } from "react"
+import classNames from "classnames"
+import { AsTags } from "../../enums"
+
+type StickyProps = PropsWithChildren & {
+  offset?: number
+  zIndex?: number
+  className?: string
+  breakpoint?: "l" | "m"
+  as: AsTags
+}
+
+const Sticky = ({
+  children,
+  offset,
+  zIndex,
+  className,
+  as = AsTags.DIV,
+  breakpoint,
+}: StickyProps): JSX.Element => {
+  const Tag: JSX.ElementType = `${as}` as unknown as JSX.ElementType
+  const stickyClass: string = breakpoint ? `sticky--${breakpoint}` : "sticky"
+  const style = {}
+  if (offset) style["--sticky-offset"] = `${offset}px`
+  if (zIndex) style["--z-index"] = zIndex
+
+  return (
+    <Tag className={classNames(stickyClass, className)} style={style}>
+      {children}
+    </Tag>
+  )
+}
+
+export default Sticky

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

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Sticky Sticky smoke-test 1`] = `
+<div class="sticky__trigger">
+</div>
+<mx-sticky style="--sticky-offset: 0"
+           offsetpropname="--sticky-offset"
+           class="sticky section section--l background--alt"
+>
+  <div class="section__content">
+    Sticky header
+  </div>
+</mx-sticky>
+<section class="section section--l">
+  <div class="page">
+    <div class="grid--sidebar">
+      <aside>
+        <div class="sticky__trigger">
+        </div>
+        <mx-sticky class="sticky--l vertical-flow">
+          <h4>
+            Sticky sidebar
+          </h4>
+          <p>
+            In publishing and graphic design, lorem ipsum is a placeholder text commonly used to
+            <a href="#anchor-test">
+              demonstrate
+            </a>
+            the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+          </p>
+        </mx-sticky>
+      </aside>
+      <section class="rich-text vertical-flow">
+        <h2>
+          Section 1
+        </h2>
+        <p>
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+        </p>
+        <h2 id="anchor-test">
+          Section 2
+        </h2>
+        <p>
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+        </p>
+        <h3>
+          Test level 3
+        </h3>
+        <p>
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+        </p>
+        <h2>
+          Section 3
+        </h2>
+        <p>
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+        </p>
+        <h2>
+          Section 4
+        </h2>
+        <p>
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+        </p>
+        <h2>
+          Section 5
+        </h2>
+        <p>
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+        </p>
+        <h3>
+          Test level 6
+        </h3>
+        <p>
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+        </p>
+        <h2>
+          Section 7
+        </h2>
+        <p>
+          In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+        </p>
+      </section>
+    </div>
+  </div>
+</section>
+`;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Sticky Sticky smoke-test 1`] = `
+<div class="sticky"
+     style="--sticky-offset: 150px;"
+>
+  <p>
+    Element is sticky
+  </p>
+</div>
+`;

package/src/Component/Sticky/sticky.css

@@ -0,0 +1,39 @@
+/**
+ * Sticky
+ */
+
+@define-mixin sticky {
+  position: sticky;
+  inset-block-start: var(--sticky-offset, 0);
+  z-index: var(--z-index, 1);
+}
+
+@layer defaults {
+  mx-sticky {
+    display: block;
+  }
+}
+
+@layer components {
+  .sticky {
+    @mixin sticky;
+  }
+
+  .sticky--m {
+    @media (--medium-up) {
+      @mixin sticky;
+    }
+  }
+
+  .sticky--l {
+    @media (--large-up) {
+      @mixin sticky;
+    }
+  }
+
+  .sticky__trigger {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+  }
+}

package/src/Component/Sticky/sticky.twig

@@ -0,0 +1,21 @@
+<mx-sticky style="--sticky-offset: 0" offsetPropName="--sticky-offset" class="sticky section section--l background--alt">
+  <div class="section__content">Sticky header</div>
+</mx-sticky>
+
+{% embed '@mixtape/Layout/Section/section.twig' with {
+  modifier_class: 'section--l'
+} %}
+  {% block content %}
+    {% embed '@mixtape/Layout/Sidebar/sidebar.twig' with {
+      content_class: 'rich-text vertical-flow',
+      reverse_markup: TRUE
+    }%}
+      {% block content %}
+        {% include '@mixtape/Component/InPageNavigation/twig/in-page-navigation-content-example.twig' %}
+      {% endblock %}
+      {% block sidebar %}
+        {% include '@mixtape/Component/Sticky/twig/sticky-example.twig' %}
+      {% endblock %}
+    {% endembed %}
+  {% endblock %}
+{% endembed %}

package/src/Component/Sticky/twig/sticky-example.twig

@@ -0,0 +1,4 @@
+<mx-sticky class="sticky--l vertical-flow">
+  <h4>{{ title|default('Sticky sidebar') }}</h4>
+  <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to <a href="#anchor-test">demonstrate</a> the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+</mx-sticky>

package/src/Component/Tabs/Components/Tab.tsx

@@ -0,0 +1,45 @@
+import { JSX, PropsWithChildren } from "react"
+import classNames from "classnames"
+import { useTabContext } from "../Tabs"
+
+type TabProps = PropsWithChildren & {
+  id: string
+  className?: string
+}
+
+const Tab = ({ id, className, children }: TabProps): JSX.Element => {
+  const { activeTab, setActiveTab } = useTabContext()
+  const isActive: boolean = activeTab === id
+
+  const handleClick = () => {
+    setActiveTab(id)
+    if (typeof window === "undefined") return
+    const urlParams: URLSearchParams = new URLSearchParams(
+      window.location.search,
+    )
+    if (urlParams.get("tab") === id) return
+    urlParams.set("tab", id)
+    window.history.replaceState(
+      {},
+      "",
+      `${window.location.pathname}?${urlParams.toString()}`,
+    )
+  }
+
+  return (
+    <button
+      id={`${id}-button`}
+      aria-controls={id}
+      role="tab"
+      onClick={handleClick}
+      className={classNames("button", className)}
+      aria-selected={isActive}
+      tabIndex={isActive ? 0 : -1}
+      type="button"
+    >
+      {children}
+    </button>
+  )
+}
+
+export default Tab

package/src/Component/Tabs/Components/TabDropMenu.tsx

@@ -0,0 +1,14 @@
+import { JSX, PropsWithChildren } from "react"
+import DropMenu from "../../DropMenu/DropMenu"
+import { useTabContext } from "../Tabs"
+
+const TabDropMenu = ({ children }: PropsWithChildren): JSX.Element => {
+  const { activeTabLabel } = useTabContext()
+  return (
+    <DropMenu label={activeTabLabel} className="mobile-only">
+      {children}
+    </DropMenu>
+  )
+}
+
+export default TabDropMenu

package/src/Component/Tabs/Components/TabList.tsx

@@ -0,0 +1,9 @@
+import { JSX, PropsWithChildren } from "react"
+
+const TabList = ({ children }: PropsWithChildren): JSX.Element => (
+  <div className={"tab__list desktop-only"} role="tablist">
+    {children}
+  </div>
+)
+
+export default TabList

package/src/Component/Tabs/Components/TabPanel.tsx

@@ -0,0 +1,32 @@
+import { JSX, PropsWithChildren } from "react"
+import classNames from "classnames"
+import { useTabContext } from "../Tabs"
+
+type TabPanelProps = PropsWithChildren & {
+  id: string
+  className?: string
+}
+
+const TabPanel = ({
+  children,
+  id,
+  className = "section--l",
+}: TabPanelProps): JSX.Element => {
+  const { activeTab } = useTabContext()
+  const isActive: boolean = activeTab === id
+  return (
+    <div
+      id={id}
+      className={classNames("tab__panel", "vertical-flow", className)}
+      // @ts-expect-error inert is allowed.
+      inert={!isActive ? "" : null}
+      aria-labelledby={`${id}-button`}
+      role="tabpanel"
+      tabIndex={0}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default TabPanel

package/src/Component/Tabs/Elements/Tabs.ts

@@ -0,0 +1,213 @@
+/**
+ * Tab toggle handler
+ */
+import "../../DropMenu/Elements/DropMenu"
+import type { DropMenuEvent } from "../../DropMenu/Elements/DropMenu"
+
+type TabsType = {
+  panel: HTMLElement
+  tab: HTMLButtonElement
+  button: HTMLButtonElement
+}
+
+export default class Tabs extends HTMLElement {
+  internals_: ElementInternals
+  controller: AbortController
+  tabs?: Map<string, TabsType>
+  locationHash?: string
+  tabFocus?: number = 0
+
+  constructor() {
+    super()
+    this.internals_ = this.attachInternals()
+    this.controller = new AbortController()
+  }
+
+  connectedCallback(): void {
+    if (!this.triggers || !this.panels) return
+    this.locationHash = window.location.hash
+
+    this.tabs = new Map()
+    this.triggers.forEach((tab: HTMLButtonElement): void => {
+      const id: string = tab.getAttribute("aria-controls")
+      const panel: HTMLElement = this.querySelector(`#${id}`)
+      const button: HTMLButtonElement = this.dropMenu.querySelector(
+        `[aria-controls=${id}]`,
+      )
+      if (id && panel && button) {
+        const labelId = `tab-label-${id}`
+        tab.setAttribute("id", labelId)
+        tab.setAttribute("role", "tab")
+        tab.setAttribute("aria-selected", "false")
+        tab.setAttribute("tab-index", "-1")
+        panel.setAttribute("aria-labelledby", labelId)
+        panel.setAttribute("role", "tabpanel")
+        panel.setAttribute("tab-index", "0")
+        this.tabs.set(id, { panel, tab, button })
+      }
+    })
+
+    const { signal }: AbortController = this.controller
+    this.menu.addEventListener("click", this.handleClick, { signal })
+    this.menu.addEventListener("keydown", this.handleKeydown, { signal })
+
+    this.dropMenu.addEventListener(
+      "drop-menu-select",
+      this.handleDropMenuSelect,
+      { signal },
+    )
+
+    const hashEl: HTMLElement | null = this.locationHash
+      ? this.querySelector(this.locationHash)
+      : null
+    if (hashEl) {
+      this.active = hashEl.id
+    } else if (!this.active) {
+      this.active = this.panels[0].id
+    }
+  }
+
+  disconnectedCallback(): void {
+    this.controller.abort()
+  }
+
+  handleKeydown = ({ key }: KeyboardEvent): void => {
+    if (key === "ArrowRight" || key === "ArrowLeft") {
+      this.triggers[this.tabFocus].setAttribute("tabindex", "-1")
+      if (key === "ArrowRight") {
+        this.tabFocus += 1
+        // If we're at the end, go to the start
+        if (this.tabFocus >= this.triggers.length) {
+          this.tabFocus = 0
+        }
+        // Move left
+      } else if (key === "ArrowLeft") {
+        this.tabFocus -= 1
+        // If we're at the start, move to the end
+        if (this.tabFocus < 0) {
+          this.tabFocus = this.triggers.length - 1
+        }
+      }
+      this.triggers[this.tabFocus].setAttribute("tabindex", "0")
+      this.triggers[this.tabFocus].focus()
+    }
+  }
+
+  handleClick = (event: MouseEvent): void => {
+    const target = event.target as HTMLButtonElement
+    if (!(target instanceof HTMLButtonElement)) return
+    event.preventDefault()
+    const id: string = target.getAttribute("aria-controls")
+    this.handleTabChange(id)
+  }
+
+  handleDropMenuSelect = (event: DropMenuEvent): void => {
+    const target = event.detail.target as HTMLButtonElement
+    if (!(target instanceof HTMLButtonElement)) return
+    const id = target.getAttribute("aria-controls")
+    this.handleTabChange(id)
+  }
+
+  handleTabChange = (id: string): void => {
+    this.active = id
+    this.handleUrlParams(id)
+    const { panel, tab, button } = this.tabs.get(id)
+    panel.focus({ preventScroll: true })
+    const newEvent: CustomEvent<{
+      id: string
+      tab: HTMLButtonElement
+      button: HTMLButtonElement
+      panel: HTMLElement
+    }> = new CustomEvent("tab-toggle", {
+      bubbles: true,
+      cancelable: true,
+      detail: { id, tab, button, panel },
+    })
+    this.dispatchEvent(newEvent)
+  }
+
+  get dropMenu(): HTMLDivElement | null {
+    const dropMenu: HTMLDivElement | null = this.querySelector(".drop-menu")
+    if (!dropMenu) {
+      throw new Error(`${this.localName} must contain a .drop-menu`)
+    }
+    return dropMenu
+  }
+
+  get dropMenuTrigger(): HTMLButtonElement | null {
+    const trigger: HTMLButtonElement | null = this.querySelector(
+      ".drop-menu__trigger",
+    )
+    if (!trigger) {
+      throw new Error(`${this.localName} must contain a .drop-menu__trigger`)
+    }
+    return trigger
+  }
+
+  get menu(): HTMLDivElement | null {
+    const menu: HTMLDivElement | null = this.querySelector(".tab__list")
+    if (!menu) {
+      throw new Error(`${this.localName} must contain a .tab__list`)
+    }
+    menu.setAttribute("role", "tablist")
+    return menu
+  }
+
+  get triggers(): NodeListOf<HTMLButtonElement> | null {
+    const triggers: NodeListOf<HTMLButtonElement> | null =
+      this.querySelectorAll(".tab__list button")
+    if (!triggers.length) {
+      throw new Error(`${this.localName} must contain .tab__list buttons`)
+    }
+    return triggers
+  }
+
+  get panels(): NodeListOf<HTMLElement> | null {
+    const panels: NodeListOf<HTMLElement> | null =
+      this.querySelectorAll(".tab__panel")
+    if (!panels.length) {
+      throw new Error(`${this.localName} must contain .tab__panel's`)
+    }
+    return panels
+  }
+
+  get active(): HTMLButtonElement {
+    return this.querySelector('[aria-selected="true"]')
+  }
+
+  set active(id: string) {
+    this.tabs.forEach(({ tab, panel }: TabsType, key: string): void => {
+      if (key === id) {
+        tab.setAttribute("aria-selected", "true")
+        tab.setAttribute("tab-index", "0")
+        panel.removeAttribute("inert")
+        this.dropMenuTrigger.textContent = tab.textContent
+      } else {
+        tab.setAttribute("aria-selected", "false")
+        tab.setAttribute("tab-index", "-1")
+        panel.setAttribute("inert", "")
+      }
+    })
+  }
+
+  handleUrlParams = (id: string): void => {
+    const urlParams: URLSearchParams = new URLSearchParams(
+      window.location.search,
+    )
+    if (urlParams.get("tab") === id) return
+    urlParams.set("tab", id)
+    window.history.replaceState(
+      {},
+      "",
+      `${window.location.pathname}?${urlParams.toString()}`,
+    )
+  }
+}
+
+customElements.define("mx-tabs", Tabs)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mx-tabs": Tabs
+  }
+}

package/src/Component/Tabs/README.md

@@ -0,0 +1,23 @@
+# Tabs
+
+### How to use
+
+**CSS**
+
+`@import '@pnx-mixtape/mxds/tabs.css';`
+
+**Twig**
+
+You can setup a twig namespace in your project if you wish to use the twig files directly.
+
+- Eg: `{% extends '@mixtape/Components/Tabs/tabs.twig' %}`
+
+Alternatively copy/paste the file for more control.
+
+**JSX Components**
+
+`import { Tabs, TabList, Tab, TabPanel } from '@pnx-mixtape/mxds/react';`
+
+**JS Custom Element**
+
+`import Tabs from '@pnx-mixtape/mxds';`

package/src/Component/Tabs/Tabs.stories.ts

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./tabs.twig"
+import "./tabs.css"
+import "../Card/card.css"
+import "../DropMenu/drop-menu.css"
+import "./Elements/Tabs"
+import { TabStyles } from "../../enums"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  argTypes: {
+    modifier: { options: Object.values(TabStyles), control: "select" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Tabs: Story = {
+  args: {},
+}

package/src/Component/Tabs/Tabs.stories.tsx

@@ -0,0 +1,51 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { Fragment } from "react"
+import Component from "./Tabs"
+import TabDropMenu from "./Components/TabDropMenu"
+import DropMenuItem from "../DropMenu/Components/DropMenuItem"
+import TabList from "./Components/TabList"
+import Tab from "./Components/Tab"
+import TabPanel from "./Components/TabPanel"
+import "./tabs.css"
+import "../DropMenu/drop-menu.css"
+import { TabStyles } from "../../enums"
+
+const defaultChildren = (
+  <Fragment>
+    <TabDropMenu>
+      <DropMenuItem id="tab-1" label="Tab 1" aria-controls="tab-1" />
+      <DropMenuItem id="tab-2" label="Tab 2" aria-controls="tab-2" />
+      <DropMenuItem id="tab-3" label="Tab 3" aria-controls="tab-3" />
+    </TabDropMenu>
+    <TabList>
+      <Tab id="tab-1">Tab 1</Tab>
+      <Tab id="tab-2">Tab 2</Tab>
+      <Tab id="tab-3">Tab 3</Tab>
+    </TabList>
+    <TabPanel id="tab-1">
+      <p>This is tab 1</p>
+    </TabPanel>
+    <TabPanel id="tab-2">
+      <p>This is tab 2</p>
+    </TabPanel>
+    <TabPanel id="tab-3">
+      <p>This is tab 3</p>
+    </TabPanel>
+  </Fragment>
+)
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    children: defaultChildren,
+    active: "tab-1",
+    id: "tabs-storybook",
+  },
+  argTypes: {
+    modifier: { options: Object.values(TabStyles), control: "select" },
+  },
+}
+
+export default meta
+export const Default: StoryObj<typeof meta> = {}