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

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

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react-vite"
+import RadioCard, { FormRadioCard } from "./RadioCard"
+import { Page } from "../../../.storybook-react/decorators"
+
+const meta: Meta<typeof RadioCard> = {
+  decorators: [Page],
+  component: RadioCard,
+}
+
+export default meta
+export const RadioCards: StoryObj<typeof FormRadioCard> = {
+  render: ({ children, ...args }) => <FormRadioCard {...args}>{children}</FormRadioCard>,
+  args: {
+    label: "Do you hold a current concession card?",
+    children: (
+      <>
+        <RadioCard value="yes" hint="Pensioner Concession, Health Care or DVA card">
+          Yes, I hold a card
+        </RadioCard>
+        <RadioCard value="no" hint="You may still be eligible based on your income">
+          No
+        </RadioCard>
+      </>
+    ),
+  },
+}

package/src/Form/RadioCard/RadioCard.tsx

@@ -0,0 +1,59 @@
+import { JSX, PropsWithChildren, useRef, createContext, use, useId } from "react"
+import { useRadio, useRadioGroup, AriaRadioProps, AriaRadioGroupProps } from "react-aria"
+import { useRadioGroupState, RadioGroupState } from "react-stately"
+import classNames from "classnames"
+import FormItem from "../FormItem/FormItem"
+import { FormStatus } from "../../enums"
+
+const RadioCardContext = createContext<RadioGroupState>(null)
+
+type FormRadioCardProps = PropsWithChildren &
+  AriaRadioGroupProps & {
+    label?: string
+  }
+
+const FormRadioCard = ({ label, children, ...props }: FormRadioCardProps): JSX.Element => {
+  const state = useRadioGroupState(props)
+  const { radioGroupProps } = useRadioGroup(props, state)
+
+  return (
+    <FormItem fieldset {...radioGroupProps} legend={label}>
+      <RadioCardContext value={state}>{children}</RadioCardContext>
+    </FormItem>
+  )
+}
+
+type RadioCardProps = PropsWithChildren &
+  AriaRadioProps & {
+    hint?: string
+    status?: FormStatus
+    className?: string
+  }
+
+const RadioCard = ({
+  children,
+  hint = null,
+  status = FormStatus.DEFAULT,
+  className = "",
+  ...props
+}: RadioCardProps): JSX.Element => {
+  const id = useId()
+  const ref = useRef<HTMLInputElement>(null)
+  const state = use(RadioCardContext)
+  const { inputProps } = useRadio(props, state, ref)
+
+  const classes = classNames("mx-radio", "mx-choice-card", className)
+
+  return (
+    <div className={classes}>
+      <input id={id} {...inputProps} ref={ref} aria-invalid={status === FormStatus.INVALID} />
+      <label htmlFor={id}>
+        {children}
+        {hint && <span className="mx-choice-card__hint">{hint}</span>}
+      </label>
+    </div>
+  )
+}
+
+export default RadioCard
+export { FormRadioCard }

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

@@ -0,0 +1,69 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Checked 1`] = `
+"
+<fieldset class="mx-form-item mx-fieldset">
+    
+<legend class="mx-legend">
+  Do you hold a current concession card?
+  </legend>
+
+  
+  <div class="mx-radio mx-choice-card">
+  <input id="card-yes" type="radio" name="card" value="yes" checked="checked">
+  <label for="card-yes">
+    Yes, I hold a card
+    <span class="mx-choice-card__hint">Pensioner Concession, Health Care or DVA card</span>  </label>
+</div>
+<div class="mx-radio mx-choice-card">
+  <input id="card-no" type="radio" name="card" value="no">
+  <label for="card-no">
+    No
+    <span class="mx-choice-card__hint">You may still be eligible based on your income</span>  </label>
+</div>
+
+  
+  
+</fieldset>
+"
+`;
+
+exports[`Radio Card 1`] = `
+"
+<fieldset class="mx-form-item mx-fieldset">
+    
+<legend class="mx-legend">
+  Do you hold a current concession card?
+  </legend>
+
+  
+  <div class="mx-radio mx-choice-card">
+  <input id="card-yes" type="radio" name="card" value="yes">
+  <label for="card-yes">
+    Yes, I hold a card
+    <span class="mx-choice-card__hint">Pensioner Concession, Health Care or DVA card</span>  </label>
+</div>
+<div class="mx-radio mx-choice-card">
+  <input id="card-applied" type="radio" name="card" value="applied">
+  <label for="card-applied">
+    I have applied but not received it
+    <span class="mx-choice-card__hint">You can continue, but we may ask for evidence later</span>  </label>
+</div>
+<div class="mx-radio mx-choice-card">
+  <input id="card-no" type="radio" name="card" value="no">
+  <label for="card-no">
+    No
+    <span class="mx-choice-card__hint">You may still be eligible based on your income</span>  </label>
+</div>
+<div class="mx-choice-divider">or</div><div class="mx-radio mx-choice-card">
+  <input id="card-unsure" type="radio" name="card" value="unsure">
+  <label for="card-unsure">
+    I am not sure
+    <span class="mx-choice-card__hint">We will ask a few more questions to work it out</span>  </label>
+</div>
+
+  
+  
+</fieldset>
+"
+`;

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

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Radio Cards 1`] = `"<fieldset class="mx-form-item mx-fieldset" role="radiogroup" aria-orientation="vertical" id="react-aria-_r_0_"><legend class="mx-legend">Do you hold a current concession card?</legend><div class="mx-radio mx-choice-card"><input id="_r_6_" data-react-aria-pressable="true" tabindex="0" aria-invalid="false" type="radio" value="yes" name="react-aria-_r_5_"><label for="_r_6_">Yes, I hold a card<span class="mx-choice-card__hint">Pensioner Concession, Health Care or DVA card</span></label></div><div class="mx-radio mx-choice-card"><input id="_r_8_" data-react-aria-pressable="true" tabindex="0" aria-invalid="false" type="radio" value="no" name="react-aria-_r_5_"><label for="_r_8_">No<span class="mx-choice-card__hint">You may still be eligible based on your income</span></label></div></fieldset>"`;

package/src/Form/RadioCard/radio-card.twig

@@ -0,0 +1,20 @@
+{% set classes = [
+  'mx-radio',
+  'mx-choice-card',
+] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+<div{{ attributes }}>
+  <input
+      id="{{ id }}"
+      type="radio"
+      name="{{ name }}"
+      value="{{ value }}"
+      {% if checked %} checked="checked"{% endif %}
+      {% if status == "invalid" %} aria-invalid="true"{% endif %}
+      {% if required %} required{% endif %}
+  >
+  <label for="{{ id }}">
+    {{ label }}
+    {% if hint %}<span class="mx-choice-card__hint">{{ hint }}</span>{% endif %}
+  </label>
+</div>

package/src/Form/Select/FormSelect.tsx

@@ -32,10 +32,7 @@ const FormSelect = ({
   const handleChange: ChangeEventHandler<HTMLSelectElement> = ({ currentTarget }) =>
     setInputValue(currentTarget.value)
 
-  const classes = classNames("mx-input__select", className, {
-    error: status === FormStatus.INVALID,
-    success: status === FormStatus.VALID,
-  })
+  const classes = classNames("mx-input__select", className)
 
   const items = options.map(({ label: optionLabel, value }) => (
     <Option label={optionLabel} value={value} key={value} />

package/src/Form/Select/input-select.twig

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

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

@@ -14,3 +14,17 @@ const meta: Meta<typeof Component> = {
 
 export default meta
 export const TextInput: StoryObj<typeof Component> = {}
+
+/**
+ * `mx-validate` opts the input into live native validation — see the Twig
+ * `TextInput` stories for the full explanation.
+ */
+export const Validate: StoryObj<typeof Component> = {
+  args: {
+    type: "email",
+    placeholder: "you@example.com",
+    "aria-label": "Email address",
+    required: true,
+    className: "mx-validate",
+  },
+}

package/src/Form/TextInput/FormText.tsx

@@ -22,10 +22,7 @@ const FormText = ({
   const handleChange: ChangeEventHandler<HTMLInputElement> = ({ currentTarget }) =>
     setInputValue(currentTarget.value)
 
-  const classes = classNames("mx-input__text", className, {
-    error: status === FormStatus.INVALID,
-    success: status === FormStatus.VALID,
-  })
+  const classes = classNames("mx-input__text", className)
 
   return (
     <input

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

@@ -1,3 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Text Input 1`] = `"<input class="mx-input__text" id="mix-text" aria-describedby="help-mix-text" aria-invalid="false" placeholder="Placeholder" aria-label="Text input" type="text" value="">"`;
+
+exports[`Validate 1`] = `"<input class="mx-input__text mx-validate" id="mix-text" required="" aria-describedby="help-mix-text" aria-invalid="false" placeholder="you@example.com" aria-label="Email address" type="email" value="">"`;

package/src/Form/TextInput/input-text.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/Textarea/FormTextarea.tsx

@@ -21,10 +21,7 @@ const FormTextarea = ({
   const handleChange: ChangeEventHandler<HTMLTextAreaElement> = ({ currentTarget }) =>
     setInputValue(currentTarget.value)
 
-  const classes = classNames("mx-input__textarea", className, {
-    error: status === FormStatus.INVALID,
-    success: status === FormStatus.VALID,
-  })
+  const classes = classNames("mx-input__textarea", className)
 
   return (
     <textarea

package/src/Form/Textarea/input-textarea.twig

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

package/src/Form/Validation.stories.ts

@@ -0,0 +1,153 @@
+import { Meta, StoryObj } from "@storybook/html-vite"
+import FormItem from "./FormItem/form-item.twig"
+import Label from "./Label/label.twig"
+import TextInput from "./TextInput/input-text.twig"
+import Textarea from "./Textarea/input-textarea.twig"
+import Select from "./Select/input-select.twig"
+import Radio from "./Radio/input-radio.twig"
+import Checkbox from "./Checkbox/input-checkbox.twig"
+import Autocomplete from "./Autocomplete/autocomplete.twig"
+import Button from "../Atom/Button/button.twig"
+import "./form.css"
+import "./Autocomplete/autocomplete.css"
+import "./Autocomplete/Elements/Autocomplete"
+import { InputTypeTypes } from "@pnx-mixtape/ids-shape"
+import { DrupalAttribute } from "drupal-attribute"
+
+const meta: Meta = {
+  tags: ["autodocs"],
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          {
+            // ID's are not unique due to test-runner.
+            id: "label",
+            enabled: false,
+          },
+        ],
+      },
+    },
+  },
+  render: () =>
+    `<form class="mx-vertical-flow">${[
+      FormItem({
+        id: "validate-text",
+        label: Label({ id: "validate-text", title: "Email address", required: true }),
+        fields: TextInput({
+          id: "validate-text",
+          type: InputTypeTypes.EMAIL,
+          name: "validate-text",
+          placeholder: "you@example.com",
+          required: true,
+          attributes: new DrupalAttribute().addClass("mx-validate"),
+        }),
+      }),
+      FormItem({
+        id: "validate-textarea",
+        label: Label({ id: "validate-textarea", title: "Message", required: true }),
+        fields: Textarea({
+          id: "validate-textarea",
+          name: "validate-textarea",
+          required: true,
+          attributes: new DrupalAttribute().addClass("mx-validate"),
+        }),
+      }),
+      FormItem({
+        id: "validate-select",
+        label: Label({ id: "validate-select", title: "Favourite colour", required: true }),
+        fields: Select({
+          id: "validate-select",
+          name: "validate-select",
+          required: true,
+          attributes: new DrupalAttribute().addClass("mx-validate"),
+          options: [
+            { label: "Choose an option", value: "" },
+            { label: "Red", value: "red" },
+            { label: "Green", value: "green" },
+            { label: "Blue", value: "blue" },
+          ],
+        }),
+      }),
+      FormItem({
+        id: "validate-radio",
+        as: "fieldset",
+        label: Label({ title: "Do you like music?", as: "legend", required: true }),
+        fields: [
+          Radio({
+            id: "validate-radio-yes",
+            name: "validate-radio",
+            label: "Yes",
+            value: "yes",
+            required: true,
+            attributes: new DrupalAttribute().addClass("mx-validate"),
+          }),
+          Radio({
+            id: "validate-radio-no",
+            name: "validate-radio",
+            label: "No",
+            value: "no",
+            required: true,
+            attributes: new DrupalAttribute().addClass("mx-validate"),
+          }),
+        ].join(""),
+      }),
+      FormItem({
+        id: "validate-checkbox",
+        as: "fieldset",
+        label: Label({ title: "Which genres do you like?", as: "legend", required: true }),
+        fields: [
+          Checkbox({
+            id: "validate-checkbox-rock",
+            name: "validate-checkbox-rock",
+            label: "Rock",
+            value: "rock",
+            required: true,
+            attributes: new DrupalAttribute().addClass("mx-validate"),
+          }),
+          Checkbox({
+            id: "validate-checkbox-jazz",
+            name: "validate-checkbox-jazz",
+            label: "Jazz",
+            value: "jazz",
+            required: true,
+            attributes: new DrupalAttribute().addClass("mx-validate"),
+          }),
+        ].join(""),
+      }),
+      FormItem({
+        id: "validate-autocomplete",
+        label: Label({ id: "validate-autocomplete", title: "Favourite fruit", required: true }),
+        fields: Autocomplete({
+          id: "validate-autocomplete",
+          name: "validate-autocomplete",
+          label: "Favourite fruit",
+          type: InputTypeTypes.TEXT,
+          required: true,
+          attributes: new DrupalAttribute().addClass("mx-validate"),
+          options: [
+            { label: "Apple", value: "apple" },
+            { label: "Banana", value: "banana" },
+            { label: "Cherry", value: "cherry" },
+          ],
+        }),
+      }),
+      Button({ title: "Submit", as: "submit" }),
+    ].join("")}</form>`,
+}
+
+export default meta
+type Story = StoryObj
+
+/**
+ * `mx-validate` opts a control into live native validation — the border
+ * turns red once the browser rejects the value and the field has been
+ * interacted with, green once it's accepted.
+ *
+ * Add the class to the control itself (text input, textarea, select), or on
+ * the `.mx-radio` / `.mx-checkbox` / `.mx-autocomplete` wrapper for
+ * components that put `attributes` on the wrapper rather than the input.
+ *
+ * Hit Submit to trigger the invalid states on the empty required fields.
+ */
+export const Validation: Story = {}

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

@@ -0,0 +1,130 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Validation 1`] = `
+"<form class="mx-vertical-flow">
+<div class="mx-form-item">
+    
+<label class="mx-label" for="validate-text">
+  Email address
+  <span class="mx-required">(required)</span></label>
+
+  
+  
+<input class="mx-validate mx-input__text" id="validate-text" name="validate-text" type="email" value="" placeholder="you@example.com" required="">
+
+  
+  
+</div>
+
+<div class="mx-form-item">
+    
+<label class="mx-label" for="validate-textarea">
+  Message
+  <span class="mx-required">(required)</span></label>
+
+  
+    
+<textarea class="mx-validate mx-input__textarea" id="unique-4" name="unique-0" aria-describedby="unique-0" required=""></textarea>
+
+  
+  
+</div>
+
+<div class="mx-form-item">
+    
+<label class="mx-label" for="validate-select">
+  Favourite colour
+  <span class="mx-required">(required)</span></label>
+
+  
+    
+<select class="mx-validate mx-input__select" id="unique-5" name="unique-1" aria-describedby="unique-1" required="">
+  <button>
+    <selectedcontent>Choose an option</selectedcontent>
+  </button>
+    <option value="">Choose an option</option>
+    <option value="red">Red</option>
+    <option value="green">Green</option>
+    <option value="blue">Blue</option>
+  </select>
+
+  
+  
+</div>
+
+<fieldset class="mx-form-item mx-fieldset">
+    
+<legend class="mx-legend">
+  Do you like music?
+  <span class="mx-required">(required)</span></legend>
+
+  
+  <div class="mx-validate mx-radio">
+  <input id="validate-radio-yes" type="radio" name="validate-radio" value="yes" required="">
+  <label for="validate-radio-yes">Yes</label>
+</div>
+<div class="mx-validate mx-radio">
+  <input id="validate-radio-no" type="radio" name="validate-radio" value="no" required="">
+  <label for="validate-radio-no">No</label>
+</div>
+
+  
+  
+</fieldset>
+
+<fieldset class="mx-form-item mx-fieldset">
+    
+<legend class="mx-legend">
+  Which genres do you like?
+  <span class="mx-required">(required)</span></legend>
+
+  
+  
+<div class="mx-validate mx-checkbox">
+  <input id="validate-checkbox-rock" type="checkbox" name="validate-checkbox-rock" value="rock" required="">
+  <label for="validate-checkbox-rock">Rock</label>
+</div>
+
+<div class="mx-validate mx-checkbox">
+  <input id="validate-checkbox-jazz" type="checkbox" name="validate-checkbox-jazz" value="jazz" required="">
+  <label for="validate-checkbox-jazz">Jazz</label>
+</div>
+
+  
+  
+</fieldset>
+
+<div class="mx-form-item">
+    
+<label class="mx-label" for="validate-autocomplete">
+  Favourite fruit
+  <span class="mx-required">(required)</span></label>
+
+  
+  
+<mx-autocomplete class="mx-autocomplete">
+  <div class="mx-autocomplete__control mx-form--inline-button">
+    <input class="mx-validate mx-input__text" id="unique-6" name="unique-2" type="text" role="combobox" aria-expanded="false" aria-controls="unique-2" aria-autocomplete="list" aria-activedescendant="" aria-describedby="unique-2" aria-label="Favourite fruit" autocomplete="off" required="">
+      </div>
+  <div class="mx-autocomplete__suggestions">
+    
+    <ul class="mx-autocomplete__listbox" id="unique-0" role="listbox" hidden="">
+              <li class="mx-autocomplete__option" id="validate-autocomplete-option-0" role="option" data-value="apple" aria-selected="false">Apple</li>
+              <li class="mx-autocomplete__option" id="validate-autocomplete-option-1" role="option" data-value="banana" aria-selected="false">Banana</li>
+              <li class="mx-autocomplete__option" id="validate-autocomplete-option-2" role="option" data-value="cherry" aria-selected="false">Cherry</li>
+          </ul>
+    <output class="sr-only" aria-live="polite" data-autocomplete-status=""></output>
+  </div>
+</mx-autocomplete>
+
+  
+  
+</div>
+
+  <button class="mx-button" type="submit">
+    
+    <span>Submit</span>
+    
+  </button>
+</form>"
+`;