Add textarea, add more fields to text-input

.github/actions/prototype-kit-test/action.yml

@@ -60,7 +60,8 @@ runs:
         echo -e "{% from \"nationalarchives/components/select/macro.njk\" import tnaSelect %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/skip-link/macro.njk\" import tnaSkipLink %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/tabs/macro.njk\" import tnaTabs %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
-        echo -e "{% from \"nationalarchives/components/text-input/macro.njk\" import tnaTextInput %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html
+        echo -e "{% from \"nationalarchives/components/text-input/macro.njk\" import tnaTextInput %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/textarea/macro.njk\" import tnaTextarea %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html
       shell: bash
     - name: Add components to template
       run: >
@@ -91,6 +92,7 @@ runs:
         echo "{{ tnaSkipLink({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaTabs({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaTextInput({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaTextarea({}) }}" >> prototype/app/views/index.html &&
         echo "{% endblock %}" >> prototype/app/views/index.html
       shell: bash
     - name: Run prototype

src/nationalarchives/components/_index.scss

@@ -24,3 +24,4 @@
 @use "skip-link";
 @use "tabs";
 @use "text-input";
+@use "textarea";

src/nationalarchives/components/select/select.stories.js

@@ -6,6 +6,7 @@ const argTypes = {
   headingLevel: { control: { type: "number", min: 1, max: 6 } },
   headingSize: { control: "inline-radio", options: ["s", "m"] },
   name: { control: "text" },
+  hint: { control: "text" },
   items: { control: "object" },
   classes: { control: "text" },
   attributes: { control: "object" },
@@ -27,6 +28,7 @@ const Template = ({
   headingLevel,
   headingSize,
   name,
+  hint,
   items,
   classes,
   attributes,
@@ -37,6 +39,7 @@ const Template = ({
       headingLevel,
       headingSize,
       name,
+      hint,
       items,
       classes,
       attributes,

src/nationalarchives/components/text-input/template.njk

@@ -1,14 +1,24 @@
-{%- set containerClasses = [params.classes] if params.classes else [] -%}
-<div class="tna-form__group {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{%- set inputClasses = [params.classes] if params.classes else [] -%}
+{%- set containerClasses = [params.formGroupClasses] if params.formGroupClasses else [] -%}
+<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ containerClasses | join(' ') }}">
   <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize }}">
-    <label class="tna-form__label" for="tna-form__{{ params.name }}">
+    <label class="tna-form__label" for="tna-form__{{ params.id }}">
       {{ params.label }}
     </label>
   </h{{ params.headingLevel }}>
   {%- if params.hint %}
-  <div id="tna-form__{{ params.name }}-hint" class="tna-form__hint">
+  <div id="tna-form__{{ params.id }}-hint" class="tna-form__hint">
     {{ params.hint }}
   </div>
   {%- endif %}
-  <input type="text" id="tna-form__{{ params.name }}" class="tna-text-input"{% if params.hint %} aria-describedby="tna-form__{{ params.name }}-hint"{% endif %}>
+  {%- if params.error %}
+  <p id="tna-form__{{ params.id }}-error" class="tna-form__error-message">
+    <span class="tna-!--visually-hidden">Error:</span> {{ params.error.text }}
+  </p>
+  {%- endif %}
+  <input type="text" id="tna-form__{{ params.id }}" class="tna-text-input{% if params.size %} tna-text-input--{{ params.size }}{% endif %} {{ inputClasses | join(' ') }}" name="{{ params.name }}" value="{{ params.value }}" spellcheck="{{ params.spellcheck if params.spellcheck else false }}"
+  {%- if params.hint or params.error %} aria-describedby="{% if params.hint %}tna-form__{{ params.id }}-hint{% endif %} {% if params.error %}tna-form__{{ params.id }}-error{% endif %}"{% endif %}
+  {%- if params.autofill %} autofill="{{ params.autofill }}"{% endif %}
+  {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 </div>

src/nationalarchives/components/text-input/text-input.scss

@@ -3,10 +3,12 @@
 @use "../../utilities";
 
 .tna-text-input {
+  width: 100%;
   margin-top: 1rem;
   padding: 0 0.375rem;
 
   display: block;
+  box-sizing: border-box;
 
   @include colour.colour-font("input-foreground");
   font-size: inherit;
@@ -16,4 +18,28 @@
 
   @include colour.colour-border("input-border", forms.$form-field-border-width);
   border-radius: 0;
+
+  .tna-form__group--error & {
+    @include colour.colour-border("form-error");
+  }
+
+  &--xs {
+    max-width: 5rem;
+  }
+
+  &--s {
+    max-width: 10rem;
+  }
+
+  &--m {
+    max-width: 20rem;
+  }
+
+  &--l {
+    max-width: 40rem;
+  }
+
+  &--xl {
+    max-width: 80rem;
+  }
 }

src/nationalarchives/components/text-input/text-input.stories.js

@@ -5,8 +5,69 @@ const argTypes = {
   label: { control: "text" },
   headingLevel: { control: { type: "number", min: 1, max: 6 } },
   headingSize: { control: "inline-radio", options: ["s", "m"] },
+  id: { control: "text" },
   name: { control: "text" },
+  hint: { control: "text" },
+  value: { control: "text" },
+  error: { control: "object" },
+  spellcheck: { control: "boolean" },
+  inputmode: {
+    control: "select",
+    options: ["text", "decimal", "numeric", "tel", "search", "email", "url"],
+  },
+  autofill: {
+    control: "select",
+    options: [
+      "name",
+      "honorific-prefix",
+      "given-name",
+      "additional-name",
+      "family-name",
+      "honorific-suffix",
+      "nickname",
+      "username",
+      "new-password",
+      "current-password",
+      "one-time-code",
+      "organization-title",
+      "organization",
+      "street-address",
+      "address-line1",
+      "address-line2",
+      "address-line3",
+      "address-level4",
+      "address-level3",
+      "address-level2",
+      "address-level1",
+      "country",
+      "country-name",
+      "postal-code",
+      // "cc-name",
+      // "cc-given-name",
+      // "cc-additional-name",
+      // "cc-family-name",
+      // "cc-number",
+      // "cc-exp",
+      // "cc-exp-month",
+      // "cc-exp-year",
+      // "cc-csc",
+      // "cc-type",
+      // "transaction-currency",
+      // "transaction-amount",
+      "language",
+      "bday",
+      "bday-day",
+      "bday-month",
+      "bday-year",
+      "sex",
+      "url",
+      "photo",
+      "email",
+    ],
+  },
+  size: { control: "inline-radio", options: ["xs", "s", "m", "l", "xl"] },
   classes: { control: "text" },
+  formGroupClasses: { control: "text" },
   attributes: { control: "object" },
 };
 
@@ -25,17 +86,35 @@ const Template = ({
   label,
   headingLevel,
   headingSize,
+  id,
   name,
+  hint,
+  value,
+  error,
+  spellcheck,
+  inputmode,
+  autofill,
+  size,
   classes,
+  formGroupClasses,
   attributes,
 }) =>
   TextInput({
     params: {
       label,
       headingLevel,
       headingSize,
+      id,
       name,
+      hint,
+      value,
+      error,
+      spellcheck,
+      inputmode,
+      autofill,
+      size,
       classes,
+      formGroupClasses,
       attributes,
     },
   });
@@ -45,6 +124,31 @@ Standard.args = {
   label: "Enter your first name",
   headingLevel: 4,
   headingSize: "m",
-  name: "firstname",
+  id: "firstname1",
+  name: "firstname1",
+  classes: "tna-text-input--demo",
+};
+
+export const Predefined = Template.bind({});
+Predefined.args = {
+  label: "Edit your first name",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "firstname2",
+  name: "firstname2",
+  value: "John",
+  classes: "tna-text-input--demo",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  label: "Enter your first name",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "firstname3",
+  name: "firstname3",
+  error: {
+    text: "Enter a name",
+  },
   classes: "tna-text-input--demo",
 };

src/nationalarchives/components/textarea/_index.scss

@@ -0,0 +1 @@
+@use "textarea";

src/nationalarchives/components/textarea/fixtures.json

@@ -0,0 +1,4 @@
+{
+  "component": "textarea",
+  "fixtures": []
+}

src/nationalarchives/components/textarea/macro-options.json

@@ -0,0 +1,14 @@
+[
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the textarea."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the textarea."
+  }
+]

src/nationalarchives/components/textarea/macro.njk

@@ -0,0 +1,3 @@
+{% macro tnaTextarea(params) %}
+  {%- include "nationalarchives/components/textarea/template.njk" -%}
+{% endmacro %}

src/nationalarchives/components/textarea/template.njk

@@ -0,0 +1,19 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %}">
+  <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize }}">
+    <label class="tna-form__label" for="tna-form__{{ params.name }}">
+      {{ params.label }}
+    </label>
+  </h{{ params.headingLevel }}>
+  {%- if params.hint %}
+  <div id="tna-form__{{ params.name }}-hint" class="tna-form__hint">
+    {{ params.hint }}
+  </div>
+  {%- endif %}
+  {%- if params.error %}
+  <p id="tna-form__{{ params.name }}-error" class="tna-form__error-message">
+    <span class="tna-!--visually-hidden">Error:</span> {{ params.error.text }}
+  </p>
+  {%- endif %}
+  <textarea id="tna-form__{{ params.name }}" class="tna-textarea"{% if params.hint or params.error %} aria-describedby="{% if params.hint %}tna-form__{{ params.name }}-hint{% endif %} {% if params.error %}tna-form__{{ params.name }}-error{% endif %}"{% endif %}{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ params.value }}</textarea>
+</div>

src/nationalarchives/components/textarea/textarea.scss

@@ -0,0 +1,28 @@
+@use "../../variables/forms";
+@use "../../tools/colour";
+@use "../../utilities";
+
+.tna-textarea {
+  width: 100%;
+  min-height: 5rem;
+  margin-top: 1rem;
+  padding: 0.375rem;
+
+  display: block;
+  box-sizing: border-box;
+  resize: vertical;
+
+  @include colour.colour-font("input-foreground");
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 2rem;
+
+  @include colour.colour-background("input-background");
+
+  @include colour.colour-border("input-border", forms.$form-field-border-width);
+  border-radius: 0;
+
+  .tna-form__group--error & {
+    @include colour.colour-border("form-error");
+  }
+}