@pnx-mixtape/mxds 0.1.0-rc.1 → 0.1.0-rc.2

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

@@ -6,13 +6,13 @@ exports[`Checkbox 1`] = `
   <li>
           <div class="mx-tag">
         <input type="checkbox" id="music" name="tag" value="music">
-        <label for="music">Music</label>
+        <label class="mx-icon mx-icon--tick" for="music">Music</label>
       </div>
     </li>
 <li>
           <div class="mx-tag">
         <input type="checkbox" id="news" name="tag" value="news">
-        <label for="news">News</label>
+        <label class="mx-icon mx-icon--tick" for="news">News</label>
       </div>
     </li>
 

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

@@ -1,3 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Tag 1`] = `"<div class="mx-tag">Tag name</div>"`;
+
+exports[`Variants 1`] = `"<div style="display: flex; gap: 1rem;"><div class="mx-tag mx-tag--info">info</div><div class="mx-tag mx-tag--success">success</div><div class="mx-tag mx-tag--warning">warning</div><div class="mx-tag mx-tag--error">error</div><div class="mx-tag mx-tag--featured">featured</div></div>"`;

package/src/Component/Tag/tag-item.twig

@@ -1,4 +1,4 @@
-{% set tagClasses = ['mx-tag', dismissible ? 'mx-tag--dismissible' : null] %}
+{% set tagClasses = ['mx-tag', dismissible ? 'mx-tag--dismissible' : null, variant ? 'mx-tag--' ~ variant : null] %}
 {% set tagAttributes = (tagAttributes ?? create_attribute()).addClass(tagClasses) %}
 <li>
     {% if type == "link" %}
@@ -10,7 +10,7 @@
                name="{{ item.name }}"
                value="{{ item.value }}"
             {% if item.checked %} checked{% endif %}>
-        <label for="{{ item.id }}">{{ item.label }}</label>
+        <label class="mx-icon mx-icon--tick" for="{{ item.id }}">{{ item.label }}</label>
       </div>
     {% else %}
         <span{{ tagAttributes }}>

package/src/Component/Tag/tag.css

@@ -3,7 +3,7 @@
  */
 
 @layer design-system.components {
-  /* @public --tag-background --tag-foreground --tag-font-size --tags-gap */
+  /* @public --tag-background --tag-foreground --tag-font-size --tags-gap --tag-letter-spacing */
   .mx-tag {
     display: inline-flex;
     inline-size: fit-content;
@@ -16,6 +16,7 @@
     line-height: var(--line-height, 2);
     border-radius: var(--border-radius);
     border: var(--line-width, 1px) solid var(--line-colour, currentcolor);
+    letter-spacing: var(--tag-letter-spacing, 0);
     text-decoration: none;
     overflow: clip;
     overflow-clip-margin: var(--spacing-xxxs);
@@ -36,12 +37,35 @@
       font-size: inherit;
       color: inherit;
       margin: 0;
+      gap: var(--spacing-xxxs);
     }
 
-    &:is(a:hover, :has(input:checked)) {
+    /* the checkmark icon (from the shared mx-icon set) is always reserved so
+       checking the tag doesn't change its size — only its visibility toggles */
+    & label.mx-icon--tick::before {
+      --icon-size: 1em;
+
+      opacity: 0;
+    }
+
+    &:is(a:hover):not(
+        :is(.mx-tag--info, .mx-tag--success, .mx-tag--warning, .mx-tag--error, .mx-tag--featured)
+      ) {
       --tag-foreground: var(--link-colour, var(--colour-primary));
     }
 
+    &:has(input:checked):not(
+        :is(.mx-tag--info, .mx-tag--success, .mx-tag--warning, .mx-tag--error, .mx-tag--featured)
+      ) {
+      --tag-background: var(--link-colour, var(--colour-primary));
+      --tag-foreground: var(--colour-foreground-reverse);
+      --line-colour: var(--tag-background);
+    }
+
+    &:has(input:checked) label.mx-icon--tick::before {
+      opacity: 1;
+    }
+
     &:empty {
       display: none;
     }
@@ -76,6 +100,56 @@
     }
   }
 
+  .mx-tag--info,
+  .mx-tag--success,
+  .mx-tag--warning,
+  .mx-tag--error,
+  .mx-tag--featured {
+    --line-colour: var(--tag-background);
+    --outline-color: var(--tag-background);
+  }
+
+  .mx-tag--info {
+    --tag-accent: var(--colour-info);
+    --tag-background: var(--tag-accent);
+    --tag-foreground: var(--colour-foreground-reverse);
+  }
+
+  .mx-tag--success {
+    --tag-accent: var(--colour-success);
+    --tag-background: var(--tag-accent);
+    --tag-foreground: var(--colour-foreground-reverse);
+  }
+
+  .mx-tag--warning {
+    --tag-accent: var(--colour-warning);
+    --tag-background: var(--tag-accent);
+    --tag-foreground: var(--colour-foreground-reverse);
+  }
+
+  .mx-tag--error {
+    --tag-accent: var(--colour-error);
+    --tag-background: var(--tag-accent);
+    --tag-foreground: var(--colour-foreground-reverse);
+  }
+
+  .mx-tag--featured {
+    --tag-accent: var(--colour-featured, var(--colour-accent));
+    --tag-background: var(--tag-accent);
+    --tag-foreground: var(--colour-featured-foreground, var(--colour-foreground));
+  }
+
+  .mx-tag:is(.mx-tag--info, .mx-tag--success, .mx-tag--warning, .mx-tag--error):is(a:hover) {
+    --tag-background: color-mix(in oklch, var(--tag-accent), black 20%);
+    --line-colour: var(--tag-background);
+  }
+
+  .mx-tag--featured:is(a:hover) {
+    /* featured keeps dark text, so a smaller darken step protects contrast */
+    --tag-background: color-mix(in oklch, var(--tag-accent), black 10%);
+    --line-colour: var(--tag-background);
+  }
+
   .mx-tags {
     padding-inline: 0;
     list-style: none;

package/src/Form/Autocomplete/Autocomplete.stories.ts

@@ -185,9 +185,14 @@ export const Autocomplete: Story = {
       await userEvent.clear(input)
       await expect(input).toHaveValue("")
       await expect(input).toHaveAttribute("aria-expanded", "false")
-      await waitFor(() => expect(canvas.queryByRole("option")).not.toBeInTheDocument(), {
-        timeout: 2000,
-      })
+      // `hidden: true` includes the listbox even while it's closed (`hidden`
+      // attribute set) - otherwise this resolves immediately regardless of
+      // whether the stale options were actually removed, since closed
+      // elements are excluded from accessibility queries by default.
+      await waitFor(
+        () => expect(canvas.queryByRole("option", { hidden: true })).not.toBeInTheDocument(),
+        { timeout: 2000 },
+      )
       // Clear focus.
       await userEvent.click(canvasElement)
     })

package/src/Form/Autocomplete/Autocomplete.tsx

@@ -207,10 +207,7 @@ const Autocomplete = ({
           id={id}
           type={type}
           role="combobox"
-          className={classNames("mx-input__text", {
-            error: status === FormStatus.INVALID,
-            success: status === FormStatus.VALID,
-          })}
+          className="mx-input__text"
           value={state.inputValue}
           autoComplete="off"
           aria-expanded={state.isOpen}

package/src/Form/Autocomplete/README.md

@@ -32,18 +32,18 @@ This is a field-level component only — pair it with `FormItem` and `FormLabel`
 
 **autocomplete.twig props:**
 
-| Prop             | Type                                 | Required | Default              | Description                                                                                          |
-| ---------------- | ------------------------------------ | -------- | -------------------- | ---------------------------------------------------------------------------------------------------- |
-| `id`             | `string`                             | Yes      | —                    | `id` on the `<input>`; also used to derive the listbox/option ids                                    |
-| `name`           | `string`                             | No       | —                    | `name` attribute on the `<input>`                                                                    |
-| `label`          | `string`                             | No       | —                    | `aria-label` on the `<input>` (visually hidden)                                                      |
-| `type`           | `"text" \| "search"`                 | No       | `"text"`             | `"search"` also renders an icon-only submit button                                                   |
-| `options`        | `{ label: string, value: string }[]` | No       | —                    | The **current** suggestions to render as `<li role="option">` — not a full list to filter, see below |
-| `value`          | `string`                             | No       | —                    | Initial `<input>` value                                                                              |
-| `placeholder`    | `string`                             | No       | —                    | `<input>` placeholder                                                                                |
-| `required`       | `boolean`                            | No       | `false`              | Adds `required` to the `<input>`                                                                     |
-| `status`         | `"default" \| "valid" \| "invalid"`  | No       | `"default"`          | Adds `.error`/`.success` and `aria-invalid` to the `<input>`                                         |
-| `noResultsLabel` | `string`                             | No       | `"No results found"` | Message announced when there are zero current options and a query                                    |
+| Prop             | Type                                 | Required | Default              | Description                                                                                                                                     |
+| ---------------- | ------------------------------------ | -------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`             | `string`                             | Yes      | —                    | `id` on the `<input>`; also used to derive the listbox/option ids                                                                               |
+| `name`           | `string`                             | No       | —                    | `name` attribute on the `<input>`                                                                                                               |
+| `label`          | `string`                             | No       | —                    | `aria-label` on the `<input>` (visually hidden)                                                                                                 |
+| `type`           | `"text" \| "search"`                 | No       | `"text"`             | `"search"` also renders an icon-only submit button                                                                                              |
+| `options`        | `{ label: string, value: string }[]` | No       | —                    | The **current** suggestions to render as `<li role="option">` — not a full list to filter, see below                                            |
+| `value`          | `string`                             | No       | —                    | Initial `<input>` value                                                                                                                         |
+| `placeholder`    | `string`                             | No       | —                    | `<input>` placeholder                                                                                                                           |
+| `required`       | `boolean`                            | No       | `false`              | Adds `required` to the `<input>`                                                                                                                |
+| `status`         | `"default" \| "valid" \| "invalid"`  | No       | `"default"`          | Sets `aria-invalid` on the `<input>` (red border). Live `:user-*` colours need `mx-validate` on the `<input>` or the `.mx-autocomplete` wrapper |
+| `noResultsLabel` | `string`                             | No       | `"No results found"` | Message announced when there are zero current options and a query                                                                               |
 
 Registers as `<mx-autocomplete>` — import the element to activate its behaviour:
 
@@ -140,19 +140,19 @@ const Example = () => {
 
 **`Autocomplete` props:**
 
-| Prop             | Type                                   | Default              | Description                                                                                                          |
-| ---------------- | -------------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| `id`             | `string`                               | —                    | `id` on the `<input>`; also used to derive the listbox/option ids                                                    |
-| `label`          | `string`                               | —                    | `aria-label` on the `<input>` (visually hidden)                                                                      |
-| `type`           | `"text" \| "search"`                   | `"text"`             | `"search"` also renders an icon-only submit button (`onSubmit`)                                                      |
-| `options`        | `AutocompleteOption[]`                 | —                    | The **current** results to display — not filtered further, see below                                                 |
-| `onSearch`       | `(query: string) => void`              | —                    | Called on every keystroke with the trimmed input value — debounce it yourself and feed matches back in via `options` |
-| `value`          | `string`                               | `""`                 | Initial `<input>` value (uncontrolled after that)                                                                    |
-| `status`         | `FormStatus`                           | `FormStatus.DEFAULT` | Adds `.error`/`.success` and `aria-invalid`                                                                          |
-| `noResultsLabel` | `string`                               | `"No results found"` | Message announced when `options` is empty and there's a query                                                        |
-| `onSelect`       | `(option: AutocompleteOption) => void` | —                    | Called when an option is chosen by click or <kbd>Enter</kbd>                                                         |
-| `hideOnBlur`     | `boolean`                              | `true`               | Close the listbox on blur                                                                                            |
-| `className`      | `string`                               | —                    | Extra class on the root                                                                                              |
+| Prop             | Type                                   | Default              | Description                                                                                                                                               |
+| ---------------- | -------------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`             | `string`                               | —                    | `id` on the `<input>`; also used to derive the listbox/option ids                                                                                         |
+| `label`          | `string`                               | —                    | `aria-label` on the `<input>` (visually hidden)                                                                                                           |
+| `type`           | `"text" \| "search"`                   | `"text"`             | `"search"` also renders an icon-only submit button (`onSubmit`)                                                                                           |
+| `options`        | `AutocompleteOption[]`                 | —                    | The **current** results to display — not filtered further, see below                                                                                      |
+| `onSearch`       | `(query: string) => void`              | —                    | Called on every keystroke with the trimmed input value — debounce it yourself and feed matches back in via `options`                                      |
+| `value`          | `string`                               | `""`                 | Initial `<input>` value (uncontrolled after that)                                                                                                         |
+| `status`         | `FormStatus`                           | `FormStatus.DEFAULT` | Sets `aria-invalid` (red border). Live `:user-*` colours need `mx-validate` on the `.mx-autocomplete` wrapper — `className` lands there, not on the input |
+| `noResultsLabel` | `string`                               | `"No results found"` | Message announced when `options` is empty and there's a query                                                                                             |
+| `onSelect`       | `(option: AutocompleteOption) => void` | —                    | Called when an option is chosen by click or <kbd>Enter</kbd>                                                                                              |
+| `hideOnBlur`     | `boolean`                              | `true`               | Close the listbox on blur                                                                                                                                 |
+| `className`      | `string`                               | —                    | Extra class on the root                                                                                                                                   |
 
 Any other native `<input>` prop (e.g. `placeholder`, `required`, `disabled`) is passed through to the `<input>`.
 
@@ -165,7 +165,7 @@ Any other native `<input>` prop (e.g. `placeholder`, `required`, `disabled`) is
 
 ## Modifiers
 
-This component has no BEM modifier classes — its only visual states (`error`/`success`) come from the shared `.mx-input__text` classes documented in `Form/form.css`.
+This component has no BEM modifier classes — its border states come from the shared validation rules in `Form/form.css`: `aria-invalid="true"` for explicit errors, and `:user-valid` / `:user-invalid` once `mx-validate` is added to the `<input>` (Twig, via `attributes`) or the `.mx-autocomplete` wrapper (React, via `className`).
 
 ---
 

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

@@ -19,7 +19,7 @@ exports[`Invalid 1`] = `
 "
 <mx-autocomplete class="mx-autocomplete">
   <div class="mx-autocomplete__control mx-form--inline-button">
-    <input class="mx-input__text error" id="autocomplete-fruit" name="unique-0" type="text" role="combobox" aria-expanded="false" aria-controls="unique-0" aria-autocomplete="list" aria-activedescendant="" aria-describedby="unique-0" aria-label="Choose a fruit" autocomplete="off" placeholder="Start typing a fruit…" aria-invalid="true">
+    <input class="mx-input__text" id="autocomplete-fruit" name="unique-0" type="text" role="combobox" aria-expanded="false" aria-controls="unique-0" aria-autocomplete="list" aria-activedescendant="" aria-describedby="unique-0" aria-label="Choose a fruit" autocomplete="off" placeholder="Start typing a fruit…" aria-invalid="true">
       </div>
   <div class="mx-autocomplete__suggestions">
     

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

@@ -2,7 +2,7 @@
 
 exports[`Autocomplete 1`] = `"<div class="mx-autocomplete"><div class="mx-autocomplete__control mx-form--inline-button"><input placeholder="Start typing a fruit…" id="autocomplete-fruit" role="combobox" class="mx-input__text" autocomplete="off" aria-expanded="false" aria-controls="autocomplete-fruit-listbox" aria-autocomplete="list" aria-label="Choose a fruit" aria-describedby="help-autocomplete-fruit" aria-invalid="false" type="text" value="" name="fruit"></div><div class="mx-autocomplete__suggestions"><ul id="autocomplete-fruit-listbox" role="listbox" class="mx-autocomplete__listbox" hidden=""></ul><output class="sr-only" aria-live="polite"></output></div></div>"`;
 
-exports[`Invalid 1`] = `"<div class="mx-autocomplete"><div class="mx-autocomplete__control mx-form--inline-button"><input placeholder="Start typing a fruit…" id="autocomplete-fruit" role="combobox" class="mx-input__text error" autocomplete="off" aria-expanded="false" aria-controls="autocomplete-fruit-listbox" aria-autocomplete="list" aria-label="Choose a fruit" aria-describedby="help-autocomplete-fruit" aria-invalid="true" type="text" value="" name="fruit"></div><div class="mx-autocomplete__suggestions"><ul id="autocomplete-fruit-listbox" role="listbox" class="mx-autocomplete__listbox" hidden=""></ul><output class="sr-only" aria-live="polite"></output></div></div>"`;
+exports[`Invalid 1`] = `"<div class="mx-autocomplete"><div class="mx-autocomplete__control mx-form--inline-button"><input placeholder="Start typing a fruit…" id="autocomplete-fruit" role="combobox" class="mx-input__text" autocomplete="off" aria-expanded="false" aria-controls="autocomplete-fruit-listbox" aria-autocomplete="list" aria-label="Choose a fruit" aria-describedby="help-autocomplete-fruit" aria-invalid="true" type="text" value="" name="fruit"></div><div class="mx-autocomplete__suggestions"><ul id="autocomplete-fruit-listbox" role="listbox" class="mx-autocomplete__listbox" hidden=""></ul><output class="sr-only" aria-live="polite"></output></div></div>"`;
 
 exports[`Required 1`] = `"<div class="mx-autocomplete"><div class="mx-autocomplete__control mx-form--inline-button"><input placeholder="Start typing a fruit…" required="" id="autocomplete-fruit" role="combobox" class="mx-input__text" autocomplete="off" aria-expanded="false" aria-controls="autocomplete-fruit-listbox" aria-autocomplete="list" aria-label="Choose a fruit" aria-describedby="help-autocomplete-fruit" aria-invalid="false" type="text" value="" name="fruit"></div><div class="mx-autocomplete__suggestions"><ul id="autocomplete-fruit-listbox" role="listbox" class="mx-autocomplete__listbox" hidden=""></ul><output class="sr-only" aria-live="polite"></output></div></div>"`;
 

package/src/Form/Autocomplete/autocomplete.twig

@@ -1,7 +1,5 @@
 {% set classes = [
   'mx-input__text',
-  status == "invalid" ? "error" : null,
-  status == "valid" ? "success" : null,
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 {% set status = status|default("default") %}

package/src/Form/Checkbox/FormCheckbox.tsx

@@ -51,10 +51,7 @@ const Checkbox = ({
   const state = use(CheckboxContext)
   const { inputProps } = useCheckboxGroupItem(props, state, ref)
 
-  const classes = classNames("mx-checkbox", className, {
-    error: status === FormStatus.INVALID,
-    success: status === FormStatus.VALID,
-  })
+  const classes = classNames("mx-checkbox", className)
 
   return (
     <div className={classes}>
@@ -81,10 +78,7 @@ const SingleCheckbox = ({
   const state = useToggleState(props)
   const { inputProps } = useCheckbox(props, state, ref)
 
-  const classes = classNames("mx-checkbox", className, {
-    error: status === FormStatus.INVALID,
-    success: status === FormStatus.VALID,
-  })
+  const classes = classNames("mx-checkbox", className)
 
   return (
     <div className={classes}>

package/src/Form/Checkbox/README.md

@@ -24,8 +24,8 @@ Accessible checkbox and radio group components powered by [react-aria](https://r
   checked: true,
 } %}
 
-{# Required checkbox with invalid status — adds the "error" class
-   and aria-invalid, plus aria-describedby pointing at status-{id} #}
+{# Required checkbox with invalid status — adds aria-invalid (which paints
+   the red border), plus aria-describedby pointing at status-{id} #}
 {% include '@mixtape/Form/Checkbox/input-checkbox.twig' with {
   id: 'terms',
   name: 'terms',
@@ -39,17 +39,17 @@ Accessible checkbox and radio group components powered by [react-aria](https://r
 
 **input-checkbox.twig props** (composed from `FormControl` in `ids-shape` — checkbox/radio share the same template):
 
-| Prop             | Type              | Required | Description                                                                                                         |
-| ---------------- | ----------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
-| `id`             | `string`          | Yes      | Input id — also used to derive the `aria-describedby` ids (`help-{id}`, `status-{id}`)                              |
-| `name`           | `string`          | Yes      | `name` attribute on the input                                                                                       |
-| `value`          | `string`          | Yes      | `value` attribute on the input                                                                                      |
-| `label`          | `string`          | Yes      | Label text rendered inside `<label for="{id}">`                                                                     |
-| `checked`        | `boolean`         | No       | Adds `checked="checked"` to the input                                                                               |
-| `required`       | `boolean`         | No       | Adds the `required` attribute                                                                                       |
-| `status`         | `FormStatusTypes` | No       | `invalid` adds the `error` class and `aria-invalid="true"`; `valid` adds the `success` class. Defaults to `default` |
-| `hasDescription` | `boolean`         | No       | When `true`, `aria-describedby` is wired up to `help-{id}` (and `status-{id}` when `status` is set)                 |
-| `attributes`     | `Attribute`       | No       | Optional Drupal-style attributes object — `mx-checkbox` (and the status class) is always merged on top              |
+| Prop             | Type              | Required | Description                                                                                                                                        |
+| ---------------- | ----------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`             | `string`          | Yes      | Input id — also used to derive the `aria-describedby` ids (`help-{id}`, `status-{id}`)                                                             |
+| `name`           | `string`          | Yes      | `name` attribute on the input                                                                                                                      |
+| `value`          | `string`          | Yes      | `value` attribute on the input                                                                                                                     |
+| `label`          | `string`          | Yes      | Label text rendered inside `<label for="{id}">`                                                                                                    |
+| `checked`        | `boolean`         | No       | Adds `checked="checked"` to the input                                                                                                              |
+| `required`       | `boolean`         | No       | Adds the `required` attribute                                                                                                                      |
+| `status`         | `FormStatusTypes` | No       | `invalid` adds `aria-invalid="true"`, which paints the red border. Live `:user-*` colours need `mx-validate` on the wrapper. Defaults to `default` |
+| `hasDescription` | `boolean`         | No       | When `true`, `aria-describedby` is wired up to `help-{id}` (and `status-{id}` when `status` is set)                                                |
+| `attributes`     | `Attribute`       | No       | Optional Drupal-style attributes object — `mx-checkbox` is always merged on top                                                                    |
 
 The template renders `type="checkbox"` directly — for radio inputs use a sibling template (or hand-author the markup with `mx-radio` on the wrapper and `type="radio"` on the input).
 
@@ -164,11 +164,16 @@ Each input auto-generates its own `id` via `useId()` and wires its `<label htmlF
 
 ## Status states
 
-| `status`             | Class on wrapper | Effect                    |
-| -------------------- | ---------------- | ------------------------- |
-| `FormStatus.DEFAULT` | —                | Normal border             |
-| `FormStatus.INVALID` | `error`          | Red border on the input   |
-| `FormStatus.VALID`   | `success`        | Green border on the input |
+| `status`             | Attribute on input     | Effect                                     |
+| -------------------- | ---------------------- | ------------------------------------------ |
+| `FormStatus.DEFAULT` | `aria-invalid="false"` | Normal border                              |
+| `FormStatus.INVALID` | `aria-invalid="true"`  | Red border on the input                    |
+| `FormStatus.VALID`   | —                      | No border change — see `mx-validate` below |
+
+Add `mx-validate` to the `.mx-checkbox` wrapper to opt into live
+`:user-valid` / `:user-invalid` border colours as the user interacts. Without
+it, only an explicit `INVALID` status colours the border. See
+[Form/README.md](../README.md#validation-state).
 
 ## Touch target sizes
 

package/src/Form/Checkbox/input-checkbox.twig

@@ -1,7 +1,5 @@
 {% set classes = [
   'mx-checkbox',
-  status == "invalid" ? "error" : null,
-  status == "valid" ? "success" : null,
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 {% set status = status|default("default") %}

package/src/Form/CheckboxCard/CheckboxCard.stories.ts

@@ -0,0 +1,90 @@
+import { Meta, StoryObj } from "@storybook/html-vite"
+import Component from "./checkbox-card.twig"
+import "../form.css"
+
+type CheckboxCardProps = {
+  id: string
+  name: string
+  value: string
+  label: string
+  hint?: string
+  checked?: boolean
+  required?: boolean
+  status?: "default" | "invalid" | "valid"
+}
+
+const meta: Meta<CheckboxCardProps> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    id: "pay-carer",
+    name: "payments",
+    value: "Carer Payment or Allowance",
+    label: "Carer Payment or Carer Allowance",
+  },
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          {
+            // ID's are not unique due to test-runner.
+            id: "label",
+            enabled: false,
+          },
+        ],
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<CheckboxCardProps>
+
+export const CheckboxCard: Story = {}
+
+export const WithHint: Story = {
+  args: {
+    id: "pay-other",
+    value: "Another income support payment",
+    label: "Another income support payment",
+    hint: "You will be asked which one before you submit",
+  },
+}
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+  },
+}
+
+export const Invalid: Story = {
+  args: {
+    status: "invalid",
+  },
+}
+
+/**
+ * `.mx-choice-divider` splits a set of card choices into two groups — e.g.
+ * "pick one of these — or — pick this other option". Plain markup, not a
+ * component prop.
+ */
+export const Divider: Story = {
+  render: () =>
+    [
+      Component({
+        id: "card-yes",
+        name: "card",
+        value: "Yes, I hold a card",
+        label: "Yes, I hold a card",
+        hint: "Pensioner Concession, Health Care or DVA card",
+      }),
+      '<div class="mx-choice-divider">or</div>',
+      Component({
+        id: "card-unsure",
+        name: "card",
+        value: "Not sure",
+        label: "I am not sure",
+        hint: "We will ask a few more questions to work it out",
+      }),
+    ].join(""),
+}

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

@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from "@storybook/react-vite"
+import CheckboxCard, { FormCheckboxCard, SingleCheckboxCard } from "./CheckboxCard"
+import "../form.css"
+import { Page } from "../../../.storybook-react/decorators"
+
+const meta: Meta<typeof SingleCheckboxCard> = {
+  decorators: [Page],
+  component: SingleCheckboxCard,
+}
+
+export default meta
+
+export const Single: StoryObj<typeof SingleCheckboxCard> = {
+  args: {
+    children: "Carer Payment or Carer Allowance",
+    value: "carer",
+  },
+}
+
+export const WithHint: StoryObj<typeof SingleCheckboxCard> = {
+  args: {
+    children: "Another income support payment",
+    hint: "You will be asked which one before you submit",
+    value: "other",
+  },
+}
+
+export const Group: StoryObj<typeof FormCheckboxCard> = {
+  render: ({ children, ...args }) => <FormCheckboxCard {...args}>{children}</FormCheckboxCard>,
+  args: {
+    label: "Which payments do you currently receive?",
+    children: (
+      <>
+        <CheckboxCard value="age">Age Pension</CheckboxCard>
+        <CheckboxCard value="dsp">Disability Support Pension</CheckboxCard>
+        <CheckboxCard value="carer">Carer Payment or Carer Allowance</CheckboxCard>
+        <CheckboxCard value="other" hint="You will be asked which one before you submit">
+          Another income support payment
+        </CheckboxCard>
+      </>
+    ),
+  },
+}

package/src/Form/CheckboxCard/CheckboxCard.tsx

@@ -0,0 +1,102 @@
+import { createContext, JSX, PropsWithChildren, use, useId, useRef } from "react"
+import {
+  AriaCheckboxGroupItemProps,
+  AriaCheckboxProps,
+  useCheckbox,
+  useCheckboxGroup,
+  useCheckboxGroupItem,
+} from "react-aria"
+import {
+  CheckboxGroupProps,
+  CheckboxGroupState,
+  useCheckboxGroupState,
+  useToggleState,
+} from "react-stately"
+import classNames from "classnames"
+import FormItem from "../FormItem/FormItem"
+import { FormStatus } from "../../enums"
+
+const CheckboxCardContext = createContext<CheckboxGroupState>(null)
+
+type FormCheckboxCardProps = CheckboxGroupProps &
+  PropsWithChildren & {
+    label?: string
+  }
+
+const FormCheckboxCard = ({ label, children, ...props }: FormCheckboxCardProps): JSX.Element => {
+  const state = useCheckboxGroupState(props)
+  const { groupProps } = useCheckboxGroup(props, state)
+
+  return (
+    <FormItem fieldset {...groupProps} legend={label}>
+      <CheckboxCardContext value={state}>{children}</CheckboxCardContext>
+    </FormItem>
+  )
+}
+
+type CheckboxCardProps = AriaCheckboxGroupItemProps &
+  PropsWithChildren & {
+    hint?: string
+    status?: FormStatus
+    className?: string
+  }
+
+const CheckboxCard = ({
+  children,
+  hint = null,
+  status = FormStatus.DEFAULT,
+  className = "",
+  ...props
+}: CheckboxCardProps): JSX.Element => {
+  const id = useId()
+  const ref = useRef<HTMLInputElement>(null)
+  const state = use(CheckboxCardContext)
+  const { inputProps } = useCheckboxGroupItem(props, state, ref)
+
+  const classes = classNames("mx-checkbox", "mx-choice-card", className)
+
+  return (
+    <div className={classes}>
+      <input id={id} ref={ref} aria-invalid={status === FormStatus.INVALID} {...inputProps} />
+      <label htmlFor={id}>
+        {children}
+        {hint && <span className="mx-choice-card__hint">{hint}</span>}
+      </label>
+    </div>
+  )
+}
+
+type SingleCheckboxCardProps = AriaCheckboxProps &
+  PropsWithChildren & {
+    hint?: string
+    status?: FormStatus
+    className?: string
+  }
+
+const SingleCheckboxCard = ({
+  children,
+  hint = null,
+  status = FormStatus.DEFAULT,
+  className = "",
+  ...props
+}: SingleCheckboxCardProps): JSX.Element => {
+  const id = useId()
+  const ref = useRef<HTMLInputElement>(null)
+  const state = useToggleState(props)
+  const { inputProps } = useCheckbox(props, state, ref)
+
+  const classes = classNames("mx-checkbox", "mx-choice-card", className)
+
+  return (
+    <div className={classes}>
+      <input id={id} ref={ref} aria-invalid={status === FormStatus.INVALID} {...inputProps} />
+      <label htmlFor={id}>
+        {children}
+        {hint && <span className="mx-choice-card__hint">{hint}</span>}
+      </label>
+    </div>
+  )
+}
+
+export default CheckboxCard
+export { FormCheckboxCard, SingleCheckboxCard }