@pnx-mixtape/mxds 0.0.19 → 0.0.21

package/src/constants.css

@@ -72,7 +72,7 @@
   --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");
+  --base-font-size: max(1rem, token("font.size.basePx"));
   --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));
@@ -111,13 +111,15 @@
   --outline-style: token("utility.outline.style");
   --_colour-outline: oklch(50% 0.3 var(--_hue-outline));
   --outline-color: light-dark(
-    var(--colour-outline),
-    color-mix(in oklch, var(--colour-outline), white 90%)
+    var(--_colour-outline),
+    color-mix(in oklch, var(--_colour-outline), white 90%)
   );
 
   /* Layout */
   --container-max-width-narrow: token("size.container.narrow");
   --container-max-width: token("size.container.aligned");
+  --gutter-min: token("size.container.gutterMin");
+  --gutter-max: token("size.container.gutterMax");
   --gap-s: token("size.gap.s");
   --gap: token("size.gap.m");
   --gap-l: token("size.gap.l");

package/src/react.ts

@@ -6,18 +6,33 @@ export {
   default as LinkComponentProvider,
   useLinkComponent,
 } from "./Utility/Context/LinkComponent"
-export { default as Accordion } from "./Component/Accordion/Accordion"
 export { default as Heading } from "./Atom/Heading/Heading"
 export { default as Media } from "./Atom/Media/Media"
 export { default as Link } from "./Atom/Link/Link"
 export { default as Text } from "./Atom/Text/Text"
 export { default as Video } from "./Atom/Video/Video"
 export { default as Button } from "./Atom/Button/Button"
+export {
+  default as Accordion,
+  useAccordion,
+} from "./Component/Accordion/Accordion"
+export { default as AccordionTitle } from "./Component/Accordion/Components/AccordionTitle"
+export { default as AccordionTitleIcon } from "./Component/Accordion/Components/AccordionTitleIcon"
+export { default as AccordionContent } from "./Component/Accordion/Components/AccordionContent"
+export { default as Breadcrumb } from "./Component/Breadcrumb/Breadcrumb"
 export { default as Card } from "./Component/Card/Card"
+export { default as CardContent } from "./Component/Card/Components/CardContent"
+export { default as CardMedia } from "./Component/Card/Components/CardMedia"
 export { default as ContentBlock } from "./Component/ContentBlock/ContentBlock"
-export { default as Dialog } from "./Component/Dialog/Dialog"
+export { default as ContentBlockContent } from "./Component/ContentBlock/Components/ContentBlockContent"
+export { default as ContentBlockMedia } from "./Component/ContentBlock/Components/ContentBlockMedia"
+export { default as Dialog, useDialog } from "./Component/Dialog/Dialog"
+export { default as DialogContent } from "./Component/Dialog/Components/DialogContent"
+export { default as DialogCloseButton } from "./Component/Dialog/Components/DialogCloseButton"
 export { default as InPageNavigation } from "./Component/InPageNavigation/InPageNavigation"
 export { default as useInPageNavigation } from "./Component/InPageNavigation/Hooks/useInPageNavigation"
+export { default as InPageAlert } from "./Component/InPageAlert/InPageAlert"
+export { default as GlobalAlert } from "./Component/GlobalAlert/GlobalAlert"
 export {
   default as FormCheckbox,
   Checkbox,
@@ -49,21 +64,29 @@ export {
   default as PaginationProvider,
   usePagination,
 } from "./Component/Pagination/Components/PaginationContext"
+export { default as Sticky } from "./Component/Sticky/Sticky"
 export { default as Tabs, useTabContext } from "./Component/Tabs/Tabs"
+export { default as Tab } from "./Component/Tabs/Components/Tab"
+export { default as TabPanel } from "./Component/Tabs/Components/TabPanel"
+export { default as TabList } from "./Component/Tabs/Components/TabList"
+export { default as TabDropMenu } from "./Component/Tabs/Components/TabDropMenu"
 export { default as Tag } from "./Component/Tag/Tag"
 export { default as ListItem } from "./Component/ListItem/ListItem"
-export { default as Tile } from "./Component/Tile/Tile"
+export { default as ListItemContent } from "./Component/ListItem/Components/ListItemContent"
+export { default as ListItemMedia } from "./Component/ListItem/Components/ListItemMedia"
 export { default as Navigation } from "./Component/Navigation/Navigation"
 export { default as NavigationDropdown } from "./Component/Navigation/Dropdown"
+export { default as NavigationDropdownLevel } from "./Component/Navigation/Components/DropdownLevel"
 export { default as DropMenu } from "./Component/DropMenu/DropMenu"
-export { default as DropMenuItem } from "./Component/DropMenu/Components/DropMenuItem"
-export { default as ResultsBar } from "./Component/ResultsBar/ResultsBar"
-export { default as ResultsBarInfo } from "./Component/ResultsBar/Components/ResultsBarInfo"
-export { default as ResultsBarSort } from "./Component/ResultsBar/Components/ResultsBarSort"
 export {
   default as DropMenuProvider,
   useDropMenuContext,
 } from "./Component/DropMenu/Components/DropMenuContext"
+export { default as DropMenuItem } from "./Component/DropMenu/Components/DropMenuItem"
+export { default as ResultsBar } from "./Component/ResultsBar/ResultsBar"
+export { default as ResultsBarInfo } from "./Component/ResultsBar/Components/ResultsBarInfo"
+export { default as ResultsBarSort } from "./Component/ResultsBar/Components/ResultsBarSort"
+
 export { default as useLocalStorage } from "./Utility/Hooks/useLocalStorage"
 export { default as useMediaQuery } from "./Utility/Hooks/useMediaQuery"
 export { default as useToggle } from "./Utility/Hooks/useToggle"

package/src/tokens.js

@@ -65,7 +65,7 @@ export default {
     size: {
       ratioSmall: 1.125,
       ratio: 1.25,
-      base: "1rem",
+      basePx: "16px",
       diff: 0.3,
     },
   },
@@ -97,6 +97,8 @@ export default {
       minus: "8rem",
       aligned: "76ch",
       narrow: "58ch",
+      gutterMin: global.size.s,
+      gutterMax: global.size.l,
     },
   },
   utility: {

package/dist/build/chunks/utilities-BeWkujCZ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utilities-BeWkujCZ.js","sources":["../../../node_modules/.pnpm/js-cookie@3.0.5/node_modules/js-cookie/dist/js.cookie.mjs","../../../src/Utility/utilities.ts"],"sourcesContent":["/*! js-cookie v3.0.5 | MIT */\n/* eslint-disable no-var */\nfunction assign (target) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source = arguments[i];\n    for (var key in source) {\n      target[key] = source[key];\n    }\n  }\n  return target\n}\n/* eslint-enable no-var */\n\n/* eslint-disable no-var */\nvar defaultConverter = {\n  read: function (value) {\n    if (value[0] === '\"') {\n      value = value.slice(1, -1);\n    }\n    return value.replace(/(%[\\dA-F]{2})+/gi, decodeURIComponent)\n  },\n  write: function (value) {\n    return encodeURIComponent(value).replace(\n      /%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,\n      decodeURIComponent\n    )\n  }\n};\n/* eslint-enable no-var */\n\n/* eslint-disable no-var */\n\nfunction init (converter, defaultAttributes) {\n  function set (name, value, attributes) {\n    if (typeof document === 'undefined') {\n      return\n    }\n\n    attributes = assign({}, defaultAttributes, attributes);\n\n    if (typeof attributes.expires === 'number') {\n      attributes.expires = new Date(Date.now() + attributes.expires * 864e5);\n    }\n    if (attributes.expires) {\n      attributes.expires = attributes.expires.toUTCString();\n    }\n\n    name = encodeURIComponent(name)\n      .replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent)\n      .replace(/[()]/g, escape);\n\n    var stringifiedAttributes = '';\n    for (var attributeName in attributes) {\n      if (!attributes[attributeName]) {\n        continue\n      }\n\n      stringifiedAttributes += '; ' + attributeName;\n\n      if (attributes[attributeName] === true) {\n        continue\n      }\n\n      // Considers RFC 6265 section 5.2:\n      // ...\n      // 3.  If the remaining unparsed-attributes contains a %x3B (\";\")\n      //     character:\n      // Consume the characters of the unparsed-attributes up to,\n      // not including, the first %x3B (\";\") character.\n      // ...\n      stringifiedAttributes += '=' + attributes[attributeName].split(';')[0];\n    }\n\n    return (document.cookie =\n      name + '=' + converter.write(value, name) + stringifiedAttributes)\n  }\n\n  function get (name) {\n    if (typeof document === 'undefined' || (arguments.length && !name)) {\n      return\n    }\n\n    // To prevent the for loop in the first place assign an empty array\n    // in case there are no cookies at all.\n    var cookies = document.cookie ? document.cookie.split('; ') : [];\n    var jar = {};\n    for (var i = 0; i < cookies.length; i++) {\n      var parts = cookies[i].split('=');\n      var value = parts.slice(1).join('=');\n\n      try {\n        var found = decodeURIComponent(parts[0]);\n        jar[found] = converter.read(value, found);\n\n        if (name === found) {\n          break\n        }\n      } catch (e) {}\n    }\n\n    return name ? jar[name] : jar\n  }\n\n  return Object.create(\n    {\n      set,\n      get,\n      remove: function (name, attributes) {\n        set(\n          name,\n          '',\n          assign({}, attributes, {\n            expires: -1\n          })\n        );\n      },\n      withAttributes: function (attributes) {\n        return init(this.converter, assign({}, this.attributes, attributes))\n      },\n      withConverter: function (converter) {\n        return init(assign({}, this.converter, converter), this.attributes)\n      }\n    },\n    {\n      attributes: { value: Object.freeze(defaultAttributes) },\n      converter: { value: Object.freeze(converter) }\n    }\n  )\n}\n\nvar api = init(defaultConverter, { path: '/' });\n/* eslint-enable no-var */\n\nexport { api as default };\n","/* eslint-disable no-console */\n/**\n * @file utilities.\n */\n\nexport { default as DisclosureWidget } from \"./Elements/disclosure-widget\"\nexport type { DisclosureWidgetEvent } from \"./Elements/disclosure-widget\"\nexport { default as Keyboard } from \"./Elements/keyboard\"\nexport { default as CookieCompliance } from \"./Elements/cookie-compliance\"\nexport { default as IntersectionLoader } from \"./Elements/io-loader\"\nexport { default as BreakpointLoader } from \"./Elements/breakpoint-loader\"\n\nexport const makeAnchor = (string: string, length: number = 20): string => {\n  if (typeof string !== \"string\" || !string) return \"\"\n  // Convert the string to lowercase and remove non-alphanumeric characters.\n  let id: string = string\n    .toLowerCase()\n    .trim()\n    .replace(/\\s+/g, \"-\")\n    .replace(/[^-a-z0-9]/g, \"\")\n    .replace(/[\\n\\r]+|[\\s]{2,}/g, \"\")\n  // Ensure we start the id with a letter.\n  // Only run this several times.\n  const times: number[] = [...Array(6).keys()]\n  times.forEach((): void => {\n    if (!id.charAt(0).match(/[a-z]/g)) {\n      id = id.substring(1)\n    }\n  })\n  // Cut to the desired length.\n  if (length) id = id.substring(0, length + 1)\n\n  return id\n}\n\nexport const makeCamelCase = (string: string): string => {\n  if (typeof string !== \"string\" || !string) return \"\"\n  const output: string = string\n    .trim()\n    .replace(\n      /(?:^\\w|[A-Z]|\\b\\w|\\s+)/g,\n      (match: string, index: number): string => {\n        if (+match === 0) return \"\"\n        return index === 0 ? match.toLowerCase() : match.toUpperCase()\n      },\n    )\n  return output.replace(/[^\\w\\s]/gi, \"\")\n}\n\nexport const isInternalLink = (\n  href: string,\n  internalHostnames: string[],\n): boolean => {\n  if (typeof href !== \"string\" || !href || !Array.isArray(internalHostnames)) {\n    return false\n  }\n\n  try {\n    const { hostname }: { hostname: string } = new URL(href)\n    return (\n      window.location.hostname === hostname ||\n      internalHostnames.includes(hostname)\n    )\n  } catch (error) {\n    console.error(error)\n    return false\n  }\n}\n\nexport const createElement = (string: string): Element | null => {\n  try {\n    const el: HTMLDivElement = document.createElement(\"div\")\n    el.innerHTML = string\n    return el.firstElementChild\n  } catch (error) {\n    console.error(error)\n    return null\n  }\n}\n\nexport const getElementBox = (\n  element: HTMLElement,\n  once: boolean = false,\n  content: boolean = false,\n): void => {\n  const observer: ResizeObserver = new ResizeObserver(entries => {\n    entries.forEach(({ contentBoxSize, borderBoxSize }) => {\n      const [{ inlineSize, blockSize }] = content\n        ? contentBoxSize\n        : borderBoxSize\n      element.style.setProperty(\"--inline-size\", `${inlineSize.toFixed(1)}px`)\n      element.style.setProperty(\"--block-size\", `${blockSize.toFixed(1)}px`)\n      if (once) observer.unobserve(element)\n    })\n  })\n  observer.observe(element)\n}\n\nexport const handleOutsideClick = (\n  event: MouseEvent,\n  container: HTMLElement,\n  callback: () => void,\n  ignored: HTMLElement[] = [],\n): void => {\n  const {\n    target,\n    clientY,\n    clientX,\n  }: { target: EventTarget; clientY: number; clientX: number } = event\n  // FF treating option click as outside click.\n  const isOption: boolean =\n    target instanceof HTMLOptionElement || target instanceof HTMLSelectElement\n  // Or it's in the ignored list.\n\n  const isIgnored: HTMLElement[] = ignored?.filter(\n    item => item === target || item.contains(target as HTMLElement),\n  )\n  // Exit early if we can.\n  if (isIgnored.length || isOption) return\n  // Check if click is inside the dialog content.\n  const obs: IntersectionObserver = new IntersectionObserver(\n    ([{ boundingClientRect }]) => {\n      const { top, height, width, left } = boundingClientRect\n      const isInDialog: boolean =\n        top <= clientY &&\n        clientY <= top + height &&\n        left <= clientX &&\n        clientX <= left + width\n\n      if (!isInDialog) {\n        callback()\n      }\n      obs.disconnect()\n    },\n  )\n  obs.observe(container)\n}\n\nexport const handleEscape = (\n  event: KeyboardEvent,\n  callback: () => void,\n): void => {\n  const { key } = event\n  if (key === \"Escape\") {\n    callback()\n  }\n}\n\nexport const loadOnReady = (\n  callback: (this: Window, ev: Event) => void,\n  name: string,\n): void => {\n  // @ts-expect-error Drupal is global\n  if (Object.hasOwn(window, \"Drupal\") && Object.hasOwn(Drupal, \"behaviors\")) {\n    // @ts-expect-error Drupal is global\n    Drupal.behaviors[name] = {\n      attach: callback,\n    }\n    return\n  }\n  window.addEventListener(\"DOMContentLoaded\", callback.bind(document, document))\n}\n"],"names":["converter"],"mappings":"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","x_google_ignoreList":[0]}

package/src/Component/Tile/Tile.tsx

@@ -1,53 +0,0 @@
-import { JSX, ReactNode, PropsWithChildren } from "react"
-import classNames from "classnames"
-import Heading from "../../Atom/Heading/Heading"
-import { HeadingStyles, BackgroundStyles } from "../../enums"
-import { HeadingTypes, AsTypes } from "@pnx-mixtape/ids-shape"
-import Icon, { IconProps } from "../../Atom/Icon/Icon"
-
-type TileProps = PropsWithChildren & {
-  title: string
-  icon?: IconProps
-  intro?: ReactNode
-  headingLevel?: HeadingTypes
-  headingModifier?: HeadingStyles
-  as?: AsTypes
-  background?: BackgroundStyles
-  className?: string
-}
-
-const Tile = ({
-  title,
-  children,
-  icon = null,
-  intro = null,
-  headingLevel = HeadingTypes.THREE,
-  headingModifier = null,
-  as = AsTypes.DIV,
-  className = null,
-  background = BackgroundStyles.BOX,
-}: TileProps): JSX.Element => {
-  const Tag: JSX.ElementType = `${as}` as unknown as JSX.ElementType
-  return (
-    <Tag
-      className={classNames("mx-card", "mx-card--block", className, {
-        [`mx-background--${background}`]: background,
-      })}
-    >
-      {icon && (
-        <div className="mx-card__icon">
-          <Icon {...icon} />
-        </div>
-      )}
-      <div className={classNames("mx-card__content", "mx-vertical-flow-flex")}>
-        {intro}
-        <Heading as={headingLevel} modifier={headingModifier}>
-          {title}
-        </Heading>
-        {children}
-      </div>
-    </Tag>
-  )
-}
-
-export default Tile