From b4c81f89601af9239d45e09bf4493197c05e1782 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 18 Jun 2019 16:02:37 +0100
Subject: [PATCH] Add progressive enhancement
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When someone selects that they are accepting the agreement on behalf of
someone else then they need to provide that person’s details. Otherwise
they shouldn’t care about these extra fields.

This commit uses the progressive disclosure pattern from the GOV.UK
Frontend Toolkit to hide the additional fields unless someone selects
the relevant radio button.
---
 app/templates/views/agreement/agreement-accept.html | 11 ++++++++---
 tests/app/main/views/test_agreement.py              |  8 ++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/templates/views/agreement/agreement-accept.html b/app/templates/views/agreement/agreement-accept.html
index c2972bf6a..4da010ecb 100644
--- a/app/templates/views/agreement/agreement-accept.html
+++ b/app/templates/views/agreement/agreement-accept.html
@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
-{% from "components/radios.html" import radios %}
+{% from "components/radios.html" import radio %}
+{% from "components/select-input.html" import select_wrapper %}
 {% from "components/form.html" import form_wrapper %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/page-header.html" import page_header %}
@@ -22,8 +23,12 @@
     {% call form_wrapper(class='top-gutter') %}
 
       {{ textbox(form.version, width='1-3', hint='The version number is on the front page, for example ‘3.6’') }}
-      {{ radios(form.who) }}
-      <div class="conditional-radio-panel" id="on-behalf-of">
+      {% call select_wrapper(form.who) %}
+        {% for option in form.who %}
+          {{ radio(option, data_target='on-behalf-of' if option.data == 'someone-else' else None) }}
+        {% endfor %}
+      {% endcall %}
+      <div class="conditional-radio-panel js-hidden" id="on-behalf-of">
         {{ textbox(form.on_behalf_of_name, width='1-1') }}
         {{ textbox(form.on_behalf_of_email, width='1-1') }}
       </div>
diff --git a/tests/app/main/views/test_agreement.py b/tests/app/main/views/test_agreement.py
index feacb82f3..83e139ee6 100644
--- a/tests/app/main/views/test_agreement.py
+++ b/tests/app/main/views/test_agreement.py
@@ -133,11 +133,19 @@ def test_show_accept_agreement_page(
     )
     assert page.select('input[name=who]')[0]['value'] == 'me'
     assert 'checked' not in page.select('input[name=who]')[0]
+    assert 'data-target' not in page.select('.multiple-choice')[0]
     assert normalize_spaces(page.select_one('label[for=who-1]').text) == (
         'I’m accepting the agreement on behalf of someone else'
     )
     assert page.select('input[name=who]')[1]['value'] == 'someone-else'
     assert 'checked' not in page.select('input[name=who]')[1]
+    assert page.select('.multiple-choice')[1]['data-target'] == 'on-behalf-of'
+    assert [
+        field['name']
+        for field in page.select('#on-behalf-of.conditional-radio-panel input')
+    ] == [
+        'on_behalf_of_name', 'on_behalf_of_email'
+    ]
 
     assert normalize_spaces(page.select_one('label[for=on_behalf_of_name]').text) == (
         'Who are you accepting the agreement on behalf of?'