darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-06 03:13:42 -05: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;
}
.multiple-choice [type='radio']:focus + label::before {
box-shadow: 0 0 0 3px color('blue-40v');
}
.usa-dark-background .pill-item__container {
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-column">
{% for option in field %}
<div class="multiple-choice">
<div class="usa-radio">
{{ option }}
<label for="{{ option.id }}">
{{ option.label.text }}

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

@@ -9,18 +9,19 @@
{% endmacro %}
{% macro select_list(options, child_map, disable=[], option_hints={}, input="radio") %}
<ul>
{% macro select_list(options, child_map, disable=[], option_hints={}, input="radio", indent_level=0) %}
{% for option in options %}
{% if child_map[option.data] %}
{% call select_input(option, disable, option_hints, as_list_item=True, input=input) %}
{{ select_list(child_map[option.data], child_map, disable, option_hints, input=input) }}
{% endcall %}
<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>
{{ select_list(child_map[option.data], child_map, disable, option_hints, input=input, indent_level=indent_level + 1) }}
{% 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 %}
{% endfor %}
</ul>
{% endmacro %}
@@ -63,11 +64,7 @@
{% endmacro %}
{% 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 %}>
{% endif %}
<input
id="{{ option.id }}" class="usa-radio__input" name="{{ option.name }}" type="{{ input }}" value="{{ option.data }}"
{% if option.data in disable %}
@@ -80,17 +77,13 @@
<label class="usa-radio__label" for="{{ option.id }}">
{{ option.label.text }}
{% if option_hints[option.data] %}
<div class="block-label-hint">
<span class="usa-hint">
{{ option_hints[option.data] }}
</div>
</span>
{% endif %}
</label>
{% if caller %}
{{ caller() }}
{% endif %}
{% if as_list_item %}
</li>
{% else %}
</div>
{% endif %}
{% 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")
assert page.select_one("h1").text.strip() == "About your service"
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(

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

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