@pnx-mixtape/mxds 0.0.13 → 0.0.15

package/src/Component/Callout/__snapshots__/Callout.stories.ts.snap

@@ -1,12 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Callout Callout smoke-test 1`] = `
-<div class="mx-callout mx-vertical-flow">
-  <h2>
-    Callout heading
-  </h2>
-  <p>
-    Some callout content.
-  </p>
+<div class="mx-page default">
+  <div class="mx-callout mx-vertical-flow">
+    <h2>
+      Callout heading
+    </h2>
+    <p>
+      Some callout content.
+    </p>
+  </div>
 </div>
 `;

package/src/Component/Card/Card.stories.ts

@@ -1,14 +1,13 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./card.twig"
 import "./card.css"
 import {
   Card as CardType,
-  CardModifier,
   HeadingTypes,
   ListItemModifiers,
   TagTypes,
 } from "@pnx-mixtape/ids-shape"
-import { Icons } from "../../enums"
+import { Icons, BackgroundStyles } from "../../enums"
 
 // Deps.
 import Heading from "../../Atom/Heading/heading.twig"
@@ -22,7 +21,8 @@ import "../Tag/tag.css"
 import "../LinkList/link-list.css"
 
 export type MxCardType = Omit<CardType, "modifiers"> & {
-  modifiers?: CardModifier[] | ListItemModifiers[]
+  modifiers?: ListItemModifiers[]
+  background?: BackgroundStyles
 }
 
 const meta: Meta<MxCardType> = {
@@ -32,6 +32,8 @@ const meta: Meta<MxCardType> = {
     image: Image({
       src: "https://picsum.photos/id/56/558/418?grayscale",
       alt: "Blurry bubbles",
+      width: 558,
+      height: 418,
     }),
     title: Heading({
       title: "Card title",
@@ -45,24 +47,15 @@ const meta: Meta<MxCardType> = {
     content:
       "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
   },
-  parameters: {
-    deepControls: { enabled: true },
-  },
   argTypes: {
     modifiers: {
-      options: [
-        ...Object.values(CardModifier),
-        ...Object.values(ListItemModifiers),
-      ],
+      options: Object.values(ListItemModifiers),
       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" },
+    background: {
+      options: Object.values(BackgroundStyles),
+      control: "select",
+    },
   },
 }
 

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Card"
 import Link from "../../Atom/Link/Link"
 import Text from "../../Atom/Text/Text"

package/src/Component/Card/Card.tsx

@@ -1,8 +1,8 @@
 import { JSX, ReactNode, PropsWithChildren } from "react"
 import classNames from "classnames"
 import Heading from "../../Atom/Heading/Heading"
-import { AsTags, HeadingStyles } from "../../enums"
-import { HeadingTypes } from "@pnx-mixtape/ids-shape"
+import { HeadingStyles, BackgroundStyles } from "../../enums"
+import { HeadingTypes, AsTypes } from "@pnx-mixtape/ids-shape"
 
 type CardProps = PropsWithChildren & {
   title: string
@@ -12,7 +12,9 @@ type CardProps = PropsWithChildren & {
   block?: boolean
   headingLevel?: HeadingTypes
   headingModifier?: HeadingStyles
-  as?: AsTags
+  as?: AsTypes
+  background?: BackgroundStyles
+  className?: string
 }
 
 const Card = ({
@@ -24,13 +26,15 @@ const Card = ({
   intro = null,
   headingLevel = HeadingTypes.THREE,
   headingModifier = null,
-  as = AsTags.DIV,
+  as = AsTypes.DIV,
+  background = null,
+  className = null,
 }: CardProps): JSX.Element => {
   const Tag: JSX.ElementType = `${as}` as unknown as JSX.ElementType
   return (
     <Tag className="mx-container">
       <article
-        className={classNames("mx-card", {
+        className={classNames("mx-card", background, className, {
           "mx-card--reversed": reversed,
           "mx-card--block": block,
         })}

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

@@ -1,276 +1,304 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Card BlockLink smoke-test 1`] = `
-<div class="mx-container">
-  <article class="mx-card mx-card--block">
-    <figure class="mx-card__media">
-      <picture>
-        <img src="https://picsum.photos/id/56/558/418?grayscale"
-             alt="Blurry bubbles"
+<div class="mx-page default">
+  <div class="mx-container">
+    <article class="mx-card mx-card--block">
+      <div class="mx-card__content mx-vertical-flow-flex">
+        <h3>
+          Card title
+        </h3>
+        <div class="mx-text--lede">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </div>
+        <a class="mx-link--more"
+           href="#"
         >
-      </picture>
-    </figure>
-    <div class="mx-card__content mx-vertical-flow-flex">
-      <h3>
-        Card title
-      </h3>
-      <div class="mx-text--lede">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
+          <span>
+            Find out more
+          </span>
+        </a>
       </div>
-      <a class="mx-link--more"
-         href="#"
-      >
-        <span>
-          Find out more
-        </span>
-      </a>
-    </div>
-  </article>
+      <figure class="mx-card__media">
+        <picture>
+          <img src="https://picsum.photos/id/56/558/418?grayscale"
+               alt="Blurry bubbles"
+               height="418"
+               width="558"
+          >
+        </picture>
+      </figure>
+    </article>
+  </div>
 </div>
 `;
 
 exports[`Component/Card Card smoke-test 1`] = `
-<div class="mx-container">
-  <article class="mx-card">
-    <figure class="mx-card__media">
-      <picture>
-        <img src="https://picsum.photos/id/56/558/418?grayscale"
-             alt="Blurry bubbles"
+<div class="mx-page default">
+  <div class="mx-container">
+    <article class="mx-card">
+      <div class="mx-card__content mx-vertical-flow-flex">
+        <h3>
+          Card title
+        </h3>
+        <div class="mx-text--lede">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </div>
+        <a class="mx-link--more"
+           href="#"
         >
-      </picture>
-    </figure>
-    <div class="mx-card__content mx-vertical-flow-flex">
-      <h3>
-        Card title
-      </h3>
-      <div class="mx-text--lede">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
+          <span>
+            Find out more
+          </span>
+        </a>
       </div>
-      <a class="mx-link--more"
-         href="#"
-      >
-        <span>
-          Find out more
-        </span>
-      </a>
-    </div>
-  </article>
+      <figure class="mx-card__media">
+        <picture>
+          <img src="https://picsum.photos/id/56/558/418?grayscale"
+               alt="Blurry bubbles"
+               height="418"
+               width="558"
+          >
+        </picture>
+      </figure>
+    </article>
+  </div>
 </div>
 `;
 
 exports[`Component/Card Date smoke-test 1`] = `
-<div class="mx-container">
-  <article class="mx-card">
-    <figure class="mx-card__media">
-      <picture>
-        <img src="https://picsum.photos/id/56/558/418?grayscale"
-             alt="Blurry bubbles"
+<div class="mx-page default">
+  <div class="mx-container">
+    <article class="mx-card">
+      <div class="mx-card__content mx-vertical-flow-flex">
+        <div class="mx-text--s">
+          25 May 2025
+        </div>
+        <h3>
+          Card title
+        </h3>
+        <div class="mx-text--lede">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </div>
+        <a class="mx-link--more"
+           href="#"
         >
-      </picture>
-    </figure>
-    <div class="mx-card__content mx-vertical-flow-flex">
-      <div class="mx-text--s">
-        25 May 2025
-      </div>
-      <h3>
-        Card title
-      </h3>
-      <div class="mx-text--lede">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
+          <span>
+            Find out more
+          </span>
+        </a>
       </div>
-      <a class="mx-link--more"
-         href="#"
-      >
-        <span>
-          Find out more
-        </span>
-      </a>
-    </div>
-  </article>
+      <figure class="mx-card__media">
+        <picture>
+          <img src="https://picsum.photos/id/56/558/418?grayscale"
+               alt="Blurry bubbles"
+               height="418"
+               width="558"
+          >
+        </picture>
+      </figure>
+    </article>
+  </div>
 </div>
 `;
 
 exports[`Component/Card NoImage smoke-test 1`] = `
-<div class="mx-container">
-  <article class="mx-card">
-    <div class="mx-card__content mx-vertical-flow-flex">
-      <h3>
-        Card title
-      </h3>
-      <div class="mx-text--lede">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
+<div class="mx-page default">
+  <div class="mx-container">
+    <article class="mx-card">
+      <div class="mx-card__content mx-vertical-flow-flex">
+        <h3>
+          Card title
+        </h3>
+        <div class="mx-text--lede">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </div>
+        <a class="mx-link--more"
+           href="#"
+        >
+          <span>
+            Find out more
+          </span>
+        </a>
       </div>
-      <a class="mx-link--more"
-         href="#"
-      >
-        <span>
-          Find out more
-        </span>
-      </a>
-    </div>
-  </article>
+    </article>
+  </div>
 </div>
 `;
 
 exports[`Component/Card Reverse smoke-test 1`] = `
-<div class="mx-container">
-  <article class="mx-card mx-card--reversed">
-    <figure class="mx-card__media">
-      <picture>
-        <img src="https://picsum.photos/id/56/558/418?grayscale"
-             alt="Blurry bubbles"
+<div class="mx-page default">
+  <div class="mx-container">
+    <article class="mx-card mx-card--reversed">
+      <div class="mx-card__content mx-vertical-flow-flex">
+        <h3>
+          Card title
+        </h3>
+        <div class="mx-text--lede">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </div>
+        <a class="mx-link--more"
+           href="#"
         >
-      </picture>
-    </figure>
-    <div class="mx-card__content mx-vertical-flow-flex">
-      <h3>
-        Card title
-      </h3>
-      <div class="mx-text--lede">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
+          <span>
+            Find out more
+          </span>
+        </a>
       </div>
-      <a class="mx-link--more"
-         href="#"
-      >
-        <span>
-          Find out more
-        </span>
-      </a>
-    </div>
-  </article>
+      <figure class="mx-card__media">
+        <picture>
+          <img src="https://picsum.photos/id/56/558/418?grayscale"
+               alt="Blurry bubbles"
+               height="418"
+               width="558"
+          >
+        </picture>
+      </figure>
+    </article>
+  </div>
 </div>
 `;
 
 exports[`Component/Card WithIcon smoke-test 1`] = `
-<div class="mx-container">
-  <article class="mx-card">
-    <div class="mx-card__icon">
-      <span class="mx-icon mx-icon--heart-selected ">
-      </span>
-    </div>
-    <div class="mx-card__content mx-vertical-flow-flex">
-      <h3>
-        Card title
-      </h3>
-      <div class="mx-text--lede">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </div>
-      <a class="mx-link--more"
-         href="#"
-      >
-        <span>
-          Find out more
+<div class="mx-page default">
+  <div class="mx-container">
+    <article class="mx-card">
+      <div class="mx-card__icon">
+        <span class="mx-icon mx-icon--heart-selected ">
         </span>
-      </a>
-    </div>
-  </article>
+      </div>
+      <div class="mx-card__content mx-vertical-flow-flex">
+        <h3>
+          Card title
+        </h3>
+        <div class="mx-text--lede">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </div>
+        <a class="mx-link--more"
+           href="#"
+        >
+          <span>
+            Find out more
+          </span>
+        </a>
+      </div>
+    </article>
+  </div>
 </div>
 `;
 
 exports[`Component/Card WithLinkList smoke-test 1`] = `
-<div class="mx-container">
-  <article class="mx-card">
-    <figure class="mx-card__media">
-      <picture>
-        <img src="https://picsum.photos/id/56/558/418?grayscale"
-             alt="Blurry bubbles"
-        >
-      </picture>
-    </figure>
-    <div class="mx-card__content mx-vertical-flow-flex">
-      <h3>
-        Card title
-      </h3>
-      <div class="mx-text--lede">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
+<div class="mx-page default">
+  <div class="mx-container">
+    <article class="mx-card">
+      <div class="mx-card__content mx-vertical-flow-flex">
+        <h3>
+          Card title
+        </h3>
+        <div class="mx-text--lede">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </div>
+        <ul class="mx-link-list">
+          <li>
+            <a href="#">
+              <span>
+                Link one
+              </span>
+              <span class="mx-icon mx-icon--chevron-right ">
+              </span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span>
+                Link two
+              </span>
+              <span class="mx-icon mx-icon--chevron-right ">
+              </span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span>
+                Link three
+              </span>
+              <span class="mx-icon mx-icon--chevron-right ">
+              </span>
+            </a>
+          </li>
+        </ul>
       </div>
-      <ul class="mx-link-list">
-        <li>
-          <a href="#">
-            <span>
-              Link one
-            </span>
-            <span class="mx-icon mx-icon--chevron-right ">
-            </span>
-          </a>
-        </li>
-        <li>
-          <a href="#">
-            <span>
-              Link two
-            </span>
-            <span class="mx-icon mx-icon--chevron-right ">
-            </span>
-          </a>
-        </li>
-        <li>
-          <a href="#">
-            <span>
-              Link three
-            </span>
-            <span class="mx-icon mx-icon--chevron-right ">
-            </span>
-          </a>
-        </li>
-      </ul>
-    </div>
-  </article>
+      <figure class="mx-card__media">
+        <picture>
+          <img src="https://picsum.photos/id/56/558/418?grayscale"
+               alt="Blurry bubbles"
+               height="418"
+               width="558"
+          >
+        </picture>
+      </figure>
+    </article>
+  </div>
 </div>
 `;
 
 exports[`Component/Card WithTags smoke-test 1`] = `
-<div class="mx-container">
-  <article class="mx-card">
-    <figure class="mx-card__media">
-      <picture>
-        <img src="https://picsum.photos/id/56/558/418?grayscale"
-             alt="Blurry bubbles"
+<div class="mx-page default">
+  <div class="mx-container">
+    <article class="mx-card">
+      <div class="mx-card__content mx-vertical-flow-flex">
+        <h3>
+          Card title
+        </h3>
+        <ul class="mx-tags">
+          <li>
+            <span class="mx-tag">
+              Music
+            </span>
+          </li>
+          <li>
+            <span class="mx-tag">
+              News
+            </span>
+          </li>
+        </ul>
+        <div class="mx-text--lede">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </div>
+        <a class="mx-link--more"
+           href="#"
         >
-      </picture>
-    </figure>
-    <div class="mx-card__content mx-vertical-flow-flex">
-      <h3>
-        Card title
-      </h3>
-      <ul class="mx-tags">
-        <li>
-          <span class="mx-tag">
-            Music
-          </span>
-        </li>
-        <li>
-          <span class="mx-tag">
-            News
+          <span>
+            Find out more
           </span>
-        </li>
-      </ul>
-      <div class="mx-text--lede">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
+        </a>
       </div>
-      <a class="mx-link--more"
-         href="#"
-      >
-        <span>
-          Find out more
-        </span>
-      </a>
-    </div>
-  </article>
+      <figure class="mx-card__media">
+        <picture>
+          <img src="https://picsum.photos/id/56/558/418?grayscale"
+               alt="Blurry bubbles"
+               height="418"
+               width="558"
+          >
+        </picture>
+      </figure>
+    </article>
+  </div>
 </div>
 `;