@pnx-mixtape/mxds 0.0.13 → 0.0.15

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

@@ -1,83 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Tile Tile smoke-test 1`] = `
-<div class="grid grid--xs-2-cols grid--md-4-cols spacing--bottom-l">
-  <div class="tile stack ">
-    <div class="tile__content vertical-flow-flex">
-      <h3 class="text--m">
-        Tile title
-      </h3>
-    </div>
-    <a href="#">
-      Tile link
-    </a>
-  </div>
-  <div class="tile stack ">
-    <div class="tile__content vertical-flow-flex">
-      <h3 class="text--m">
-        Tile title
-      </h3>
-    </div>
-    <a href="#">
-      Tile link
-    </a>
-  </div>
-  <div class="tile stack ">
-    <div class="tile__content vertical-flow-flex">
-      <h3 class="text--m">
-        Tile title
-      </h3>
-    </div>
-    <a href="#">
-      Tile link
-    </a>
-  </div>
-  <div class="tile stack ">
-    <div class="tile__content vertical-flow-flex">
-      <h3 class="text--m">
-        Tile title
-      </h3>
-    </div>
-    <a href="#">
-      Tile link
-    </a>
+<div class="mx-page default">
+  <div class="mx-container">
+    <article class="mx-card mx-card--block mx-background--box">
+      <div class="mx-card__content mx-vertical-flow-flex">
+        <h3>
+          Tile title
+        </h3>
+        <div class="mx-text--lede">
+          <p>
+            Tiles are just block cards without an image.
+          </p>
+        </div>
+        <a class="mx-link--more"
+           href="#"
+        >
+          <span>
+            Find out more
+          </span>
+        </a>
+      </div>
+    </article>
   </div>
 </div>
-<div class="grid grid--md-3-cols">
-  <div class="tile stack ">
-    <div class="tile__content vertical-flow-flex">
-      <h3 class="text--m">
-        Tile title
-      </h3>
-    </div>
-    <a href="#">
-      Tile link
-    </a>
-  </div>
-  <div class="tile stack ">
-    <div class="tile__content vertical-flow-flex">
-      <h3 class="text--m">
-        Tile title
-      </h3>
-    </div>
-    <a href="#">
-      Tile link
-    </a>
-  </div>
-  <div class="tile stack ">
-    <div class="tile__content vertical-flow-flex">
-      <h3 class="text--m">
-        Tile title
-      </h3>
-      <p>
-        Tile with some content
-      </p>
-      <a href="#"
-         class="link align--bottom"
-      >
-        read more
-      </a>
-    </div>
+`;
+
+exports[`Component/Tile WithIcon smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-container">
+    <article class="mx-card mx-card--block mx-background--box">
+      <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>
+          Tile title
+        </h3>
+        <div class="mx-text--lede">
+          <p>
+            Tiles are just block cards without an image.
+          </p>
+        </div>
+        <a class="mx-link--more"
+           href="#"
+        >
+          <span>
+            Find out more
+          </span>
+        </a>
+      </div>
+    </article>
   </div>
 </div>
 `;

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

@@ -1,26 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Tile Tile smoke-test 1`] = `
-<div class="tile tile--small stack">
-  <div class="tile__content vertical-flow-flex">
-    <h3 class="mx-text--l"
+<div class="mx-card mx-card--block mx-background--box">
+  <div class="mx-card__content mx-vertical-flow-flex">
+    <h3 class
         id="tile-title"
     >
       Tile title
     </h3>
   </div>
-  <a href="http://example.com"
-     class="mx-link"
-  >
-    Tile link
-  </a>
 </div>
 `;
 
 exports[`Component/Tile WithContent smoke-test 1`] = `
-<div class="tile tile--small stack">
-  <div class="tile__content vertical-flow-flex">
-    <h3 class="mx-text--l"
+<div class="mx-card mx-card--block mx-background--box">
+  <div class="mx-card__content mx-vertical-flow-flex">
+    <h3 class
         id="tile-title"
     >
       Tile title
@@ -29,10 +24,5 @@ exports[`Component/Tile WithContent smoke-test 1`] = `
       Tile with some content
     </p>
   </div>
-  <a href="http://example.com"
-     class="mx-link"
-  >
-    Tile link
-  </a>
 </div>
 `;

package/src/Form/Checkbox/Checkbox.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./input-checkbox.twig"
 import "../form.css"
 import { FormControl as FormControlType } from "@pnx-mixtape/ids-shape"

package/src/Form/Checkbox/FormCheckbox.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import FormCheckbox, { Checkbox, SingleCheckbox } from "./FormCheckbox"
 
 const meta: Meta<typeof SingleCheckbox> = {

package/src/Form/Checkbox/FormCheckbox.tsx

@@ -2,7 +2,7 @@ import {
   createContext,
   JSX,
   PropsWithChildren,
-  useContext,
+  use,
   useId,
   useRef,
 } from "react"
@@ -41,9 +41,7 @@ const FormCheckbox = ({
   return (
     <FormItem fieldset {...groupProps}>
       <legend {...labelProps}>{label}</legend>
-      <CheckboxContext.Provider value={state}>
-        {children}
-      </CheckboxContext.Provider>
+      <CheckboxContext value={state}>{children}</CheckboxContext>
     </FormItem>
   )
 }
@@ -61,8 +59,8 @@ const Checkbox = ({
   ...props
 }: CheckboxProps): JSX.Element => {
   const id = useId()
-  const ref = useRef<HTMLInputElement>()
-  const state = useContext(CheckboxContext)
+  const ref = useRef<HTMLInputElement>(null)
+  const state = use(CheckboxContext)
   const { inputProps } = useCheckboxGroupItem(props, state, ref)
 
   const classes = classNames("mx-checkbox", {
@@ -97,7 +95,7 @@ const SingleCheckbox = ({
   ...props
 }: SingleCheckboxProps): JSX.Element => {
   const id = useId()
-  const ref = useRef<HTMLInputElement>()
+  const ref = useRef<HTMLInputElement>(null)
   const state = useToggleState(props)
   const { inputProps } = useCheckbox(props, state, ref)
 

package/src/Form/Checkbox/__snapshots__/Checkbox.stories.ts.snap

@@ -1,28 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form/Checkbox Checkbox smoke-test 1`] = `
-<div class="mx-checkbox ">
-  <input id="single-checkbox"
-         type="checkbox"
-         name="terms"
-         value="agree"
-  >
-  <label for="single-checkbox">
-    I agree to the terms and conditions.
-  </label>
+<div class="mx-page default">
+  <div class="mx-checkbox ">
+    <input id="single-checkbox"
+           type="checkbox"
+           name="terms"
+           value="agree"
+    >
+    <label for="single-checkbox">
+      I agree to the terms and conditions.
+    </label>
+  </div>
 </div>
 `;
 
 exports[`Form/Checkbox Checked smoke-test 1`] = `
-<div class="mx-checkbox ">
-  <input id="single-checkbox"
-         type="checkbox"
-         name="terms"
-         value="agree"
-         checked="checked"
-  >
-  <label for="single-checkbox">
-    I agree to the terms and conditions.
-  </label>
+<div class="mx-page default">
+  <div class="mx-checkbox ">
+    <input id="single-checkbox"
+           type="checkbox"
+           name="terms"
+           value="agree"
+           checked="checked"
+    >
+    <label for="single-checkbox">
+      I agree to the terms and conditions.
+    </label>
+  </div>
 </div>
 `;

package/src/Form/Description/Description.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./form-description.twig"
 import "../form.css"
 import { FormDescription as FormDescriptionType } from "@pnx-mixtape/ids-shape"

package/src/Form/Description/FormDescription.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./FormDescription"
 
 const meta: Meta<typeof Component> = {

package/src/Form/Description/FormStatus.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./form-status.twig"
 import "../form.css"
 import {

package/src/Form/Description/__snapshots__/Description.stories.ts.snap

@@ -1,10 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form/Description Description smoke-test 1`] = `
-<div class="mx-description"
-     id="help-description"
-     role="tooltip"
->
-  Help text that provides additional information about the field.
+<div class="mx-page default">
+  <div class="mx-description"
+       id="help-description"
+       role="tooltip"
+  >
+    Help text that provides additional information about the field.
+  </div>
 </div>
 `;

package/src/Form/Description/__snapshots__/FormStatus.stories.ts.snap

@@ -1,19 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form/Description/FormStatus Message smoke-test 1`] = `
-<div class="mx-error-message "
-     id="status-message"
-     role="tooltip"
->
-  Help text that provides additional information about the field.
+<div class="mx-page default">
+  <div class="mx-error-message "
+       id="status-message"
+       role="tooltip"
+  >
+    Help text that provides additional information about the field.
+  </div>
 </div>
 `;
 
 exports[`Form/Description/FormStatus Success smoke-test 1`] = `
-<div class=" mx-success-message"
-     id="status-message"
-     role="tooltip"
->
-  Help text that provides additional information about the field.
+<div class="mx-page default">
+  <div class=" mx-success-message"
+       id="status-message"
+       role="tooltip"
+  >
+    Help text that provides additional information about the field.
+  </div>
 </div>
 `;

package/src/Form/Form/Form.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Form"
 
 const meta: Meta<typeof Component> = {

package/src/Form/Form/FormTitle.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./FormTitle"
 
 const meta: Meta<typeof Component> = {

package/src/Form/FormItem/FormItem.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./form-item.twig"
 import FormDescription from "../Description/form-description.twig"
 import FormStatus from "../Description/form-status.twig"
@@ -33,9 +33,6 @@ const meta: Meta<FormItemType> = {
       hasDescription: true,
     }),
   },
-  parameters: {
-    deepControls: { enabled: true },
-  },
   argTypes: {
     // @ts-expect-error The controls follow the shape
     "status.type": {

package/src/Form/FormItem/FormItem.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj, composeStories } from "@storybook/react"
+import { Meta, StoryObj, composeStories } from "@storybook/react-vite"
 import Component from "./FormItem"
 import * as LabelStories from "../Label/FormLabel.stories"
 import * as InputStories from "../TextInput/FormText.stories"

package/src/Form/FormItem/__snapshots__/FormItem.stories.ts.snap

@@ -1,133 +1,143 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form/FormItem DescriptionBefore smoke-test 1`] = `
-<div class="mx-form-item ">
-  <label class="mx-label "
-         for="form-item"
-  >
-    What's your favourite music?
-  </label>
-  <div class="mx-description"
-       id="unique-0"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
+<div class="mx-page default">
+  <div class="mx-form-item ">
+    <label class="mx-label "
+           for="form-item"
+    >
+      What's your favourite music?
+    </label>
+    <div class="mx-description"
+         id="unique-0"
+         role="tooltip"
+    >
+      Help text that provides additional information about the field.
+    </div>
+    <input class="mx-input__text "
+           id="form-item"
+           name="example-form-item"
+           type="text"
+           value
+           placeholder="eg. Funk, Soul, Blues.."
+           aria-describedby="unique-0"
+    >
   </div>
-  <input class="mx-input__text "
-         id="form-item"
-         name="example-form-item"
-         type="text"
-         value
-         placeholder="eg. Funk, Soul, Blues.."
-         aria-describedby="unique-0"
-  >
 </div>
 `;
 
 exports[`Form/FormItem Error smoke-test 1`] = `
-<div class="mx-form-item ">
-  <label class="mx-label "
-         for="form-item"
-  >
-    What's your favourite music?
-  </label>
-  <input class="mx-input__text error "
-         id="form-item"
-         name="example-form-item"
-         type="text"
-         value="Musicals"
-         placeholder="eg. Funk, Soul, Blues.."
-         aria-describedby="unique-0"
-         aria-invalid="true"
-  >
-  <div class="mx-description"
-       id="help-form-item"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
-  </div>
-  <div class="mx-error-message "
-       id="status-form-item"
-       role="tooltip"
-  >
-    Oops, you made a mistake.
+<div class="mx-page default">
+  <div class="mx-form-item ">
+    <label class="mx-label "
+           for="form-item"
+    >
+      What's your favourite music?
+    </label>
+    <input class="mx-input__text error "
+           id="form-item"
+           name="example-form-item"
+           type="text"
+           value="Musicals"
+           placeholder="eg. Funk, Soul, Blues.."
+           aria-describedby="unique-0"
+           aria-invalid="true"
+    >
+    <div class="mx-description"
+         id="help-form-item"
+         role="tooltip"
+    >
+      Help text that provides additional information about the field.
+    </div>
+    <div class="mx-error-message "
+         id="status-form-item"
+         role="tooltip"
+    >
+      Oops, you made a mistake.
+    </div>
   </div>
 </div>
 `;
 
 exports[`Form/FormItem Fieldset smoke-test 1`] = `
-<fieldset class="mx-form-item mx-fieldset ">
-  <legend class="mx-legend ">
-    What's your favourite music?
-  </legend>
-  <input class="mx-input__text "
-         id="form-item"
-         name="example-form-item"
-         type="text"
-         value
-         aria-label="Visually hidden label"
-         placeholder="eg. Funk, Soul, Blues.."
-         aria-describedby="unique-0"
-  >
-  <div class="mx-description"
-       id="unique-0"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
-  </div>
-</fieldset>
+<div class="mx-page default">
+  <fieldset class="mx-form-item mx-fieldset ">
+    <legend class="mx-legend ">
+      What's your favourite music?
+    </legend>
+    <input class="mx-input__text "
+           id="form-item"
+           name="example-form-item"
+           type="text"
+           value
+           aria-label="Visually hidden label"
+           placeholder="eg. Funk, Soul, Blues.."
+           aria-describedby="unique-0"
+    >
+    <div class="mx-description"
+         id="unique-0"
+         role="tooltip"
+    >
+      Help text that provides additional information about the field.
+    </div>
+  </fieldset>
+</div>
 `;
 
 exports[`Form/FormItem FormItem smoke-test 1`] = `
-<div class="mx-form-item ">
-  <label class="mx-label "
-         for="form-item"
-  >
-    What's your favourite music?
-  </label>
-  <input class="mx-input__text "
-         id="form-item"
-         name="example-form-item"
-         type="text"
-         value
-         placeholder="eg. Funk, Soul, Blues.."
-         aria-describedby="unique-0"
-  >
-  <div class="mx-description"
-       id="unique-0"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
+<div class="mx-page default">
+  <div class="mx-form-item ">
+    <label class="mx-label "
+           for="form-item"
+    >
+      What's your favourite music?
+    </label>
+    <input class="mx-input__text "
+           id="form-item"
+           name="example-form-item"
+           type="text"
+           value
+           placeholder="eg. Funk, Soul, Blues.."
+           aria-describedby="unique-0"
+    >
+    <div class="mx-description"
+         id="unique-0"
+         role="tooltip"
+    >
+      Help text that provides additional information about the field.
+    </div>
   </div>
 </div>
 `;
 
 exports[`Form/FormItem Success smoke-test 1`] = `
-<div class="mx-form-item ">
-  <label class="mx-label "
-         for="form-item"
-  >
-    What's your favourite music?
-  </label>
-  <input class="mx-input__text  success"
-         id="form-item"
-         name="example-form-item"
-         type="text"
-         value="Jazz"
-         placeholder="eg. Funk, Soul, Blues.."
-         aria-describedby="unique-0"
-  >
-  <div class="mx-description"
-       id="help-form-item"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
-  </div>
-  <div class=" mx-success-message"
-       id="status-form-item"
-       role="tooltip"
-  >
-    Congratulations, you are correct!
+<div class="mx-page default">
+  <div class="mx-form-item ">
+    <label class="mx-label "
+           for="form-item"
+    >
+      What's your favourite music?
+    </label>
+    <input class="mx-input__text  success"
+           id="form-item"
+           name="example-form-item"
+           type="text"
+           value="Jazz"
+           placeholder="eg. Funk, Soul, Blues.."
+           aria-describedby="unique-0"
+    >
+    <div class="mx-description"
+         id="help-form-item"
+         role="tooltip"
+    >
+      Help text that provides additional information about the field.
+    </div>
+    <div class=" mx-success-message"
+         id="status-form-item"
+         role="tooltip"
+    >
+      Congratulations, you are correct!
+    </div>
   </div>
 </div>
 `;