Allow preselected radio and checkboxes

nationalarchives · Oct 11, 2023 · 01a3501 · 01a3501
1 parent 3b25c3e
commit 01a3501
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 3 deletions.
diff --git a/src/nationalarchives/components/checkboxes/checkboxes.stories.js b/src/nationalarchives/components/checkboxes/checkboxes.stories.js
@@ -125,3 +125,28 @@ Small.args = {
   small: true,
   classes: "tna-checkboxes--demo",
 };
+
+export const Preselected = Template.bind({});
+Preselected.args = {
+  label: "Categories",
+  headingLevel: 4,
+  headingSize: "m",
+  name: "categories3",
+  hint: "Select all that apply.",
+  items: [
+    {
+      text: "Alpha",
+      value: "alpha",
+    },
+    {
+      text: "Beta",
+      value: "beta",
+      checked: true
+    },
+    {
+      text: "Gamma",
+      value: "gamma",
+    },
+  ],
+  classes: "tna-checkboxes--demo",
+};
diff --git a/src/nationalarchives/components/checkboxes/template.njk b/src/nationalarchives/components/checkboxes/template.njk
@@ -14,7 +14,7 @@
     <div class="tna-checkboxes{% if params.small %} tna-checkboxes--small{% endif %}">
       {%- for item in params.items %}
       <div class="tna-checkboxes__item">
-        <input type="checkbox" id="tna-form__{{ params.name }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}">
+        <input type="checkbox" id="tna-form__{{ params.name }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% if item.checked %} checked{% endif %}>
         <label for="tna-form__{{ params.name }}-{{ item.value }}" class="tna-checkboxes__item-label">
           {{ item.text }}
         </label>

diff --git a/src/nationalarchives/components/radios/radios.stories.js b/src/nationalarchives/components/radios/radios.stories.js
@@ -8,6 +8,7 @@ const argTypes = {
   name: { control: "text" },
   hint: { control: "text" },
   items: { control: "object" },
+  selected: { control: "text" },
   small: { control: "boolean" },
   classes: { control: "text" },
   attributes: { control: "object" },
@@ -31,6 +32,7 @@ const Template = ({
   name,
   hint,
   items,
+  selected,
   small,
   classes,
   attributes,
@@ -43,6 +45,7 @@ const Template = ({
       name,
       hint,
       items,
+      selected,
       small,
       classes,
       attributes,
@@ -80,6 +83,59 @@ Small.args = {
   headingSize: "m",
   name: "type2",
   hint: "You can only select one.",
+  items: [
+    {
+      text: "Admiralty, Navy, Royal Marines, and Coastguard",
+      value: "ADM",
+    },
+    {
+      text: "Air Ministry and Royal Air Force records",
+      value: "AIR",
+    },
+    {
+      text: "Board of Trade and successors",
+      value: "BT",
+    },
+    {
+      text: "Chancery, the Wardrobe, Royal Household, Exchequer and various commissions",
+      value: "C",
+    },
+    {
+      text: "Colonial Office, Commonwealth and Foreign and Commonwealth Offices",
+      value: "CO",
+    },
+    {
+      text: "Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations",
+      value: "E",
+    },
+    {
+      text: "Foreign Office",
+      value: "FO",
+    },
+    {
+      text: "Home Office",
+      value: "HO",
+    },
+    {
+      text: "Prerogative Court of Canterbury",
+      value: "PROB",
+    },
+    {
+      text: "War Office, Armed Forces, Judge Advocate General, and related bodies",
+      value: "WO",
+    },
+  ],
+  small: true,
+  classes: "tna-radios--demo",
+};
+
+export const Preselected = Template.bind({});
+Preselected.args = {
+  label: "Type",
+  headingLevel: 4,
+  headingSize: "m",
+  name: "type3",
+  hint: "You can only select one.",
   items: [
     {
       text: "Audio",
@@ -94,6 +150,6 @@ Small.args = {
       value: "video",
     },
   ],
-  small: true,
+  selected: "image",
   classes: "tna-radios--demo",
 };
diff --git a/src/nationalarchives/components/radios/template.njk b/src/nationalarchives/components/radios/template.njk
@@ -14,7 +14,7 @@
     <div class="tna-radios{% if params.small %} tna-radios--small{% endif %}">
       {%- for item in params.items %}
       <div class="tna-radios__item">
-        <input type="radio" id="tna-form__{{ params.name }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}">
+        <input type="radio" id="tna-form__{{ params.name }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% if params.selected and item.value === params.selected %} checked{% endif %}>
         <label for="tna-form__{{ params.name }}-{{ item.value }}" class="tna-radios__item-label">
           {{ item.text }}
         </label>