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

Reworking checkboxes to adhere to USWDS styling

Browse Source
This commit is contained in:
Jonathan Bobel
2023-08-14 10:35:11 -04:00
parent fc9667d25b
commit 1be305d045
24 changed files with 295 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -51,16 +51,6 @@ p,
font-size: size("body", 16);
}
.big-number-with-status .big-number,
.big-number-with-status .big-number-smaller {
@include u-bg("primary");
}
.big-number-with-status .big-number-status,
.big-number-with-status .big-number-status-failing {
@include u-bg("green-cool-40v");
}
.show-more-no-border:focus,
.show-more:focus,
.table-field-right-aligned a:active:before,
@@ -138,22 +128,31 @@ td.table-empty-message {
box-shadow: none;
}
.template-list-item-without-ancestors a.template-list-folder:first-of-type {
background-image: url(../images/folder-blue-bold.svg);
background-size: 30px 30px;
}
// .template-list-item-without-ancestors a.template-list-folder:first-of-type {
// background: url(../img/material-icons/folder.svg) no-repeat;
// }
.folder-heading a.folder-heading-folder,
.template-list-folder {
background-image: url(../images/folder-blue-bold.svg);
background: url(../img/material-icons/folder.svg) no-repeat;
padding-left: units(4);
display: inline-block;
height: units(4);
&:hover {
color: color("blue-warm-70v");
background-image: url(../images/folder-blue-bold.svg);
background: url(../img/material-icons/folder.svg) no-repeat;
}
}
.folder-heading-folder {
background-image: url(../images/folder-black.svg);
background: url(../img/material-icons/folder.svg) no-repeat;
padding-left: units(4);
display: inline-block;
height: units(4);
}
.message-name-separator:before, .folder-heading-separator:before {
content: ">";
margin: 0 units(0.5);
}
.folder-heading a.folder-heading-folder-truncated {
@@ -162,8 +161,13 @@ td.table-empty-message {
.usa-template-list-template {
background: url(../img/material-icons/description.svg) no-repeat;
padding-left: 40px;
background-size: 30px 30px;
padding-left: units(4);
display: inline-flex;
height: units(4);
}
.template-list-item-hint {
padding-left: units(4);
}
.js-enabled .live-search {
@@ -207,7 +211,7 @@ td.table-empty-message {
}
.spark-bar-bar {
font-size: units(3);
font-size: units(2);
background-color: transparent;
}
@@ -222,6 +226,92 @@ td.table-empty-message {
}
.navigation-service.usa-breadcrumb {
padding-bottom: 0;
-bottom: 0;
}
// Dashboard
.dashboard {
.big-number-with-status {
a {
background: color("blue-60v");
padding: units(2);
margin-bottom: units(1);
text-decoration: none;
&:hover{
background: color("blue-warm-70v");
}
}
span {
color: white;
}
.big-number-smaller {
display: flex;
flex-direction: column;
.big-number-number {
font-size: units(5);
line-height: units(6);
}
.big-number-label {
font-size: units(3);
}
}
.big-number-status {
background: color("green-cool-40v");
display: flex;
padding: units(1) units(2);
}
}
.usa-table {
width: 100%;
caption {
margin-bottom: 0;
}
.table-field-center-aligned {
text-align: center;
}
.template-statistics-table-template-name {
padding-left: units(4);
display: inline-block;
background-repeat: no-repeat;
background-image: url(../img/material-icons/description.svg);
}
}
}
.dashboard-table {
.file-list-filename {
font-weight: bold;
}
.file-list-hint {
margin: 0;
}
}
// Tabs
.tabs {
.pill {
display: flex;
list-style: none;
padding: 0;
.pill-item__container {
border: 1px solid color("gray-cool-10");
width: 25%;
display: flex;
flex-direction: column;
text-align: center;
font-size: units(2);
a {
padding: units(4);
.big-number-smaller {
font-size: units(5);
line-height: units(6);
}
&:not(.pill-item--selected):hover {
background: color("blue-warm-70v");
}
}
}
}
}

2
app/assets/sass/uswds/styles.scss
View File

@@ -1,3 +1,3 @@
@forward "uswds-theme";
@forward "uswds";
@forward "uswds-theme-custom-styles";
@forward "uswds-theme-custom-styles";

2
app/templates/components/big-number.html
View File

@@ -1,6 +1,6 @@
{% macro big_number(number, label, link=None, currency='', smaller=False, smallest=False) %}
{% if link %}
<a class="usa-link display-block margin-bottom-1" href="{{ link }}">
<a class="usa-link display-flex" href="{{ link }}">
{% endif %}
<span class="big-number{% if smaller %}-smaller{% endif %}{% if smallest %}-smallest{% endif %}">
<span class="big-number-number">

6
app/templates/components/content-metadata.html
View File

@@ -1,11 +1,9 @@
{% macro content_metadata(data, suffix=False) %}
<div class="content-metadata">
<dl>
{% for key, value in data.items() %}
<dt class="content-metadata__term">{{ key }}</dt>
<dd class="content-metadata__definition">{{ value }}</dd>
<span class="content-metadata__term">{{ key }}</span>
<span class="content-metadata__definition">{{ value }}</span>
{% endfor %}
</dl>
{% if suffix %}
<p class="content-metadata__suffix">{{ suffix }}</p>
{% endif %}

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

@@ -11,7 +11,7 @@
{% for label, option, link, count in items %}
<li class="pill-item__container">
{% if current_value == option %}
<a id="pill-selected-item" class="pill-item pill-item--selected usa-link {% if not show_count %} pill-item--centered{% endif %}" href="{{ link }}" aria-current="page">
<a id="pill-item-selected" class="pill-item pill-item--selected usa-link {% if not show_count %} pill-item--centered{% endif %}" aria-disabled="true" aria-current="page">
{% else %}
<a class="pill-item usa-dark-background usa-link usa-link--alt bg-primary" href="{{ link }}">
{% endif %}

20
app/templates/components/table.html
View File

@@ -1,6 +1,6 @@
{% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True, equal_length=False) -%}
<table class="table usa-table usa-table--borderless table-font-xsmall">
<caption class="heading-medium table-heading{{ ' usa-sr-only' if not caption_visible}}">
<table class="usa-table usa-table--borderless">
<caption class="font-body-lg table-heading{{ ' usa-sr-only' if not caption_visible}}">
{{ caption }}
</caption>
<thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}">
@@ -10,7 +10,7 @@
{% if field_headings_visible %}
{{ field_heading }}
{% else %}
<span class="usa-sr-only">{{ field_heading }}</span>
<span>{{ field_heading }}</span>
{% endif %}
</th>
{% endfor %}
@@ -65,7 +65,11 @@
{% macro field(align='left', status='', border=True, colspan=None, wrap=False) -%}
{% set field_alignment = 'table-field-right-aligned' if align == 'right' else 'table-field-left-aligned' %}
{% set field_alignment =
'table-field-right-aligned' if align == 'right' else
'table-field-center-aligned' if align == 'center' else
'table-field-left-aligned'
%}
{% set border = '' if border else 'table-field-noborder' %}
{% set wrap = 'table-field-wrap-text' if wrap else '' %}
@@ -165,12 +169,12 @@
{% if notification.status|format_notification_status_as_url(notification.notification_type) %}
</a>
{% endif %}
<span class="status-hint">
<p class="status-hint margin-0 width-card-lg">
{{ notification.status|format_notification_status_as_time(
notification.created_at|format_datetime_short,
(notification.updated_at or notification.created_at)|format_datetime_short
) }}
</span>
</p>
{% if displayed_on_single_line %}</span>{% endif %}
{% endcall %}
{% endif %}
@@ -186,11 +190,11 @@
<span {% if id %}id="{{ id }}"{% endif %} class="spark-bar">
<span class="spark-bar-bar">
{{ '{:,.0f}'.format(count) }}
{% if count == 1 -%}
<!-- {% if count == 1 -%}
message sent
{% else -%}
messages sent
{% endif %}
{% endif %} -->
</span>
</span>
{% endcall %}

2
app/templates/components/us_components/back-link/template.njk
View File

@@ -1,2 +1,2 @@
<a href="{%- if params.href %}{{ params.href }}{% else %}#{% endif -%}" class="usa-link usa-back-link display-inline-flex margin-top-5{%- if params.classes %} {{ params.classes }}{% endif -%}"
<a href="{%- if params.href %}{{ params.href }}{% else %}#{% endif -%}" class="usa-link usa-back-link display-inline-flex margin-bottom-3 {%- if params.classes %} {{ params.classes }}{% endif -%}"
{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ (params.html | safe if params.html else (params.text if params.text else 'Back')) }}</a>

2
app/templates/components/us_components/checkboxes/template.njk
View File

@@ -49,7 +49,7 @@
visuallyHiddenText: params.errorMessage.visuallyHiddenText
}) | indent(2) | trim }}
{% endif %}
<div class="govuk-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}"
<div class="govuk-checkboxes test {%- if params.classes %} {{ params.classes }}{% endif %}"
{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
{%- if isConditional %} data-module="checkboxes"{% endif -%}>
{% for item in params.items %}

6
app/templates/components/us_components/fieldset/template.njk
View File

@@ -1,11 +1,11 @@
<fieldset class="govuk-fieldset margin-y-5
<fieldset class="usa-fieldset margin-y-5
{%- if params.classes %} {{ params.classes }}{% endif %}"
{%- if params.describedBy %} aria-describedby="{{ params.describedBy }}"{% endif %}
{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
{% if params.legend.html or params.legend.text %}
<legend class="govuk-fieldset__legend {%- if params.legend.classes %} {{ params.legend.classes }}{% endif %}">
<legend class="usa-legend {%- if params.legend.classes %} {{ params.legend.classes }}{% endif %}">
{% if params.legend.isPageHeading %}
<h1 class="govuk-fieldset__heading">
<h1 class="font-body-2xl">
{{ params.legend.html | safe if params.legend.html else params.legend.text }}
</h1>
{% else %}

15
app/templates/components/us_components/radio-label/README.md Normal file
View File

@@ -0,0 +1,15 @@
# Label
## Installation
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance and Examples
The radio label component is used in other input components, to see an example of it in use see the [text input component](https://design-system.service.gov.uk/components/text-input/).
## Component options
Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text.
See [options table](https://design-system.service.gov.uk/components/file-upload/#options-example-default--label) for details.

45
app/templates/components/us_components/radio-label/_label.scss Normal file
View File

@@ -0,0 +1,45 @@
@import "../../settings/all";
@import "../../tools/all";
@import "../../helpers/all";
@include govuk-exports("govuk/component/label") {
.govuk-label {
@include govuk-font($size: 19);
@include govuk-text-colour;
display: block;
margin-bottom: govuk-spacing(1);
}
// Modifiers that make labels look more like their equivalent headings
.govuk-label--xl {
@include govuk-font($size: 48, $weight: bold);
margin-bottom: govuk-spacing(3);
}
.govuk-label--l {
@include govuk-font($size: 36, $weight: bold);
margin-bottom: govuk-spacing(3);
}
.govuk-label--m {
@include govuk-font($size: 24, $weight: bold);
margin-bottom: govuk-spacing(2);
}
.govuk-label--s {
@include govuk-font($size: 19, $weight: bold);
}
// When the label is nested inside a heading, override the heading so that it
// does not have a margin. Effectively we want to be able to treat the heading
// as if it is not there.
//
// This breaks BEM conventions because it exists as a parent of the 'block',
// so we can't really consider an element.
.govuk-label-wrapper {
margin: 0;
}
}

38
app/templates/components/us_components/radio-label/macro-options.json Normal file
View File

@@ -0,0 +1,38 @@
[
{
"name": "text",
"type": "string",
"required": true,
"description": "If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored."
},
{
"name": "html",
"type": "string",
"required": true,
"description": "If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored."
},
{
"name": "for",
"type": "string",
"required": true,
"description": "The value of the for attribute, the id of the input the label is associated with."
},
{
"name": "isPageHeading",
"type": "boolean",
"required": false,
"description": "Whether the label also acts as the heading for the page."
},
{
"name": "classes",
"type": "string",
"required": false,
"description": "Classes to add to the label tag."
},
{
"name": "attributes",
"type": "object",
"required": false,
"description": "HTML attributes (for example data attributes) to add to the label tag."
}
]

3
app/templates/components/us_components/radio-label/macro.njk Normal file
View File

@@ -0,0 +1,3 @@
{% macro usaRadioLabel(params) %}
{%- include "./template.njk" -%}
{% endmacro %}

15
app/templates/components/us_components/radio-label/template.njk Normal file
View File

@@ -0,0 +1,15 @@
{% if params.html or params.text %}
{% set labelHtml %}
<label class="usa-checkbox__label {%- if params.classes %}{{ params.classes }}{% endif %}"
{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
{%- if params.for %} for="{{ params.for }}"{% endif %}>
{{ params.html | safe if params.html else params.text }}
</label>
{% endset %}
{% if params.isPageHeading %}
<h1 class="font-body-2xl text-bold">{{ labelHtml | safe | indent(2) }}</h1>
{% else %}
{{ labelHtml | safe }}
{% endif %}
{% endif %}

12
app/templates/forms/fields/checkboxes/template.njk
View File

@@ -1,7 +1,7 @@
{% from "components/us_components/error-message/macro.njk" import govukErrorMessage -%}
{% from "components/us_components/fieldset/macro.njk" import govukFieldset %}
{% from "components/us_components/hint/macro.njk" import govukHint %}
{% from "components/us_components/label/macro.njk" import govukLabel %}
{% from "components/us_components/radio-label/macro.njk" import usaRadioLabel %}
{#- Copied from https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/checkboxes/template.njk
@@ -73,7 +73,7 @@
visuallyHiddenText: params.errorMessage.visuallyHiddenText
}) | indent(2) | trim }}
{% endif %}
<{{ groupElement }} class="govuk-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}"
<{{ groupElement }} class="{%- if params.classes %} {{ params.classes }}{% endif %}"
{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
{%- if isConditional %} data-module="checkboxes"{% endif -%}>
{% for item in params.items %}
@@ -84,18 +84,18 @@
{% set itemHintId = id + "-item-hint" if hasHint else "" %}
{% set itemDescribedBy = describedBy if not hasFieldset else "" %}
{% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
<{{ groupItemElement }} class="govuk-checkboxes__item {%- if item.classes %} {{ item.classes }}{% endif %}">
<{{ groupItemElement }} class="usa-checkbox {%- if item.classes %} {{ item.classes }}{% endif %}">
{%- if item.before %}{{ item.before }}{% endif -%}
<input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
<input class="usa-checkbox__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
{{-" checked" if item.checked }}
{{-" disabled" if item.disabled }}
{%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
{%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
{{ govukLabel({
{{ usaRadioLabel({
html: item.html,
text: item.text,
classes: 'govuk-checkboxes__label' + (' ' + item.label.classes if item.label.classes),
classes: (' ' + item.label.classes if item.label.classes),
attributes: item.label.attributes,
for: id
}) | indent(6) | trim }}

2
app/templates/main_nav.html
View File

@@ -1,7 +1,7 @@
{% if help %}
{% include 'partials/tour.html' %}
{% else %}
<nav class="nav margin-y-5">
<nav class="nav margin-bottom-5">
<ul class="usa-sidenav">
{% if current_user.has_permissions() %}
{% if current_user.has_permissions('view_activity') %}

6
app/templates/service_navigation.html
View File

@@ -1,5 +1,5 @@
{% macro navigation_service_name(service) %}
<div class="navigation-service font-body-2xl bold">
<div class="font-body-2xl text-bold">
{{ service.name }}
{% if not service.active %}
<span class="navigation-service-name navigation-service-type--suspended">Suspended</span>
@@ -7,7 +7,7 @@
</div>
{% endmacro %}
<div class="navigation-service margin-top-2 display-flex flex-align-end flex-justify">
<div class="navigation-service margin-top-2 display-flex flex-align-end flex-justify border-bottom padding-bottom-1">
{% if current_service.organization_id %}
{% if current_user.platform_admin or
(current_user.belongs_to_organization(current_service.organization_id) and current_service.live) %}
@@ -15,5 +15,5 @@
{% endif %}
{% endif %}
{{ navigation_service_name(current_service) }}
<a href="{{ url_for('main.choose_account') }}" class="usa-link margin-bottom-2">Switch service</a>
<a href="{{ url_for('main.choose_account') }}" class="usa-link">Switch service</a>
</div>

2
app/templates/views/activity/counts.html
View File

@@ -1,5 +1,5 @@
{% from "components/pill.html" import pill %}
<div class='bottom-gutter ajax-block-container'>
<div class='tabs ajax-block-container'>
{{ pill(
status_filters,
status

2
app/templates/views/dashboard/template-statistics.html
View File

@@ -8,7 +8,7 @@
<div class='template-statistics-table'>
{% call(item, row_number) list_table(
template_statistics,
caption="By template",
caption="Messages sent by template",
caption_visible=True,
empty_message='',
field_headings=[

2
app/templates/views/get-started.html
View File

@@ -12,7 +12,7 @@
<h1 class="font-body-2xl margin-bottom-3">Get started</h1>
<ol class="usa-process-list">
<li class="usa-process-list__item padding-bottom-4 margin-top-3">
<li class="usa-process-list__item padding-bottom-4 margin-top-2">
<h2 class="usa-process-list__heading line-height-sans-3">Check if Notify.gov is right for you</h2>
<p>Read about our <a class="usa-link" href="{{ url_for('main.features') }}">features</a>, <a class="usa-link" href="{{ url_for('.pricing') }}">pricing</a> and <a class="usa-link" href="{{ url_for('main.roadmap') }}">roadmap</a>.</p>
</li>

46
app/templates/views/templates/_template_list.html
View File

@@ -30,33 +30,33 @@
{% for item in template_list %}
{% set item_link_content %}
{% for ancestor in item.ancestors %}
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=ancestor.id) }}" class="usa-link template-list-folder">
{{- format_item_name(ancestor.name) -}}
</a> <span class="message-name-separator"></span>
{% endfor %}
{% if item.is_folder %}
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=item.id) }}" class="usa-link template-list-folder">
<span class="live-search-relevant">{{- format_item_name(item.name) -}}</span>
</a>
{% else %}
<a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}" class="usa-link font-body-lg usa-template-list-template">
<span class="live-search-relevant">
{%- if current_service.api_keys -%}
<span class="govuk-!-display-none">{{ item.id }} </span>
{%- endif -%}
{{- format_item_name(item.name) -}}
</span>
</a>
{% endif %}
{% endset %}
{% set label_content %}
<span class="usa-sr-only">
{%- for ancestor in item.ancestors %}{{ format_item_name(ancestor.name, separators=False) }} {% endfor -%}
{{ format_item_name(item.name, separators=False) -}}
</span>
{% for ancestor in item.ancestors %}
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=ancestor.id) }}"
class="usa-link template-list-folder">
{{- format_item_name(ancestor.name) -}}
</a> <span class="message-name-separator"></span>
{% endfor %}
{% if item.is_folder %}
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=item.id) }}"
class="usa-link template-list-folder">
<span class="live-search-relevant">{{- format_item_name(item.name) -}}</span>
</a>
{% else %}
<a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}"
class="usa-link usa-template-list-template">
<span class="live-search-relevant">
{%- if current_service.api_keys -%}
<span class="govuk-!-display-none">{{ item.id }} </span>
{%- endif -%}
{{- format_item_name(item.name) -}}
</span>
</a>
{% endif %}
{% endset %}
{% set item_meta %}
@@ -70,7 +70,7 @@
{% set checkbox_config = {
"html": label_content,
"label": {
"classes": "template-list-item-label margin-top-05",
"classes": "template-list-item-label",
},
"id": "templates-or-folder-" ~ item.id,
"classes": "template-list-item template-list-item-with-checkbox {}".format(

6
app/templates/withnav_template.html
View File

@@ -7,7 +7,7 @@
{% block main %}
<div class="grid-container">
{% include "service_navigation.html" %}
<div class="grid-row">
<div class="grid-row margin-top-5">
{% if help %}
<div class="grid-col-3">
{% else %}
@@ -18,12 +18,12 @@
{% if help %}
<div class="grid-col-8">
{% else %}
<div class="grid-col-9 padding-left-4 usa-prose site-prose">
<div class="grid-col-9 padding-left-4">
{% endif %}
{% block beforeContent %}
{% block backLink %}{% endblock %}
{% endblock %}
<main id="main-content" role="main">
<main id="main-content" role="main" class="usa-prose site-prose margin-bottom-10">
{% block content %}
{% include 'flash_messages.html' %}
{% block maincolumn_content %}{% endblock %}

10
tests/javascripts/support/helpers/html.js
View File

@@ -43,14 +43,14 @@ function templatesAndFoldersCheckboxes (hierarchy) {
hierarchy.forEach((node, idx) => {
result += `
<div class="govuk-checkboxes__item template-list-item template-list-item-with-checkbox template-list-item-without-ancestors">
<div class="usa-checkbox template-list-item template-list-item-with-checkbox template-list-item-without-ancestors">
<input class="usa-checkbox__input" id="templates-or-folder-${idx}" name="templates_and_folders" type="checkbox" value="templates-or-folder-${idx}">
<label class="usa-checkbox__label template-list-item-label margin-top-05" for="templates-or-folder-${idx}">
<label class="usa-checkbox__label template-list-item-label" for="templates-or-folder-${idx}">
<span class="usa-sr-only">${node.label}</span>
<a href="/services/6658542f-0cad-491f-bec8-ab8457700ead/templates/all/folders/3d057d9a-51fc-45ea-8b63-0003206350a6" class="usa-link template-list-${node.type === 'folder' ? 'folder' : 'template'}">
<span class="live-search-relevant">${node.label}</span>
</a>
</label>
<a href="/services/6658542f-0cad-491f-bec8-ab8457700ead/templates/all/folders/3d057d9a-51fc-45ea-8b63-0003206350a6" class="usa-link template-list-${node.type === 'folder' ? 'folder' : 'template'}">
<span class="live-search-relevant">${node.label}</span>
</a>
${node.meta}
</div>`;

2
tests/javascripts/updateContent.test.js
View File

@@ -183,7 +183,7 @@ describe('Update content', () => {
});
return `
<div class="bottom-gutter ajax-block-container">
<div class="tabs ajax-block-container">
<ul role="tablist" class="pill">
${pillsHTML}
</ul>