@pnx-mixtape/mxds 0.0.19 → 0.0.20

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@pnx-mixtape/mxds",
   "description": "The Mixtape Design System",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "dependencies": {
     "@floating-ui/dom": "^1.7.3",
     "@oddbird/popover-polyfill": "^0.6.1",
-    "@pnx-mixtape/ids-shape": "^0.0.21",
+    "@pnx-mixtape/ids-shape": "^0.0.22",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "classnames": "^2.5.1",
+    "focus-trap": "^7.6.5",
     "js-cookie": "^3.0.5",
     "react": "^19.1.1",
     "react-aria": "^3.42.0",
     "react-dom": "^19.1.1",
-    "react-stately": "^3.40.0",
-    "tabbable": "^6.2.0"
+    "react-stately": "^3.40.0"
   },
   "devDependencies": {
     "@csstools/postcss-global-data": "^3.0.0",
@@ -105,27 +105,27 @@
     "./src/*": "./src/*"
   },
   "scripts": {
-    "dev": "concurrently -k -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"pnpm run dev-vite\" \"pnpm run dev-storybook\"",
-    "build": "concurrently -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"pnpm run build-vite\" \"pnpm run build-storybook\"",
+    "dev": "concurrently -k -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"pnpm dev-vite\" \"pnpm dev-storybook\"",
+    "build": "concurrently -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"pnpm build-vite\" \"pnpm build-storybook\"",
     "dev-storybook-html": "storybook dev -p 6006",
     "dev-storybook-react": "storybook dev -p 6008 -c .storybook-react",
     "dev-storybook": "concurrently \"npm:dev-storybook-*\"",
-    "build-storybook": "pnpm run build-storybook-html && pnpm run build-storybook-react",
+    "build-storybook": "pnpm build-storybook-html && pnpm build-storybook-react",
     "build-storybook-html": "storybook build -o dist/storybook",
     "build-storybook-react": "storybook build -o dist/storybook/react -c .storybook-react",
     "dev-vite": "vite build -w -m development",
     "build-vite": "vite build",
-    "format": "prettier --write \"**/*.{css,ts,tsx,js,jsx,json,md,mdx}\" && pnpm run fix-css && pnpm run fix-js",
-    "lint": "pnpm run lint-prettier && pnpm run lint-css && pnpm run lint-ts && pnpm run lint-js",
+    "format": "prettier --write \"**/*.{css,ts,tsx,js,jsx,json,md,mdx}\" && pnpm fix-css && pnpm fix-js",
+    "lint": "pnpm lint-prettier && pnpm lint-css && pnpm lint-ts && pnpm lint-js",
     "lint-prettier": "prettier --check \"**/*.{css,ts,tsx,js,jsx,json,md,mdx}\"",
     "lint-css": "stylelint \"./**/*.css\"",
     "lint-css-ci": "stylelint \"./**/*.css\" --custom-formatter @csstools/stylelint-formatter-github",
-    "fix-css": "pnpm run lint-css --fix",
+    "fix-css": "pnpm lint-css --fix",
     "lint-js": "eslint \"./**/*.{ts,tsx}\"",
     "lint-js-ci": "eslint \"./**/*.{ts,tsx}\" --format gha",
-    "fix-js": "pnpm run lint-js --fix",
+    "fix-js": "pnpm lint-js --fix",
     "lint-ts": "tsc",
-    "test": "pnpm run test-storybook",
+    "test": "pnpm test-storybook",
     "test-vitest": "vitest --run",
     "test-storybook": "concurrently \"npm:test-storybook-*\"",
     "test-storybook-html": "test-storybook --maxWorkers=2",
@@ -133,7 +133,7 @@
     "clean": "rm -rf ./dist",
     "commit": "git-cz",
     "http-server": "http-server ./dist/storybook -i -p 3001 --silent",
-    "build-ci": "pnpm run build",
-    "lint-ci": "pnpm run lint-prettier && pnpm run lint-css-ci && pnpm run lint-ts && pnpm run lint-js-ci"
+    "build-ci": "pnpm build",
+    "lint-ci": "pnpm lint-prettier && pnpm lint-css-ci && pnpm lint-ts && pnpm lint-js-ci"
   }
 }

package/src/Atom/Button/_buttons-styles.css

@@ -8,7 +8,7 @@
     --background: var(--colour-link);
     --foreground: var(--colour-foreground-reverse);
 
-    &.button--outline {
+    &.mx-button--outline {
       --background: transparent;
       --foreground: var(--colour-primary);
     }
@@ -29,7 +29,7 @@
     --background: var(--colour-error);
     --foreground: var(--colour-foreground-reverse);
 
-    &.button--outline {
+    &.mx-button--outline {
       --background: transparent;
       --foreground: var(--colour-error);
     }
@@ -40,7 +40,7 @@
     --background: var(--colour-foreground-reverse);
     --foreground: var(--colour-foreground);
 
-    &.button--outline {
+    &.mx-button--outline {
       --background: transparent;
       --foreground: var(--colour-foreground-reverse);
     }

package/src/Atom/Heading/Heading.tsx

@@ -6,7 +6,7 @@ import { HeadingTypes } from "@pnx-mixtape/ids-shape"
 
 export type HeadingProps = PropsWithChildren & {
   as?: HeadingTypes
-  modifier?: HeadingStyles
+  modifier?: HeadingTypes | HeadingStyles
   className?: string
   id?: string
 }

package/src/Atom/Link/Link.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Link"
-import { LinkStyles } from "../../enums"
 
 const meta: Meta<typeof Component> = {
   title: "Atom/Link",
@@ -10,9 +9,6 @@ const meta: Meta<typeof Component> = {
     children: "Link",
     to: "http://example.com",
   },
-  argTypes: {
-    modifier: { options: Object.values(LinkStyles), control: "radio" },
-  },
 }
 export default meta
 type Story = StoryObj<typeof meta>
@@ -20,11 +16,11 @@ type Story = StoryObj<typeof meta>
 export const Link: Story = {}
 export const External: Story = {
   args: {
-    modifier: LinkStyles.EXTERNAL,
+    external: true,
   },
 }
 export const More: Story = {
   args: {
-    modifier: LinkStyles.MORE,
+    more: true,
   },
 }

package/src/Atom/Link/Link.tsx

@@ -1,12 +1,13 @@
 import { JSX, ComponentPropsWithoutRef, PropsWithChildren } from "react"
 import classNames from "classnames"
 import { useLinkComponent } from "../../react"
-import { LinkStyles } from "../../enums"
 
 type LinkProps = ComponentPropsWithoutRef<"a"> &
   PropsWithChildren & {
     to: string
-    modifier?: LinkStyles
+    more?: boolean
+    external?: boolean
+    download?: boolean
     className?: string
     allyText?: string
   }
@@ -15,7 +16,9 @@ const Link = ({
   to,
   children,
   allyText,
-  modifier,
+  more,
+  external,
+  download,
   className = "mx-link",
   ...props
 }: LinkProps): JSX.Element => {
@@ -25,7 +28,9 @@ const Link = ({
     <LinkComponent
       to={to}
       className={classNames(className, {
-        [`mx-link--${modifier}`]: modifier,
+        "mx-link--more": more,
+        "mx-link--external": external,
+        "mx-link--download": download,
       })}
       {...props}
     >

package/src/Atom/Link/_links.css

@@ -31,6 +31,7 @@
 
   .mx-link--more {
     font-weight: var(--font-weight-bold);
+    display: inline-flex;
 
     &:hover .mx-icon {
       transform: translateX(3px);

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

@@ -1,21 +1,51 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
-import { AccordionStyles, HeadingLevels } from "../../enums"
 import Component from "./Accordion"
+import AccordionTitle from "./Components/AccordionTitle"
+import AccordionContent from "./Components/AccordionContent"
+import AccordionTitleIcon from "./Components/AccordionTitleIcon"
 import "./accordion.css"
+import { HeadingTypes } from "@pnx-mixtape/ids-shape"
 
 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) },
+    children: (
+      <>
+        <AccordionTitle>
+          Open me!
+          <AccordionTitleIcon />
+        </AccordionTitle>
+        <AccordionContent>
+          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.
+        </AccordionContent>
+      </>
+    ),
   },
 }
 export default meta
 export const Accordion: StoryObj<typeof meta> = {}
+
+export const HeadingLevel: StoryObj<typeof meta> = {
+  args: {
+    children: (
+      <>
+        <AccordionTitle headingLevel={HeadingTypes.TWO}>
+          Open me!
+          <AccordionTitleIcon />
+        </AccordionTitle>
+        <AccordionContent>
+          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.
+        </AccordionContent>
+      </>
+    ),
+  },
+}

package/src/Component/Accordion/Accordion.tsx

@@ -1,28 +1,37 @@
-import { JSX, PropsWithChildren, useEffect, useId, Fragment } from "react"
+import {
+  JSX,
+  PropsWithChildren,
+  useEffect,
+  useId,
+  createContext,
+  use,
+  useMemo,
+} from "react"
 import classNames from "classnames"
-import { AccordionStyles, HeadingLevels } from "../../enums"
 import useToggle from "../../Utility/Hooks/useToggle"
 
+type AccordionContextValues = {
+  toggle: (value?: boolean) => void
+  on: boolean
+  id: string
+}
+
+export const AccordionContext = createContext<AccordionContextValues>(null)
+export const useAccordion = () => use(AccordionContext)
+
 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
@@ -31,52 +40,21 @@ const Accordion = ({
     }
   }, [accordionId])
 
+  const values = useMemo(
+    () => ({ on, toggle, id: accordionId }),
+    [on, toggle, accordionId],
+  )
+
   return (
-    <div
-      className={classNames("mx-accordion", {
-        [`mx-accordion--${modifier}`]: modifier,
-      })}
-      data-open={on}
-      {...props}
-    >
-      <Heading>
-        <button
-          type="button"
-          className="mx-accordion__toggle"
-          id={accordionId}
-          aria-expanded={on}
-          onClick={() => toggle()}
-          onKeyDown={({ key }) => {
-            if (key === "Enter") toggle()
-          }}
-        >
-          {title}
-          <span
-            className={classNames(
-              "mx-button",
-              "mx-button--small",
-              "mx-icon",
-              "mx-button--icon-only",
-              "mx-icon--chevron-down",
-            )}
-            aria-hidden="true"
-          />
-        </button>
-      </Heading>
+    <AccordionContext value={values}>
       <div
-        role="region"
-        aria-labelledby={accordionId}
-        className={classNames(
-          "mx-accordion__content",
-          "mx-rich-text",
-          "mx-vertical-flow",
-        )}
-        // @ts-expect-error inert is allowed.
-        inert={!on ? "" : null}
+        className={classNames("mx-accordion", "mx-accordion--divided")}
+        data-open={on}
+        {...props}
       >
         {children}
       </div>
-    </div>
+    </AccordionContext>
   )
 }
 

package/src/Component/Accordion/Components/AccordionContent.tsx

@@ -0,0 +1,24 @@
+import { JSX, PropsWithChildren } from "react"
+import classNames from "classnames"
+import { useAccordion } from "../Accordion"
+
+const AccordionContent = ({ children }: PropsWithChildren): JSX.Element => {
+  const { id, on } = useAccordion()
+  return (
+    <div
+      role="region"
+      aria-labelledby={id}
+      className={classNames(
+        "mx-accordion__content",
+        "mx-rich-text",
+        "mx-vertical-flow",
+      )}
+      // @ts-expect-error inert is allowed.
+      inert={!on ? "" : null}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default AccordionContent

package/src/Component/Accordion/Components/AccordionTitle.tsx

@@ -0,0 +1,34 @@
+import { JSX, PropsWithChildren, Fragment } from "react"
+import { HeadingTypes } from "@pnx-mixtape/ids-shape"
+import { useAccordion } from "../Accordion"
+
+type AccordionTitleProps = PropsWithChildren & {
+  headingLevel?: HeadingTypes
+}
+
+const AccordionTitle = ({
+  children,
+  headingLevel = null,
+}: AccordionTitleProps): JSX.Element => {
+  const { id, on, toggle } = useAccordion()
+  const Heading = headingLevel ? headingLevel : Fragment
+
+  return (
+    <Heading>
+      <button
+        type="button"
+        className="mx-accordion__toggle"
+        id={id}
+        aria-expanded={on}
+        onClick={() => toggle()}
+        onKeyDown={({ key }) => {
+          if (key === "Enter") toggle()
+        }}
+      >
+        {children}
+      </button>
+    </Heading>
+  )
+}
+
+export default AccordionTitle

package/src/Component/Accordion/Components/AccordionTitleIcon.tsx

@@ -0,0 +1,22 @@
+import { JSX } from "react"
+import classNames from "classnames"
+
+type AccordionTitleIconProps = {
+  className?: string | string[]
+}
+
+const defaultClassNames = [
+  "mx-button",
+  "mx-button--small",
+  "mx-icon",
+  "mx-button--icon-only",
+  "mx-icon--chevron-down",
+]
+
+const AccordionTitleIcon = ({
+  className = defaultClassNames,
+}: AccordionTitleIconProps): JSX.Element => {
+  return <span className={classNames(className)} aria-hidden="true" />
+}
+
+export default AccordionTitleIcon

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

@@ -23,3 +23,29 @@ exports[`Component/Accordion Accordion smoke-test 1`] = `
   </div>
 </div>
 `;
+
+exports[`Component/Accordion HeadingLevel smoke-test 1`] = `
+<div class="mx-accordion mx-accordion--divided"
+     data-open="false"
+>
+  <h2>
+    <button type="button"
+            class="mx-accordion__toggle"
+            id="unique-0"
+            aria-expanded="false"
+    >
+      Open me!
+      <span class="mx-button mx-button--small mx-icon mx-button--icon-only mx-icon--chevron-down"
+            aria-hidden="true"
+      >
+      </span>
+    </button>
+  </h2>
+  <div role="region"
+       aria-labelledby="unique-0"
+       class="mx-accordion__content mx-rich-text mx-vertical-flow"
+  >
+    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.
+  </div>
+</div>
+`;

package/src/Component/Breadcrumb/Breadcrumb.tsx

@@ -16,7 +16,13 @@ const Breadcrumb = ({
   ...props
 }: BreadcrumbProps): JSX.Element => (
   <nav
-    className={classNames("nav", "nav--breadcrumb", "nav--inline", className)}
+    className={classNames(
+      "mx-nav",
+      "mx-nav--breadcrumb",
+      "mx-nav--inline",
+      className,
+    )}
+    aria-label="You are here"
     {...props}
   >
     <ul>
@@ -26,7 +32,7 @@ const Breadcrumb = ({
             <Link to={item.to}>{item.title}</Link>
           </li>
         ))}
-      {title && <li className="nav__item--current">{title}</li>}
+      {title && <li>{title}</li>}
     </ul>
   </nav>
 )

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

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Breadcrumb Breadcrumb smoke-test 1`] = `
-<nav class="nav nav--breadcrumb nav--inline">
+<nav class="mx-nav mx-nav--breadcrumb mx-nav--inline"
+     aria-label="You are here"
+>
   <ul>
     <li>
       <a href="#"
@@ -24,7 +26,7 @@ exports[`Component/Breadcrumb Breadcrumb smoke-test 1`] = `
         Contact
       </a>
     </li>
-    <li class="nav__item--current">
+    <li>
       Current page title
     </li>
   </ul>
@@ -32,7 +34,9 @@ exports[`Component/Breadcrumb Breadcrumb smoke-test 1`] = `
 `;
 
 exports[`Component/Breadcrumb NoCurrentPage smoke-test 1`] = `
-<nav class="nav nav--breadcrumb nav--inline">
+<nav class="mx-nav mx-nav--breadcrumb mx-nav--inline"
+     aria-label="You are here"
+>
   <ul>
     <li>
       <a href="#"

package/src/Component/Card/Card.stories.tsx

@@ -1,36 +1,39 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Card"
+import CardContent from "./Components/CardContent"
+import CardMedia from "./Components/CardMedia"
+import Heading from "../../Atom/Heading/Heading"
 import Link from "../../Atom/Link/Link"
 import Text from "../../Atom/Text/Text"
 import Media from "../../Atom/Media/Media"
 import "./card.css"
-import { HeadingStyles, LinkStyles } from "../../enums"
-import { AsTypes, HeadingTypes } from "@pnx-mixtape/ids-shape"
+import { AsTypes } from "@pnx-mixtape/ids-shape"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
   component: Component,
   argTypes: {
     children: { table: { disable: true } },
-    image: { table: { disable: true } },
-    headingLevel: { options: Object.values(HeadingTypes) },
-    headingModifier: { options: Object.values(HeadingStyles) },
     as: { options: Object.values(AsTypes) },
   },
   args: {
-    title: "Key feature or Section Name",
     children: (
       <>
-        <Text>
-          A short description to help explain enough about the subject matter to
-          encourage visitors to learn more.
-        </Text>
-        <Link modifier={LinkStyles.MORE} to="http://example.com">
-          Learn More
-        </Link>
+        <CardMedia skeleton>
+          <Media src="https://picsum.photos/id/56/558/418?grayscale" alt="" />
+        </CardMedia>
+        <CardContent>
+          <Heading>Key feature or Section Name</Heading>
+          <Text>
+            A short description to help explain enough about the subject matter
+            to encourage visitors to learn more.
+          </Text>
+          <Link more to="http://example.com">
+            Learn More
+          </Link>
+        </CardContent>
       </>
     ),
-    image: <Media src="https://picsum.photos/id/56/558/418?grayscale" alt="" />,
   },
 }
 
@@ -38,14 +41,14 @@ export default meta
 type Story = StoryObj<typeof Component>
 
 export const Card: Story = {}
-export const Linked: Story = {
+
+export const Reverse: Story = {
   args: {
-    clickable: true,
+    reversed: true,
   },
 }
-export const Right: Story = {
+export const BlockLink: Story = {
   args: {
-    right: true,
-    headingLevel: HeadingTypes.TWO,
+    block: true,
   },
 }

package/src/Component/Card/Card.tsx

@@ -1,31 +1,20 @@
-import { JSX, ReactNode, PropsWithChildren } from "react"
+import { JSX, 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 { BackgroundStyles } from "../../enums"
+import { AsTypes } from "@pnx-mixtape/ids-shape"
 
 type CardProps = PropsWithChildren & {
-  title: string
-  image?: ReactNode
-  intro?: ReactNode
   reversed?: boolean
   block?: boolean
-  headingLevel?: HeadingTypes
-  headingModifier?: HeadingStyles
   as?: AsTypes
   background?: BackgroundStyles
   className?: string
 }
 
 const Card = ({
-  title,
   children,
   reversed = null,
   block = false,
-  image = null,
-  intro = null,
-  headingLevel = HeadingTypes.THREE,
-  headingModifier = null,
   as = AsTypes.DIV,
   background = null,
   className = null,
@@ -34,24 +23,13 @@ const Card = ({
   return (
     <Tag className="mx-container">
       <article
-        className={classNames("mx-card", background, className, {
+        className={classNames("mx-card", className, {
           "mx-card--reversed": reversed,
           "mx-card--block": block,
+          [`mx-background--${background}`]: background,
         })}
       >
-        {image && (
-          <figure className={classNames("mx-card__media", "stack")}>
-            <div className="mx-skeleton mx-skeleton--bg"></div>
-            {image}
-          </figure>
-        )}
-        <div className={classNames("mx-card__content", "mx-vertical-flow")}>
-          {intro}
-          <Heading as={headingLevel} modifier={headingModifier}>
-            {title}
-          </Heading>
-          {children}
-        </div>
+        {children}
       </article>
     </Tag>
   )

package/src/Component/Card/Components/CardContent.tsx

@@ -0,0 +1,12 @@
+import { JSX, PropsWithChildren } from "react"
+import classNames from "classnames"
+
+const CardContent = ({ children }: PropsWithChildren): JSX.Element => {
+  return (
+    <div className={classNames("mx-card__content", "mx-vertical-flow")}>
+      {children}
+    </div>
+  )
+}
+
+export default CardContent