Switch classes and attributes on checkboxes and radios

CHANGELOG.md

@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 ### Changed
+
+- Changed `attributes` to `formGroupAttributes` and `classes` to `formClasses` on checkboxes and radios - `attributes` and `classes` now get applied to each checkbox and radio element
+
 ### Deprecated
 ### Removed
 ### Fixed

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

@@ -87,16 +87,28 @@
     "required": false,
     "description": ""
   },
+  {
+    "name": "formGroupClasses",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the checkboxes form group."
+  },
+  {
+    "name": "formGroupAttributes",
+    "type": "string",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the checkboxes form group."
+  },
   {
     "name": "classes",
     "type": "string",
     "required": false,
-    "description": "Classes to add to the checkboxes."
+    "description": "Classes to add to the checkbox elements."
   },
   {
     "name": "attributes",
     "type": "object",
     "required": false,
-    "description": "HTML attributes (for example data attributes) to add to the checkboxes."
+    "description": "HTML attributes (for example data attributes) to add to the checkbox elements."
   }
 ]

src/nationalarchives/components/checkboxes/template.njk

@@ -2,7 +2,7 @@
 {%- if params.inline -%}
   {%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%}
 {%- endif -%}
-<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ 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.formGroupAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <fieldset class="tna-form__fieldset"{%- 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 %}>
     <legend class="tna-form__legend">
       <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
@@ -22,7 +22,7 @@
     <div class="tna-checkboxes{% if params.small or params.inline %} tna-checkboxes--small{% endif %}{% if params.inline %} tna-checkboxes--inline{% endif %}">
       {%- for item in params.items %}
       <div class="tna-checkboxes__item">
-        <input type="checkbox" id="tna-form__{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% if item.checked %} checked{% endif %}>
+        <input type="checkbox" id="tna-form__{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if item.checked %} checked{% endif %}>
         <label for="tna-form__{{ params.id }}-{{ item.value }}" class="tna-checkboxes__item-label">
           {{ item.text }}
         </label>

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

@@ -87,16 +87,28 @@
     "required": false,
     "description": ""
   },
+  {
+    "name": "formGroupClasses",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the radios form group."
+  },
+  {
+    "name": "formGroupAttributes",
+    "type": "string",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the radios form group."
+  },
   {
     "name": "classes",
     "type": "string",
     "required": false,
-    "description": "Classes to add to the radios."
+    "description": "Classes to add to the radio elements."
   },
   {
     "name": "attributes",
     "type": "object",
     "required": false,
-    "description": "HTML attributes (for example data attributes) to add to the radios."
+    "description": "HTML attributes (for example data attributes) to add to the radio elements."
   }
 ]

src/nationalarchives/components/radios/template.njk

@@ -2,7 +2,7 @@
 {%- if params.inline -%}
   {%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%}
 {%- endif -%}
-<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ 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.formGroupAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <fieldset class="tna-form__fieldset"{%- 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 %}>
     <legend class="tna-form__legend">
       <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
@@ -22,7 +22,7 @@
     <div class="tna-radios{% if params.small or params.inline %} tna-radios--small{% endif %}{% if params.inline %} tna-radios--inline{% endif %}">
       {%- for item in params.items %}
       <div class="tna-radios__item">
-        <input type="radio" id="tna-form__{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% if params.selected and item.value === params.selected %} checked{% endif %}>
+        <input type="radio" id="tna-form__{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if params.selected and item.value === params.selected %} checked{% endif %}>
         <label for="tna-form__{{ params.id }}-{{ item.value }}" class="tna-radios__item-label">
           {{ item.text }}
         </label>