mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-10 03:14:58 -04:00
452e253e2c
All other navigations have their selected item as a link so we should match this. Includes changes to the pill CSS so: 1. it doesn't use elements in the selectors 2. all the selectors use BEM I did 2. because I had to change the classes/selectors anyway, they might as well match the style GOVUK Design System uses.
28 lines
1.0 KiB
HTML
28 lines
1.0 KiB
HTML
{% from 'components/big-number.html' import big_number %}
|
|
|
|
{% macro pill(
|
|
items=[],
|
|
current_value=None,
|
|
big_number_args={'smaller': True},
|
|
show_count=True
|
|
) %}
|
|
<nav aria-labelledby='page-header'>
|
|
<ul class='pill'>
|
|
{% for label, option, link, count in items %}
|
|
<li class="pill-item__container">
|
|
{% if current_value == option %}
|
|
<a class="pill-item pill-item--selected govuk-link govuk-link--no-visited-state{% if not show_count %} pill-item--centered{% endif %}" href="{{ link }}" aria-current="page">
|
|
{% else %}
|
|
<a class="pill-item govuk-link govuk-link--no-visited-state" href="{{ link }}">
|
|
{% endif %}
|
|
{% if show_count %}
|
|
{{ big_number(count, **big_number_args) }}
|
|
{% endif %}
|
|
<div class="pill-item__label{% if current_value == option %} pill-item__label--selected{% endif %}{% if not show_count %} pill-item--centered{% endif %}">{{ label }}</div>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</nav>
|
|
{% endmacro %}
|