@pnx-mixtape/mxds 0.0.1

package/src/Utility/Hooks/useMediaQuery.ts

@@ -0,0 +1,31 @@
+/* eslint-disable no-unused-vars */
+import { useCallback, useSyncExternalStore } from "react"
+
+type MediaQueryCallBack = (
+  this: MediaQueryList,
+  ev: MediaQueryListEvent,
+) => void
+
+const useMediaQuery = (query: string): boolean => {
+  const subscribe = useCallback(
+    (callback: MediaQueryCallBack) => {
+      const matchMedia = window.matchMedia(query)
+
+      matchMedia.addEventListener("change", callback)
+      return () => {
+        matchMedia.removeEventListener("change", callback)
+      }
+    },
+    [query],
+  )
+
+  const getSnapshot = () => window.matchMedia(query).matches
+
+  const getServerSnapshot = () => {
+    throw Error("useMediaQuery is a client-only hook")
+  }
+
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}
+
+export default useMediaQuery

package/src/Utility/Hooks/useToggle.ts

@@ -0,0 +1,17 @@
+/* eslint-disable no-unused-vars */
+import { useState, useCallback } from "react"
+
+const useToggle = (
+  initialValue: boolean,
+): [boolean, (value?: boolean) => void] => {
+  const [on, setOn] = useState(initialValue)
+
+  const handleToggle = useCallback((value?: boolean): void => {
+    if (value) return setOn(value)
+    return setOn(v => !v)
+  }, [])
+
+  return [on, handleToggle]
+}
+
+export default useToggle

package/src/Utility/Hooks/useUrlParams.ts

@@ -0,0 +1,24 @@
+import { useMemo } from "react"
+
+type UrlParamValues = {
+  searchParams?: URLSearchParams
+  pathname?: string
+  history?: History
+}
+
+const useUrlParams = () =>
+  useMemo((): UrlParamValues => {
+    if (!window) return {}
+    const {
+      location: { search, pathname },
+      history,
+    } = window
+    const searchParams = new URLSearchParams(search)
+    return {
+      searchParams,
+      pathname,
+      history,
+    }
+  }, [])
+
+export default useUrlParams

package/src/Utility/README.md

@@ -0,0 +1,15 @@
+# Utilities
+
+Common code, used by other components, and utility classes.
+
+### How to use
+
+**CSS**
+
+`@import '@pnx-mixtape/mxds/utilities.css';`
+
+**JS**
+
+`import { loadOnReady, etc } from '@pnx-mixtape/mxds';`
+
+** @todo write documentation for each of them **

package/src/Utility/_layout-utils.css

@@ -0,0 +1,78 @@
+@layer utilities {
+  .stack {
+    display: grid;
+    grid-template-areas: "stack";
+
+    & > * {
+      grid-area: stack;
+    }
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .place-center {
+    place-content: center;
+  }
+
+  .align--center {
+    margin-inline: auto;
+  }
+
+  .align--left {
+    margin-inline-end: auto;
+  }
+
+  .align--right {
+    margin-inline-start: auto;
+  }
+
+  .align--bottom {
+    margin-block-start: auto;
+  }
+
+  .align--top {
+    margin-block-end: auto;
+  }
+
+  .order--start {
+    order: -1;
+  }
+
+  .order--1 {
+    order: 1;
+  }
+
+  .order--2 {
+    order: 2;
+  }
+
+  .order--3 {
+    order: 3;
+  }
+
+  .gap--s {
+    gap: var(--gap-s);
+  }
+
+  .gap--m {
+    gap: var(--gap);
+  }
+
+  .gap--l {
+    gap: var(--gap-l);
+  }
+
+  .gap--xl {
+    gap: var(--gap-xl);
+  }
+
+  .gap--section-l {
+    gap: var(--section-l, var(--spacing-xl));
+  }
+
+  .gap--section-xl {
+    gap: var(--section-xl, var(--spacing-uul));
+  }
+}

package/src/Utility/global.d.ts

@@ -0,0 +1,25 @@
+/* eslint-disable no-unused-vars, @typescript-eslint/no-explicit-any */
+declare global {
+  interface Window {
+    Drupal?: any
+    Mixtape?: {
+      Popups?: {
+        id: string
+        closefn: () => void
+      }[]
+      Menu?: {
+        context?: HTMLElement
+        items?: NodeListOf<HTMLAnchorElement | HTMLButtonElement>
+        active?: number
+      }
+    }
+    CookieCompliance?: CookieCompliance
+    once?: (
+      name: string,
+      selector: string,
+      context?: any,
+    ) => NodeListOf<HTMLElement>
+  }
+}
+
+export {}

package/src/Utility/utilities.css

@@ -0,0 +1,88 @@
+@import "_layout-utils.css";
+
+@layer utilities {
+  .hidden,
+  .visually-hidden,
+  .sr-only {
+    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
+    box-sizing: border-box;
+    position: absolute !important;
+    margin: 0;
+    padding: 0;
+  }
+
+  .visually-hidden.visually-hidden--focussable:focus,
+  .sr-only.sr-only--focussable:focus {
+    clip-path: none;
+    position: revert !important;
+    margin: revert;
+    padding: revert;
+  }
+}
+
+/**
+ * Responsive utility class
+ */
+
+@layer utilities {
+  .mobile-only {
+    @media (--large-up) {
+      display: none;
+    }
+  }
+
+  .desktop-only,
+  .global .desktop-only {
+    @media (--large-down) {
+      display: none;
+    }
+  }
+
+  .print-only {
+    display: none !important;
+
+    @media print {
+      display: block !important;
+    }
+  }
+
+  .screen-only {
+    @media print {
+      display: none !important;
+    }
+  }
+}
+
+/**
+ * Skeleton and loading UI.
+ */
+@layer utilities {
+  .skeleton {
+    --background: hsl(0deg 0% 0% / 10%);
+    --opacity-low: 0.5;
+    --opacity-high: 0.75;
+    --duration: 1500ms;
+
+    animation: pulse var(--duration) ease infinite;
+  }
+
+  .skeleton--bg {
+    background-color: var(--background);
+    border-radius: var(--border-radius);
+    z-index: -1;
+  }
+}
+
+@keyframes pulse {
+  0% {
+    opacity: var(--opacity-low);
+  }
+
+  75% {
+    opacity: var(--opacity-high);
+  }
+
+  100% {
+    opacity: var(--opacity-low);
+  }
+}

package/src/Utility/utilities.ts

@@ -0,0 +1,163 @@
+/* eslint-disable no-console */
+/**
+ * @file utilities.
+ */
+
+export { default as DisclosureWidget } from "./Elements/disclosure-widget"
+export type { DisclosureWidgetEvent } from "./Elements/disclosure-widget"
+export { default as Keyboard } from "./Elements/keyboard"
+export { default as CookieCompliance } from "./Elements/cookie-compliance"
+export { default as IntersectionLoader } from "./Elements/io-loader"
+export { default as BreakpointLoader } from "./Elements/breakpoint-loader"
+
+export const makeAnchor = (string: string, length: number = 20): string => {
+  if (typeof string !== "string" || !string) return ""
+  // Convert the string to lowercase and remove non-alphanumeric characters.
+  let id: string = string
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, "-")
+    .replace(/[^-a-z0-9]/g, "")
+    .replace(/[\n\r]+|[\s]{2,}/g, "")
+  // Ensure we start the id with a letter.
+  // Only run this several times.
+  const times: number[] = [...Array(6).keys()]
+  times.forEach((): void => {
+    if (!id.charAt(0).match(/[a-z]/g)) {
+      id = id.substring(1)
+    }
+  })
+  // Cut to the desired length.
+  if (length) id = id.substring(0, length + 1)
+
+  return id
+}
+
+export const makeCamelCase = (string: string): string => {
+  if (typeof string !== "string" || !string) return ""
+  const output: string = string
+    .trim()
+    .replace(
+      /(?:^\w|[A-Z]|\b\w|\s+)/g,
+      (match: string, index: number): string => {
+        if (+match === 0) return ""
+        return index === 0 ? match.toLowerCase() : match.toUpperCase()
+      },
+    )
+  return output.replace(/[^\w\s]/gi, "")
+}
+
+export const isInternalLink = (
+  href: string,
+  internalHostnames: string[],
+): boolean => {
+  if (typeof href !== "string" || !href || !Array.isArray(internalHostnames)) {
+    return false
+  }
+
+  try {
+    const { hostname }: { hostname: string } = new URL(href)
+    return (
+      window.location.hostname === hostname ||
+      internalHostnames.includes(hostname)
+    )
+  } catch (error) {
+    console.error(error)
+    return false
+  }
+}
+
+export const createElement = (string: string): Element | null => {
+  try {
+    const el: HTMLDivElement = document.createElement("div")
+    el.innerHTML = string
+    return el.firstElementChild
+  } catch (error) {
+    console.error(error)
+    return null
+  }
+}
+
+export const getElementBox = (
+  element: HTMLElement,
+  once: boolean = false,
+  content: boolean = false,
+): void => {
+  const observer: ResizeObserver = new ResizeObserver(entries => {
+    entries.forEach(({ contentBoxSize, borderBoxSize }) => {
+      const [{ inlineSize, blockSize }] = content
+        ? contentBoxSize
+        : borderBoxSize
+      element.style.setProperty("--inline-size", `${inlineSize.toFixed(1)}px`)
+      element.style.setProperty("--block-size", `${blockSize.toFixed(1)}px`)
+      if (once) observer.unobserve(element)
+    })
+  })
+  observer.observe(element)
+}
+
+export const handleOutsideClick = (
+  event: MouseEvent,
+  container: HTMLElement,
+  callback: () => void,
+  ignored: HTMLElement[] = [],
+): void => {
+  const {
+    target,
+    clientY,
+    clientX,
+  }: { target: EventTarget; clientY: number; clientX: number } = event
+  // FF treating option click as outside click.
+  const isOption: boolean =
+    target instanceof HTMLOptionElement || target instanceof HTMLSelectElement
+  // Or it's in the ignored list.
+
+  const isIgnored: HTMLElement[] = ignored?.filter(
+    item => item === target || item.contains(target as HTMLElement),
+  )
+  // Exit early if we can.
+  if (isIgnored.length || isOption) return
+  // Check if click is inside the dialog content.
+  const obs: IntersectionObserver = new IntersectionObserver(
+    ([{ boundingClientRect }]) => {
+      const { top, height, width, left } = boundingClientRect
+      const isInDialog: boolean =
+        top <= clientY &&
+        clientY <= top + height &&
+        left <= clientX &&
+        clientX <= left + width
+
+      if (!isInDialog) {
+        callback()
+      }
+      obs.disconnect()
+    },
+  )
+  obs.observe(container)
+}
+
+export const handleEscape = (
+  event: KeyboardEvent,
+  callback: () => void,
+): void => {
+  const { key } = event
+  if (key === "Escape") {
+    callback()
+  }
+}
+
+/* eslint-disable no-unused-vars, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access */
+export const loadOnReady = (
+  callback: (this: Window, ev: Event) => void,
+  name: string,
+): void => {
+  // @ts-expect-error Drupal is global
+  if (Object.hasOwn(window, "Drupal") && Object.hasOwn(Drupal, "behaviors")) {
+    // @ts-expect-error Drupal is global
+    Drupal.behaviors[name] = {
+      attach: callback,
+    }
+    return
+  }
+  window.addEventListener("DOMContentLoaded", callback.bind(document, document))
+}

package/src/_custom-media.css

@@ -0,0 +1,33 @@
+/* Breakpoints */
+@custom-media --x-small-up (width >= token("breakpoint.xs"));
+@custom-media --x-small-down (width < token("breakpoint.xs"));
+@custom-media --x-small-to-small (token("breakpoint.xs") <= width < token("breakpoint.s"));
+@custom-media --small-up (width >= token("breakpoint.s"));
+@custom-media --small-down (width < token("breakpoint.s"));
+@custom-media --small-to-medium (token("breakpoint.s") <= width < token("breakpoint.m"));
+@custom-media --medium-up (width >= token("breakpoint.m"));
+@custom-media --medium-down (width < token("breakpoint.m"));
+@custom-media --medium-to-large (token("breakpoint.m") <= width < token("breakpoint.l"));
+@custom-media --large-up (width >= token("breakpoint.l"));
+@custom-media --large-down (width < token("breakpoint.l"));
+@custom-media --large-to-x-large (token("breakpoint.l") <= width < token("breakpoint.xl"));
+@custom-media --x-large-up (width >= token("breakpoint.xl"));
+@custom-media --x-large-down (width < token("breakpoint.xl"));
+
+/* Specific breakpoint for global & dropdown navigation */
+@custom-media --global-nav-up (width >= token("breakpoint.globalNav"));
+@custom-media --global-nav-down (width < token("breakpoint.globalNav"));
+
+/* Util media queries */
+@custom-media --touch (hover: none);
+@custom-media --mouse (hover);
+@custom-media --dark (prefers-color-scheme: dark);
+@custom-media --light (prefers-color-scheme: light);
+@custom-media --use-motion (prefers-reduced-motion: no-preference);
+@custom-media --reduce-motion (prefers-reduced-motion: reduce);
+@custom-media --use-data (prefers-reduced-data: no-preference);
+@custom-media --reduce-data (prefers-reduced-data: reduce);
+@custom-media --high-contrast (prefers-contrast: more);
+@custom-media --low-contrast (prefers-contrast: less);
+@custom-media --portrait (orientation: portrait);
+@custom-media --landscape (orientation: landscape);

package/src/constants.css

@@ -0,0 +1,118 @@
+/* stylelint-disable custom-property-pattern */
+
+/**
+ * Variables
+ */
+
+:root {
+  --_hue-primary: token("colour.primary");
+  --_hue-accent: token("colour.accent");
+  --_hue-info: token("colour.info");
+  --_hue-error: token("colour.error");
+  --_hue-warning: token("colour.warning");
+  --_hue-success: token("colour.success");
+  --_hue-outline: token("utility.outline.hue");
+
+  /* System colours */
+  --colour-background: token("colour.main.bg");
+  --colour-background-alt: token("colour.main.bgAlt");
+  --colour-foreground: token("colour.main.fg");
+  --colour-foreground-alt: token("colour.main.fgAlt");
+  --colour-border: token("colour.main.border");
+
+  /* Brand colors */
+  --colour-primary: lch(43% 100 var(--_hue-primary));
+  --colour-primary-light: lch(95% 10 var(--_hue-primary));
+  --colour-accent: lch(43% 100 var(--_hue-accent));
+  --colour-accent-light: lch(95% 10 var(--_hue-accent));
+
+  /* Reverse colors */
+  --colour-foreground-reverse: token("colour.reverse.fg");
+  --colour-foreground-alt-reverse: token("colour.reverse.fgAlt");
+  --colour-background-reverse: token("colour.reverse.bg");
+  --colour-border-reverse: token("colour.reverse.border");
+
+  /* State colours */
+  --colour-error-foreground: lch(40% 100 var(--_hue-error));
+  --colour-error-background: lch(95% 10 var(--_hue-error));
+  --colour-success-foreground: lch(45% 100 var(--_hue-success));
+  --colour-success-background: lch(95% 10 var(--_hue-success));
+  --colour-warning-foreground: lch(46% 100 var(--_hue-warning));
+  --colour-warning-background: lch(95% 10 var(--_hue-warning));
+  --colour-info-foreground: lch(43% 100 var(--_hue-info));
+  --colour-info-background: lch(95% 10 var(--_hue-info));
+
+  /* Typography */
+  --font-family: token("font.family");
+  --type-ratio: token("font.size.ratio");
+  --type-ratio-small: token("font.size.ratioSmall");
+  --base-font-size: token("font.size.base");
+  --font-size: var(--base-font-size);
+  --font-size-s: calc(var(--base-font-size) / var(--type-ratio-small));
+  --font-size-xs: calc(var(--font-size-s) / var(--type-ratio-small));
+  --font-size-sm: calc(var(--base-font-size) * var(--type-ratio-small));
+  --font-size-m: calc(var(--base-font-size) * var(--type-ratio));
+  --font-size-l: calc(var(--font-size-m) * var(--type-ratio));
+  --font-size-xl: calc(var(--font-size-l) * var(--type-ratio));
+  --font-size-xxl: calc(var(--font-size-xl) * var(--type-ratio));
+  --font-size-xxxl: calc(var(--font-size-xxl) * var(--type-ratio));
+  --font-size-diff: token("font.size.diff");
+
+  --line-height: token("font.lineHeight.main");
+  --line-height-h: token("font.lineHeight.heading");
+  --line-height-ui: token("font.lineHeight.ui");
+
+  --font-weight-normal: token("font.weight.main");
+  --font-weight-bold: token("font.weight.bold");
+
+  /* Spacing */
+  --spacing-xxxxs: token("size.spacing.xxxxs");
+  --spacing-xxxs: token("size.spacing.xxxs");
+  --spacing-xxs: token("size.spacing.xxs");
+  --spacing-xs: token("size.spacing.xs");
+  --spacing-s: token("size.spacing.s");
+  --spacing-m: token("size.spacing.m");
+  --spacing-l: token("size.spacing.l");
+  --spacing-xl: token("size.spacing.xl");
+  --spacing-xxl: token("size.spacing.xxl");
+  --spacing-xxxl: token("size.spacing.xxxl");
+  --spacing-xxxxl: token("size.spacing.xxxl");
+  --spacing-ul: token("size.spacing.ul");
+  --spacing-uul: token("size.spacing.uul");
+  --spacing-uuul: token("size.spacing.uuul");
+
+  --outline-width: token("utility.outline.width");
+  --outline-offset: token("utility.outline.offset");
+  --outline-style: token("utility.outline.style");
+  --outline-color: lch(45% 100 var(--_hue-outline));
+
+  /* Layout */
+  --container-max-width-narrow: token("size.container.narrow");
+  --container-max-width: token("size.container.aligned");
+  --gap-s: token("size.gap.s");
+  --gap: token("size.gap.m");
+  --gap-l: token("size.gap.l");
+  --gap-xl: token("size.gap.xl");
+  --breakpoint-xs: token("breakpoint.xs");
+  --breakpoint-s: token("breakpoint.s");
+  --breakpoint-m: token("breakpoint.m");
+  --breakpoint-l: token("breakpoint.l");
+  --breakpoint-xl: token("breakpoint.xl");
+
+  /* Utility */
+  --shadow-color: token("utility.shadow.colour");
+  --shadow-size: token("utility.shadow.size");
+  --shadow-shape: 0 0 var(--shadow-size);
+  --box-shadow: var(--shadow-shape) var(--shadow-color);
+  --border-radius: token("utility.radius.m");
+  --border-radius-l: token("utility.radius.l");
+  --border-radius-round: token("utility.radius.round");
+  --ratio: token("utility.ratio");
+  --ease: cubic-bezier(0.25, 0, 0.3, 1);
+}
+
+@media (--medium-down) {
+  :root {
+    --section-xl: var(--spacing-xxl);
+  }
+}

package/src/elements.ts

@@ -0,0 +1,13 @@
+export { default as Accordion } from "./Component/Accordion/Elements/Accordion"
+export { default as AccordionGroup } from "./Component/Accordion/Elements/AccordionGroup"
+export { default as AccordionMobile } from "./Component/Accordion/Elements/AccordionMobile"
+export { default as AccordionDiv } from "./Component/Accordion/Elements/AccordionDiv"
+export { default as Dialog } from "./Component/Dialog/Elements/Dialog"
+export { default as DropMenu } from "./Component/DropMenu/Elements/DropMenu"
+export { default as InPageAlert } from "./Component/InPageAlert/Elements/InPageAlert"
+export { default as Sticky } from "./Component/Sticky/Elements/Sticky"
+export { default as Tabs } from "./Component/Tabs/Elements/Tabs"
+export { default as GlobalToggle } from "./Layout/Header/Elements/GlobalToggle"
+export { default as InPageNavigation } from "./Component/InPageNavigation/Elements/InPageNavigation"
+export { default as Navigation } from "./Component/Navigation/Elements/Navigation"
+export * from "./Utility/utilities"