From 16099db75163afe5d3f8c03404e628207651f9b9 Mon Sep 17 00:00:00 2001
From: Andrew Hosgood <andrew.hosgood@nationalarchives.gov.uk>
Date: Wed, 15 Nov 2023 18:17:38 +0000
Subject: [PATCH] More updates to form inputs

---
 .../components/button/button.stories.js       | 34 +++++---
 .../components/button/macro-options.json      |  6 ++
 .../components/button/template.njk            |  3 +
 .../checkboxes/checkboxes.stories.js          | 58 ++++++++++++-
 .../components/checkboxes/template.njk        |  9 +-
 .../components/radios/radios.stories.js       | 58 ++++++++++++-
 .../components/radios/template.njk            |  9 +-
 .../components/select/select.scss             | 17 ++++
 .../components/select/select.stories.js       | 87 ++++++++++++++++++-
 .../components/select/template.njk            | 20 +++--
 .../components/text-input/template.njk        |  3 +-
 .../text-input/text-input.stories.js          |  5 +-
 .../components/textarea/template.njk          |  2 +-
 .../components/textarea/textarea.scss         |  8 +-
 .../components/textarea/textarea.stories.js   |  4 +-
 src/nationalarchives/utilities/_forms.scss    |  8 ++
 16 files changed, 290 insertions(+), 41 deletions(-)

diff --git a/src/nationalarchives/components/button/button.stories.js b/src/nationalarchives/components/button/button.stories.js
index c3f1497a..71975ab0 100644
--- a/src/nationalarchives/components/button/button.stories.js
+++ b/src/nationalarchives/components/button/button.stories.js
@@ -12,6 +12,7 @@ const argTypes = {
   plain: { control: "boolean" },
   iconOnly: { control: "boolean" },
   iconOnlyOnMobile: { control: "boolean" },
+  rightAlignIcon: { control: "boolean" },
   buttonElement: { control: "boolean" },
   classes: { control: "text" },
   attributes: { control: "object" },
@@ -39,6 +40,7 @@ const Template = ({
   plain,
   iconOnly,
   iconOnlyOnMobile,
+  rightAlignIcon,
   buttonElement,
   classes,
   attributes,
@@ -55,6 +57,7 @@ const Template = ({
       plain,
       iconOnly,
       iconOnlyOnMobile,
+      rightAlignIcon,
       buttonElement,
       classes,
       attributes,
@@ -84,12 +87,12 @@ Icon.args = {
   classes: "tna-button--demo",
 };
 
-export const SmallIcon = Template.bind({});
-SmallIcon.args = {
-  text: "Explore the collection",
+export const RightAlignedIcon = Template.bind({});
+RightAlignedIcon.args = {
+  text: "Search",
   href: "#",
-  icon: "map-location-dot",
-  small: true,
+  icon: "chevron-right",
+  rightAlignIcon: true,
   classes: "tna-button--demo",
 };
 
@@ -110,21 +113,30 @@ IconOnly.args = {
   classes: "tna-button--demo",
 };
 
-export const SmallIconOnly = Template.bind({});
-SmallIconOnly.args = {
+export const Small = Template.bind({});
+Small.args = {
+  text: "Small button",
+  href: "#",
+  small: true,
+  classes: "tna-button--demo",
+};
+
+export const SmallWithIcon = Template.bind({});
+SmallWithIcon.args = {
   text: "Explore the collection",
   href: "#",
   icon: "map-location-dot",
   small: true,
-  iconOnly: true,
   classes: "tna-button--demo",
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  text: "Small button",
+export const SmallIconOnly = Template.bind({});
+SmallIconOnly.args = {
+  text: "Explore the collection",
   href: "#",
+  icon: "map-location-dot",
   small: true,
+  iconOnly: true,
   classes: "tna-button--demo",
 };
 
diff --git a/src/nationalarchives/components/button/macro-options.json b/src/nationalarchives/components/button/macro-options.json
index 44b34d60..cdf506c3 100644
--- a/src/nationalarchives/components/button/macro-options.json
+++ b/src/nationalarchives/components/button/macro-options.json
@@ -59,6 +59,12 @@
     "required": false,
     "description": ""
   },
+  {
+    "name": "rightAlignIcon",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
   {
     "name": "buttonElement",
     "type": "boolean",
diff --git a/src/nationalarchives/components/button/template.njk b/src/nationalarchives/components/button/template.njk
index b7e3492f..ffb1dc6e 100644
--- a/src/nationalarchives/components/button/template.njk
+++ b/src/nationalarchives/components/button/template.njk
@@ -14,6 +14,9 @@
 {%- if params.iconOnlyOnMobile -%}
   {%- set buttonClasses = buttonClasses.concat('tna-button--icon-only-mobile') -%}
 {%- endif -%}
+{%- if params.rightAlignIcon -%}
+  {%- set buttonClasses = buttonClasses.concat('tna-button--icon-right') -%}
+{%- endif -%}
 <{{ 'button' if params.buttonElement else 'a' }}{%- if not params.buttonElement %} href="{{ params.href }}"{%- endif %} class="tna-button {{ buttonClasses | join(' ') }}"{%- if not params.buttonElement %} role="button"{%- endif -%}{%- if params.title %} title="{{ params.title }}"{% endif %}{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {%- if params.brandIcon %}
   <i class="fa-brands fa-fw fa-{{ params.brandIcon }}" aria-hidden="true"></i>
diff --git a/src/nationalarchives/components/checkboxes/checkboxes.stories.js b/src/nationalarchives/components/checkboxes/checkboxes.stories.js
index d90fd8ee..e3d07a59 100644
--- a/src/nationalarchives/components/checkboxes/checkboxes.stories.js
+++ b/src/nationalarchives/components/checkboxes/checkboxes.stories.js
@@ -4,9 +4,10 @@ import macroOptions from "./macro-options.json";
 const argTypes = {
   label: { control: "text" },
   headingLevel: { control: { type: "number", min: 1, max: 6 } },
-  headingSize: { control: "inline-radio", options: ["s", "m"] },
+  headingSize: { control: "inline-radio", options: ["s", "m", "l", "xl"] },
   name: { control: "text" },
   hint: { control: "text" },
+  error: { control: "object" },
   items: { control: "object" },
   small: { control: "boolean" },
   classes: { control: "text" },
@@ -30,6 +31,7 @@ const Template = ({
   headingSize,
   name,
   hint,
+  error,
   items,
   small,
   classes,
@@ -42,6 +44,7 @@ const Template = ({
       headingSize,
       name,
       hint,
+      error,
       items,
       small,
       classes,
@@ -55,7 +58,6 @@ Standard.args = {
   headingLevel: 4,
   headingSize: "m",
   name: "categories1",
-  hint: "Select all that apply.",
   items: [
     {
       text: "Alpha",
@@ -79,7 +81,6 @@ Small.args = {
   headingLevel: 4,
   headingSize: "m",
   name: "categories2",
-  hint: "Select all that apply.",
   items: [
     {
       text: "Admiralty, Navy, Royal Marines, and Coastguard",
@@ -132,7 +133,6 @@ Preselected.args = {
   headingLevel: 4,
   headingSize: "m",
   name: "categories3",
-  hint: "Select all that apply.",
   items: [
     {
       text: "Alpha",
@@ -150,3 +150,53 @@ Preselected.args = {
   ],
   classes: "tna-checkboxes--demo",
 };
+
+export const WithHint = Template.bind({});
+WithHint.args = {
+  label: "Categories",
+  headingLevel: 4,
+  headingSize: "m",
+  name: "categories4",
+  hint: "Select all that apply.",
+  items: [
+    {
+      text: "Alpha",
+      value: "alpha",
+    },
+    {
+      text: "Beta",
+      value: "beta",
+    },
+    {
+      text: "Gamma",
+      value: "gamma",
+    },
+  ],
+  classes: "tna-checkboxes--demo",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  label: "Categories",
+  headingLevel: 4,
+  headingSize: "m",
+  name: "categories5",
+  error: {
+    text: "You must select a category",
+  },
+  items: [
+    {
+      text: "Alpha",
+      value: "alpha",
+    },
+    {
+      text: "Beta",
+      value: "beta",
+    },
+    {
+      text: "Gamma",
+      value: "gamma",
+    },
+  ],
+  classes: "tna-checkboxes--demo",
+};
diff --git a/src/nationalarchives/components/checkboxes/template.njk b/src/nationalarchives/components/checkboxes/template.njk
index 5629fa75..fc364a6d 100644
--- a/src/nationalarchives/components/checkboxes/template.njk
+++ b/src/nationalarchives/components/checkboxes/template.njk
@@ -1,8 +1,8 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-<div class="tna-form__group {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <fieldset class="tna-form__fieldset"{% if params.hint %} aria-describedby="tna-form__{{ params.name }}-hint"{% endif %}>
     <legend class="tna-form__legend">
-      <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize }}">
+      <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
         {{ params.label }}
       </h{{ params.headingLevel }}>
     </legend>
@@ -11,6 +11,11 @@
       {{ params.hint }}
     </div>
     {%- 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 %}
     <div class="tna-checkboxes{% if params.small %} tna-checkboxes--small{% endif %}">
       {%- for item in params.items %}
       <div class="tna-checkboxes__item">
diff --git a/src/nationalarchives/components/radios/radios.stories.js b/src/nationalarchives/components/radios/radios.stories.js
index f54f7ec5..9898da9e 100644
--- a/src/nationalarchives/components/radios/radios.stories.js
+++ b/src/nationalarchives/components/radios/radios.stories.js
@@ -4,9 +4,10 @@ import macroOptions from "./macro-options.json";
 const argTypes = {
   label: { control: "text" },
   headingLevel: { control: { type: "number", min: 1, max: 6 } },
-  headingSize: { control: "inline-radio", options: ["s", "m"] },
+  headingSize: { control: "inline-radio", options: ["s", "m", "l", "xl"] },
   name: { control: "text" },
   hint: { control: "text" },
+  error: { control: "object" },
   items: { control: "object" },
   selected: { control: "text" },
   small: { control: "boolean" },
@@ -31,6 +32,7 @@ const Template = ({
   headingSize,
   name,
   hint,
+  error,
   items,
   selected,
   small,
@@ -44,6 +46,7 @@ const Template = ({
       headingSize,
       name,
       hint,
+      error,
       items,
       selected,
       small,
@@ -58,7 +61,6 @@ Standard.args = {
   headingLevel: 4,
   headingSize: "m",
   name: "type1",
-  hint: "You can only select one.",
   items: [
     {
       text: "Audio",
@@ -82,7 +84,6 @@ Small.args = {
   headingLevel: 4,
   headingSize: "m",
   name: "type2",
-  hint: "You can only select one.",
   items: [
     {
       text: "Admiralty, Navy, Royal Marines, and Coastguard",
@@ -135,7 +136,6 @@ Preselected.args = {
   headingLevel: 4,
   headingSize: "m",
   name: "type3",
-  hint: "You can only select one.",
   items: [
     {
       text: "Audio",
@@ -153,3 +153,53 @@ Preselected.args = {
   selected: "image",
   classes: "tna-radios--demo",
 };
+
+export const WithHint = Template.bind({});
+WithHint.args = {
+  label: "Type",
+  headingLevel: 4,
+  headingSize: "m",
+  name: "type4",
+  hint: "You can only select one.",
+  items: [
+    {
+      text: "Audio",
+      value: "audio",
+    },
+    {
+      text: "Image",
+      value: "image",
+    },
+    {
+      text: "Video",
+      value: "video",
+    },
+  ],
+  classes: "tna-radios--demo",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  label: "Type",
+  headingLevel: 4,
+  headingSize: "m",
+  name: "type5",
+  error: {
+    text: "You must select a type",
+  },
+  items: [
+    {
+      text: "Audio",
+      value: "audio",
+    },
+    {
+      text: "Image",
+      value: "image",
+    },
+    {
+      text: "Video",
+      value: "video",
+    },
+  ],
+  classes: "tna-radios--demo",
+};
diff --git a/src/nationalarchives/components/radios/template.njk b/src/nationalarchives/components/radios/template.njk
index cf1ba83c..7ce3e617 100644
--- a/src/nationalarchives/components/radios/template.njk
+++ b/src/nationalarchives/components/radios/template.njk
@@ -1,8 +1,8 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-<div class="tna-form__group {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <fieldset class="tna-form__fieldset"{% if params.hint %} aria-describedby="tna-form__{{ params.name }}-hint"{% endif %}>
     <legend class="tna-form__legend">
-      <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize }}">
+      <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
         {{ params.label }}
       </h{{ params.headingLevel }}>
     </legend>
@@ -11,6 +11,11 @@
       {{ params.hint }}
     </div>
     {%- 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 %}
     <div class="tna-radios{% if params.small %} tna-radios--small{% endif %}">
       {%- for item in params.items %}
       <div class="tna-radios__item">
diff --git a/src/nationalarchives/components/select/select.scss b/src/nationalarchives/components/select/select.scss
index 2095587e..56a4a490 100644
--- a/src/nationalarchives/components/select/select.scss
+++ b/src/nationalarchives/components/select/select.scss
@@ -3,6 +3,7 @@
 @use "../../utilities";
 
 .tna-select {
+  max-width: 100%;
   height: calc(2rem + 6px);
   margin-top: 1rem;
   padding: 0 0.5rem 0 0.25rem;
@@ -17,4 +18,20 @@
 
   @include colour.colour-border("input-border", forms.$form-field-border-width);
   border-radius: 0;
+
+  &--s {
+    width: 10rem;
+  }
+
+  &--m {
+    width: 20rem;
+  }
+
+  &--l {
+    width: 40rem;
+  }
+
+  &--xl {
+    width: 80rem;
+  }
 }
diff --git a/src/nationalarchives/components/select/select.stories.js b/src/nationalarchives/components/select/select.stories.js
index d24394c6..231dbeea 100644
--- a/src/nationalarchives/components/select/select.stories.js
+++ b/src/nationalarchives/components/select/select.stories.js
@@ -4,10 +4,13 @@ import macroOptions from "./macro-options.json";
 const argTypes = {
   label: { control: "text" },
   headingLevel: { control: { type: "number", min: 1, max: 6 } },
-  headingSize: { control: "inline-radio", options: ["s", "m"] },
+  headingSize: { control: "inline-radio", options: ["s", "m", "l", "xl"] },
   name: { control: "text" },
   hint: { control: "text" },
+  error: { control: "object" },
   items: { control: "object" },
+  selected: { control: "text" },
+  size: { control: "inline-radio", options: ["s", "m", "l", "xl"] },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -29,7 +32,10 @@ const Template = ({
   headingSize,
   name,
   hint,
+  error,
   items,
+  selected,
+  size,
   classes,
   attributes,
 }) =>
@@ -40,7 +46,10 @@ const Template = ({
       headingSize,
       name,
       hint,
+      error,
       items,
+      selected,
+      size,
       classes,
       attributes,
     },
@@ -51,7 +60,81 @@ Standard.args = {
   label: "Sort by",
   headingLevel: 4,
   headingSize: "m",
-  name: "sort",
+  name: "sort1",
+  items: [
+    {
+      text: "Relevance",
+      value: "relevance",
+    },
+    {
+      text: "Date",
+      value: "date",
+    },
+    {
+      text: "Title",
+      value: "title",
+    },
+  ],
+  classes: "tna-select--demo",
+};
+
+export const Preselected = Template.bind({});
+Preselected.args = {
+  label: "Sort by",
+  headingLevel: 4,
+  headingSize: "m",
+  name: "sort2",
+  items: [
+    {
+      text: "Relevance",
+      value: "relevance",
+    },
+    {
+      text: "Date",
+      value: "date",
+    },
+    {
+      text: "Title",
+      value: "title",
+    },
+  ],
+  selected: "date",
+  classes: "tna-select--demo",
+};
+
+export const WithHint = Template.bind({});
+WithHint.args = {
+  label: "Sort by",
+  headingLevel: 4,
+  headingSize: "m",
+  name: "sort3",
+  hint: "Select a sort.",
+  items: [
+    {
+      text: "Relevance",
+      value: "relevance",
+    },
+    {
+      text: "Date",
+      value: "date",
+    },
+    {
+      text: "Title",
+      value: "title",
+    },
+  ],
+  classes: "tna-select--demo",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  label: "Sort by",
+  headingLevel: 4,
+  headingSize: "m",
+  name: "sort4",
+  error: {
+    text: "You must select a type",
+  },
   items: [
     {
       text: "Relevance",
diff --git a/src/nationalarchives/components/select/template.njk b/src/nationalarchives/components/select/template.njk
index 6a040ec9..d9bb8e20 100644
--- a/src/nationalarchives/components/select/template.njk
+++ b/src/nationalarchives/components/select/template.njk
@@ -1,18 +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 %}>
-  <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize }}">
-    <label class="tna-form__label" for="tna-form__{{ params.name }}">
+{%- 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 or 'm' }}">
+    <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 %}
-  <select class="tna-select" id="tna-form__{{ params.name }}"{% 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 %}
+  <select class="tna-select{% if params.size %} tna-select--{{ params.size }}{% endif %}" id="tna-form__{{ params.name }}"{% if params.hint %} aria-describedby="tna-form__{{ params.name }}-hint"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
     {%- for item in params.items %}
-    <option value="{{ item.value }}">{{ item.text }}</option>
+    <option value="{{ item.value }}"{% if item.value === params.selected %} selected{% endif %}>{{ item.text }}</option>
     {%- endfor %}
   </select>
 </div>
diff --git a/src/nationalarchives/components/text-input/template.njk b/src/nationalarchives/components/text-input/template.njk
index 03317b07..f41636c8 100644
--- a/src/nationalarchives/components/text-input/template.njk
+++ b/src/nationalarchives/components/text-input/template.njk
@@ -1,7 +1,7 @@
 {%- 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 }}">
+  <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
     <label class="tna-form__label" for="tna-form__{{ params.id }}">
       {{ params.label }}
     </label>
@@ -18,6 +18,7 @@
   {%- 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.maxLength %} maxlength="{{ params.maxLength }}"{% endif %}
   {%- if params.autofill %} autofill="{{ params.autofill }}"{% endif %}
   {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
diff --git a/src/nationalarchives/components/text-input/text-input.stories.js b/src/nationalarchives/components/text-input/text-input.stories.js
index 56e5297e..f39db570 100644
--- a/src/nationalarchives/components/text-input/text-input.stories.js
+++ b/src/nationalarchives/components/text-input/text-input.stories.js
@@ -4,7 +4,7 @@ import macroOptions from "./macro-options.json";
 const argTypes = {
   label: { control: "text" },
   headingLevel: { control: { type: "number", min: 1, max: 6 } },
-  headingSize: { control: "inline-radio", options: ["s", "m"] },
+  headingSize: { control: "inline-radio", options: ["s", "m", "l", "xl"] },
   id: { control: "text" },
   name: { control: "text" },
   hint: { control: "text" },
@@ -66,6 +66,7 @@ const argTypes = {
     ],
   },
   size: { control: "inline-radio", options: ["xs", "s", "m", "l", "xl"] },
+  maxLength: { control: "number" },
   classes: { control: "text" },
   formGroupClasses: { control: "text" },
   attributes: { control: "object" },
@@ -95,6 +96,7 @@ const Template = ({
   inputmode,
   autofill,
   size,
+  maxLength,
   classes,
   formGroupClasses,
   attributes,
@@ -113,6 +115,7 @@ const Template = ({
       inputmode,
       autofill,
       size,
+      maxLength,
       classes,
       formGroupClasses,
       attributes,
diff --git a/src/nationalarchives/components/textarea/template.njk b/src/nationalarchives/components/textarea/template.njk
index b63a610f..7ec9b144 100644
--- a/src/nationalarchives/components/textarea/template.njk
+++ b/src/nationalarchives/components/textarea/template.njk
@@ -1,7 +1,7 @@
 {%- 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 }}">
+  <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
     <label class="tna-form__label" for="tna-form__{{ params.id }}">
       {{ params.label }}
     </label>
diff --git a/src/nationalarchives/components/textarea/textarea.scss b/src/nationalarchives/components/textarea/textarea.scss
index 13d07c24..02ba3c76 100644
--- a/src/nationalarchives/components/textarea/textarea.scss
+++ b/src/nationalarchives/components/textarea/textarea.scss
@@ -32,15 +32,15 @@
     @include colour.colour-border("form-error");
   }
 
-  &--s {
+  &--m {
     max-width: 20rem;
   }
 
-  &--m {
+  &--l {
     max-width: 40rem;
   }
 
-  &--l {
-    max-width: 60rem;
+  &--xl {
+    max-width: 80rem;
   }
 }
diff --git a/src/nationalarchives/components/textarea/textarea.stories.js b/src/nationalarchives/components/textarea/textarea.stories.js
index ea0d576f..13f16c2d 100644
--- a/src/nationalarchives/components/textarea/textarea.stories.js
+++ b/src/nationalarchives/components/textarea/textarea.stories.js
@@ -4,14 +4,14 @@ import macroOptions from "./macro-options.json";
 const argTypes = {
   label: { control: "text" },
   headingLevel: { control: { type: "number", min: 1, max: 6 } },
-  headingSize: { control: "inline-radio", options: ["s", "m"] },
+  headingSize: { control: "inline-radio", options: ["s", "m", "l", "xl"] },
   id: { control: "text" },
   name: { control: "text" },
   hint: { control: "text" },
   value: { control: "text" },
   error: { control: "object" },
   spellcheck: { control: "boolean" },
-  size: { control: "inline-radio", options: ["s", "m", "l"] },
+  size: { control: "inline-radio", options: ["m", "l", "xl"] },
   rows: { control: "number" },
   classes: { control: "text" },
   formGroupClasses: { control: "text" },
diff --git a/src/nationalarchives/utilities/_forms.scss b/src/nationalarchives/utilities/_forms.scss
index c7daabf2..e1be902a 100644
--- a/src/nationalarchives/utilities/_forms.scss
+++ b/src/nationalarchives/utilities/_forms.scss
@@ -43,6 +43,14 @@
 
     @extend %heading;
 
+    &--xl {
+      @extend %heading-xl;
+    }
+
+    &--l {
+      @extend %heading-l;
+    }
+
     &--m {
       @extend %heading-m;
     }