mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-18 01:14:52 -05:00
Uses some CSS to draw some grey lines to show which radios descend from which. I don’t feel like the intentation is enough, and it looks a bit messy because the circles of the radio buttons don’t have straight edges easily suggest visual alignment. Copies the design from conditionally revealing content in the design system: https://design-system.service.gov.uk/components/radios/#conditionally-revealing-content Implementation is done with pseudo elements, because borders can’t be positionned exactly enough.
153 lines
4.1 KiB
HTML
153 lines
4.1 KiB
HTML
{% macro radios(
|
|
field,
|
|
hint=None,
|
|
disable=[],
|
|
option_hints={},
|
|
hide_legend=False
|
|
) %}
|
|
{% call radios_wrapper(
|
|
field, hint, disable, option_hints, hide_legend
|
|
) %}
|
|
{% for option in field %}
|
|
{{ radio(option, disable, option_hints) }}
|
|
{% endfor %}
|
|
{% endcall %}
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro radio_list(
|
|
options,
|
|
child_map,
|
|
disable=[],
|
|
option_hints={}
|
|
) %}
|
|
<ul>
|
|
{% for option in options %}
|
|
{% if child_map[option.data] %}
|
|
{% call radio(option, disable, option_hints, as_list_item=True) %}
|
|
{{ radio_list(child_map[option.data], child_map, disable, option_hints) }}
|
|
{% endcall %}
|
|
{% else %}
|
|
{{ radio(option, disable, option_hints, as_list_item=True) }}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro radios_nested(
|
|
field,
|
|
child_map,
|
|
hint=None,
|
|
disable=[],
|
|
option_hints={},
|
|
hide_legend=False
|
|
) %}
|
|
{% call radios_wrapper(
|
|
field, hint, disable, option_hints, hide_legend
|
|
) %}
|
|
<div class="radios-nested">
|
|
{{ radio_list(child_map[None], child_map, disable, option_hints) }}
|
|
</div>
|
|
{% endcall %}
|
|
{% endmacro %}
|
|
|
|
{% macro radios_wrapper(field, hint=None, disable=[], option_hints={}, hide_legend=False) %}
|
|
<div class="form-group {% if field.errors %} form-group-error{% endif %}">
|
|
<fieldset>
|
|
<legend class="{{ 'form-label' if not hide_legend else '' }}">
|
|
{% if hide_legend %}<span class="visually-hidden">{% endif %}
|
|
{{ field.label.text|safe }}
|
|
{% if hide_legend %}</span>{% endif %}
|
|
{% if hint %}
|
|
<span class="form-hint">
|
|
{{ hint }}
|
|
</span>
|
|
{% endif %}
|
|
{% if field.errors %}
|
|
<span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
|
|
{{ field.errors[0] }}
|
|
</span>
|
|
{% endif %}
|
|
</legend>
|
|
{{ caller() }}
|
|
</fieldset>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro radio(option, disable=[], option_hints={}, data_target=None, as_list_item=False) %}
|
|
{% if as_list_item %}
|
|
<li class="multiple-choice" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
|
|
{% else %}
|
|
<div class="multiple-choice" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
|
|
{% endif %}
|
|
<input
|
|
id="{{ option.id }}" name="{{ option.name }}" type="radio" value="{{ option.data }}"
|
|
{% if option.data in disable %}
|
|
disabled
|
|
{% endif %}
|
|
{% if option.checked %}
|
|
checked
|
|
{% endif %}
|
|
>
|
|
<label class="block-label" for="{{ option.id }}">
|
|
{{ option.label.text }}
|
|
{% if option_hints[option.data] %}
|
|
<div class="block-label-hint">
|
|
{{ option_hints[option.data] }}
|
|
</div>
|
|
{% endif %}
|
|
</label>
|
|
{% if caller %}
|
|
{{ caller() }}
|
|
{% endif %}
|
|
{% if as_list_item %}
|
|
</li>
|
|
{% else %}
|
|
</div>
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro radio_select(
|
|
field,
|
|
hint=None,
|
|
wrapping_class='form-group'
|
|
) %}
|
|
<div class="{{ wrapping_class }} {% if field.errors %} form-group-error{% endif %}">
|
|
<fieldset>
|
|
<legend class="form-label">
|
|
{{ field.label.text }}
|
|
{% if field.errors %}
|
|
<span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
|
|
{{ field.errors[0] }}
|
|
</span>
|
|
{% endif %}
|
|
</legend>
|
|
<div class="radio-select" data-module="radio-select" data-categories="{{ field.categories|join(',') }}">
|
|
<div class="radio-select-column">
|
|
{% for option in field %}
|
|
<div class="multiple-choice">
|
|
{{ option }}
|
|
<label for="{{ option.id }}">
|
|
{{ option.label.text }}
|
|
</label>
|
|
</div>
|
|
{% if loop.first %}
|
|
</div>
|
|
<div class="radio-select-column">
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro conditional_radio_panel(id) %}
|
|
<div class="conditional-radios-panel" id="panel-{{ id }}">
|
|
{{ caller() }}
|
|
</div>
|
|
{% endmacro %}
|