From 31b344d6b4071dd1250dda3c445fecdedc846261 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 26 Jan 2021 15:43:59 +0000
Subject: [PATCH] Make radioSelect use GOVUK Frontend radios

Includes changing the code so that the radios
aren't split into two columns in the HTML present
when the page loads. This layout is now added by
the JS.
---
 app/assets/javascripts/radioSelect.js | 30 +++++++++++++--------------
 app/main/forms.py                     |  2 +-
 app/templates/views/check/ok.html     | 13 +++++++-----
 tests/javascripts/radioSelect.test.js | 24 +++++++++------------
 4 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/app/assets/javascripts/radioSelect.js b/app/assets/javascripts/radioSelect.js
index 436397f34..cfe723158 100644
--- a/app/assets/javascripts/radioSelect.js
+++ b/app/assets/javascripts/radioSelect.js
@@ -10,9 +10,9 @@
     'initial': Hogan.compile(`
       {{#showNowAsDefault}}
         <div class="radio-select__column">
-          <div class="multiple-choice js-multiple-choice">
-            <input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
-            <label class="block-label js-block-label" for="{{name}}-0">Now</label>
+          <div class="govuk-radios__item">
+            <input class="govuk-radios__input" checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
+            <label class="govuk-label govuk-radios__label" for="{{name}}-0">Now</label>
           </div>
         </div>
       {{/showNowAsDefault}}
@@ -25,17 +25,17 @@
     'choose': Hogan.compile(`
       {{#showNowAsDefault}}
         <div class="radio-select__column">
-          <div class="multiple-choice js-multiple-choice js-initial-option">
-            <input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
-            <label for="{{name}}-0">Now</label>
+          <div class="govuk-radios__item">
+            <input class="govuk-radios__input" checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
+            <label class="govuk-label govuk-radios__label" for="{{name}}-0">Now</label>
           </div>
         </div>
       {{/showNowAsDefault}}
       <div class="radio-select__column">
         {{#choices}}
-          <div class="multiple-choice js-multiple-choice js-option">
-            <input type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
-            <label for="{{id}}">{{label}}</label>
+          <div class="govuk-radios__item js-option">
+            <input class="govuk-radios__input" type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
+            <label class="govuk-label govuk-radios__label" for="{{id}}">{{label}}</label>
           </div>
         {{/choices}}
         <input type='button' class='govuk-button govuk-button--secondary radio-select__button--done' aria-expanded='true' value='Done' />
@@ -44,17 +44,17 @@
     'chosen': Hogan.compile(`
       {{#showNowAsDefault}}
         <div class="radio-select__column">
-          <div class="multiple-choice js-multiple-choice js-initial-option">
-            <input id="{{name}}-0" name="{{name}}" type="radio" value="">
-            <label for="{{name}}-0">Now</label>
+          <div class="govuk-radios__item">
+            <input class="govuk-radios__input" id="{{name}}-0" name="{{name}}" type="radio" value="">
+            <label class="govuk-label govuk-radios__label" for="{{name}}-0">Now</label>
           </div>
         </div>
       {{/showNowAsDefault}}
       <div class="radio-select__column">
         {{#choices}}
-          <div class="multiple-choice js-multiple-choice">
-            <input checked="checked" type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
-            <label for="{{id}}">{{label}}</label>
+          <div class="govuk-radios__item">
+            <input class="govuk-radios__input" checked="checked" type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
+            <label class="govuk-label govuk-radios__label" for="{{id}}">{{label}}</label>
           </div>
         {{/choices}}
       </div>
diff --git a/app/main/forms.py b/app/main/forms.py
index ff4b9c6fe..9bd021a65 100644
--- a/app/main/forms.py
+++ b/app/main/forms.py
@@ -1509,7 +1509,7 @@ class ChooseTimeForm(StripWhitespaceForm):
         ]
         self.scheduled_for.categories = get_next_days_until(get_furthest_possible_scheduled_time())
 
-    scheduled_for = RadioField(
+    scheduled_for = GovukRadiosField(
         'When should Notify send these messages?',
         default='',
     )
diff --git a/app/templates/views/check/ok.html b/app/templates/views/check/ok.html
index a72ded28b..00d400854 100644
--- a/app/templates/views/check/ok.html
+++ b/app/templates/views/check/ok.html
@@ -1,6 +1,5 @@
 {% extends "withnav_template.html" %}
 {% from "components/banner.html" import banner_wrapper %}
-{% from "components/radios.html" import radio_select %}
 {% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/button/macro.njk" import govukButton %}
@@ -36,10 +35,14 @@
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
       <input type="hidden" name="contact_list_id" value="{{ request.args.get('contact_list_id', '') }}" />
       {% if choose_time_form and template.template_type != 'letter' %}
-        {{ radio_select(
-          choose_time_form.scheduled_for,
-          wrapping_class='bottom-gutter-2-3'
-        ) }}
+        {{ choose_time_form.scheduled_for(param_extensions={
+          'formGroup': {'classes': 'bottom-gutter-2-3'},
+          'attributes': {
+            'data-module': 'radio-select',
+            'data-categories': choose_time_form.scheduled_for.categories|join(','),
+            'data-show-now-as-default': 'true'
+          }
+        }) }}
       {% endif %}
       {% if (template.template_type != 'letter' or not request.args.from_test) and not letter_too_long %}
         {% set button_text %}
diff --git a/tests/javascripts/radioSelect.test.js b/tests/javascripts/radioSelect.test.js
index 8dbaf711c..767a2eb87 100644
--- a/tests/javascripts/radioSelect.test.js
+++ b/tests/javascripts/radioSelect.test.js
@@ -71,9 +71,9 @@ describe('RadioSelect', () => {
           const num = idx + 1;
 
           result +=
-            `<div class="multiple-choice">
-              <input id="scheduled_for-${num}" name="scheduled_for" type="radio" value="2019-05-${dayAsNumber}T${hour}:00:00.459156">
-              <label for="scheduled_for-${num}">
+            `<div class="govuk-radios__item">
+              <input class="govuk-radios__input" id="scheduled_for-${num}" name="scheduled_for" type="radio" value="2019-05-${dayAsNumber}T${hour}:00:00.459156">
+              <label class="govuk-label govuk-radios__label" for="scheduled_for-${num}">
                 ${day} at ${hourLabel}
               </label>
             </div>`;
@@ -101,21 +101,17 @@ describe('RadioSelect', () => {
           When should Notify send these messages?
         </legend>
         <div class="radio-select" data-module="radio-select" data-categories="${CATEGORIES.join(',')}" data-show-now-as-default="true">
-          <div class="radio-select__column">
-            <div class="multiple-choice">
-              <input checked="" id="scheduled_for-0" name="scheduled_for" type="radio" value="">
-              <label for="scheduled_for-0">
-                Now
-              </label>
-            </div>
+          <div class="govuk-radios__item">
+            <input class="govuk-radios__input" checked="" id="scheduled_for-0" name="scheduled_for" type="radio" value="">
+            <label class="govuk-label govuk-radios__label" for="scheduled_for-0">
+              Now
+            </label>
           </div>
-          <div class="radio-select__column">
           ${options()}
-          </div>
         </div>
       </fieldset>`;
 
-      originalOptionsForAllCategories = Array.from(document.querySelectorAll('.radio-select__column:nth-child(2) .multiple-choice'))
+      originalOptionsForAllCategories = Array.from(document.querySelectorAll('.govuk-radios__item:not(:first-of-type)'))
                                           .map(option => getDataFromOption(option));
   });
 
@@ -215,7 +211,7 @@ describe('RadioSelect', () => {
         test("show the options for it, with the right label and value", () => {
 
           // check options this reveals against those originally in the page for this category
-          const options = document.querySelectorAll('.radio-select__column:nth-child(2) .multiple-choice');
+          const options = document.querySelectorAll('.radio-select__column:nth-child(2) .govuk-radios__item');
 
           const optionsThatMatchOriginals = Array.from(options).filter((option, idx) => {
             const optionData = getDataFromOption(option);