Skip to content

Commit c9eb3f5

Browse files
author
James Mejia
committed
Update logic for bounded sets of data.
- Update pagination all tests to test new requirements - Update data requirements for pagination displays - Show all items if less than 7 - Show first 5 if current less than 5 - Show last 5 if current is less than total - 5 - By default show: [first] … current-1 current current+1 … [last]
1 parent c2d9608 commit c9eb3f5

File tree

2 files changed

+134
-45
lines changed

2 files changed

+134
-45
lines changed

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

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
pager_ranges = {
55
'default': range(pagination.current - 1, pagination.current + 2),
66
'last_item': pagination.items,
7-
'first_three': range(2, 5),
8-
'last_three': range(pagination.items - 3, pagination.items),
9-
'all': range(2, pagination.items)
7+
'first_five': range(1, 6),
8+
'last_five': range(pagination.items - 4, pagination.items),
9+
'all': range(1, pagination.items)
1010
}
1111
%}
1212

@@ -18,42 +18,51 @@
1818
</li>
1919
{% endset %}
2020

21-
<li class="usa-pagination__item usa-pagination__page-no">
22-
{{ paginationButton(1, pagination.current) }}
23-
</li>
24-
2521
{# Page numbers #}
2622
{% switch true %}
27-
{% case pagination.items <= 4 %}
28-
{# List all of them if less than 4 #}
23+
{# List all items if less than 7 #}
24+
{% case pagination.items <= 7 %}
2925
{% for item in pager_ranges.all %}
3026
<li class="usa-pagination__item usa-pagination__page-no">
3127
{{ paginationButton(item, pagination.current) }}
3228
</li>
3329
{% endfor %}
34-
{% case pagination.current <= 4 and pagination.items >= 4 %}
35-
{# Show first three only #}
36-
{% for item in pager_ranges.first_three %}
30+
{# User is at the start of a long dataset #}
31+
{# Example: 1, 2, 3, *4*, 5 … 8 #}
32+
{# Doesn't apply when user gets to 5 of 8 #}
33+
{% case pagination.current <= 5 and pagination.items >= 7 %}
34+
{% for item in pager_ranges.first_five %}
3735
<li class="usa-pagination__item usa-pagination__page-no">
3836
{{ paginationButton(item, pagination.current) }}
3937
</li>
4038
{% endfor %}
4139

4240
{{ ellipsis | safe }}
4341

44-
{% case (pagination.current >= pagination.items - 3) %}
42+
{# When user is close to the end of dataset #}
43+
{# Example: 1 … 4, *5*, 6, 7, 8 #}
44+
{% case pagination.current >= pagination.items - 3 %}
45+
<div class="usa-pagination__item usa-pagination__page-no">
46+
{{ paginationButton(1, pagination.current) }}
47+
</div>
48+
4549
{{ ellipsis | safe }}
4650

47-
{# Show last three #}
48-
{% for item in pager_ranges.last_three %}
51+
{% for item in pager_ranges.last_five %}
4952
<li class="usa-pagination__item usa-pagination__page-no">
5053
{{ paginationButton(item, pagination.current) }}
5154
</li>
5255
{% endfor %}
56+
{# Default case: Current - 1, Current, Current + 1 #}
57+
{# Example: 1 … 21, *22*, 23 … 50 #}
58+
{# Example: 1 … 4, *5*, 6 … 9 #}
5359
{% default %}
60+
<div class="usa-pagination__item usa-pagination__page-no">
61+
{{ paginationButton(1, pagination.current) }}
62+
</div>
63+
5464
{{ ellipsis | safe }}
5565

56-
{# Default - Current -1, Current, Current + 1 #}
5766
{% for item in pager_ranges.default %}
5867
<li class="usa-pagination__item usa-pagination__page-no">
5968
{{ paginationButton(item, pagination.current) }}

‎src/components/test/pagination/pagination-all.njk‎

Lines changed: 109 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<section class="usa-section grid-container">
2-
<h1>Few pages</h1>
2+
<h1>Bounded sets</h1>
33

4-
<h2>First selected</h2>
4+
<h2>Single</h2>
55
{% render '@pagination',
66
{
7-
aria_label: 'pagination few test 1',
7+
aria_label: 'pagination single page test',
88
pagination: {
9-
items: 3,
9+
items: 1,
1010
current: 1
1111
}
1212
},
@@ -15,81 +15,161 @@
1515

1616
<hr>
1717

18-
<h2>In between</h2>
18+
<h2>4 total</h2>
1919
{% render '@pagination',
2020
{
21-
aria_label: 'pagination few test 2',
21+
aria_label: 'pagination four items test',
2222
pagination: {
23-
items: 3,
24-
current: 2
23+
items: 4,
24+
current: 1
2525
}
2626
},
2727
merge=true
2828
%}
2929

3030
<hr>
3131

32-
<h2>Last selected</h2>
32+
<h2>1 of 7</h2>
3333
{% render '@pagination',
3434
{
35-
aria_label: 'pagination few test 4',
35+
aria_label: 'pagination one of seven test',
3636
pagination: {
37-
items: 3,
38-
current: 3
37+
items: 7,
38+
current: 1
39+
}
40+
},
41+
merge=true
42+
%}
43+
44+
<h2>5 of 7</h2>
45+
{% render '@pagination',
46+
{
47+
aria_label: 'pagination five of seven test',
48+
pagination: {
49+
items: 7,
50+
current: 5
3951
}
4052
},
4153
merge=true
4254
%}
43-
</section>
44-
<section class="usa-section grid-container">
45-
<h1>A lot of pages</h1>
4655

47-
<h2>First selected</h2>
56+
<h2>1 of 8</h2>
4857
{% render '@pagination',
4958
{
50-
aria_label: 'pagination many test 1',
59+
aria_label: 'pagination one of eight test',
5160
pagination: {
52-
items: 50,
61+
items: 8,
5362
current: 1
5463
}
5564
},
5665
merge=true
5766
%}
5867

68+
<h2>2 of 8</h2>
69+
{% render '@pagination',
70+
{
71+
aria_label: 'pagination two of eight test',
72+
pagination: {
73+
items: 8,
74+
current: 2
75+
}
76+
},
77+
merge=true
78+
%}
79+
80+
<h2>4 of 8</h2>
81+
{% render '@pagination',
82+
{
83+
aria_label: 'pagination four of eight test',
84+
pagination: {
85+
items: 8,
86+
current: 4
87+
}
88+
},
89+
merge=true
90+
%}
91+
92+
<h2>5 of 8</h2>
93+
{% render '@pagination',
94+
{
95+
aria_label: 'pagination five of eight test',
96+
pagination: {
97+
items: 8,
98+
current: 5
99+
}
100+
},
101+
merge=true
102+
%}
103+
104+
<h2>6 of 8</h2>
105+
{% render '@pagination',
106+
{
107+
aria_label: 'pagination six of eight test',
108+
pagination: {
109+
items: 8,
110+
current: 6
111+
}
112+
},
113+
merge=true
114+
%}
115+
59116
<hr>
60117

61-
<h2>In between</h2>
118+
<h2>1 of 9</h2>
62119
{% render '@pagination',
63120
{
64-
aria_label: 'pagination many test 2',
121+
aria_label: 'pagination one of nine test',
65122
pagination: {
66-
items: 50,
123+
items: 9,
124+
current: 1
125+
}
126+
},
127+
merge=true
128+
%}
129+
130+
<h2>2 of 9</h2>
131+
{% render '@pagination',
132+
{
133+
aria_label: 'pagination two of nine test',
134+
pagination: {
135+
items: 9,
67136
current: 2
68137
}
69138
},
70139
merge=true
71140
%}
72141

142+
<h2>4 of 9</h2>
73143
{% render '@pagination',
74144
{
75-
aria_label: 'pagination many test 3',
145+
aria_label: 'pagination four of nine test',
76146
pagination: {
77-
items: 50,
78-
current: 22
147+
items: 9,
148+
current: 4
79149
}
80150
},
81151
merge=true
82152
%}
83153

84-
<hr>
154+
<h2>5 of 9</h2>
155+
{% render '@pagination',
156+
{
157+
aria_label: 'pagination five of nine test',
158+
pagination: {
159+
items: 9,
160+
current: 5
161+
}
162+
},
163+
merge=true
164+
%}
85165

86-
<h2>Last selected</h2>
166+
<h2>6 of 9</h2>
87167
{% render '@pagination',
88168
{
89-
aria_label: 'pagination many test 4',
169+
aria_label: 'pagination six of nine test',
90170
pagination: {
91-
items: 50,
92-
current: 48
171+
items: 9,
172+
current: 6
93173
}
94174
},
95175
merge=true

0 commit comments

Comments
 (0)