@pnx-mixtape/mxds 0.0.1

package/src/Atom/_generic.css

@@ -0,0 +1,93 @@
+@layer defaults {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    background-repeat: no-repeat;
+  }
+
+  * {
+    margin: 0;
+  }
+
+  :focus {
+    scroll-padding-block-end: 4vh;
+  }
+
+  :focus-visible {
+    --outline-size: max(2px, 0.15em);
+
+    outline: var(--outline-width, var(--outline-size))
+      var(--outline-style, solid) var(--outline-color, currentcolor);
+    outline-offset: var(--outline-offset, var(--outline-size));
+  }
+
+  html {
+    block-size: 100%;
+    font-size: 100%; /* 16px in most browsers */
+    font-family: var(--font-family);
+    line-height: var(--line-height);
+    scroll-behavior: smooth;
+  }
+
+  .translated-rtl {
+    direction: rtl;
+  }
+
+  body {
+    font-size: var(--font-size);
+    color: var(--colour-foreground);
+    accent-color: var(--colour-primary);
+    text-rendering: optimizespeed;
+    block-size: 100%;
+  }
+
+  :target,
+  [id],
+  .has-scroll-margin {
+    scroll-margin-block-start: calc(
+      var(--sticky-offset, 0rem) + var(--scroll-margin, var(--spacing-m))
+    );
+  }
+
+  :is(b, strong) {
+    font-weight: var(--font-weight-bold);
+  }
+
+  a:where([href]) {
+    text-decoration: underline;
+    text-decoration-thickness: max(0.08em, 1px);
+    text-decoration-skip-ink: auto;
+    text-underline-offset: 0.15em;
+
+    &:hover,
+    &:active {
+      text-underline-offset: 0.2em;
+      text-decoration-thickness: max(0.09em, 2px);
+    }
+  }
+
+  :is(ol, ul) {
+    padding-inline-start: var(--spacing-m);
+
+    &[role="list"] {
+      list-style: none;
+      padding-inline-start: 0;
+    }
+  }
+
+  dl {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+
+    & div {
+      display: flex;
+      gap: var(--spacing-s);
+    }
+  }
+
+  p {
+    text-wrap: pretty;
+  }
+}

package/src/Atom/_hr.css

@@ -0,0 +1,10 @@
+@layer defaults {
+  hr {
+    display: block;
+    block-size: 0;
+    border: 0;
+    border-block-start: var(--line-width, 1px) solid
+      var(--line-colour, var(--colour-border));
+    margin-block: var(--line-gap, var(--spacing-m));
+  }
+}

package/src/Atom/_mixins.css

@@ -0,0 +1,22 @@
+/* stylelint-disable custom-property-pattern */
+@define-mixin spacing $size {
+  .spacing--$(size) {
+    padding: var(--spacing-$(size));
+  }
+
+  .spacing--top-$(size) {
+    padding-block-start: var(--spacing-$(size));
+  }
+
+  .spacing--bottom-$(size) {
+    padding-block-end: var(--spacing-$(size));
+  }
+
+  .spacing--left-$(size) {
+    padding-inline-start: var(--spacing-$(size));
+  }
+
+  .spacing--right-$(size) {
+    padding-inline-end: var(--spacing-$(size));
+  }
+}

package/src/Atom/_print.css

@@ -0,0 +1,20 @@
+@media print {
+  .contextual {
+    display: none;
+  }
+
+  .rich-text {
+    max-inline-size: 100%;
+  }
+
+  figure {
+    &.image--breakout {
+      max-inline-size: 500px;
+      margin-inline-start: 0;
+
+      & figcaption {
+        max-inline-size: 100%;
+      }
+    }
+  }
+}

package/src/Atom/base.css

@@ -0,0 +1,5 @@
+@layer popover-polyfill, defaults, layout, elements, components, utilities;
+
+@import "Background/_background.css";
+@import "_animated.css";
+@import "_base.css";

package/src/Atom/images/external-link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M15 0H8v2h4.6L6.3 8.3l1.4 1.4L14 3.4V8h2V1c0-.6-.4-1-1-1z"/><path d="M14 16H1c-.6 0-1-.4-1-1V2c0-.6.4-1 1-1h4v2H2v11h11v-3h2v4c0 .6-.4 1-1 1z"/></svg>

package/src/Component/Accordion/Accordion.stories.ts

@@ -0,0 +1,51 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./twig/accordion-story.twig"
+import "./Elements/AccordionGroup"
+import "./accordion.css"
+import {
+  Accordion as AccordionType,
+  HeadingTypes,
+} from "@pnx-mixtape/ids-shape"
+
+const meta: Meta<AccordionType> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    title: {
+      title: "Accordion group",
+      as: HeadingTypes.TWO,
+    },
+    items: [
+      {
+        title: "Music",
+        content:
+          "I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.",
+      },
+      {
+        title: "Performances",
+        content:
+          "I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.",
+      },
+    ],
+  },
+  parameters: {
+    deepControls: { enabled: true },
+  },
+  argTypes: {
+    toggleAll: { control: "boolean" },
+    // @ts-expect-error The controls follow the shape
+    "title.title": { control: "text" },
+    "title.as": { options: Object.values(HeadingTypes), control: "select" },
+  },
+}
+
+export default meta
+type Story = StoryObj<AccordionType>
+
+export const Accordion: Story = {}
+
+export const ToggleAll: Story = {
+  args: {
+    toggleAll: true,
+  },
+}

package/src/Component/Accordion/Accordion.stories.tsx

@@ -0,0 +1,22 @@
+/* eslint-disable no-unused-vars */
+import { Meta, StoryObj } from "@storybook/react"
+import { AccordionStyles, HeadingLevels } from "../../enums"
+import Component from "./Accordion"
+import "./accordion.css"
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  tags: ["autodocs"],
+  args: {
+    title: "Open me!",
+    modifier: AccordionStyles.DIVIDED,
+    children:
+      "I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.",
+  },
+  argTypes: {
+    modifier: { options: Object.values(AccordionStyles) },
+    headingLevel: { options: Object.values(HeadingLevels) },
+  },
+}
+export default meta
+export const Accordion: StoryObj<typeof meta> = {}

package/src/Component/Accordion/Accordion.tsx

@@ -0,0 +1,83 @@
+import { JSX, PropsWithChildren, useEffect, useId, Fragment } from "react"
+import classNames from "classnames"
+import { AccordionStyles, HeadingLevels } from "../../enums"
+import useToggle from "../../Utility/Hooks/useToggle"
+
+type AccordionProps = PropsWithChildren & {
+  title: string
+  active?: boolean
+  id?: string
+  headingLevel?: HeadingLevels
+  modifier?: AccordionStyles
+}
+
+const Accordion = ({
+  title,
+  children,
+  active = false,
+  id = null,
+  modifier = null,
+  headingLevel = null,
+  ...props
+}: AccordionProps): JSX.Element => {
+  const [on, toggle] = useToggle(active)
+  const accordionId: string = id || useId()
+  const Heading = headingLevel ? headingLevel : Fragment
+
+  useEffect(() => {
+    if (typeof window === "undefined") return
+    if (window.location.hash) {
+      toggle(window.location.hash === `#${accordionId}`)
+    }
+  }, [accordionId])
+
+  return (
+    <div
+      className={classNames("accordion", {
+        [`accordion--${modifier}`]: modifier,
+      })}
+      data-open={on}
+      {...props}
+    >
+      <Heading>
+        <button
+          type="button"
+          className="accordion__toggle"
+          id={accordionId}
+          aria-expanded={on}
+          onClick={() => toggle()}
+          onKeyDown={({ key }) => {
+            if (key === "Enter") toggle()
+          }}
+        >
+          {title}
+          <span
+            className={classNames(
+              "button",
+              "button--small",
+              "icon",
+              "button--icon-only",
+              "icon--chevron-down",
+            )}
+            aria-hidden="true"
+          />
+        </button>
+      </Heading>
+      <div
+        role="region"
+        aria-labelledby={accordionId}
+        className={classNames(
+          "accordion__content",
+          "rich-text",
+          "vertical-flow",
+        )}
+        // @ts-expect-error inert is allowed.
+        inert={!on ? "" : null}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default Accordion

package/src/Component/Accordion/Elements/Accordion.ts

@@ -0,0 +1,82 @@
+/**
+ * Accordion
+ * @file Support opening on hash, adding an ID attribute and toggling on print.
+ */
+
+import { makeAnchor } from "../../../Utility/utilities"
+
+export default class Accordion extends HTMLElement {
+  internals_: ElementInternals
+  controller: AbortController
+
+  constructor() {
+    super()
+    this.internals_ = this.attachInternals()
+    this.controller = new AbortController()
+  }
+
+  connectedCallback(): void {
+    if (!this.details || !this.trigger) return
+
+    const { signal }: AbortController = this.controller
+    document.addEventListener("beforeprint", this.handleOpen, {
+      signal,
+    })
+    document.addEventListener("afterprint", this.handleClose, {
+      signal,
+    })
+    this.handleHash()
+    document.addEventListener("hashchange", this.handleHash, { signal })
+  }
+
+  disconnectedCallback(): void {
+    this.controller.abort()
+  }
+
+  handleOpen = (): void => {
+    if (!this.details) return
+    this.details.open = true
+  }
+
+  handleClose = (): void => {
+    if (!this.details) return
+    this.details.open = false
+  }
+
+  handleHash = (): void => {
+    const { hash }: Location = window.location
+    if (hash && hash === `#${this.details?.id}`) {
+      this.handleOpen()
+    }
+  }
+
+  get details(): HTMLDetailsElement | null {
+    const details: HTMLDetailsElement | null = this.querySelector("details")
+    if (!details) {
+      throw new Error(`${this.localName} must contain a <details> element.`)
+    }
+    details.id = details.id || this.generatedId()
+    return details
+  }
+
+  get trigger(): HTMLElement | null {
+    const trigger: HTMLElement | null = this.querySelector("summary")
+    if (!trigger) {
+      throw new Error(`${this.localName} must contain a <summary> element.`)
+    }
+    return trigger
+  }
+
+  generatedId = (): string => {
+    const string: string | undefined = this.trigger?.textContent?.trim()
+    return !string ? "" : makeAnchor(string)
+  }
+}
+
+customElements.define("mx-accordion", Accordion)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mx-accordion": Accordion
+  }
+}

package/src/Component/Accordion/Elements/AccordionDiv.ts

@@ -0,0 +1,83 @@
+/**
+ * AccordionDiv
+ * @file Support for adding <details> type behavior to divs.
+ */
+
+import { DisclosureWidget } from "../../../Utility/utilities"
+
+export default class AccordionDiv extends HTMLElement {
+  internals_: ElementInternals
+  controller: AbortController
+  widget!: DisclosureWidget
+  static observedAttributes: string[] = ["open"]
+
+  constructor() {
+    super()
+    this.internals_ = this.attachInternals()
+    this.controller = new AbortController()
+  }
+
+  connectedCallback(): void {
+    if (!this.trigger || !this.content) return
+    this.content?.setAttribute("inert", "")
+    this.content?.setAttribute("role", "region")
+    this.widget = new DisclosureWidget(this.trigger, this, {
+      attribute: "open",
+      setInitialAttribute: false,
+    })
+    this.widget.init()
+    const { signal }: AbortController = this.controller
+    this.handleHash()
+    document.addEventListener("hashchange", this.handleHash, { signal })
+  }
+
+  disconnectedCallback(): void {
+    this.content?.removeAttribute("inert")
+    this.widget.detach()
+    this.controller.abort()
+  }
+
+  attributeChangedCallback(
+    name: string,
+    oldValue: string,
+    newValue: string,
+  ): void {
+    const isClosed = newValue === null
+    this.content?.toggleAttribute("inert", isClosed)
+  }
+
+  handleHash = (): void => {
+    const { hash } = window.location
+    if (hash && hash === `#${this.id}` && !this.hasAttribute("open")) {
+      this.widget.handleToggle()
+    }
+  }
+
+  get trigger(): HTMLButtonElement {
+    const trigger: HTMLButtonElement | null =
+      this.querySelector(":scope > button")
+    if (!trigger) {
+      throw new Error(`${this.localName} must contain a <button> element.`)
+    }
+    return trigger
+  }
+
+  get content(): HTMLDivElement {
+    const content: HTMLDivElement | null | undefined = this.trigger
+      ?.nextElementSibling as HTMLDivElement
+    if (!content) {
+      throw new Error(
+        `${this.localName} must contain a <div> element after the <button>.`,
+      )
+    }
+    return content
+  }
+}
+
+customElements.define("mx-accordiondiv", AccordionDiv)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mx-accordiondiv": AccordionDiv
+  }
+}

package/src/Component/Accordion/Elements/AccordionGroup.ts

@@ -0,0 +1,106 @@
+/**
+ * Accordion Group
+ * @file Support opening and closing all.
+ */
+
+export default class AccordionGroup extends HTMLElement {
+  internals_: ElementInternals
+  controller: AbortController
+
+  constructor() {
+    super()
+    this.internals_ = this.attachInternals()
+    this.controller = new AbortController()
+  }
+
+  connectedCallback(): void {
+    if (!this.accordions || !this.expandTrigger || !this.collapseTrigger) return
+    this.collapseTrigger.disabled = true
+    const { signal }: AbortController = this.controller
+    this.addEventListener("click", this.handleClick, {
+      signal,
+    })
+    this.accordions.forEach(details =>
+      details.addEventListener("toggle", this.handleToggle, {
+        signal,
+      }),
+    )
+  }
+
+  disconnectedCallback(): void {
+    this.controller.abort()
+  }
+
+  handleClick = ({ target }) => {
+    if (target === this.expandTrigger) {
+      this.handleExpand()
+    }
+    if (target === this.collapseTrigger) {
+      this.handleCollapse()
+    }
+  }
+
+  handleExpand = () => {
+    this.accordions.forEach(detail => (detail.open = true))
+    this.expandTrigger.disabled = true
+    this.collapseTrigger.disabled = false
+  }
+
+  handleCollapse = () => {
+    this.accordions.forEach(detail => (detail.open = false))
+    this.expandTrigger.disabled = false
+    this.collapseTrigger.disabled = true
+  }
+
+  handleToggle = () => {
+    this.expandTrigger.disabled = [...this.accordions].every(
+      details => details.open === true,
+    )
+    this.collapseTrigger.disabled = [...this.accordions].every(
+      details => details.open !== true,
+    )
+  }
+
+  get accordions(): NodeListOf<HTMLDetailsElement> | null {
+    const accordions: NodeListOf<HTMLDetailsElement> | null =
+      this.querySelectorAll("details")
+    if (!accordions.length) {
+      throw new Error(
+        `${this.localName} must contain at least one <details> element.`,
+      )
+    }
+    return accordions
+  }
+
+  get expandTrigger(): HTMLButtonElement | null {
+    const trigger: HTMLButtonElement | null = this.querySelector(
+      ".accordions__toggle-all button[data-expand]",
+    )
+    if (!trigger) {
+      throw new Error(
+        `${this.localName} must contain a <button data-expand> element.`,
+      )
+    }
+    return trigger
+  }
+
+  get collapseTrigger(): HTMLButtonElement | null {
+    const trigger: HTMLButtonElement | null = this.querySelector(
+      ".accordions__toggle-all button[data-collapse]",
+    )
+    if (!trigger) {
+      throw new Error(
+        `${this.localName} must contain a <button data-collapse> element.`,
+      )
+    }
+    return trigger
+  }
+}
+
+customElements.define("mx-accordion-group", AccordionGroup)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mx-accordion-group": AccordionGroup
+  }
+}

package/src/Component/Accordion/Elements/AccordionMobile.ts

@@ -0,0 +1,47 @@
+/**
+ * AccordionMobile
+ * @file Support a mobile only <details> element, that opens at a breakpoint.
+ */
+
+import Accordion from "./Accordion"
+
+export default class AccordionMobile extends Accordion {
+  mq: string
+  toggleAttribute!: Element["toggleAttribute"]
+
+  constructor() {
+    super()
+    this.mq = this.getAttribute("mq") || "(max-width: 720px)"
+  }
+
+  connectedCallback(): void {
+    this.handleBreakpoint(this.breakpoint)
+    const { signal }: AbortController = this.controller
+    this.breakpoint.addEventListener("change", this.handleBreakpoint, {
+      signal,
+    })
+  }
+
+  disconnectedCallback(): void {
+    this.controller.abort()
+  }
+
+  handleBreakpoint = ({
+    matches,
+  }: MediaQueryList | MediaQueryListEvent): void => {
+    if (!this.details) return
+    this.details.toggleAttribute("open", !matches)
+  }
+
+  get breakpoint(): MediaQueryList {
+    return window.matchMedia(this.mq)
+  }
+}
+
+customElements.define("mx-accordionmobile", AccordionMobile)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mx-accordionmobile": AccordionMobile
+  }
+}

package/src/Component/Accordion/README.md

@@ -0,0 +1,45 @@
+# Accordion
+
+### How to use
+
+**CSS**
+
+`@import '@pnx-mixtape/mxds/accordion.css';`
+
+**Twig**
+
+You can setup a twig namespace in your project if you wish to use the twig files directly.
+
+- Eg: `{% extends '@mixtape/accordion/twig/accordion.twig' %}`
+
+Alternatively copy/paste the file for more control.
+
+**JSX Components**
+
+JSX components are available for use with React.
+
+- JSX import: `import { Accordion } from '@pnx-mixtape/mxds/react';`
+
+**JS Custom Element**
+
+Custom Elements are self defined, simply import the desired feature.
+These do not use the Shadow DOM and are not typical Web Components.
+External CSS applies.
+No Polyfills or frameworks are required.
+
+- AccordionBase import: `import '@pnx-mixtape/mxds/Components/Accordion/Elements/Accordion';` and be sure to include `<mx-accordion>` around the `<details />` tag.
+- AccordionMobile import: `import '@pnx-mixtape/mxds/Components/Accordion/Elements/AccordionMobile';` and be sure to include `<mx-accordionmobile>` around the `<details />` tag.
+- AccordionDiv import: `import '@nx-mixtape/Components/Accordion/Elements/AccordionDiv';` and be sure to include `<mx-accordiondiv class="accordion">` instead of the `<details />` tag.
+
+```html
+<mx-accordion>
+  <details class="accordion">
+    <summary class="accordion__toggle">Title</summary>
+    <div class="accordion__content">
+      <p>Body content</p>
+    </div>
+  </details>
+</mx-accordion>
+```
+
+See twig files for all HTML examples.