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

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

@@ -4,20 +4,21 @@ exports[`Checked 1`] = `
 "
 <fieldset class="mx-form-item mx-fieldset">
     
-<legend class="mx-legend">Do you like music?</legend>
+<legend class="mx-legend">
+  Do you like music?
+  </legend>
 
   
-            <div class="mx-radio">
+  <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">
+<div class="mx-radio">
   <input id="radio-set-no" type="radio" name="music" value="no">
   <label for="radio-set-no">No</label>
 </div>
 
-        
+  
   
 </fieldset>
 "
@@ -27,20 +28,21 @@ exports[`Radio 1`] = `
 "
 <fieldset class="mx-form-item mx-fieldset">
     
-<legend class="mx-legend">Do you like music?</legend>
+<legend class="mx-legend">
+  Do you like music?
+  </legend>
 
   
-            <div class="mx-radio">
+  <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">
+<div class="mx-radio">
   <input id="radio-set-no" type="radio" name="music" value="no">
   <label for="radio-set-no">No</label>
 </div>
 
-        
+  
   
 </fieldset>
 "

package/src/Form/Search/FormSearch.figma.ts

@@ -0,0 +1,25 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=35-78
+// source=src/Form/Search/FormSearch.tsx
+// component=FormSearch
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const placeholder = instance.getString("Placeholder")
+
+// The submit button is a real Button instance in Figma (Colour=White, Icon Only=On) —
+// Icon Only was added to Button during this chunk specifically because FormSearch
+// needed it, rather than approximating it and having to revisit Button again later.
+// Code-side the button still isn't a separate mapped node (it's internal to
+// FormSearch.tsx), so this stays a single-component mapping — the nested Button
+// instance is Figma-only composition, not a second Code Connect target. No Figma
+// variants exist for FormSearch itself; its other real props (id/name/action/
+// label/onSubmit) aren't visually distinguishable, so they're omitted from the example.
+export default {
+  example: figma.code`<FormSearch placeholder="${placeholder}" />`,
+  imports: ['import { FormSearch } from "@pnx-mixtape/mxds/react"'],
+  id: "form-search",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Form/Search/FormSearch.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from "@storybook/react-vite"
+import Component from "./FormSearch"
+import "../form.css"
+import { Page } from "../../../.storybook-react/decorators"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  decorators: [Page],
+  component: Component,
+  args: {
+    id: "search-keyword",
+    name: "search-form",
+    action: "#search",
+  },
+}
+
+export default meta
+
+export const Search: StoryObj<typeof meta> = {}

package/src/Form/Search/FormSearch.tsx

@@ -0,0 +1,46 @@
+import { SubmitEventHandler, JSX } from "react"
+import classNames from "classnames"
+
+type FormSearchProps = {
+  id?: string
+  name?: string
+  action?: string
+  placeholder?: string
+  label?: string
+  className?: string
+  onSubmit?: SubmitEventHandler<HTMLFormElement>
+}
+
+const FormSearch = ({
+  id,
+  name = "search-form",
+  action,
+  placeholder = "Keywords...",
+  label = "Search by keywords",
+  className,
+  onSubmit,
+}: FormSearchProps): JSX.Element => (
+  <search>
+    <form
+      className={classNames("mx-form", "mx-form--inline-button", className)}
+      action={action}
+      onSubmit={onSubmit}
+    >
+      <input
+        className="mx-input__text"
+        id={id}
+        name={name}
+        type="search"
+        defaultValue=""
+        aria-label={label}
+        placeholder={placeholder}
+      />
+      <button className="mx-button mx-button--icon-only" type="submit">
+        <span className="mx-icon mx-icon--search" aria-hidden="true" />
+        <span className="sr-only">Search</span>
+      </button>
+    </form>
+  </search>
+)
+
+export default FormSearch

package/src/Form/Search/README.md

@@ -0,0 +1,91 @@
+# FormSearch
+
+A `<form role="search">` with a single keyword input and an icon-only submit button. Use it in the Masthead, Header, or any page region where a compact search entry point is needed.
+
+## CSS Import
+
+```css
+@import "@pnx-mixtape/mxds/src/Form/form.css";
+```
+
+---
+
+## HTML
+
+```html
+<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"
+    aria-label="Search by keywords"
+    placeholder="Keywords..."
+  />
+  <button class="mx-button mx-button--icon-only" type="submit">
+    <span class="mx-icon mx-icon--search" aria-hidden="true"></span>
+    <span class="sr-only">Search</span>
+  </button>
+</form>
+```
+
+---
+
+## Twig
+
+```twig
+{% include '@mixtape/Form/Search/search-form.twig' with {
+  id: 'search-keyword',
+  name: 'search-form',
+  action: '/search',
+} %}
+```
+
+**search-form.twig props:**
+
+| Prop     | Type     | Required | Default         | Description                                                 |
+| -------- | -------- | -------- | --------------- | ----------------------------------------------------------- |
+| `id`     | `string` | No       | —               | `id` on the `<input>`, wires to the submit button's context |
+| `name`   | `string` | No       | `"search-form"` | `name` attribute on the `<input>`                           |
+| `action` | `string` | No       | —               | `action` attribute on the `<form>`                          |
+
+The `aria-label` ("Search by keywords") and `placeholder` ("Keywords...") are hardcoded in the Twig template. Override via `attributes` if needed.
+
+---
+
+## React
+
+```tsx
+import { FormSearch } from "@pnx-mixtape/mxds/react"
+;<FormSearch
+  id="search-keyword"
+  name="search-form"
+  action="/search"
+  label="Search by keywords"
+  placeholder="Keywords..."
+/>
+```
+
+**Props:**
+
+| Prop          | Type                                | Default                | Description                                            |
+| ------------- | ----------------------------------- | ---------------------- | ------------------------------------------------------ |
+| `id`          | `string`                            | —                      | `id` on the `<input>`                                  |
+| `name`        | `string`                            | `"search-form"`        | `name` attribute on the `<input>`                      |
+| `action`      | `string`                            | —                      | `action` on the `<form>`                               |
+| `placeholder` | `string`                            | `"Keywords..."`        | `<input>` placeholder                                  |
+| `label`       | `string`                            | `"Search by keywords"` | `aria-label` on the `<input>` (visually hidden)        |
+| `className`   | `string`                            | —                      | Extra class on the `<form>`                            |
+| `onSubmit`    | `FormEventHandler<HTMLFormElement>` | —                      | Form submit handler — use instead of `action` for SPAs |
+
+---
+
+## Accessibility
+
+- The `<form>` carries `role="search"` so screen readers announce the region as a search landmark.
+- The input uses `aria-label` for its accessible name — no visible `<label>` is rendered. If you need a visible label, add a `<FormLabel>` before `<FormSearch>` and pass matching `id`/`htmlFor` props.
+- The submit button's text is visually hidden via `.sr-only`; the icon is `aria-hidden`.
+
+---
+
+→ Used in context: `mockups/SearchResultPage.stories.ts:14`

package/src/Form/Search/__snapshots__/FormSearch.stories.tsx.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Search 1`] = `"<search><form class="mx-form mx-form--inline-button" action="#search"><input class="mx-input__text" id="search-keyword" aria-label="Search by keywords" placeholder="Keywords..." type="search" value="" name="search-form"><button class="mx-button mx-button--icon-only" type="submit"><span class="mx-icon mx-icon--search" aria-hidden="true"></span><span class="sr-only">Search</span></button></form></search>"`;

package/src/Form/Select/FormSelect.figma.ts

@@ -0,0 +1,27 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=35-58
+// source=src/Form/Select/FormSelect.tsx
+// component=FormSelect
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const status = instance.getEnum("Status", {
+  Default: "FormStatus.DEFAULT",
+  Invalid: "FormStatus.INVALID",
+  Valid: "FormStatus.VALID",
+})
+
+const statusProp = status === "FormStatus.DEFAULT" ? "" : ` status={${status}}`
+
+// The dropdown chevron is a CSS ::picker-icon mask, not a component prop — modelled in
+// Figma as the same Icon/Chevron Down instance DropMenu Trigger uses, for visual
+// consistency, not because FormSelect has a real icon slot. `options` (array) isn't a
+// Figma-modellable property — the example below is a fixed two-option placeholder.
+export default {
+  example: figma.code`<FormSelect id="field" options={[{ label: "Option one", value: "one" }, { label: "Option two", value: "two" }]}${statusProp} />`,
+  imports: ['import { FormSelect, FormStatus } from "@pnx-mixtape/mxds/react"'],
+  id: "form-select",
+  metadata: {
+    nestable: true,
+  },
+}

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

@@ -1,4 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
+import Icon from "../../Atom/Icon/Icon"
+import { Icons } from "../../enums"
 import Component from "./FormSelect"
 import { Page } from "../../../.storybook-react/decorators"
 
@@ -33,3 +35,18 @@ const meta: Meta<typeof Component> = {
 
 export default meta
 export const Select: StoryObj<typeof Component> = {}
+
+export const CustomSelect: StoryObj<typeof Component> = {
+  name: "Select (custom)",
+  args: {
+    options: Array.from({ length: 3 }, (_, index) => ({
+      value: String(index),
+      label: (
+        <>
+          <Icon icon={Icons.EMPTY_HEART} />
+          <span>Option {index + 1}</span>
+        </>
+      ),
+    })),
+  },
+}

package/src/Form/Select/FormSelect.tsx

@@ -1,9 +1,9 @@
-import { JSX, ComponentPropsWithoutRef, useState, ChangeEventHandler } from "react"
+import { JSX, ComponentPropsWithoutRef, ReactNode, useState, ChangeEventHandler } from "react"
 import classNames from "classnames"
 import { FormStatus } from "../../enums"
 
-type OptionProps = ComponentPropsWithoutRef<"option"> & {
-  label: string
+type OptionProps = Omit<ComponentPropsWithoutRef<"option">, "label"> & {
+  label: string | ReactNode
   value: string
 }
 
@@ -38,7 +38,7 @@ const FormSelect = ({
   })
 
   const items = options.map(({ label: optionLabel, value }) => (
-    <Option label={optionLabel} value={value} key={`${value}:${optionLabel}`} />
+    <Option label={optionLabel} value={value} key={value} />
   ))
 
   return (
@@ -47,10 +47,17 @@ const FormSelect = ({
       className={classes}
       onChange={handleChange}
       value={inputValue}
-      aria-describedby={`${id}-help`}
+      aria-describedby={`help-${id}`}
       aria-invalid={status === FormStatus.INVALID}
       {...props}
     >
+      {/* Required by the customizable <select> specification.
+          The browser derives the accessible name from <selectedcontent>;
+          jsx-a11y does not yet understand this pattern. */}
+      {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+      <button>
+        <selectedcontent></selectedcontent>
+      </button>
       <Option label={label} value="" />
       {items}
     </select>

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

@@ -2,6 +2,8 @@ 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"
+import Icon from "../../Atom/Icon/icon.twig"
+import { Icons } from "../../enums"
 
 const meta: Meta<FormSelectType> = {
   tags: ["autodocs", "ids-mvp"],
@@ -31,3 +33,13 @@ export default meta
 type Story = StoryObj<FormSelectType>
 
 export const Select: Story = {}
+
+export const CustomSelect: Story = {
+  name: "Custom select",
+  args: {
+    options: Array.from({ length: 3 }, (_, index) => ({
+      value: String(index),
+      label: `${Icon({ icon: Icons.EMPTY_HEART })}<span>Option ${index + 1}</span>`,
+    })),
+  },
+}

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

@@ -1,3 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Select 1`] = `"<select id="mix-select" class="mx-input__select" aria-describedby="mix-select-help" aria-invalid="false" aria-label="Select"><option value="">Select one</option><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option></select>"`;
+exports[`Select (custom) 1`] = `"<select id="mix-select" class="mx-input__select" aria-describedby="help-mix-select" aria-invalid="false" aria-label="Select"><button><selectedcontent>Select one</selectedcontent></button><option value="">Select one</option><option value="0"><span class="mx-icon mx-icon--heart-unselected"></span><span>Option 1</span></option><option value="1"><span class="mx-icon mx-icon--heart-unselected"></span><span>Option 2</span></option><option value="2"><span class="mx-icon mx-icon--heart-unselected"></span><span>Option 3</span></option></select>"`;
+
+exports[`Select 1`] = `"<select id="mix-select" class="mx-input__select" aria-describedby="help-mix-select" aria-invalid="false" aria-label="Select"><button><selectedcontent>Select one</selectedcontent></button><option value="">Select one</option><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option></select>"`;

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

@@ -1,8 +1,32 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Custom select 1`] = `
+"  
+<select class="mx-input__select" id="form-input-select" name="unique-0" aria-label="Visually hidden label" aria-describedby="unique-0">
+  <button>
+    <selectedcontent>
+<span class="mx-icon mx-icon--heart-unselected"></span>
+<span>Option 1</span></selectedcontent>
+  </button>
+    <option value="0">
+<span class="mx-icon mx-icon--heart-unselected"></span>
+<span>Option 1</span></option>
+    <option value="1">
+<span class="mx-icon mx-icon--heart-unselected"></span>
+<span>Option 2</span></option>
+    <option value="2">
+<span class="mx-icon mx-icon--heart-unselected"></span>
+<span>Option 3</span></option>
+  </select>
+"
+`;
+
 exports[`Select 1`] = `
 "  
 <select class="mx-input__select" id="form-input-select" name="unique-0" aria-label="Visually hidden label" aria-describedby="unique-0">
+  <button>
+    <selectedcontent>Option 1</selectedcontent>
+  </button>
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>

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

@@ -19,6 +19,9 @@
     {% if status == "invalid" %} aria-invalid="true"{% endif %}
     {% if required %} required{% endif %}
 >
+  <button>
+    <selectedcontent></selectedcontent>
+  </button>
   {% for option in options %}
   <option value="{{ option.value }}"{% if option.selected %} selected{% endif %}>{{ option.label }}</option>
   {% endfor %}

package/src/Form/TextInput/FormText.figma.ts

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=35-8
+// source=src/Form/TextInput/FormText.tsx
+// component=FormText
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const value = instance.getString("Value")
+const status = instance.getEnum("Status", {
+  Default: "FormStatus.DEFAULT",
+  Invalid: "FormStatus.INVALID",
+  Valid: "FormStatus.VALID",
+})
+
+const statusProp = status === "FormStatus.DEFAULT" ? "" : ` status={${status}}`
+
+export default {
+  example: figma.code`<FormText id="field" value="${value}"${statusProp} />`,
+  imports: ['import { FormText, FormStatus } from "@pnx-mixtape/mxds/react"'],
+  id: "form-text",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Form/TextInput/FormText.tsx

@@ -36,7 +36,7 @@ const FormText = ({
       name={name}
       value={inputValue}
       required={required}
-      aria-describedby={`${id}-help`}
+      aria-describedby={`help-${id}`}
       aria-invalid={status === FormStatus.INVALID}
       {...props}
     />

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

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Text Input 1`] = `"<input class="mx-input__text" id="mix-text" aria-describedby="mix-text-help" aria-invalid="false" placeholder="Placeholder" aria-label="Text input" type="text" value="">"`;
+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="">"`;

package/src/Form/TextInput/input-text-icon.twig

@@ -1,7 +1,7 @@
 <div class="mx-form-item">
-  <label class="mx-label" for="input{{ id }}">{{ label|default('Input text field') }}</label>
+  <label class="mx-label" for="{{ id }}">{{ label|default('Input text field') }}</label>
   <span class="mx-input--icon mx-icon mx-icon--{{ icon|default('email') }}">
-    <input class="mx-input__text" type="{{ type|default('text') }}" id="input{{ id }}" aria-describedby="input{{ id }}Help" placeholder="{{ placeholder }}">
+    <input class="mx-input__text" type="{{ type|default('text') }}" id="{{ id }}" aria-describedby="help-{{ id }}" placeholder="{{ placeholder }}">
   </span>
-  <div class="mx-description" id="input{{ id }}Help" role="tooltip">{{ description|default('Help text that provides additional information about the field.') }}</div>
+  <div class="mx-description" id="help-{{ id }}" role="tooltip">{{ description|default('Help text that provides additional information about the field.') }}</div>
 </div>

package/src/Form/Textarea/FormTextarea.figma.ts

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=35-65
+// source=src/Form/Textarea/FormTextarea.tsx
+// component=FormTextarea
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const value = instance.getString("Value")
+const status = instance.getEnum("Status", {
+  Default: "FormStatus.DEFAULT",
+  Invalid: "FormStatus.INVALID",
+  Valid: "FormStatus.VALID",
+})
+
+const statusProp = status === "FormStatus.DEFAULT" ? "" : ` status={${status}}`
+
+export default {
+  example: figma.code`<FormTextarea id="field" value="${value}"${statusProp} />`,
+  imports: ['import { FormTextarea, FormStatus } from "@pnx-mixtape/mxds/react"'],
+  id: "form-textarea",
+  metadata: {
+    nestable: true,
+  },
+}

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

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

package/src/Form/Textarea/FormTextarea.tsx

@@ -34,7 +34,7 @@ const FormTextarea = ({
       name={name}
       value={inputValue}
       required={required}
-      aria-describedby={`${id}-help`}
+      aria-describedby={`help-${id}`}
       aria-invalid={status === FormStatus.INVALID}
       {...props}
     />

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

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Textarea 1`] = `"<input class="mx-input__text" id="mix-textarea" aria-describedby="mix-textarea-help" aria-invalid="false" aria-label="Textarea" type="text" value="">"`;
+exports[`Textarea 1`] = `"<textarea class="mx-input__textarea" id="mix-textarea" aria-describedby="help-mix-textarea" aria-invalid="false" aria-label="Textarea"></textarea>"`;