darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-09 09:19:48 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add progressive enhancement

Browse Source 
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.
This commit is contained in:
Chris Hill-Scott
2019-06-18 16:02:37 +01:00
parent 0728d9b4fb
commit b4c81f8960
2 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/templates/views/agreement/agreement-accept.html
View File

@@ -1,6 +1,7 @@
{% extends "withnav_template.html" %} {% extends "withnav_template.html" %}
{% from "components/textbox.html" import textbox %} {% 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/form.html" import form_wrapper %}
{% from "components/page-footer.html" import page_footer %} {% from "components/page-footer.html" import page_footer %}
{% from "components/page-header.html" import page_header %} {% from "components/page-header.html" import page_header %}
@@ -22,8 +23,12 @@
{% call form_wrapper(class='top-gutter') %} {% 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’') }} {{ textbox(form.version, width='1-3', hint='The version number is on the front page, for example ‘3.6’') }}
{{ radios(form.who) }} {% call select_wrapper(form.who) %}
<div class="conditional-radio-panel" id="on-behalf-of"> {% 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_name, width='1-1') }}
{{ textbox(form.on_behalf_of_email, width='1-1') }} {{ textbox(form.on_behalf_of_email, width='1-1') }}
</div> </div>

8
tests/app/main/views/test_agreement.py
View File

@@ -133,11 +133,19 @@ def test_show_accept_agreement_page(
) )
assert page.select('input[name=who]')[0]['value'] == 'me' assert page.select('input[name=who]')[0]['value'] == 'me'
assert 'checked' not in page.select('input[name=who]')[0] 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) == ( assert normalize_spaces(page.select_one('label[for=who-1]').text) == (
'I’m accepting the agreement on behalf of someone else' 'I’m accepting the agreement on behalf of someone else'
) )
assert page.select('input[name=who]')[1]['value'] == 'someone-else' assert page.select('input[name=who]')[1]['value'] == 'someone-else'
assert 'checked' not in page.select('input[name=who]')[1] 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) == ( assert normalize_spaces(page.select_one('label[for=on_behalf_of_name]').text) == (
'Who are you accepting the agreement on behalf of?' 'Who are you accepting the agreement on behalf of?'