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

Migrate GOV.UK components to USWDS

Browse Source 
- Convert previous/next navigation to USWDS pagination component
  - Update radio buttons and checkboxes to use USWDS classes
  - Migrate guest list inputs with proper USWDS styling
  - Replace GOV.UK button patterns with USWDS button variants
  - Update form field spacing to use USWDS utilities
  - Scope fieldset legend styles to specific form contexts
  - Update visual regression test references for new components
This commit is contained in:
alexjanousekGSA
2025-07-30 15:24:21 -04:00
parent fa2e5becea
commit 9e97a797b9
45 changed files with 179 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/templates/components/checkboxes.html Normal file
View File

@@ -0,0 +1,20 @@
{% from "components/select-input.html" import select, select_list, select_nested, select_wrapper, select_input %}
{% macro checkboxes(field, hint=None, disable=[], option_hints={}, hide_legend=False) %}
{{ select(field, hint, disable, option_hints, hide_legend, input="checkbox") }}
{% endmacro %}
{% macro checkbox_list(options, child_map, disable=[], option_hints={}) %}
{{ select_list(options, child_map, disable, option_hints, input="checkbox") }}
{% endmacro %}
{% macro checkboxes_nested(field, child_map, hint=None, disable=[], option_hints={}, hide_legend=False) %}
{{ select_nested(field, child_map, hint, disable, option_hints, hide_legend, input="checkbox") }}
{% endmacro %}
{% macro checkbox(option, disable=[], option_hints={}, data_target=None, as_list_item=False) %}
{{ select_input(option, disable, option_hints, data_target, as_list_item, input="checkbox") }}
{% endmacro %}

6
app/templates/components/list-entry.html
View File

@@ -36,9 +36,9 @@
{% set autocomplete = "" %}
{% endif %}
{% if entry.errors %}
{% set label_classes = "usa-input--numbered__label usa-input--numbered__label--error" %}
{% set label_classes = "usa-label usa-label--error" %}
{% else %}
{% set label_classes = "usa-input--numbered__label" %}
{% set label_classes = "usa-label" %}
{% endif %}
{% set field_name = field.name + "-" + loop.index|string %}
{{ entry(param_extensions={
@@ -48,7 +48,7 @@
"html": '<span class="usa-sr-only">' + item_name + ' number </span>' + loop.index|string + '.',
"classes": label_classes
},
"classes": "usa-input--numbered ",
"classes": "usa-input",
"value": field.data[loop.index0],
"autocomplete": autocomplete
}) }}

32
app/templates/components/previous-next-navigation.html
View File

@@ -1,30 +1,30 @@
{% macro previous_next_navigation(previous_page, next_page) %}
{% if previous_page or next_page %}
<nav class="govuk-previous-and-next-navigation" role="navigation" aria-label="Pagination">
<ul class="group">
<nav class="usa-pagination margin-y-5 text-left" role="navigation" aria-label="Pagination">
<ul class="usa-pagination__list flex-justify-start">
{% if previous_page %}
<li class="previous-page">
<a class="usa-link" href="{{previous_page['url']}}" rel="previous" >
<span class="pagination-part-title">
<svg class="pagination-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
<path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"/>
</svg>
<li class="usa-pagination__item usa-pagination__arrow">
<a class="usa-pagination__link usa-pagination__previous-page" href="{{previous_page['url']}}" rel="previous">
<svg class="usa-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
<path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"/>
</svg>
<span class="usa-pagination__link-text">
{{previous_page['title']}}
</span>
<span class="pagination-label">{{previous_page['label']}}</span>
<span class="usa-sr-only">{{previous_page['label']}}</span>
</a>
</li>
{% endif %}
{% if next_page %}
<li class="next-page">
<a class="usa-link" href="{{next_page['url']}}" rel="next">
<span class="pagination-part-title">
<li class="usa-pagination__item usa-pagination__arrow">
<a class="usa-pagination__link usa-pagination__next-page" href="{{next_page['url']}}" rel="next">
<span class="usa-pagination__link-text">
{{next_page['title']}}
<svg class="pagination-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
<path fill="currentColor" d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"/>
</svg>
</span>
<span class="pagination-label">{{next_page['label']}}</span>
<svg class="usa-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
<path fill="currentColor" d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"/>
</svg>
<span class="usa-sr-only">{{next_page['label']}}</span>
</a>
</li>
{% endif %}

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

@@ -64,9 +64,9 @@
{% endmacro %}
{% macro select_input(option, disable=[], option_hints={}, data_target=None, as_list_item=False, input="radio") %}
<div class="usa-radio" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
<div class="usa-{{ input }}" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
<input
id="{{ option.id }}" class="usa-radio__input" name="{{ option.name }}" type="{{ input }}" value="{{ option.data }}"
id="{{ option.id }}" class="usa-{{ input }}__input" name="{{ option.name }}" type="{{ input }}" value="{{ option.data }}"
{% if option.data in disable %}
disabled
{% endif %}
@@ -74,7 +74,7 @@
checked
{% endif %}
>
<label class="usa-radio__label" for="{{ option.id }}">
<label class="usa-{{ input }}__label" for="{{ option.id }}">
{{ option.label.text }}
{% if option_hints[option.data] %}
<span class="usa-hint">