Skip to content

Commit 2b9891f

Browse files
CITguyCITguy
authored
Merge pull request #173 from rackerlabs/surf-676-build-pagination
feat(pagination): pagination styles added to toolkit
2 parents 00e0e29 + 66e0c45 commit 2b9891f

File tree

4 files changed

+169
-0
lines changed

4 files changed

+169
-0
lines changed

‎docs/_data/nav.json5‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
{ label: 'Menus', path: 'menus' },
4444
{ label: 'Modals', path: 'modals' },
4545
{ label: 'Panels', path: 'panels' },
46+
{ label: 'Pagination', path: 'pagination' },
4647
{ label: 'Popovers', path: 'popovers' },
4748
{ label: 'Reveals', path: 'reveals' },
4849
{ label: 'Search', path: 'search' },

‎docs/components/pagination/index.html‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
---
2+
title: Pagination
3+
also:
4+
components/buttons: Buttons
5+
components/icons: Icons
6+
---
7+
{% extends 'component.njk' %}
8+
{% block content %}
9+
<section>
10+
<p>
11+
The <code>aria-current</code> attribute needs to be added in order to apply style as well as denote semantic meaning.
12+
</p>
13+
</section>
14+
15+
<section>
16+
<h2 id="first-page">First Page</h2>
17+
<div class="demo">
18+
<div class="hxPagination hxBtnGroup">
19+
<button class="hxBtn" disabled>
20+
<hx-icon type="angle-start"></hx-icon>
21+
</button>
22+
<button class="hxBtn" disabled>
23+
<hx-icon type="angle-left"></hx-icon>
24+
</button>
25+
<button class="hxBtn" aria-current="true">1</button>
26+
<button class="hxBtn">2</button>
27+
<button class="hxBtn">3</button>
28+
<button class="hxBtn">4</button>
29+
<button class="hxBtn">5</button>
30+
<button class="hxBtn">
31+
<hx-icon type="angle-right"></hx-icon>
32+
</button>
33+
<button class="hxBtn">
34+
<hx-icon type="angle-end"></hx-icon>
35+
</button>
36+
</div>
37+
</div>
38+
{% code 'html' %}
39+
<div class="hxPagination hxBtnGroup">
40+
<button class="hxBtn" disabled>
41+
<hx-icon type="angle-start"></hx-icon>
42+
</button>
43+
<button class="hxBtn" disabled>
44+
<hx-icon type="angle-left"></hx-icon>
45+
</button>
46+
<button class="hxBtn" aria-current="true">1</button>
47+
<button class="hxBtn">2</button>
48+
<button class="hxBtn">3</button>
49+
<button class="hxBtn">4</button>
50+
<button class="hxBtn">5</button>
51+
<button class="hxBtn">
52+
<hx-icon type="angle-right"></hx-icon>
53+
</button>
54+
<button class="hxBtn">
55+
<hx-icon type="angle-end"></hx-icon>
56+
</button>
57+
</div>
58+
{% endcode %}
59+
</section>
60+
61+
<section>
62+
<h2 id="middle-page">Middle Page</h2>
63+
<div class="demo">
64+
<div class="hxPagination hxBtnGroup">
65+
<button class="hxBtn">
66+
<hx-icon type="angle-start"></hx-icon>
67+
</button>
68+
<button class="hxBtn">
69+
<hx-icon type="angle-left"></hx-icon>
70+
</button>
71+
<button class="hxBtn">8</button>
72+
<button class="hxBtn">9</button>
73+
<button class="hxBtn" aria-current="true">10</button>
74+
<button class="hxBtn">11</button>
75+
<button class="hxBtn">12</button>
76+
<button class="hxBtn">
77+
<hx-icon type="angle-right"></hx-icon>
78+
</button>
79+
<button class="hxBtn">
80+
<hx-icon type="angle-end"></hx-icon>
81+
</button>
82+
</div>
83+
</div>
84+
{% code 'html' %}
85+
<div class="hxPagination hxBtnGroup">
86+
<button class="hxBtn">
87+
<hx-icon type="angle-start"></hx-icon>
88+
</button>
89+
<button class="hxBtn">
90+
<hx-icon type="angle-left"></hx-icon>
91+
</button>
92+
<button class="hxBtn">8</button>
93+
<button class="hxBtn">9</button>
94+
<button class="hxBtn" aria-current="true">10</button>
95+
<button class="hxBtn">11</button>
96+
<button class="hxBtn">12</button>
97+
<button class="hxBtn">
98+
<hx-icon type="angle-right"></hx-icon>
99+
</button>
100+
<button class="hxBtn">
101+
<hx-icon type="angle-end"></hx-icon>
102+
</button>
103+
</div>
104+
{% endcode %}
105+
</section>
106+
107+
<section>
108+
<h2 id="last-page">Last Page</h2>
109+
<div class="demo">
110+
<div class="hxPagination hxBtnGroup">
111+
<button class="hxBtn">
112+
<hx-icon type="angle-start"></hx-icon>
113+
</button>
114+
<button class="hxBtn">
115+
<hx-icon type="angle-left"></hx-icon>
116+
</button>
117+
<button class="hxBtn">16</button>
118+
<button class="hxBtn">17</button>
119+
<button class="hxBtn">18</button>
120+
<button class="hxBtn">19</button>
121+
<button class="hxBtn" aria-current="true">20</button>
122+
<button class="hxBtn" disabled>
123+
<hx-icon type="angle-right"></hx-icon>
124+
</button>
125+
<button class="hxBtn" disabled>
126+
<hx-icon type="angle-end"></hx-icon>
127+
</button>
128+
</div>
129+
</div>
130+
{% code 'html' %}
131+
<div class="hxPagination hxBtnGroup">
132+
<button class="hxBtn">
133+
<hx-icon type="angle-start"></hx-icon>
134+
</button>
135+
<button class="hxBtn">
136+
<hx-icon type="angle-left"></hx-icon>
137+
</button>
138+
<button class="hxBtn">16</button>
139+
<button class="hxBtn">17</button>
140+
<button class="hxBtn">18</button>
141+
<button class="hxBtn">19</button>
142+
<button class="hxBtn" aria-current="true">20</button>
143+
<button class="hxBtn" disabled>
144+
<hx-icon type="angle-right"></hx-icon>
145+
</button>
146+
<button class="hxBtn" disabled>
147+
<hx-icon type="angle-end"></hx-icon>
148+
</button>
149+
</div>
150+
{% endcode %}
151+
</section>
152+
{% endblock %}
153+

‎src/helix-ui.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ figure {
9494
@import 'modules/choice-tiles';
9595
@import 'modules/grid';
9696
@import 'modules/hljs';
97+
@import 'modules/pagination';
9798
@import 'modules/stepper'; // BETA
9899
@import 'modules/table';
99100
@import 'modules/text-input';

‎src/helix-ui/styles/modules/pagination.less‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.hxPagination {
2+
background-color: @gray-0;
3+
border: 1px solid @gray-300;
4+
5+
.hxBtn {
6+
border: none;
7+
min-width: 2.5rem; //40px
8+
9+
&[aria-current="true"] {
10+
background-color: @cyan-900;
11+
color: @gray-0;
12+
}
13+
}
14+
}

0 commit comments

Comments
 (0)