Skip to content

Commit 8f62a67

Browse files
thisisdanothisisdano
authored
Merge pull request #4175 from uswds/jm-add-pagination
USWDS - Pagination: Update pagination on develop.
2 parents f80d808 + da4b2eb commit 8f62a67

25 files changed

+1111
-502
lines changed

‎.prettierignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
*.html
21
*.njk
32
*.woff*
43
*.svg

‎package-lock.json‎

Lines changed: 234 additions & 276 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,8 @@
5656
"test:visual:update": " node ./spec/visual-regression-tester.js test --updateGolden",
5757
"version": "gulp build release",
5858
"watch": "NODE_ENV=development nswatch",
59-
"prettier:scss": "npx prettier --write ./src/stylesheets/**/*.scss"
59+
"prettier:scss": "npx prettier --write ./src/stylesheets/**/*.scss",
60+
"prettier:templates": "npx prettier --write './build/components/render/*.html'"
6061
},
6162
"watch": {
6263
"src/stylesheets/**/*.scss": "build:css",

‎spec/axe-tester.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ const AXE_CONTEXT = JSON.stringify({
1010
// iframes with data: URIs. The content of these iframes is just for
1111
// non-USWDS example content anyways, so just skip them to speed things
1212
// up.
13-
['iframe[src^="data:"]']
14-
]
13+
['iframe[src^="data:"]'],
14+
],
1515
});
1616

1717
const AXE_OPTIONS = {

‎src/components/layouts/create-account/_create-account-inner.njk‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
{% render '@layout--federal-employee-sign-in', { max: max }, true %}
6262
</div>
6363
</div>
64+
</div>
6465
</section>
6566
</div>
6667
</main>

‎src/components/layouts/sign-in/_sign-in-multiple-inner.njk‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
{% render '@layout--value-props', { value_props: value_props }, true %}
3636
{% render '@layout--federal-employee-sign-in', { max: max }, true %}
3737
</div>
38-
</section>
39-
</div>
40-
</main>
38+
</div>
39+
</section>
40+
</div>
41+
</main>

‎src/components/pagination/_pagination-arrow.njk‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{#
2+
The full pagination data object is passed so we can access current state, aria labels, and text labels.
3+
#}
4+
{% macro paginationArrow(direction, pagination) %}
5+
6+
{% set link_attrs = {
7+
'href': 'javascript:void(0);',
8+
'class': 'usa-pagination__link usa-pagination__' + direction + '-page',
9+
'aria_label': pagination[direction]['label'] + ' ' + pagination.page_label | lower
10+
} %}
11+
12+
<li class="usa-pagination__item usa-pagination__arrow">
13+
<a
14+
href="{{ link_attrs.href }}"
15+
class="{{ link_attrs.class }}"
16+
aria-label="{{ link_attrs.aria_label }}"
17+
>
18+
{% if direction == 'previous' %}
19+
<svg class="usa-icon" aria-hidden="true" role="img">
20+
<use xlink:href="../../dist/img/sprite.svg#navigate_before"></use>
21+
</svg>
22+
{% endif %}
23+
<span class="usa-pagination__link-text">
24+
{{ pagination[direction]['label'] }}
25+
</span>
26+
{% if direction == 'next' %}
27+
<svg class="usa-icon" aria-hidden="true" role="img">
28+
<use xlink:href="../../dist/img/sprite.svg#navigate_next"></use>
29+
</svg>
30+
{% endif %}
31+
</a>
32+
</li>
33+
{% endmacro %}

‎src/components/pagination/_pagination-button.njk‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{% macro paginationButton(item, pager_opts) %}
2+
{% set is_current = item === pager_opts.current %}
3+
{% set is_last = item === pager_opts.total %}
4+
{% set labels = pager_opts.aria_labels %}
5+
6+
{# Display: "Last page, page X" if last item. Otherwise "Page X" #}
7+
{% set aria_label = (labels.last + " " + labels.page_label | lower if is_last else labels.page_label) + " " + item %}
8+
9+
<li class="usa-pagination__item usa-pagination__page-no">
10+
<a
11+
href="javascript:void(0);"
12+
class="usa-pagination__button {{ "usa-current" if is_current }}"
13+
aria-label="{{ aria_label }}"
14+
{% if is_current %}aria-current="page"{% endif %}>
15+
{{ item }}
16+
</a>
17+
</li>
18+
{% endmacro %}

‎src/components/pagination/_pagination-numbers--default.njk‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
{% from "pagination/_pagination-button.njk" import paginationButton %}
2+
3+
{% set
4+
pager_ranges = {
5+
'default': range(pagination.current - 1, pagination.current + 2),
6+
'last_item': pagination.items,
7+
'first_five': range(1, 6),
8+
'last_five': range(pagination.items - 4, pagination.items),
9+
'all': range(1, pagination.items)
10+
}
11+
%}
12+
13+
{% set pager_button_opts = {
14+
'current': pagination.current,
15+
'total': pagination.items,
16+
'aria_labels': {
17+
'page_label': pagination.page_label,
18+
'previous': pagination.previous.label,
19+
'next': pagination.next.label,
20+
'last': pagination.last_item.label
21+
}
22+
} %}
23+
24+
{# Page numbers #}
25+
{% switch true %}
26+
{# List all items if less than 7 #}
27+
{% case pagination.items <= 7 %}
28+
{% for item in pager_ranges.all %}
29+
{{ paginationButton(item, pager_button_opts) }}
30+
{% endfor %}
31+
{# User is at the start of a long dataset #}
32+
{# Example: 1, 2, 3, *4*, 5 … 8 #}
33+
{# Doesn't apply when user gets to 5 of 8 #}
34+
{% case pagination.current <= 4 and pagination.items >= 7 %}
35+
{% for item in pager_ranges.first_five %}
36+
{{ paginationButton(item, pager_button_opts) }}
37+
{% endfor %}
38+
39+
{{ overflow | safe }}
40+
41+
{# When user is close to the end of dataset #}
42+
{# Example: 1 … 4, *5*, 6, 7, 8 #}
43+
{% case pagination.current >= pagination.items - 3 %}
44+
{{ paginationButton(1, pager_button_opts) }}
45+
46+
{{ overflow | safe }}
47+
48+
{% for item in pager_ranges.last_five %}
49+
{{ paginationButton(item, pager_button_opts) }}
50+
{% endfor %}
51+
{# Default case: Current - 1, Current, Current + 1 #}
52+
{# Example: 1 … 21, *22*, 23 … 50 #}
53+
{# Example: 1 … 4, *5*, 6 … 9 #}
54+
{% default %}
55+
{{ paginationButton(1, pager_button_opts) }}
56+
57+
{{ overflow | safe }}
58+
59+
{% for item in pager_ranges.default %}
60+
{{ paginationButton(item, pager_button_opts) }}
61+
{% endfor %}
62+
63+
{{ overflow | safe }}
64+
{% endswitch %}
65+
66+
{{ paginationButton(pager_ranges.last_item, pager_button_opts) }}

‎src/components/pagination/_pagination-numbers--unbounded.njk‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{% from "pagination/_pagination-button.njk" import paginationButton %}
2+
3+
{% set
4+
pager_ranges = {
5+
'default': range(pagination.current - 1, pagination.current + 3),
6+
'first_set': range(1, 7)
7+
}
8+
%}
9+
10+
{% set pager_button_opts = {
11+
'current': pagination.current,
12+
'aria_labels': {
13+
'page_label': pagination.page_label,
14+
'previous': pagination.previous.label,
15+
'next': pagination.next.label,
16+
'last': pagination.last_item.label
17+
}
18+
} %}
19+
20+
{# Page numbers #}
21+
{% switch true %}
22+
{# If less than 7 #}
23+
{#
24+
Examples:
25+
*1*,
26+
*1*, 2, 3, 4, 5, 6 , 7
27+
#}
28+
{% case pagination.items <= 7 or pagination.current <= 5 %}
29+
{% for item in pager_ranges.first_set %}
30+
{{ paginationButton(item, pager_button_opts) }}
31+
{% endfor %}
32+
{% default %}
33+
{# First item #}
34+
{# Example: 1 … 9 *10* 11 … 24 #}
35+
{{ paginationButton(1, pager_button_opts) }}
36+
37+
{{ overflow | safe }}
38+
39+
{% for item in pager_ranges.default %}
40+
{{ paginationButton(item, pager_button_opts) }}
41+
{% endfor %}
42+
43+
{% endswitch %}
44+
45+
{{ overflow | safe }}

0 commit comments

Comments
 (0)