Convert radios on set-sender page

Includes making the legend the page header to
follow design system guidance:

https://design-system.service.gov.uk/get-started/labels-legends-headings/

I had to add some override styles to allow the
legend to classes as a full-width column, and the
radios to be in one that is three-quarters.

app/assets/stylesheets/govuk-frontend/overrides.scss

@@ -46,3 +46,9 @@
 .govuk-button {
   margin-bottom: 0px;
 }
+
+// Allow legends that contain the h1 to go full width
+.govuk-fieldset__legend.govuk-grid-column-full {
+  // $class parameter is deprecated but needed for v2 of GOVUK Frontend. Remove for v3 & above
+  @include govuk-grid-column(full, $class: false);
+}

app/main/forms.py

@@ -2011,7 +2011,7 @@ class SetSenderForm(StripWhitespaceForm):
         self.sender.choices = kwargs['sender_choices']
         self.sender.label.text = kwargs['sender_label']
 
-    sender = RadioField()
+    sender = GovukRadiosField()
 
 
 class SetTemplateSenderForm(StripWhitespaceForm):

app/main/views/send.py

@@ -234,6 +234,15 @@ def set_sender(service_id, template_id):
     if sender_context.get('default_and_receives', None):
         option_hints = {sender_context['default_and_receives']: '(Default and receives replies)'}
 
+    # extend all radios that need hint text
+    form.sender.param_extensions = {'items': []}
+    for item_id, _item_value in form.sender.choices:
+        if item_id in option_hints:
+            extensions = {'hint': {'text': option_hints[item_id]}}
+        else:
+            extensions = {}  # if no extensions needed, send an empty dict to preserve order of items
+        form.sender.param_extensions['items'].append(extensions)
+
     if form.validate_on_submit():
         session['sender_id'] = form.sender.data
         return redirect(url_for('.send_one_off',

app/templates/views/templates/set-sender.html

@@ -3,28 +3,32 @@
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
+{% from "components/back-link/macro.njk" import govukBackLink %}
 
 {% block service_page_title %}
-  {{sender_context['title']}}
+  {{ sender_context.title }}
 {% endblock %}
 
 {% block maincolumn_content %}
 
-  {{ page_header(
-    sender_context.title,
-    back_link=url_for('.view_template', service_id=current_service.id, template_id=template_id)
-  ) }}
+  {{ govukBackLink({ "href": url_for('.view_template', service_id=current_service.id, template_id=template_id) }) }}
 
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-three-quarters">
-      {% call form_wrapper() %}
-        {{ radios(
-          form.sender,
-          option_hints=option_hints,
-          hide_legend=True
-        ) }}
+  <div class="govuk-grid-row govuk-!-margin-top-3">
+    {% call form_wrapper() %}
+      {{ form.sender(param_extensions={
+        'fieldset': {
+          'legend': {
+            'isPageHeading': True,
+            'text': sender_context.title,
+            'classes': 'govuk-fieldset__legend--l govuk-grid-column-full'
+          }
+        },
+        'classes': 'govuk-grid-column-three-quarters'
+      }) }}
+      <div class="govuk-grid-column-three-quarters">
         {{ page_footer('Continue') }}
-      {% endcall %}
+      </div>
+    {% endcall %}
     </div>
   </div>
 

tests/app/main/views/test_send.py

@@ -68,10 +68,7 @@ def test_show_correct_title_and_description_for_email_sender_type(
         template_id=fake_uuid
     )
 
-    assert page.select_one('h1').text == 'Where should replies come back to?'
-
-    for element in ('legend', 'legend .govuk-visually-hidden'):
-        assert normalize_spaces(page.select_one(element).text) == 'Where should replies come back to?'
+    assert page.select_one('.govuk-fieldset__legend h1').text.strip() == 'Where should replies come back to?'
 
 
 def test_show_correct_title_and_description_for_sms_sender_type(
@@ -86,10 +83,7 @@ def test_show_correct_title_and_description_for_sms_sender_type(
         template_id=fake_uuid
     )
 
-    assert page.select_one('h1').text == 'Who should the message come from?'
-
-    for element in ('legend', 'legend .govuk-visually-hidden'):
-        assert normalize_spaces(page.select_one(element).text) == 'Who should the message come from?'
+    assert page.select_one('.govuk-fieldset__legend h1').text.strip() == 'Who should the message come from?'
 
 
 def test_default_email_sender_is_checked_and_has_hint(
@@ -104,9 +98,9 @@ def test_default_email_sender_is_checked_and_has_hint(
         template_id=fake_uuid
     )
 
-    assert page.select('.multiple-choice input')[0].has_attr('checked')
-    assert normalize_spaces(page.select_one('.multiple-choice label .block-label-hint').text) == "(Default)"
-    assert not page.select('.multiple-choice input')[1].has_attr('checked')
+    assert page.select('.govuk-radios input')[0].has_attr('checked')
+    assert normalize_spaces(page.select_one('.govuk-radios .govuk-hint').text) == "(Default)"
+    assert not page.select('.govuk-radios input')[1].has_attr('checked')
 
 
 def test_default_sms_sender_is_checked_and_has_hint(
@@ -121,9 +115,9 @@ def test_default_sms_sender_is_checked_and_has_hint(
         template_id=fake_uuid
     )
 
-    assert page.select('.multiple-choice input')[0].has_attr('checked')
-    assert normalize_spaces(page.select_one('.multiple-choice label .block-label-hint').text) == "(Default)"
-    assert not page.select('.multiple-choice input')[1].has_attr('checked')
+    assert page.select('.govuk-radios input')[0].has_attr('checked')
+    assert normalize_spaces(page.select_one('.govuk-radios .govuk-hint').text) == "(Default)"
+    assert not page.select('.govuk-radios input')[1].has_attr('checked')
 
 
 def test_default_sms_sender_is_checked_and_has_hint_when_there_are_no_inbound_numbers(
@@ -138,9 +132,9 @@ def test_default_sms_sender_is_checked_and_has_hint_when_there_are_no_inbound_nu
         template_id=fake_uuid
     )
 
-    assert page.select('.multiple-choice input')[0].has_attr('checked')
-    assert normalize_spaces(page.select_one('.multiple-choice label .block-label-hint').text) == "(Default)"
-    assert not page.select('.multiple-choice input')[1].has_attr('checked')
+    assert page.select('.govuk-radios input')[0].has_attr('checked')
+    assert normalize_spaces(page.select_one('.govuk-radios .govuk-hint').text) == "(Default)"
+    assert not page.select('.govuk-radios input')[1].has_attr('checked')
 
 
 def test_default_inbound_sender_is_checked_and_has_hint_with_default_and_receives_text(
@@ -156,11 +150,11 @@ def test_default_inbound_sender_is_checked_and_has_hint_with_default_and_receive
         template_id=fake_uuid
     )
 
-    assert page.select('.multiple-choice input')[0].has_attr('checked')
+    assert page.select('.govuk-radios input')[0].has_attr('checked')
     assert normalize_spaces(
-        page.select_one('.multiple-choice label .block-label-hint').text) == "(Default and receives replies)"
-    assert not page.select('.multiple-choice input')[1].has_attr('checked')
-    assert not page.select('.multiple-choice input')[2].has_attr('checked')
+        page.select_one('.govuk-radios .govuk-hint').text) == "(Default and receives replies)"
+    assert not page.select('.govuk-radios input')[1].has_attr('checked')
+    assert not page.select('.govuk-radios input')[2].has_attr('checked')
 
 
 def test_sms_sender_has_receives_replies_hint(
@@ -176,11 +170,11 @@ def test_sms_sender_has_receives_replies_hint(
         template_id=fake_uuid
     )
 
-    assert page.select('.multiple-choice input')[0].has_attr('checked')
+    assert page.select('.govuk-radios input')[0].has_attr('checked')
     assert normalize_spaces(
-        page.select_one('.multiple-choice label .block-label-hint').text) == "(Default and receives replies)"
-    assert not page.select('.multiple-choice input')[1].has_attr('checked')
-    assert not page.select('.multiple-choice input')[2].has_attr('checked')
+        page.select_one('.govuk-radios .govuk-hint').text) == "(Default and receives replies)"
+    assert not page.select('.govuk-radios input')[1].has_attr('checked')
+    assert not page.select('.govuk-radios input')[2].has_attr('checked')
 
 
 @pytest.mark.parametrize('template_type, sender_data', [