Merge pull request #3731 from alphagov/add-govuk-radios-5

Add GOVUK radios [part 5]

app/assets/javascripts/previewPane.js

@@ -4,7 +4,7 @@
 
   $ = global.jQuery;
 
-  let branding_style = $('.multiple-choice input[name="branding_style"]:checked');
+  let branding_style = $('.govuk-radios__item input[name="branding_style"]:checked');
 
   if (!branding_style.length) { return; }
 

app/main/forms.py

@@ -951,6 +951,10 @@ class OrganisationTypeField(GovukRadiosField):
         )
 
 
+class GovukRadiosFieldWithNoneOption(FieldWithNoneOption, GovukRadiosField):
+    pass
+
+
 # guard against data entries that aren't a role in permissions
 def filter_by_permissions(valuelist):
     if valuelist is None:
@@ -1728,8 +1732,9 @@ class ServiceSwitchChannelForm(ServiceOnOffSettingForm):
 
 class SetEmailBranding(StripWhitespaceForm):
 
-    branding_style = RadioFieldWithNoneOption(
+    branding_style = GovukRadiosFieldWithNoneOption(
         'Branding style',
+        param_extensions={'fieldset': {'legend': {'classes': 'govuk-visually-hidden'}}},
         thing='a branding style',
     )
 

app/templates/views/organisations/organisation/settings/set-email-branding.html

@@ -1,5 +1,4 @@
 {% extends "org_template.html" %}
-{% from "components/radios.html" import radios %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/live-search.html" import live_search %}
@@ -25,13 +24,13 @@
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-full">
         {{ live_search(
-          target_selector='.multiple-choice',
+          target_selector='.govuk-radios__item',
           show=True,
           form=search_form,
           label='Search branding styles by name',
           autofocus=True
         ) }}
-        {{ radios(form.branding_style) }}
+        {{ form.branding_style }}
       </div>
     </div>
     <div class="js-stick-at-bottom-when-scrolling">

app/templates/views/organisations/organisation/settings/set-letter-branding.html

@@ -1,5 +1,4 @@
 {% extends "org_template.html" %}
-{% from "components/radios.html" import radios %}
 {% from "components/live-search.html" import live_search %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/page-header.html" import page_header %}
@@ -25,13 +24,13 @@
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-full">
         {{ live_search(
-          target_selector='.multiple-choice',
+          target_selector='.govuk-radios__item',
           show=True,
           form=search_form,
           label='Search by name',
           autofocus=True
         ) }}
-        {{ radios(form.branding_style, hide_legend=True) }}
+        {{ form.branding_style }}
       </div>
     </div>
     <div class="js-stick-at-bottom-when-scrolling">

app/templates/views/service-settings/set-email-branding.html

@@ -1,5 +1,4 @@
 {% extends "withnav_template.html" %}
-{% from "components/radios.html" import radios %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer, sticky_page_footer %}
 {% from "components/live-search.html" import live_search %}
@@ -25,13 +24,13 @@
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-full">
         {{ live_search(
-          target_selector='.multiple-choice',
+          target_selector='.govuk-radios__item',
           show=True,
           form=search_form,
           label='Search branding styles by name',
           autofocus=True
         ) }}
-        {{ radios(form.branding_style) }}
+        {{ form.branding_style }}
       </div>
     </div>
     {{ sticky_page_footer('Preview') }}

app/templates/views/service-settings/set-letter-branding.html

@@ -1,5 +1,4 @@
 {% extends "withnav_template.html" %}
-{% from "components/radios.html" import radios %}
 {% from "components/live-search.html" import live_search %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
@@ -25,13 +24,13 @@
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-full">
         {{ live_search(
-          target_selector='.multiple-choice',
+          target_selector='.govuk-radios__item',
           show=True,
           form=search_form,
           label='Search by name',
           autofocus=True
         ) }}
-        {{ radios(form.branding_style, hide_legend=True) }}
+        {{ form.branding_style }}
       </div>
     </div>
     <div class="js-stick-at-bottom-when-scrolling">

tests/javascripts/liveSearch.test.js

@@ -29,51 +29,42 @@ describe('Live search', () => {
 
     searchLabelText = "Search branding styles by name";
 
-    function getRadiosHTML (departments) {
-
-      let result = '';
-
-      departments.forEach((department, idx) => result += `
-        <div class="multiple-choice">
-          <input id="${department.id}" name="${department.name}" type="radio" value="${department.id}">
-          <label class="block-label" for="${department.id}">
-            ${department.label}
-          </label>
-        </div>
-      `);
-
-      return result;
-
-    };
-
     beforeEach(() => {
 
-      const departments = [
-        {
-          'label': 'NHS',
-          'id': 'nhs',
-          'name': 'branding'
-        },
-        {
-          'label': 'Department for Work and Pensions',
-          'id': 'dwp',
-          'name': 'branding'
-        },
-        {
-          'label': 'Department for Education',
-          'id': 'dfe',
-          'name': 'branding'
-        },
-        {
-          'label': 'Home Office',
-          'id': 'home-office',
-          'name': 'branding'
-        }
-      ];
+      const departmentData = {
+        name: 'departments',
+        hideLegend: true,
+        fields: [
+          {
+            'label': 'NHS',
+            'id': 'nhs',
+            'name': 'branding',
+            'value': 'nhs'
+          },
+          {
+            'label': 'Department for Work and Pensions',
+            'id': 'dwp',
+            'name': 'branding',
+            'value': 'dwp'
+          },
+          {
+            'label': 'Department for Education',
+            'id': 'dfe',
+            'name': 'branding',
+            'value': 'dfe'
+          },
+          {
+            'label': 'Home Office',
+            'id': 'home-office',
+            'name': 'branding',
+            'value': 'home-office'
+          }
+        ]
+      };
 
       // set up DOM
       document.body.innerHTML = `
-        <div class="live-search js-header" data-module="live-search" data-targets=".multiple-choice">
+        <div class="live-search js-header" data-module="live-search" data-targets=".govuk-radios__item">
           <div class="form-group">
             <label class="form-label" for="search">
                 ${searchLabelText}
@@ -83,13 +74,15 @@ describe('Live search', () => {
           </div>
         </div>
         <form method="post" autocomplete="off" novalidate>
-          ${getRadiosHTML(departments)}
         </form>`;
 
       searchTextbox = document.getElementById('search');
       liveRegion = document.querySelector('.live-search__status');
       list = document.querySelector('form');
 
+      // getRadioGroup returns a DOM node so append once DOM is set up
+      list.appendChild(helpers.getRadioGroup(departmentData));
+
     });
 
     describe("When the page loads", () => {
@@ -99,7 +92,7 @@ describe('Live search', () => {
         // start the module
         window.GOVUK.modules.start();
 
-        const listItems = list.querySelectorAll('.multiple-choice');
+        const listItems = list.querySelectorAll('.govuk-radios__item');
         const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
 
         expect(listItemsShowing.length).toEqual(listItems.length);
@@ -114,7 +107,7 @@ describe('Live search', () => {
         // start the module
         window.GOVUK.modules.start();
 
-        const listItems = list.querySelectorAll('.multiple-choice');
+        const listItems = list.querySelectorAll('.govuk-radios__item');
         const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
 
         expect(listItemsShowing.length).toEqual(2);
@@ -130,7 +123,7 @@ describe('Live search', () => {
         // start the module
         window.GOVUK.modules.start();
 
-        const listItems = list.querySelectorAll('.multiple-choice');
+        const listItems = list.querySelectorAll('.govuk-radios__item');
         const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
 
         expect(listItemsShowing.length).toEqual(1);
@@ -169,7 +162,7 @@ describe('Live search', () => {
         searchTextbox.value = '';
         helpers.triggerEvent(searchTextbox, 'input');
 
-        const listItems = list.querySelectorAll('.multiple-choice');
+        const listItems = list.querySelectorAll('.govuk-radios__item');
         const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
 
         expect(listItemsShowing.length).toEqual(listItems.length);
@@ -188,7 +181,7 @@ describe('Live search', () => {
         searchTextbox.value = 'Home';
         helpers.triggerEvent(searchTextbox, 'input');
 
-        const listItems = list.querySelectorAll('.multiple-choice');
+        const listItems = list.querySelectorAll('.govuk-radios__item');
         const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
 
         expect(listItemsShowing.length).toEqual(1);
@@ -207,7 +200,7 @@ describe('Live search', () => {
         searchTextbox.value = 'Department for';
         helpers.triggerEvent(searchTextbox, 'input');
 
-        const listItems = list.querySelectorAll('.multiple-choice');
+        const listItems = list.querySelectorAll('.govuk-radios__item');
         const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
 
         expect(listItemsShowing.length).toEqual(2);

tests/javascripts/previewPane.test.js

@@ -65,7 +65,7 @@ describe('Preview pane', () => {
         <div class="govuk-grid-row">
           <div class="govuk-grid-column-full">
             <div data-module="autofocus">
-              <div class="live-search js-header" data-module="live-search" data-targets=".multiple-choice">
+              <div class="live-search js-header" data-module="live-search" data-targets=".govuk-radios__item">
                 <div class="form-group">
                   <label class="form-label" for="search">
                       Search branding styles by name

tests/javascripts/support/helpers/html.js

@@ -5,11 +5,12 @@ function getRadios (fields, name) {
 
   return fields.map((field, idx) => {
     const count = idx + 1;
+    const id = field.id || `${name}-${count}`;
 
     return `
-      <div class="multiple-choice">
-        <input id="${name}-1" name="${name}" type="radio" value="${field.value}" ${field.checked ? 'checked' : ''}>
-        <label class="block-label" for="${name}-1">
+      <div class="govuk-radios__item">
+        <input class="govuk-radios__input" id="${id}" name="${name}" type="radio" value="${field.value}" ${field.checked ? 'checked' : ''}>
+        <label class="govuk-label govuk-radios__label" for="${id}">
           ${field.label}
         </label>
       </div>`;
@@ -19,16 +20,19 @@ function getRadios (fields, name) {
 function getRadioGroup (data) {
   let radioGroup = document.createElement('div');
 
-  data.cssClasses.forEach(cssClass => radioGroup.classList.add(cssClass));
+  radioGroup.classList.add('govuk-form-group');
+  if ('cssClasses' in data) {
+    data.cssClasses.forEach(cssClass => radioGroup.classList.add(cssClass));
+  }
   radioGroup.innerHTML = `
-    <div class="form-group ">
-      <fieldset id="${data.name}">
-        <legend class="form-label">
-          ${data.label}
-        </legend>
+    <fieldset class="govuk-fieldset" id="${data.name}">
+      <legend class="govuk-fieldset__legend${data.hideLegend ? " govuk-visually-hidden" : ""}">
+        ${data.label}
+      </legend>
+      <div class="govuk-radios">
         ${getRadios(data.fields, data.name)}
-      </fieldset>
-    </div>`;
+      </div>
+    </fieldset>`;
 
     return radioGroup;
 };