From d911c1a707e04f977952c7d63620836184de8800 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 26 Jun 2020 22:32:42 +0100
Subject: [PATCH 1/9] Add GovukRadiosFieldWithNoneOption

---
 app/main/forms.py | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/main/forms.py b/app/main/forms.py
index 726195f49..d754913c7 100644
--- a/app/main/forms.py
+++ b/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:

From e8a74b7ed159d79b0617b512f4bf351ec76bbe90 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 26 Jun 2020 22:33:09 +0100
Subject: [PATCH 2/9] Convert radios on set email branding page

Changes SetEmailBranding.branding_style to
GovukRadiosFieldWithNoneOption.
---
 app/main/forms.py                                              | 2 +-
 .../organisation/settings/set-email-branding.html              | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/main/forms.py b/app/main/forms.py
index d754913c7..82e4a20ad 100644
--- a/app/main/forms.py
+++ b/app/main/forms.py
@@ -1729,7 +1729,7 @@ class ServiceSwitchChannelForm(ServiceOnOffSettingForm):
 
 class SetEmailBranding(StripWhitespaceForm):
 
-    branding_style = RadioFieldWithNoneOption(
+    branding_style = GovukRadiosFieldWithNoneOption(
         'Branding style',
         thing='a branding style',
     )
diff --git a/app/templates/views/organisations/organisation/settings/set-email-branding.html b/app/templates/views/organisations/organisation/settings/set-email-branding.html
index 6c9ef0995..172448e48 100644
--- a/app/templates/views/organisations/organisation/settings/set-email-branding.html
+++ b/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 %}
@@ -31,7 +30,7 @@
           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">

From 8e3cddd66d291366c549408bea990ad595c9d431 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 26 Jun 2020 20:56:44 +0100
Subject: [PATCH 3/9] Convert radios on set letter brand page

---
 .../organisation/settings/set-letter-branding.html             | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/templates/views/organisations/organisation/settings/set-letter-branding.html b/app/templates/views/organisations/organisation/settings/set-letter-branding.html
index a612c9696..57114bf98 100644
--- a/app/templates/views/organisations/organisation/settings/set-letter-branding.html
+++ b/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 %}
@@ -31,7 +30,7 @@
           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">

From 22e64217990a10b17120e2ad51517a466cc92f1c Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 26 Jun 2020 21:57:36 +0100
Subject: [PATCH 4/9] Convert radios on email branding page

---
 app/templates/views/service-settings/set-email-branding.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/templates/views/service-settings/set-email-branding.html b/app/templates/views/service-settings/set-email-branding.html
index e8baba461..43c6d3705 100644
--- a/app/templates/views/service-settings/set-email-branding.html
+++ b/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 %}
@@ -31,7 +30,7 @@
           label='Search branding styles by name',
           autofocus=True
         ) }}
-        {{ radios(form.branding_style) }}
+        {{ form.branding_style }}
       </div>
     </div>
     {{ sticky_page_footer('Preview') }}

From 4fc6bc10c7e9deff627b0e330433ba14ea560665 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 30 Jun 2020 16:36:14 +0100
Subject: [PATCH 5/9] Convert radios on set letter branding page

---
 app/templates/views/service-settings/set-letter-branding.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/templates/views/service-settings/set-letter-branding.html b/app/templates/views/service-settings/set-letter-branding.html
index 4cb919a81..776627d6d 100644
--- a/app/templates/views/service-settings/set-letter-branding.html
+++ b/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 %}
@@ -31,7 +30,7 @@
           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">

From 4e47b62aa30ad42563c830e289fb428055ea12a6 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Thu, 10 Dec 2020 17:00:55 +0000
Subject: [PATCH 6/9] Update previewPane JS and JS radios test helpers

The previewPane JS used selectors that targeted
the old form of radios HTML.

The JS tests also contained selectors like this
and fragments of HTML, used for fixtures, modelled
on the old radios HTML.
---
 app/assets/javascripts/previewPane.js     |  2 +-
 tests/javascripts/previewPane.test.js     |  2 +-
 tests/javascripts/support/helpers/html.js | 21 +++++++++++----------
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/previewPane.js b/app/assets/javascripts/previewPane.js
index 2dac47421..9c6bd50e3 100644
--- a/app/assets/javascripts/previewPane.js
+++ b/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; }
 
diff --git a/tests/javascripts/previewPane.test.js b/tests/javascripts/previewPane.test.js
index f6cccc34c..2f550f8b8 100644
--- a/tests/javascripts/previewPane.test.js
+++ b/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
diff --git a/tests/javascripts/support/helpers/html.js b/tests/javascripts/support/helpers/html.js
index dacc0f930..0f7c086fe 100644
--- a/tests/javascripts/support/helpers/html.js
+++ b/tests/javascripts/support/helpers/html.js
@@ -7,9 +7,9 @@ function getRadios (fields, name) {
     const count = idx + 1;
 
     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="${name}-1" name="${name}" type="radio" value="${field.value}" ${field.checked ? 'checked' : ''}>
+        <label class="govuk-label govuk-radios__label" for="${name}-1">
           ${field.label}
         </label>
       </div>`;
@@ -19,16 +19,17 @@ function getRadios (fields, name) {
 function getRadioGroup (data) {
   let radioGroup = document.createElement('div');
 
+  radioGroup.classList.add('govuk-form-group');
   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.label}
+      </legend>
+      <div class="govuk-radios">
         ${getRadios(data.fields, data.name)}
-      </fieldset>
-    </div>`;
+      </div>
+    </fieldset>`;
 
     return radioGroup;
 };

From d620d9ea08d30807b1ebfb3af4a9a81809079d5b Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 11 Dec 2020 15:36:04 +0000
Subject: [PATCH 7/9] Hide legend on SetEmailBranding.branding_style

Effects all routes that use that form, or
SetLetterBranding, which inherits from it:
- /organisations/<service_id>/settings/set-letter-branding
- /organisations/<service_id>/settings/set-email-branding
- /<service_id>/service-settings/set-letter-branding
- /<service_id>/service-settings/set-email-branding
---
 app/main/forms.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/main/forms.py b/app/main/forms.py
index 82e4a20ad..f9ba5a655 100644
--- a/app/main/forms.py
+++ b/app/main/forms.py
@@ -1731,6 +1731,7 @@ class SetEmailBranding(StripWhitespaceForm):
 
     branding_style = GovukRadiosFieldWithNoneOption(
         'Branding style',
+        param_extensions={'fieldset': {'legend': {'classes': 'govuk-visually-hidden'}}},
         thing='a branding style',
     )
 

From 88e85ea01c16e9e31d0e508325d3d5202381a4e2 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 15 Dec 2020 12:07:28 +0000
Subject: [PATCH 8/9] Update liveSearch JS tests and test helpers

Includes a change to make these tests use the
getRadioGroup helper to reduce duplication across
the tests. This also makes a few changes to the
helper so it can produce the HTML required.
---
 tests/javascripts/liveSearch.test.js      | 87 +++++++++++------------
 tests/javascripts/support/helpers/html.js | 11 +--
 2 files changed, 47 insertions(+), 51 deletions(-)

diff --git a/tests/javascripts/liveSearch.test.js b/tests/javascripts/liveSearch.test.js
index ba7422b92..59ff768bd 100644
--- a/tests/javascripts/liveSearch.test.js
+++ b/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);
diff --git a/tests/javascripts/support/helpers/html.js b/tests/javascripts/support/helpers/html.js
index 0f7c086fe..8e0826837 100644
--- a/tests/javascripts/support/helpers/html.js
+++ b/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="govuk-radios__item">
-        <input class="govuk-radios__input" id="${name}-1" name="${name}" type="radio" value="${field.value}" ${field.checked ? 'checked' : ''}>
-        <label class="govuk-label govuk-radios__label" for="${name}-1">
+        <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>`;
@@ -20,10 +21,12 @@ function getRadioGroup (data) {
   let radioGroup = document.createElement('div');
 
   radioGroup.classList.add('govuk-form-group');
-  data.cssClasses.forEach(cssClass => radioGroup.classList.add(cssClass));
+  if ('cssClasses' in data) {
+    data.cssClasses.forEach(cssClass => radioGroup.classList.add(cssClass));
+  }
   radioGroup.innerHTML = `
     <fieldset class="govuk-fieldset" id="${data.name}">
-      <legend class="govuk-fieldset__legend">
+      <legend class="govuk-fieldset__legend${data.hideLegend ? " govuk-visually-hidden" : ""}">
         ${data.label}
       </legend>
       <div class="govuk-radios">

From ea98681b24d9812052a5df852997dae4809e543e Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 15 Dec 2020 11:40:49 +0000
Subject: [PATCH 9/9] Update liveSearch selector in set email|letter

Changes the selector the live search in the set
email and letter branding pages in service
settings and organisation settings. The current
one targeted the old radios HTML whereas this
version targets the same for the GOVUK Frontend
radios.
---
 .../organisations/organisation/settings/set-email-branding.html | 2 +-
 .../organisation/settings/set-letter-branding.html              | 2 +-
 app/templates/views/service-settings/set-email-branding.html    | 2 +-
 app/templates/views/service-settings/set-letter-branding.html   | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/templates/views/organisations/organisation/settings/set-email-branding.html b/app/templates/views/organisations/organisation/settings/set-email-branding.html
index 172448e48..fa76c6ea3 100644
--- a/app/templates/views/organisations/organisation/settings/set-email-branding.html
+++ b/app/templates/views/organisations/organisation/settings/set-email-branding.html
@@ -24,7 +24,7 @@
     <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',
diff --git a/app/templates/views/organisations/organisation/settings/set-letter-branding.html b/app/templates/views/organisations/organisation/settings/set-letter-branding.html
index 57114bf98..3dd3d5d7a 100644
--- a/app/templates/views/organisations/organisation/settings/set-letter-branding.html
+++ b/app/templates/views/organisations/organisation/settings/set-letter-branding.html
@@ -24,7 +24,7 @@
     <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',
diff --git a/app/templates/views/service-settings/set-email-branding.html b/app/templates/views/service-settings/set-email-branding.html
index 43c6d3705..7945b024a 100644
--- a/app/templates/views/service-settings/set-email-branding.html
+++ b/app/templates/views/service-settings/set-email-branding.html
@@ -24,7 +24,7 @@
     <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',
diff --git a/app/templates/views/service-settings/set-letter-branding.html b/app/templates/views/service-settings/set-letter-branding.html
index 776627d6d..28ada9262 100644
--- a/app/templates/views/service-settings/set-letter-branding.html
+++ b/app/templates/views/service-settings/set-letter-branding.html
@@ -24,7 +24,7 @@
     <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',