@pnx-mixtape/mxds 0.0.6 → 0.0.7

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

@@ -1,101 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Form/Text Input Error smoke-test 1`] = `
-<div class="form__item">
-  <label for="input">
-    Input text field
-  </label>
-  <input type="text"
-         id="input"
-         aria-describedby="unique-0"
-         class="error"
-         placeholder
-  >
-  <div class="form__description"
-       id="unique-0"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
-  </div>
-</div>
-`;
-
-exports[`Form/Text Input Small smoke-test 1`] = `
-<div class="form__item">
-  <label for="input">
-    Input text field
-  </label>
-  <input type="text"
-         id="input"
-         aria-describedby="unique-0"
-         class="input--small"
-         placeholder
-  >
-  <div class="form__description"
-       id="unique-0"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
-  </div>
-</div>
-`;
-
-exports[`Form/Text Input Success smoke-test 1`] = `
-<div class="form__item">
-  <label for="input">
-    Input text field
-  </label>
-  <input type="text"
-         id="input"
-         aria-describedby="unique-0"
-         class="success"
-         placeholder
-  >
-  <div class="form__description"
-       id="unique-0"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
-  </div>
-</div>
-`;
-
-exports[`Form/Text Input TextInput smoke-test 1`] = `
-<div class="form__item">
-  <label for="input">
-    Input text field
-  </label>
-  <input type="text"
-         id="input"
-         aria-describedby="unique-0"
-         class
-         placeholder
-  >
-  <div class="form__description"
-       id="unique-0"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
-  </div>
-</div>
+exports[`Form/TextInput Icon smoke-test 1`] = `
+<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>
 `;
 
-exports[`Form/Text Input Wide smoke-test 1`] = `
-<div class="form__item">
-  <label for="input">
-    Input text field
-  </label>
-  <input type="text"
-         id="input"
-         aria-describedby="unique-0"
-         class="input--wide"
-         placeholder
-  >
-  <div class="form__description"
-       id="unique-0"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
-  </div>
-</div>
+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"
+>
 `;

package/src/Form/TextInput/input-divider.twig

@@ -1,11 +1,10 @@
-<div class="form__item form__item--inline">
-  <div class="form__item">
-    <label class="label--inline" for="input1{{ id }}">Input field</label>
-    <input type="text" id="input1{{ id }}"  class="{{ modifier_class }}">
+<div class="mx-form-item mx-form-item--inline">
+  <div class="mx-form-item">
+    <label class="mx-label mx-label--inline" for="input1{{ id }}">Input field</label>
+    <input class="mx-input__text" type="text" id="input1{{ id }}">
   </div>
-  <div class="input__divider">OR</div>
-  <div class="form__item">
-    <label class="visually-hidden" for="input2{{ id }}">Other input field</label>
-    <input type="text" id="input2{{ id }}" class="{{ modifier_class }}" placeholder="Other input">
+  <div class="mx-input__divider">OR</div>
+  <div class="mx-form-item">
+    <input class="mx-input__text" type="text" id="input2{{ id }}" placeholder="Other input" aria-label="Other input field">
   </div>
 </div>

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

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

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

@@ -1,5 +1,31 @@
-<div class="form__item">
-  <label for="input{{ id }}">{{ label|default('Input text field') }}</label>
-  <input type="{{ type|default('text') }}" id="input{{ id }}" aria-describedby="input{{ id }}Help" class="{{ modifier_class }}" placeholder="{{ placeholder }}">
-  <div class="form__description" id="input{{ id }}Help" role="tooltip">{{ description|default('Help text that provides additional information about the field.') }}</div>
-</div>
+{% 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") %}
+{% if hasDescription or status != "default" %}
+  {% set helpers = [
+    hasDescription ? "help-"~ id : null,
+    status != "default" ?  "status-"~ id : null,
+  ]|join(" ")|trim() %}
+{% endif %}
+
+{% if icon %}
+<span class="mx-input--icon mx-icon mx-icon--{{ icon }}">
+{% endif %}
+<input{{ attributes }}
+    id="{{ id }}"
+    name="{{ name }}"
+    type="{{ type }}"
+    value="{{ value }}"
+    {% if label %} aria-label="{{ label }}"{% endif %}
+    {% if placeholder %} placeholder="{{ placeholder }}"{% endif %}
+    {% if helpers %} aria-describedby="{{ helpers }}"{% endif %}
+    {% if status == "invalid" %} aria-invalid="true"{% endif %}
+    {% if required %} required{% endif %}
+/>
+{% if icon %}
+</span>
+{% endif %}

package/src/Form/Textarea/FormTextarea.tsx

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

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

@@ -1,16 +1,19 @@
 import { Meta, StoryObj } from "@storybook/html"
-import Component from "./textarea.twig"
+import Component from "./input-textarea.twig"
 import "../form.css"
+import { FormTextArea as FormTextAreaType } from "@pnx-mixtape/ids-shape"
 
-const meta: Meta<typeof Component> = {
-  title: "Form/Textarea",
-  tags: ["autodocs"],
+const meta: Meta<FormTextAreaType> = {
+  tags: ["autodocs", "ids-mvp"],
   component: Component,
+  args: {
+    id: "form-input-textarea",
+    name: "example-form-input",
+    label: "Visually hidden label",
+  },
 }
 
 export default meta
-type Story = StoryObj<typeof meta>
+type Story = StoryObj<FormTextAreaType>
 
-export const Textarea: Story = {
-  args: {},
-}
+export const TextArea: Story = {}

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form/Textarea Textarea smoke-test 1`] = `
-<input class
+<input class="mx-input__text"
        id="mix-textarea"
        type="text"
        aria-describedby="unique-0"

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

@@ -1,19 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Form/Textarea Textarea smoke-test 1`] = `
-<div class="form__item">
-  <label for="textarea">
-    A textarea
-  </label>
-  <textarea aria-describedby="unique-0"
-            id="textarea"
-  >
-  </textarea>
-  <div class="form__description"
-       id="unique-0"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
-  </div>
-</div>
+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>
 `;

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

@@ -0,0 +1,21 @@
+{% 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" %}
+  {% set helpers = [
+    hasDescription ? "help-"~ id : null,
+    status != "default" ?  "status-"~ id : null,
+  ]|join(" ")|trim() %}
+{% endif %}
+
+<textarea{{ attributes }}
+    id="{{ id }}"
+    name="{{ name }}"
+    {% if label %} aria-label="{{ label }}"{% endif %}
+    {% if helpers %} aria-describedby="{{ helpers }}"{% endif %}
+    {% if status == "invalid" %} aria-invalid="true"{% endif %}
+    {% if required %} required{% endif %}
+></textarea>

package/src/Form/form.css

@@ -3,13 +3,23 @@
  */
 
 @layer design-system.atoms {
-  .form__item {
+  .mx-form-item {
     max-inline-size: var(--container-max-width);
+  }
 
-    &.form__item--inline {
-      display: flex;
-      align-items: flex-start;
-    }
+  .mx-form-item--inline {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  /**
+   * Form actions.
+   */
+  .mx-form-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-s);
   }
 }
 
@@ -18,20 +28,7 @@
  */
 
 @layer design-system.atoms {
-  :is(
-      .input__text,
-      [type="text"],
-      [type="search"],
-      [type="tel"],
-      [type="url"],
-      [type="email"],
-      [type="password"],
-      [type="date"],
-      [type="time"],
-      [type="number"],
-      select,
-      textarea
-    ) {
+  :is(.mx-input__text, .mx-input__select, .mx-input__textarea) {
     box-shadow: none;
     font: inherit;
     letter-spacing: inherit;
@@ -72,12 +69,12 @@
     }
   }
 
-  :is(.input--small, .select--small) {
+  .mx-input--small {
     min-inline-size: 0;
     border-width: 1px;
   }
 
-  :is(.input--wide, .select--wide) {
+  .mx-input--wide {
     inline-size: 100%;
   }
 }
@@ -87,7 +84,7 @@
  */
 
 @layer design-system.atoms {
-  .input__divider {
+  .mx-input__divider {
     padding: var(--form-spacing, var(--spacing-s));
     line-height: var(--line-height-ui);
   }
@@ -98,7 +95,7 @@
  */
 
 @layer design-system.atoms {
-  .input__text--icon {
+  .mx-input--icon {
     display: inline-block;
     max-inline-size: 100%;
     min-inline-size: 100%;
@@ -113,7 +110,7 @@
       inset-inline-start: var(--form-spacing, var(--spacing-s));
     }
 
-    & input {
+    & .mx-input__text {
       inline-size: 100%;
       padding-inline-start: calc(var(--form-spacing, var(--spacing-s)) * 2.5);
       background-color: transparent;
@@ -137,24 +134,37 @@
  */
 
 @layer design-system.atoms {
-  .input__text--inline {
+  .mx-form--inline-button {
     position: relative;
-    display: inline-block;
+    display: flex;
     max-inline-size: 100%;
     min-inline-size: 100%;
     border-radius: var(--border-radius);
     background-color: var(--background, var(--colour-background));
+    border: var(--line-width, 2px) solid
+      var(--line-colour, var(--line-colour, var(--colour-border)));
 
-    & [type="text"] {
-      inline-size: 100%;
-      padding-inline-end: 7rem;
+    &:has(.mx-input__text:focus-visible) {
+      --outline-size: max(0.125rem, 0.15em);
+
+      outline: var(--outline-width, var(--outline-size))
+        var(--outline-style, solid) var(--outline-color, currentcolor);
+      outline-offset: calc(var(--line-width, 2px) * -1);
+    }
+
+    & .mx-input__text {
       background-color: transparent;
+      border: 0;
+      flex-grow: 1;
+
+      &:focus-visible {
+        outline: none;
+      }
     }
 
-    & [type="submit"] {
-      position: absolute;
-      inset-block-start: var(--spacing-xxxxs);
-      inset-inline-end: var(--spacing-xxxxs);
+    & .mx-button {
+      margin: var(--spacing-xxxxs);
+      flex-shrink: 0;
       border: 0;
       border-radius: 3px;
       block-size: calc(
@@ -169,20 +179,20 @@
  */
 
 @layer design-system.atoms {
-  :is(label, legend) {
+  :is(.mx-label, .mx-legend) {
     display: block;
     margin-block-end: var(--spacing-xxxs);
     font-size: var(--font-size);
     color: var(--label-foreground, var(--foreground, var(--colour-foreground)));
 
-    &.label--inline {
+    &.mx-label--inline {
       display: inline-block;
       margin-block-end: 0;
       margin-inline-end: var(--spacing-xxs);
     }
   }
 
-  [type="checkbox"] {
+  .mx-checkbox [type="checkbox"] {
     box-shadow: none;
     appearance: none;
     inline-size: var(--control-size, var(--spacing-m));
@@ -243,7 +253,7 @@
  */
 
 @layer design-system.atoms {
-  [type="radio"] {
+  .mx-radio [type="radio"] {
     box-shadow: none;
     appearance: none;
     display: flex;
@@ -301,7 +311,7 @@
     }
   }
 
-  :is(.form__radio, .form__checkbox) {
+  :is(.mx-radio, .mx-checkbox) {
     margin-block-end: var(--spacing-xxxs);
     display: flex;
     align-items: center;
@@ -320,19 +330,53 @@
       flex-shrink: 0;
     }
 
-    &.form__item--inline {
+    &.mx-form-item--inline {
       display: inline-flex;
       margin-inline-end: var(--control-gap, var(--spacing-xxs));
     }
   }
 }
 
+/**
+ * Select
+ */
+
+@layer design-system.atoms {
+  .mx-input__select {
+    appearance: none;
+    cursor: pointer;
+    background-color: var(--background, var(--colour-background));
+    background-image: svg-load("./images/form-chevron-down.svg");
+    background-position: right var(--form-spacing, var(--spacing-s)) center;
+    padding-block: 0;
+    padding-inline-end: var(--spacing-xl);
+
+    &[multiple] {
+      block-size: auto;
+      background-image: none;
+    }
+
+    &.mx-input--small {
+      padding-inline-end: var(--spacing-m);
+      background-position: right var(--spacing-xs) center;
+    }
+  }
+
+  :is(.translated-rtl .mx-input__select, [dir="rtl"] .mx-input__select) {
+    background-position: left var(--spacing-s) center;
+
+    &.mx-input--small {
+      background-position: left var(--spacing-xs) center;
+    }
+  }
+}
+
 /**
  * Textarea
  */
 
 @layer design-system.atoms {
-  textarea {
+  .mx-input__textarea {
     block-size: calc(4 * var(--form-element-height, var(--spacing-xxl)));
     inline-size: 100%;
   }
@@ -343,7 +387,7 @@
  */
 
 @layer design-system.atoms {
-  :is(.fieldset, fieldset) {
+  .mx-fieldset {
     border: var(--line-width, 2px) solid
       var(--line-colour, var(--colour-border));
     border-radius: var(--border-radius);
@@ -354,24 +398,24 @@
       padding-block: 0;
       padding-inline: var(--form-spacing, var(--spacing-s));
     }
-  }
 
-  .fieldset--plain {
-    border: 0;
-    padding: 0;
-
-    & legend {
+    &:is(.mx-fieldset--plain, :has(.mx-checkbox, .mx-radio)) {
+      border: 0;
       padding: 0;
+
+      & legend {
+        padding: 0;
+      }
     }
-  }
 
-  .fieldset--inline {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--spacing-xxs);
+    &.mx-fieldset--inline {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-xxs);
 
-    & :is(.form__item, .form__item--inline) {
-      margin: 0;
+      & :is(.form__item, .form__item--inline) {
+        margin: 0;
+      }
     }
   }
 }
@@ -381,7 +425,7 @@
  */
 
 @layer design-system.atoms {
-  .form__description {
+  .mx-description {
     margin-block: var(--form-spacing, var(--spacing-s));
     margin-inline: 0;
     font-size: var(--font-size-xs);
@@ -393,11 +437,11 @@
 }
 
 /**
- * Error message
+ * Messages
  */
 
 @layer design-system.atoms {
-  :is(.form__success-message, .form__error-message) {
+  :is(.mx-success-message, .mx-error-message) {
     margin-block: var(--form-spacing, var(--spacing-s));
     margin-inline: 0;
     font-size: var(--font-size-s);
@@ -420,12 +464,12 @@
     }
   }
 
-  .form__error-message::before {
+  .mx-error-message::before {
     mask-image: svg-load("./images/form-error.svg");
     background-color: var(--error-foreground, var(--colour-error-foreground));
   }
 
-  .form__success-message::before {
+  .mx-success-message::before {
     mask-image: svg-load("./images/form-success.svg");
     background-color: var(
       --success-foreground,
@@ -433,47 +477,3 @@
     );
   }
 }
-
-/**
- * Select
- */
-
-@layer design-system.atoms {
-  select {
-    appearance: none;
-    cursor: pointer;
-    background-color: var(--background, var(--colour-background));
-    background-image: svg-load("./images/form-chevron-down.svg");
-    background-position: right var(--form-spacing, var(--spacing-s)) center;
-    padding-block: 0;
-    padding-inline-end: var(--spacing-xl);
-
-    &[multiple] {
-      block-size: auto;
-      background-image: none;
-    }
-
-    &.input--small {
-      padding-inline-end: var(--spacing-m);
-      background-position: right var(--spacing-xs) center;
-    }
-  }
-
-  :is(.translated-rtl select, [dir="rtl"] select) {
-    background-position: left var(--spacing-s) center;
-
-    &.input--small {
-      background-position: left var(--spacing-xs) center;
-    }
-  }
-
-  /**
-   * Form actions.
-   */
-  .form__actions {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--spacing-s);
-  }
-}