@pnx-mixtape/mxds 0.0.19 → 0.0.21

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

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

@@ -0,0 +1,17 @@
+import { JSX, PropsWithChildren } from "react"
+import classNames from "classnames"
+
+type CardProps = PropsWithChildren & {
+  skeleton?: boolean
+}
+
+const CardMedia = ({ children, skeleton = false }: CardProps): JSX.Element => {
+  return (
+    <figure className={classNames("mx-card__media", "stack")}>
+      {skeleton && <div className="mx-skeleton mx-skeleton--bg"></div>}
+      {children}
+    </figure>
+  )
+}
+
+export default CardMedia

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

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Component/Card Card smoke-test 1`] = `
+exports[`Component/Card BlockLink smoke-test 1`] = `
 <div class="mx-container">
-  <article class="mx-card">
+  <article class="mx-card mx-card--block">
     <figure class="mx-card__media stack">
       <div class="mx-skeleton mx-skeleton--bg">
       </div>
@@ -11,11 +11,11 @@ exports[`Component/Card Card smoke-test 1`] = `
       >
     </figure>
     <div class="mx-card__content mx-vertical-flow">
-      <h3 class
+      <h2 class
           id="key-feature-or-sectio"
       >
         Key feature or Section Name
-      </h3>
+      </h2>
       <p class>
         A short description to help explain enough about the subject matter to encourage visitors to learn more.
       </p>
@@ -29,7 +29,7 @@ exports[`Component/Card Card smoke-test 1`] = `
 </div>
 `;
 
-exports[`Component/Card Linked smoke-test 1`] = `
+exports[`Component/Card Card smoke-test 1`] = `
 <div class="mx-container">
   <article class="mx-card">
     <figure class="mx-card__media stack">
@@ -40,11 +40,11 @@ exports[`Component/Card Linked smoke-test 1`] = `
       >
     </figure>
     <div class="mx-card__content mx-vertical-flow">
-      <h3 class
+      <h2 class
           id="key-feature-or-sectio"
       >
         Key feature or Section Name
-      </h3>
+      </h2>
       <p class>
         A short description to help explain enough about the subject matter to encourage visitors to learn more.
       </p>
@@ -58,9 +58,9 @@ exports[`Component/Card Linked smoke-test 1`] = `
 </div>
 `;
 
-exports[`Component/Card Right smoke-test 1`] = `
+exports[`Component/Card Reverse smoke-test 1`] = `
 <div class="mx-container">
-  <article class="mx-card">
+  <article class="mx-card mx-card--reversed">
     <figure class="mx-card__media stack">
       <div class="mx-skeleton mx-skeleton--bg">
       </div>

package/src/Component/Card/card.css

@@ -39,6 +39,7 @@
 
       @container (min-width: token("breakpoint.contentCard")) {
         --card-gap: var(--gap-l);
+        --card-alignment: center;
 
         grid-template: "media content" 1fr / var(--media-col, 1fr) var(
             --content-col,
@@ -73,12 +74,12 @@
 
       & .mx-card__content {
         grid-area: content;
-        align-self: var(--align-content, center);
+        align-self: var(--align-content, var(--card-alignment, stretch));
       }
 
       & .mx-card__media {
         grid-area: media;
-        align-self: var(--align-media, center);
+        align-self: var(--align-media, var(--card-alignment, stretch));
         inline-size: 100%;
 
         & img {

package/src/Component/ContentBlock/Components/ContentBlockContent.tsx

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

package/src/Component/ContentBlock/Components/ContentBlockMedia.tsx

@@ -0,0 +1,20 @@
+import { JSX, PropsWithChildren } from "react"
+import classNames from "classnames"
+
+type CardProps = PropsWithChildren & {
+  skeleton?: boolean
+}
+
+const ContentBlockMedia = ({
+  children,
+  skeleton = false,
+}: CardProps): JSX.Element => {
+  return (
+    <figure className={classNames("mx-content-block__media", "stack")}>
+      {skeleton && <div className="mx-skeleton mx-skeleton--bg"></div>}
+      {children}
+    </figure>
+  )
+}
+
+export default ContentBlockMedia

package/src/Component/ContentBlock/ContentBlock.stories.tsx

@@ -1,10 +1,12 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./ContentBlock"
+import ContentBlockContent from "./Components/ContentBlockContent"
+import ContentBlockMedia from "./Components/ContentBlockMedia"
+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 "./content-block.css"
-import { HeadingStyles, LinkStyles } from "../../enums"
 import { AsTypes, HeadingTypes } from "@pnx-mixtape/ids-shape"
 
 const meta: Meta<typeof Component> = {
@@ -12,25 +14,26 @@ const meta: Meta<typeof Component> = {
   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: "Content block",
     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>
+        <ContentBlockMedia>
+          <Media src="https://picsum.photos/id/56/558/418?grayscale" alt="" />
+        </ContentBlockMedia>
+        <ContentBlockContent>
+          <Heading as={HeadingTypes.THREE}>Content block</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>
+        </ContentBlockContent>
       </>
     ),
-    image: <Media src="https://picsum.photos/id/56/558/418?grayscale" alt="" />,
   },
 }
 export default meta

package/src/Component/ContentBlock/ContentBlock.tsx

@@ -1,43 +1,20 @@
-import { JSX, PropsWithChildren, ReactNode } from "react"
+import { JSX, PropsWithChildren } from "react"
 import classNames from "classnames"
-import { AsTags, HeadingStyles } from "../../enums"
-import Heading from "../../Atom/Heading/Heading"
-import { HeadingTypes } from "@pnx-mixtape/ids-shape"
+import { AsTypes } from "@pnx-mixtape/ids-shape"
 
 type ContentBlockProps = PropsWithChildren & {
-  title: string
-  image?: ReactNode
-  headingLevel?: HeadingTypes
-  headingModifier?: HeadingStyles
-  as?: AsTags
+  as?: AsTypes
 }
 
 const ContentBlock = ({
-  title,
   children,
-  image = null,
-  headingLevel = HeadingTypes.THREE,
-  headingModifier = null,
-  as = AsTags.DIV,
+  as = AsTypes.DIV,
   ...props
 }: ContentBlockProps): JSX.Element => {
   const Tag: JSX.ElementType = `${as}` as unknown as JSX.ElementType
   return (
     <Tag className={classNames("mx-content-block")} {...props}>
-      {image && (
-        <figure className={classNames("mx-content-block__media", "stack")}>
-          <div className="mx-skeleton mx-skeleton--bg"></div>
-          {image}
-        </figure>
-      )}
-      <div
-        className={classNames("mx-content-block__content", "mx-vertical-flow")}
-      >
-        <Heading as={headingLevel} modifier={headingModifier}>
-          {title}
-        </Heading>
-        {children}
-      </div>
+      {children}
     </Tag>
   )
 }

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

@@ -3,8 +3,6 @@
 exports[`Component/ContentBlock ContentBlock smoke-test 1`] = `
 <div class="mx-content-block">
   <figure class="mx-content-block__media stack">
-    <div class="mx-skeleton mx-skeleton--bg">
-    </div>
     <img alt
          src="https://picsum.photos/id/56/558/418?grayscale"
     >

package/src/Component/Dialog/Components/DialogCloseButton.tsx

@@ -0,0 +1,18 @@
+import { JSX } from "react"
+import { useDialog } from "../Dialog"
+
+const DialogCloseButton = (): JSX.Element => {
+  const { handleClose } = useDialog()
+  return (
+    <button
+      autoFocus
+      onClick={handleClose}
+      className="mx-button mx-button--icon-only mx-icon mx-icon--close"
+      type="button"
+    >
+      Close dialog
+    </button>
+  )
+}
+
+export default DialogCloseButton

package/src/Component/Dialog/Components/DialogContent.tsx

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

package/src/Component/Dialog/Dialog.stories.tsx

@@ -1,9 +1,11 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Dialog"
+import DialogContent from "./Components/DialogContent"
+import DialogCloseButton from "./Components/DialogCloseButton"
 import Heading from "../../Atom/Heading/Heading"
 import Text from "../../Atom/Text/Text"
 import "./dialog.css"
-import { DialogStyles, HeadingLevels } from "../../enums"
+import { HeadingTypes } from "@pnx-mixtape/ids-shape"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
@@ -12,31 +14,24 @@ const meta: Meta<typeof Component> = {
     open: true,
     children: (
       <>
-        <Heading level={HeadingLevels.THREE}>
-          Thanks, you're almost done!
-        </Heading>
-        <Text>
-          To finish the process, you will need to upload a few more documents.
-          Please have your confirmation email ready before starting. Are you
-          ready?
-        </Text>
+        <DialogContent>
+          <Heading as={HeadingTypes.THREE}>Thanks, you're almost done!</Heading>
+          <Text>
+            To finish the process, you will need to upload a few more documents.
+            Please have your confirmation email ready before starting. Are you
+            ready?
+          </Text>
+          <form method="dialog">
+            <div className="mx-form-actions">
+              <button className="mx-button mx-button--primary" type="submit">
+                Let's get started
+              </button>
+            </div>
+          </form>
+        </DialogContent>
+        <DialogCloseButton />
       </>
     ),
-    actions: (
-      <form>
-        <div className="form__actions">
-          <button className="button button--primary" type="button">
-            Let's get started
-          </button>
-          <button className="button" formMethod="dialog" type="button">
-            Cancel
-          </button>
-        </div>
-      </form>
-    ),
-  },
-  argTypes: {
-    modifier: { options: Object.values(DialogStyles), control: "radio" },
   },
 }
 

package/src/Component/Dialog/Dialog.tsx

@@ -1,22 +1,31 @@
 import {
   JSX,
-  ReactNode,
   PropsWithChildren,
   ComponentPropsWithoutRef,
   RefObject,
   useRef,
   useEffect,
   useCallback,
+  createContext,
+  use,
+  useMemo,
 } from "react"
 import classNames from "classnames"
-import { DialogStyles } from "../../enums"
+
+type DialogContextValues = {
+  handleClose: () => void
+  ref: RefObject<HTMLDialogElement>
+  open: boolean
+}
+
+export const DialogContext = createContext<DialogContextValues>(null)
+export const useDialog = () => use(DialogContext)
 
 type DialogProps = ComponentPropsWithoutRef<"dialog"> &
   PropsWithChildren & {
-    modifier?: DialogStyles
-    actions?: ReactNode
     className?: string
     modal?: boolean
+    fullscreen?: boolean
     onClose?: () => void
   }
 
@@ -24,11 +33,10 @@ const defaultOnClose = (): void => {}
 
 const Dialog = ({
   children,
-  modifier,
-  actions,
   open = false,
   onClose = defaultOnClose,
   modal = true,
+  fullscreen = false,
   ...props
 }: DialogProps): JSX.Element => {
   const dialogRef: RefObject<HTMLDialogElement> = useRef(null)
@@ -43,7 +51,7 @@ const Dialog = ({
     if (!dialogRef.current) return
 
     if (open) {
-      if (modal) {
+      if (modal || fullscreen) {
         dialogRef.current.showModal()
       } else {
         dialogRef.current.show()
@@ -53,26 +61,24 @@ const Dialog = ({
     }
   }, [open, dialogRef])
 
+  const values = useMemo(
+    () => ({ handleClose, ref: dialogRef, open }),
+    [handleClose, dialogRef, open],
+  )
+
   return (
-    <dialog
-      ref={dialogRef}
-      onClose={handleClose}
-      className={classNames("dialog", {
-        [`dialog--${modifier}`]: modifier,
-      })}
-      {...props}
-    >
-      <div className="dialog__content vertical-flow">{children}</div>
-      {actions}
-      <button
-        autoFocus
-        onClick={handleClose}
-        className="button button--icon-only icon icon--close"
-        type="button"
+    <DialogContext value={values}>
+      <dialog
+        ref={dialogRef}
+        onClose={handleClose}
+        className={classNames("mx-dialog", {
+          "mx-dialog--fullscreen": fullscreen,
+        })}
+        {...props}
       >
-        Close dialog
-      </button>
-    </dialog>
+        {children}
+      </dialog>
+    </DialogContext>
   )
 }
 

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

@@ -1,36 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Dialog Dialog smoke-test 1`] = `
-<dialog class="dialog"
+<dialog class="mx-dialog"
         open
 >
-  <div class="dialog__content vertical-flow">
-    <h2 class
-        level="h3"
+  <div class="mx-dialog__content mx-vertical-flow">
+    <h3 class
         id="thanks-youre-almost-d"
     >
       Thanks, you're almost done!
-    </h2>
+    </h3>
     <p class>
       To finish the process, you will need to upload a few more documents. Please have your confirmation email ready before starting. Are you ready?
     </p>
+    <form method="dialog">
+      <div class="mx-form-actions">
+        <button class="mx-button mx-button--primary"
+                type="submit"
+        >
+          Let's get started
+        </button>
+      </div>
+    </form>
   </div>
-  <form>
-    <div class="form__actions">
-      <button class="button button--primary"
-              type="button"
-      >
-        Let's get started
-      </button>
-      <button class="button"
-              formmethod="dialog"
-              type="button"
-      >
-        Cancel
-      </button>
-    </div>
-  </form>
-  <button class="button button--icon-only icon icon--close"
+  <button class="mx-button mx-button--icon-only mx-icon mx-icon--close"
           type="button"
   >
     Close dialog

package/src/Component/Dialog/dialog.css

@@ -87,11 +87,3 @@
     }
   }
 }
-
-/* Prevent scrolling on the body. */
-.body--scroll-lock,
-.body-dialog--open {
-  overflow: hidden;
-  position: fixed;
-  inline-size: 100vw;
-}

package/src/Component/HeroBanner/HeroBanner.stories.ts

@@ -32,24 +32,12 @@ const meta: Meta<HeroBannerType> = {
       title: "Hero banner title",
       as: HeadingTypes.ONE,
     }),
-    link: Link({
-      href: "#",
-      title: "Find out more",
-      more: true,
-    }),
   },
   argTypes: {
     modifiers: {
       options: Object.values(HeroBannerModifier),
       control: "multi-select",
     },
-    // @ts-expect-error The controls follow the shape
-    "image.src": { control: "text" },
-    "image.alt": { control: "text" },
-    "title.title": { control: "text" },
-    "title.as": { options: Object.values(HeadingTypes), control: "select" },
-    "link.href": { control: "text" },
-    "link.title": { control: "text" },
   },
   decorators: [Page],
 }
@@ -59,10 +47,33 @@ type Story = StoryObj<HeroBannerType>
 
 export const HeroBanner: Story = {}
 
+export const Highlight: Story = {
+  args: {
+    highlight: true,
+    modifiers: [HeroBannerModifier.LIGHT],
+    link: Link({
+      href: "#",
+      title: "Find out more",
+      more: true,
+    }),
+  },
+}
+
+export const WithoutImage: Story = {
+  args: {
+    image: null,
+  },
+}
+
 export const WithLinkList: Story = {
   args: {
     link: null,
     linkList: LinkList({
+      title: Heading({
+        title: "Popular links",
+        as: HeadingTypes.TWO,
+        modifiers: [HeadingTypes.FOUR],
+      }),
       items: [
         Link({
           title: "Link one",