Allow attributes option on form groups

alphagov · Dec 14, 2023 · bdce332 · bdce332
1 parent b44d7b0
commit bdce332
Show file tree

Hide file tree

Showing 15 changed files with 39 additions and 7 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml b/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml
@@ -51,6 +51,10 @@ params:
         type: string
         required: false
         description: Classes to add to the form group (for example to show error state for the whole group).
+      - name: attributes
+        type: object
+        required: false
+        description: HTML attributes (for example data attributes) to add to the form group.
   - name: classes
     type: string
     required: false

diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml
@@ -27,6 +27,10 @@ params:
         type: string
         required: false
         description: Classes to add to the form group (for example to show error state for the whole group).
+      - name: attributes
+        type: object
+        required: false
+        description: HTML attributes (for example data attributes) to add to the form group.
   - name: idPrefix
     type: string
     required: false

diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/template.njk b/packages/govuk-frontend/src/govuk/components/checkboxes/template.njk
@@ -103,7 +103,7 @@
   </div>
 {% endset -%}
 
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 {% if params.fieldset %}
   {% call govukFieldset({
     describedBy: describedBy,

diff --git a/packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml b/packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml
@@ -63,6 +63,10 @@ params:
         type: string
         required: false
         description: Classes to add to the form group (for example to show error state for the whole group).
+      - name: attributes
+        type: object
+        required: false
+        description: HTML attributes (for example data attributes) to add to the form group.
   - name: fieldset
     type: object
     required: false

diff --git a/packages/govuk-frontend/src/govuk/components/date-input/template.njk b/packages/govuk-frontend/src/govuk/components/date-input/template.njk
@@ -76,7 +76,7 @@
   </div>
 {% endset -%}
 
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 {% if params.fieldset %}
 {#- We override the fieldset's role to 'group' because otherwise JAWS does not
     announce the description for a fieldset comprised of text inputs, but

diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml
@@ -43,6 +43,10 @@ params:
         type: string
         required: false
         description: Classes to add to the form group (for example to show error state for the whole group).
+      - name: attributes
+        type: object
+        required: false
+        description: HTML attributes (for example data attributes) to add to the form group.
   - name: classes
     type: string
     required: false

diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk
@@ -5,7 +5,7 @@
 {#- a record of other elements that we need to associate with the input using
   aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else "" %}
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,

diff --git a/packages/govuk-frontend/src/govuk/components/input/input.yaml b/packages/govuk-frontend/src/govuk/components/input/input.yaml
@@ -93,6 +93,10 @@ params:
         type: string
         required: false
         description: Classes to add to the form group (for example to show error state for the whole group).
+      - name: attributes
+        type: object
+        required: false
+        description: HTML attributes (for example data attributes) to add to the form group.
   - name: classes
     type: string
     required: false

diff --git a/packages/govuk-frontend/src/govuk/components/input/template.njk b/packages/govuk-frontend/src/govuk/components/input/template.njk
@@ -6,7 +6,7 @@
   aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else "" -%}
 
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,

diff --git a/packages/govuk-frontend/src/govuk/components/radios/radios.yaml b/packages/govuk-frontend/src/govuk/components/radios/radios.yaml
@@ -23,6 +23,10 @@ params:
         type: string
         required: false
         description: Classes to add to the form group (for example to show error state for the whole group).
+      - name: attributes
+        type: object
+        required: false
+        description: HTML attributes (for example data attributes) to add to the form group.
   - name: idPrefix
     type: string
     required: false

diff --git a/packages/govuk-frontend/src/govuk/components/radios/template.njk b/packages/govuk-frontend/src/govuk/components/radios/template.njk
@@ -93,7 +93,7 @@
   </div>
 {% endset -%}
 
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 {% if params.fieldset %}
   {% call govukFieldset({
     describedBy: describedBy,

diff --git a/packages/govuk-frontend/src/govuk/components/select/select.yaml b/packages/govuk-frontend/src/govuk/components/select/select.yaml
@@ -68,6 +68,10 @@ params:
         type: string
         required: false
         description: Classes to add to the form group (for example to show error state for the whole group).
+      - name: attributes
+        type: object
+        required: false
+        description: HTML attributes (for example data attributes) to add to the form group.
   - name: classes
     type: string
     required: false

diff --git a/packages/govuk-frontend/src/govuk/components/select/template.njk b/packages/govuk-frontend/src/govuk/components/select/template.njk
@@ -5,7 +5,7 @@
 {#- a record of other elements that we need to associate with the input using
   aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else "" %}
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,

diff --git a/packages/govuk-frontend/src/govuk/components/textarea/template.njk b/packages/govuk-frontend/src/govuk/components/textarea/template.njk
@@ -5,7 +5,7 @@
 {#- a record of other elements that we need to associate with the input using
   aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else "" %}
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,

diff --git a/packages/govuk-frontend/src/govuk/components/textarea/textarea.yaml b/packages/govuk-frontend/src/govuk/components/textarea/textarea.yaml
@@ -51,6 +51,10 @@ params:
         type: string
         required: false
         description: Classes to add to the form group (for example to show error state for the whole group).
+      - name: attributes
+        type: object
+        required: false
+        description: HTML attributes (for example data attributes) to add to the form group.
   - name: classes
     type: string
     required: false