Add progressive enhancement

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

View File

@@ -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>