Add sample form groups to form elements page

Adds new examples 1. Group of multiple radio fieldsets 2. Group of multiple checkbox fieldsets Fixes alphagov#1079
colinrotherham · Apr 1, 2019 · 8eb1f0b · 8eb1f0b
1 parent da155f6
commit 8eb1f0b
Showing 1 changed file with 178 additions and 0 deletions.
diff --git a/app/views/examples/form-elements/index.njk b/app/views/examples/form-elements/index.njk
@@ -1,4 +1,5 @@
 {% from "back-link/macro.njk" import govukBackLink %}
+{% from "form-group/macro.njk" import govukFormGroup %}
 {% from "fieldset/macro.njk" import govukFieldset %}
 {% from "input/macro.njk" import govukInput %}
 {% from "button/macro.njk" import govukButton %}
@@ -23,8 +24,10 @@
     <li><a href="#input" class="govuk-link">Label and text input</a></li>
     <li><a href="#textarea" class="govuk-link">Label and textarea</a></li>
     <li><a href="#radio-stacked" class="govuk-link">Fieldset, legend and radio buttons (stacked)</a></li>
+    <li><a href="#radio-stacked-subheadings" class="govuk-link">Fieldset, legend and radio buttons with subheadings (stacked)</a></li>
     <li><a href="#radio-inline" class="govuk-link">Fieldset, legend and radio buttons (inline - yes or no)</a></li>
     <li><a href="#checkboxes-stacked" class="govuk-link">Fieldset, legend and checkboxes (stacked)</a></li>
+    <li><a href="#checkboxes-stacked-subheadings" class="govuk-link">Fieldset, legend and checkboxes with subheadings (stacked)</a></li>
     <li><a href="#date" class="govuk-link">Date pattern</a></li>
     <li><a href="#select" class="govuk-link">Select box</a></li>
     <li><a href="#file" class="govuk-link">File upload</a></li>
@@ -80,6 +83,93 @@
       ]
     }) }}
 
+    <span id="radio-stacked-subheadings"></span>
+    {% call govukFormGroup({
+      fieldset: {
+        legend: {
+          text: "Pick one of the following options:",
+          classes: "govuk-fieldset__legend--m"
+        }
+      }
+    }) %}
+
+    {{ govukRadios({
+      "fieldset": {
+        "legend": {
+          text: "Group 1",
+          classes: "govuk-fieldset__legend--s"
+        }
+      },
+      "idPrefix": "radio-stacked-subheadings",
+      "name": "radio-stacked-subheadings",
+      "items": [
+        {
+          "value": "a",
+          "text": "Option A"
+        },
+        {
+          "value": "b",
+          "text": "Option B"
+        },
+        {
+          "value": "c",
+          "text": "Option C"
+        }
+      ]
+    }) }}
+
+    {{ govukRadios({
+      "fieldset": {
+        "legend": {
+          text: "Group 2",
+          classes: "govuk-fieldset__legend--s"
+        }
+      },
+      "idPrefix": "radio-stacked-subheadings",
+      "name": "radio-stacked-subheadings",
+      "items": [
+        {
+          "value": "a",
+          "text": "Option A"
+        },
+        {
+          "value": "b",
+          "text": "Option B"
+        },
+        {
+          "value": "c",
+          "text": "Option C"
+        }
+      ]
+    }) }}
+
+    {{ govukRadios({
+      "fieldset": {
+        "legend": {
+          text: "Group 3",
+          classes: "govuk-fieldset__legend--s"
+        }
+      },
+      "idPrefix": "radio-stacked-subheadings",
+      "name": "radio-stacked-subheadings",
+      "items": [
+        {
+          "value": "a",
+          "text": "Option A"
+        },
+        {
+          "value": "b",
+          "text": "Option B"
+        },
+        {
+          "value": "c",
+          "text": "Option C"
+        }
+      ]
+    }) }}
+
+    {% endcall %}
+
     <span id="radio-inline"></span>
     {{ govukRadios({
       "fieldset": {},
@@ -119,6 +209,94 @@
       ]
     }) }}
 
+    <span id="checkboxes-stacked-subheadings"></span>
+    {% call govukFormGroup({
+      id: "checkboxes-stacked-subheadings",
+      fieldset: {
+        legend: {
+          text: "Which of the following apply?",
+          classes: "govuk-fieldset__legend--m"
+        }
+      }
+    }) %}
+
+    {{ govukCheckboxes({
+      "fieldset": {
+        "legend": {
+          text: "Group 1",
+          classes: "govuk-fieldset__legend--s"
+        }
+      },
+      "idPrefix": "checkboxes-stacked-subheadings",
+      "name": "checkboxes-stacked-subheadings",
+      "items": [
+        {
+          "value": "a",
+          "text": "Option A"
+        },
+        {
+          "value": "b",
+          "text": "Option B"
+        },
+        {
+          "value": "c",
+          "text": "Option C"
+        }
+      ]
+    }) }}
+
+    {{ govukCheckboxes({
+      "fieldset": {
+        "legend": {
+          text: "Group 2",
+          classes: "govuk-fieldset__legend--s"
+        }
+      },
+      "idPrefix": "checkboxes-stacked-subheadings",
+      "name": "checkboxes-stacked-subheadings",
+      "items": [
+        {
+          "value": "a",
+          "text": "Option A"
+        },
+        {
+          "value": "b",
+          "text": "Option B"
+        },
+        {
+          "value": "c",
+          "text": "Option C"
+        }
+      ]
+    }) }}
+
+    {{ govukCheckboxes({
+      "fieldset": {
+        "legend": {
+          text: "Group 3",
+          classes: "govuk-fieldset__legend--s"
+        }
+      },
+      "idPrefix": "checkboxes-stacked-subheadings",
+      "name": "checkboxes-stacked-subheadings",
+      "items": [
+        {
+          "value": "a",
+          "text": "Option A"
+        },
+        {
+          "value": "b",
+          "text": "Option B"
+        },
+        {
+          "value": "c",
+          "text": "Option C"
+        }
+      ]
+    }) }}
+
+    {% endcall %}
+
     <span id="date"></span>
     {{- govukDateInput({
       fieldset: {