More updates to form inputs

nationalarchives · Nov 15, 2023 · 16099db · 16099db
1 parent 581944b
commit 16099db
Show file tree

Hide file tree

Showing 16 changed files with 290 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
+  }
 }