Skip to content

Commit b43052c

Browse files
MinThaMiemansona
authored andcommitted
Adds pagination component to the styleguide
1 parent d9361d5 commit b43052c

File tree

6 files changed

+134
-0
lines changed

6 files changed

+134
-0
lines changed

addon/components/es-pagination.hbs

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="pagination-wrapper">
2+
{{#if @previous}}
3+
<div class="previous-wrapper bg-none">
4+
<LinkTo class="pagination-link previous" @route={{@previous.route}} @model={{@previous.model}}>
5+
<span class="pagination-text">{{@previous.text}}</span>
6+
</LinkTo>
7+
</div>
8+
{{/if}}
9+
10+
{{#if @next}}
11+
<div class="next-wrapper bg-none">
12+
<LinkTo class="pagination-link next" @route={{@next.route}} @model={{@next.model}}>
13+
<span class="pagination-text">{{@next.text}}</span>
14+
</LinkTo>
15+
</div>
16+
{{/if}}
17+
</div>

addon/styles/addon.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,4 @@
2727
@import 'components/es-note.css';
2828
@import 'components/es-sidebar.css';
2929
@import 'components/es-progress-bar.css';
30+
@import 'components/es-pagination.css';
Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
.pagination-wrapper {
2+
width: 100%;
3+
display: grid;
4+
grid-template-columns: 1fr 1fr;
5+
grid-template-rows: 1fr;
6+
gap: 0px 40px;
7+
grid-template-areas:
8+
"previous next";
9+
}
10+
11+
.previous-wrapper{
12+
grid-area: previous;
13+
}
14+
15+
.next-wrapper {
16+
grid-area: next;
17+
text-align: right;
18+
}
19+
20+
.pagination-link {
21+
&::before,
22+
&::after {
23+
display: inline-block;
24+
font-weight: 700;
25+
margin: 0 0.5em;
26+
transition: transform 0.3s;
27+
}
28+
&:hover, &:focus, &:active {
29+
.pagination-text {
30+
color: var(--color-link-hover);
31+
}
32+
}
33+
}
34+
35+
.pagination-text {
36+
color: var(--color-link);
37+
background: no-repeat left bottom
38+
linear-gradient(var(--color-brand-40), var(--color-brand-40));
39+
background-size: 100% 0.1875rem;
40+
}
41+
42+
.previous {
43+
&::before {
44+
content: "\2039";
45+
}
46+
47+
&:hover::before {
48+
transform: translateX(-0.5em);
49+
}
50+
}
51+
52+
.next {
53+
&::after {
54+
content: "\203A";
55+
}
56+
57+
&:hover::after {
58+
transform: translateX(0.5em);
59+
}
60+
}

app/components/es-pagination.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from 'ember-styleguide/components/es-pagination';

docs/components/pagination.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Pagination
2+
3+
Adds back and forth pagination, when provided with a `previous` object and a `next` object. These objects should look like this:
4+
```js
5+
const object = {
6+
route: "String",
7+
model: {},
8+
text: "The text that will show in the pagination"
9+
}
10+
```
11+
12+
## Usage
13+
14+
Add the following code to the template
15+
16+
```handlebars
17+
<EsPagination @previous={{hash text="Older articles" route="prev"}} @next={{hash text="Newer articles" route="next"}}/>
18+
```
19+
20+
The example below show what happens if you only provide the `previous` object when it's the last page you are on.
21+
22+
```handlebars
23+
<EsPagination @previous={{hash text="One before last article" route="prev"}}/>
24+
```
25+
The example below show what happens if you only provide the `next` object when it's the first page you are on.
26+
27+
```handlebars
28+
<EsPagination @next={{hash text="Second article" route="next"}}/>
29+
```
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { module, test } from 'qunit';
2+
import { setupRenderingTest } from 'ember-qunit';
3+
import { render } from '@ember/test-helpers';
4+
import { hbs } from 'ember-cli-htmlbars';
5+
6+
module('Integration | Component | es-pagination', function (hooks) {
7+
setupRenderingTest(hooks);
8+
9+
test('it renders', async function (assert) {
10+
// Set any properties with this.set('myProperty', 'value');
11+
// Handle any actions with this.set('myAction', function(val) { ... });
12+
13+
await render(hbs`<EsPagination />`);
14+
15+
assert.dom(this.element).hasText('');
16+
17+
// Template block usage:
18+
await render(hbs`
19+
<EsPagination>
20+
template block text
21+
</EsPagination>
22+
`);
23+
24+
assert.dom(this.element).hasText('template block text');
25+
});
26+
});

0 commit comments

Comments
 (0)