@pnx-mixtape/mxds 0.0.13 → 0.0.15

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

@@ -12,11 +12,11 @@ exports[`Form/Item Error smoke-test 1`] = `
   </label>
   <input class="mx-input__text error"
          id="form-item"
-         type="text"
          aria-describedby="unique-0"
          aria-invalid="true"
          placeholder="Placeholder"
          aria-label="Text input"
+         type="text"
          value
   >
   <div id="unique-0"
@@ -40,11 +40,11 @@ exports[`Form/Item Fieldset smoke-test 1`] = `
   </label>
   <input class="mx-input__text"
          id="form-item"
-         type="text"
          aria-describedby="unique-0"
          aria-invalid="false"
          placeholder="Placeholder"
          aria-label="Text input"
+         type="text"
          value
   >
   <div id="unique-0"
@@ -65,11 +65,11 @@ exports[`Form/Item FormItem smoke-test 1`] = `
   </label>
   <input class="mx-input__text"
          id="form-item"
-         type="text"
          aria-describedby="unique-0"
          aria-invalid="false"
          placeholder="Placeholder"
          aria-label="Text input"
+         type="text"
          value
   >
   <div id="unique-0"
@@ -93,11 +93,11 @@ exports[`Form/Item Success smoke-test 1`] = `
   </label>
   <input class="mx-input__text success"
          id="form-item"
-         type="text"
          aria-describedby="unique-0"
          aria-invalid="false"
          placeholder="Placeholder"
          aria-label="Text input"
+         type="text"
          value
   >
   <div id="unique-0"

package/src/Form/Label/FormLabel.stories.tsx

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

package/src/Form/Label/FormLabel.tsx

@@ -2,7 +2,7 @@ import { JSX, ComponentPropsWithoutRef } from "react"
 
 type FormLabelProps = ComponentPropsWithoutRef<"label"> & {
   text: string
-  required: boolean
+  required?: boolean
 }
 
 const FormLabel = ({

package/src/Form/Label/Label.stories.ts

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

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

@@ -1,25 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form/Label Inline smoke-test 1`] = `
-<label class="mx-label mx-label--inline"
-       for="label"
->
-  A form label
-</label>
+<div class="mx-page default">
+  <label class="mx-label mx-label--inline"
+         for="label"
+  >
+    A form label
+  </label>
+</div>
 `;
 
 exports[`Form/Label Label smoke-test 1`] = `
-<label class="mx-label "
-       for="label"
->
-  A form label
-</label>
+<div class="mx-page default">
+  <label class="mx-label "
+         for="label"
+  >
+    A form label
+  </label>
+</div>
 `;
 
 exports[`Form/Label Legend smoke-test 1`] = `
-<legend class="mx-legend "
-        for="label"
->
-  A fieldset legend
-</legend>
+<div class="mx-page default">
+  <legend class="mx-legend "
+          for="label"
+  >
+    A fieldset legend
+  </legend>
+</div>
 `;

package/src/Form/Radio/FormRadio.stories.tsx

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

package/src/Form/Radio/FormRadio.tsx

@@ -3,7 +3,7 @@ import {
   PropsWithChildren,
   useRef,
   createContext,
-  useContext,
+  use,
   useId,
 } from "react"
 import {
@@ -35,7 +35,7 @@ const FormRadio = ({
   return (
     <FormItem fieldset {...radioGroupProps}>
       <legend {...labelProps}>{label}</legend>
-      <RadioContext.Provider value={state}>{children}</RadioContext.Provider>
+      <RadioContext value={state}>{children}</RadioContext>
     </FormItem>
   )
 }
@@ -53,8 +53,8 @@ const Radio = ({
   ...props
 }: RadioProps): JSX.Element => {
   const id = useId()
-  const ref = useRef<HTMLInputElement>()
-  const state = useContext(RadioContext)
+  const ref = useRef<HTMLInputElement>(null)
+  const state = use(RadioContext)
   const { inputProps } = useRadio(props, state, ref)
 
   const classes = classNames("mx-radio", {

package/src/Form/Radio/Radio.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "../FormItem/form-item.twig"
 import InputRadio from "./input-radio.twig"
 import Label from "../Label/label.twig"

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

@@ -1,58 +1,62 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form/Radio Checked smoke-test 1`] = `
-<fieldset class="mx-form-item mx-fieldset ">
-  <legend class="mx-legend ">
-    Do you like music?
-  </legend>
-  <div class="mx-radio ">
-    <input id="radio-set-yes"
-           type="radio"
-           name="music"
-           value="yes"
-           checked="checked"
-    >
-    <label for="radio-set-yes">
-      Yes
-    </label>
-  </div>
-  <div class="mx-radio ">
-    <input id="radio-set-no"
-           type="radio"
-           name="music"
-           value="no"
-    >
-    <label for="radio-set-no">
-      No
-    </label>
-  </div>
-</fieldset>
+<div class="mx-page default">
+  <fieldset class="mx-form-item mx-fieldset ">
+    <legend class="mx-legend ">
+      Do you like music?
+    </legend>
+    <div class="mx-radio ">
+      <input id="radio-set-yes"
+             type="radio"
+             name="music"
+             value="yes"
+             checked="checked"
+      >
+      <label for="radio-set-yes">
+        Yes
+      </label>
+    </div>
+    <div class="mx-radio ">
+      <input id="radio-set-no"
+             type="radio"
+             name="music"
+             value="no"
+      >
+      <label for="radio-set-no">
+        No
+      </label>
+    </div>
+  </fieldset>
+</div>
 `;
 
 exports[`Form/Radio Radio smoke-test 1`] = `
-<fieldset class="mx-form-item mx-fieldset ">
-  <legend class="mx-legend ">
-    Do you like music?
-  </legend>
-  <div class="mx-radio ">
-    <input id="radio-set-yes"
-           type="radio"
-           name="music"
-           value="yes"
-    >
-    <label for="radio-set-yes">
-      Yes
-    </label>
-  </div>
-  <div class="mx-radio ">
-    <input id="radio-set-no"
-           type="radio"
-           name="music"
-           value="no"
-    >
-    <label for="radio-set-no">
-      No
-    </label>
-  </div>
-</fieldset>
+<div class="mx-page default">
+  <fieldset class="mx-form-item mx-fieldset ">
+    <legend class="mx-legend ">
+      Do you like music?
+    </legend>
+    <div class="mx-radio ">
+      <input id="radio-set-yes"
+             type="radio"
+             name="music"
+             value="yes"
+      >
+      <label for="radio-set-yes">
+        Yes
+      </label>
+    </div>
+    <div class="mx-radio ">
+      <input id="radio-set-no"
+             type="radio"
+             name="music"
+             value="no"
+      >
+      <label for="radio-set-no">
+        No
+      </label>
+    </div>
+  </fieldset>
+</div>
 `;

package/src/Form/Search/Search.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./search-form.twig"
 import "../form.css"
 
@@ -14,9 +14,6 @@ const meta: Meta<SearchFormType> = {
     action: "#search",
     id: "search-keyword",
   },
-  parameters: {
-    deepControls: { enabled: true },
-  },
 }
 
 export default meta

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

@@ -1,26 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form/Search Search smoke-test 1`] = `
-<form class="mx-form mx-form--inline-button"
-      role="search"
-      action="#search"
->
-  <input class="mx-input__text "
-         id="search-keyword"
-         name="search-form"
-         type="search"
-         value
-         aria-label="Search by keywords"
-         placeholder="Keywords..."
+<div class="mx-page default">
+  <form class="mx-form mx-form--inline-button"
+        role="search"
+        action="#search"
   >
-  <button class="mx-button mx-button--icon-only"
-          type="submit"
-  >
-    <span class="mx-icon mx-icon--search">
-    </span>
-    <span class="sr-only">
-      Search
-    </span>
-  </button>
-</form>
+    <input class="mx-input__text "
+           id="search-keyword"
+           name="search-form"
+           type="search"
+           value
+           aria-label="Search by keywords"
+           placeholder="Keywords..."
+    >
+    <button class="mx-button mx-button--icon-only"
+            type="submit"
+    >
+      <span class="mx-icon mx-icon--search">
+      </span>
+      <span class="sr-only">
+        Search
+      </span>
+    </button>
+  </form>
+</div>
 `;

package/src/Form/Select/FormSelect.stories.tsx

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

package/src/Form/Select/FormSelect.tsx

@@ -16,7 +16,7 @@ const Option = ({ label, value }: OptionProps): JSX.Element => (
   <option value={value}>{label}</option>
 )
 
-type FormSelectProps = ComponentPropsWithoutRef<"select"> & {
+export type FormSelectProps = ComponentPropsWithoutRef<"select"> & {
   options: OptionProps[]
   label?: string
   className?: string

package/src/Form/Select/Select.stories.ts

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

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

@@ -1,20 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form/Select Select smoke-test 1`] = `
-<select class="mx-input__select "
-        id="form-input-select"
-        name="example-form-input"
-        aria-label="Visually hidden label"
-        aria-describedby="unique-0"
->
-  <option value="1">
-    Option 1
-  </option>
-  <option value="2">
-    Option 2
-  </option>
-  <option value="3">
-    Option 3
-  </option>
-</select>
+<div class="mx-page default">
+  <select class="mx-input__select "
+          id="form-input-select"
+          name="example-form-input"
+          aria-label="Visually hidden label"
+          aria-describedby="unique-0"
+  >
+    <option value="1">
+      Option 1
+    </option>
+    <option value="2">
+      Option 2
+    </option>
+    <option value="3">
+      Option 3
+    </option>
+  </select>
+</div>
 `;

package/src/Form/TextInput/FormText.stories.tsx

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

package/src/Form/TextInput/InputDivider.stories.ts

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

package/src/Form/TextInput/TextInput.stories.ts

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

package/src/Form/TextInput/__snapshots__/FormText.stories.tsx.snap

@@ -3,11 +3,11 @@
 exports[`Form/TextInput TextInput smoke-test 1`] = `
 <input class="mx-input__text"
        id="mix-text"
-       type="text"
        aria-describedby="unique-0"
        aria-invalid="false"
        placeholder="Placeholder"
        aria-label="Text input"
+       type="text"
        value
 >
 `;

package/src/Form/TextInput/__snapshots__/InputDivider.stories.ts.snap

@@ -1,28 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form/Text Input/Divider InputDivider smoke-test 1`] = `
-<div class="mx-form-item mx-form-item--inline">
-  <div class="mx-form-item">
-    <label class="mx-label mx-label--inline"
-           for="input1"
-    >
-      Input field
-    </label>
-    <input class="mx-input__text"
-           type="text"
-           id="input1"
-    >
-  </div>
-  <div class="mx-input__divider">
-    OR
-  </div>
-  <div class="mx-form-item">
-    <input class="mx-input__text"
-           type="text"
-           id="input2"
-           placeholder="Other input"
-           aria-label="Other input field"
-    >
+<div class="mx-page default">
+  <div class="mx-form-item mx-form-item--inline">
+    <div class="mx-form-item">
+      <label class="mx-label mx-label--inline"
+             for="input1"
+      >
+        Input field
+      </label>
+      <input class="mx-input__text"
+             type="text"
+             id="input1"
+      >
+    </div>
+    <div class="mx-input__divider">
+      OR
+    </div>
+    <div class="mx-form-item">
+      <input class="mx-input__text"
+             type="text"
+             id="input2"
+             placeholder="Other input"
+             aria-label="Other input field"
+      >
+    </div>
   </div>
 </div>
 `;

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

@@ -1,25 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form/TextInput Icon smoke-test 1`] = `
-<span class="mx-input--icon mx-icon mx-icon--email">
+<div class="mx-page default">
+  <span class="mx-input--icon mx-icon mx-icon--email">
+    <input class="mx-input__text "
+           id="form-input-text"
+           name="example-form-input"
+           type="email"
+           value
+           aria-label="Visually hidden label"
+           placeholder="A text field"
+    >
+  </span>
+</div>
+`;
+
+exports[`Form/TextInput TextInput smoke-test 1`] = `
+<div class="mx-page default">
   <input class="mx-input__text "
          id="form-input-text"
          name="example-form-input"
-         type="email"
+         type="text"
          value
          aria-label="Visually hidden label"
          placeholder="A text field"
   >
-</span>
-`;
-
-exports[`Form/TextInput TextInput smoke-test 1`] = `
-<input class="mx-input__text "
-       id="form-input-text"
-       name="example-form-input"
-       type="text"
-       value
-       aria-label="Visually hidden label"
-       placeholder="A text field"
->
+</div>
 `;

package/src/Form/Textarea/FormTextarea.stories.tsx

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

package/src/Form/Textarea/Textarea.stories.ts

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

package/src/Form/Textarea/__snapshots__/FormTextarea.stories.tsx.snap

@@ -3,10 +3,10 @@
 exports[`Form/Textarea Textarea smoke-test 1`] = `
 <input class="mx-input__text"
        id="mix-textarea"
-       type="text"
        aria-describedby="unique-0"
        aria-invalid="false"
        aria-label="Textarea"
+       type="text"
        value
 >
 `;

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

@@ -1,11 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form/Textarea TextArea smoke-test 1`] = `
-<textarea class="mx-input__textarea "
-          id="form-input-textarea"
-          name="example-form-input"
-          aria-label="Visually hidden label"
-          aria-describedby="unique-0"
->
-</textarea>
+<div class="mx-page default">
+  <textarea class="mx-input__textarea "
+            id="form-input-textarea"
+            name="example-form-input"
+            aria-label="Visually hidden label"
+            aria-describedby="unique-0"
+  >
+  </textarea>
+</div>
 `;