mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-03-12 22:32:18 -04:00
9e97a797b9
- 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
35 lines
1.8 KiB
HTML
35 lines
1.8 KiB
HTML
{% macro previous_next_navigation(previous_page, next_page) %}
|
|
{% if previous_page or next_page %}
|
|
<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="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="usa-sr-only">{{previous_page['label']}}</span>
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
{% if next_page %}
|
|
<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']}}
|
|
</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 %}
|
|
</ul>
|
|
</nav>
|
|
{% endif %}
|
|
{% endmacro %}
|