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

Migrate radio buttons from GOV.UK to USWDS

Browse Source 
- Replace .multiple-choice with .usa-radio classes
- Update radio templates to use USWDS patterns
- Remove GOV.UK dependencies from radio components
- Convert nested lists to flat divs with USWDS margin utilities
- Update tests to use new radio classes
This commit is contained in:
alexjanousekGSA
2025-07-09 16:40:34 -03:00
parent 5d1e1caf24
commit a691f5c0dd
5 changed files with 19 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/sass/uswds/_uswds-theme-custom-styles.scss
View File

@@ -108,9 +108,6 @@ p,
box-shadow: none !important; box-shadow: none !important;
} }
.multiple-choice [type='radio']:focus + label::before {
box-shadow: 0 0 0 3px color('blue-40v');
}
.usa-dark-background .pill-item__container { .usa-dark-background .pill-item__container {
color: #fff; color: #fff;

2
app/templates/components/radios.html
View File

@@ -40,7 +40,7 @@
<div class="radio-select" data-module="radio-select" data-categories="{{ field.categories|join(',') }}" data-show-now-as-default="{{ show_now_as_default|string|lower }}"> <div class="radio-select" data-module="radio-select" data-categories="{{ field.categories|join(',') }}" data-show-now-as-default="{{ show_now_as_default|string|lower }}">
<div class="radio-select-column"> <div class="radio-select-column">
{% for option in field %} {% for option in field %}
<div class="multiple-choice"> <div class="usa-radio">
{{ option }} {{ option }}
<label for="{{ option.id }}"> <label for="{{ option.id }}">
{{ option.label.text }} {{ option.label.text }}

27
app/templates/components/select-input.html
View File

@@ -9,18 +9,19 @@
{% endmacro %} {% endmacro %}
{% macro select_list(options, child_map, disable=[], option_hints={}, input="radio") %} {% macro select_list(options, child_map, disable=[], option_hints={}, input="radio", indent_level=0) %}
<ul>
{% for option in options %} {% for option in options %}
{% if child_map[option.data] %} {% if child_map[option.data] %}
{% call select_input(option, disable, option_hints, as_list_item=True, input=input) %} <div class="{% if indent_level > 0 %}margin-left-{{ indent_level * 4 }}{% endif %}">
{{ select_list(child_map[option.data], child_map, disable, option_hints, input=input) }} {{ select_input(option, disable, option_hints, as_list_item=False, input=input) }}
{% endcall %} </div>
{{ select_list(child_map[option.data], child_map, disable, option_hints, input=input, indent_level=indent_level + 1) }}
{% else %} {% else %}
{{ select_input(option, disable, option_hints, as_list_item=True, input=input) }} <div class="{% if indent_level > 0 %}margin-left-{{ indent_level * 4 }}{% endif %}">
{{ select_input(option, disable, option_hints, as_list_item=False, input=input) }}
</div>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</ul>
{% endmacro %} {% endmacro %}
@@ -63,11 +64,7 @@
{% endmacro %} {% endmacro %}
{% macro select_input(option, disable=[], option_hints={}, data_target=None, as_list_item=False, input="radio") %} {% macro select_input(option, disable=[], option_hints={}, data_target=None, as_list_item=False, input="radio") %}
{% if as_list_item %}
<li class="multiple-choice test-one" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
{% else %}
<div class="usa-radio" {% if data_target %}data-target="{{ data_target }}"{% endif %}> <div class="usa-radio" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
{% endif %}
<input <input
id="{{ option.id }}" class="usa-radio__input" name="{{ option.name }}" type="{{ input }}" value="{{ option.data }}" id="{{ option.id }}" class="usa-radio__input" name="{{ option.name }}" type="{{ input }}" value="{{ option.data }}"
{% if option.data in disable %} {% if option.data in disable %}
@@ -80,17 +77,13 @@
<label class="usa-radio__label" for="{{ option.id }}"> <label class="usa-radio__label" for="{{ option.id }}">
{{ option.label.text }} {{ option.label.text }}
{% if option_hints[option.data] %} {% if option_hints[option.data] %}
<div class="block-label-hint"> <span class="usa-hint">
{{ option_hints[option.data] }} {{ option_hints[option.data] }}
</div> </span>
{% endif %} {% endif %}
</label> </label>
{% if caller %} {% if caller %}
{{ caller() }} {{ caller() }}
{% endif %} {% endif %}
{% if as_list_item %}
</li>
{% else %}
</div> </div>
{% endif %}
{% endmacro %} {% endmacro %}

2
tests/app/main/views/test_add_service.py
View File

@@ -54,7 +54,7 @@ def test_get_should_not_render_radios_if_org_type_known(
page = client_request.get("main.add_service") page = client_request.get("main.add_service")
assert page.select_one("h1").text.strip() == "About your service" assert page.select_one("h1").text.strip() == "About your service"
assert page.select_one("input[name=name]").get("value") is None assert page.select_one("input[name=name]").get("value") is None
assert not page.select(".multiple-choice") assert not page.select(".usa-radio")
def test_show_different_page_if_user_org_type_is_local( def test_show_different_page_if_user_org_type_is_local(

14
tests/javascripts/templateFolderForm.test.js
View File

@@ -12,17 +12,17 @@ function setFixtures (hierarchy, newTemplateDataModules = "") {
nodes nodes
.filter(node => node.type === 'folder') .filter(node => node.type === 'folder')
.forEach(node => { .forEach(node => {
result += `<li class="multiple-choice"> result += `<div class="usa-radio">
<input id="node-${count}" name="move_to" type="radio" value="node-${count}"> <input id="node-${count}" name="move_to" type="radio" value="node-${count}">
<label class="usa-label" for="node-${count}"> <label class="usa-label" for="node-${count}">
${node.label} ${node.label}
</label> </label>
${node.children ? foldersCheckboxesHTML(node.children) : ''} ${node.children ? foldersCheckboxesHTML(node.children) : ''}
</li>`; </div>`;
count++; count++;
}); });
return `<ul>${result}</ul>`; return `<div>${result}</div>`;
}; };
}(); }();
@@ -83,25 +83,25 @@ function setFixtures (hierarchy, newTemplateDataModules = "") {
<legend class="form-label"> <legend class="form-label">
New template New template
</legend> </legend>
<div class="multiple-choice"> <div class="usa-radio">
<input id="add_template_by_template_type-0" name="add_template_by_template_type" type="radio" value="email"> <input id="add_template_by_template_type-0" name="add_template_by_template_type" type="radio" value="email">
<label class="usa-label" for="add_template_by_template_type-0"> <label class="usa-label" for="add_template_by_template_type-0">
Email Email
</label> </label>
</div> </div>
<div class="multiple-choice"> <div class="usa-radio">
<input id="add_template_by_template_type-1" name="add_template_by_template_type" type="radio" value="sms"> <input id="add_template_by_template_type-1" name="add_template_by_template_type" type="radio" value="sms">
<label class="usa-label" for="add_template_by_template_type-1"> <label class="usa-label" for="add_template_by_template_type-1">
Text message Text message
</label> </label>
</div> </div>
<div class="multiple-choice"> <div class="usa-radio">
<input id="add_template_by_template_type-2" name="add_template_by_template_type" type="radio" value="letter"> <input id="add_template_by_template_type-2" name="add_template_by_template_type" type="radio" value="letter">
<label class="usa-label" for="add_template_by_template_type-2"> <label class="usa-label" for="add_template_by_template_type-2">
Letter Letter
</label> </label>
</div> </div>
<div class="multiple-choice"> <div class="usa-radio">
<input id="add_template_by_template_type-3" name="add_template_by_template_type" type="radio" value="copy-existing"> <input id="add_template_by_template_type-3" name="add_template_by_template_type" type="radio" value="copy-existing">
<label class="usa-label" for="add_template_by_template_type-3"> <label class="usa-label" for="add_template_by_template_type-3">
Copy an existing template Copy an existing template