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

@@ -10,9 +10,9 @@
     'initial': Hogan.compile(`
       {{#showNowAsDefault}}
         <div class="radio-select__column">
-          <div class="multiple-choice js-multiple-choice">
+          <div class="govuk-radios__item">
-            <input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
+            <input class="govuk-radios__input" checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
-            <label class="block-label js-block-label" for="{{name}}-0">Now</label>
+            <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">
+          <div class="govuk-radios__item">
-            <input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
+            <input class="govuk-radios__input" checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
-            <label for="{{name}}-0">Now</label>
+            <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">
+          <div class="govuk-radios__item js-option">
-            <input type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
+            <input class="govuk-radios__input" type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
-            <label for="{{id}}">{{label}}</label>
+            <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">
+          <div class="govuk-radios__item">
-            <input id="{{name}}-0" name="{{name}}" type="radio" value="">
+            <input class="govuk-radios__input" id="{{name}}-0" name="{{name}}" type="radio" value="">
-            <label for="{{name}}-0">Now</label>
+            <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">
+          <div class="govuk-radios__item">
-            <input checked="checked" type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
+            <input class="govuk-radios__input" checked="checked" type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
-            <label for="{{id}}">{{label}}</label>
+            <label class="govuk-label govuk-radios__label" for="{{id}}">{{label}}</label>
           </div>
         {{/choices}}
       </div>

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='',
     )

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(param_extensions={
-          choose_time_form.scheduled_for,
+          'formGroup': {'classes': 'bottom-gutter-2-3'},
-          wrapping_class='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 %}

tests/javascripts/radioSelect.test.js

@@ -71,9 +71,9 @@ describe('RadioSelect', () => {
           const num = idx + 1;
 
           result +=
-            `<div class="multiple-choice">
+            `<div class="govuk-radios__item">
-              <input id="scheduled_for-${num}" name="scheduled_for" type="radio" value="2019-05-${dayAsNumber}T${hour}:00:00.459156">
+              <input class="govuk-radios__input" id="scheduled_for-${num}" name="scheduled_for" type="radio" value="2019-05-${dayAsNumber}T${hour}:00:00.459156">
-              <label for="scheduled_for-${num}">
+              <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="govuk-radios__item">
-            <div class="multiple-choice">
+            <input class="govuk-radios__input" checked="" id="scheduled_for-0" name="scheduled_for" type="radio" value="">
-              <input checked="" id="scheduled_for-0" name="scheduled_for" type="radio" value="">
+            <label class="govuk-label govuk-radios__label" for="scheduled_for-0">
-              <label for="scheduled_for-0">
+              Now
-                Now
+            </label>
-              </label>
-            </div>
           </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);