@nationalarchives/frontend 0.1.33 → 0.1.34

package/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."
   }
 ]

package/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>