Skip to content

Commit 3cfa84d

Browse files
authored
Merge pull request #433 from ember-learn/pagination
Adds pagination component to the styleguide
2 parents d9361d5 + ddafe2d commit 3cfa84d

File tree

8 files changed

+269
-0
lines changed

8 files changed

+269
-0
lines changed

addon/components/es-pagination.hbs

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="pagination-wrapper">
2+
{{#if (has-block "previous")}}
3+
<div class="previous-wrapper">
4+
{{yield to='previous'}}
5+
</div>
6+
{{/if}}
7+
8+
{{#if (has-block "next")}}
9+
<div class="next-wrapper">
10+
{{yield to='next'}}
11+
</div>
12+
{{/if}}
13+
</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: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
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+
& > .previous-wrapper{
10+
grid-area: previous;
11+
&::before {
12+
content: "\2039";
13+
}
14+
15+
&:hover::before {
16+
transform: translateX(-0.5em);
17+
color: var(--color-link-hover);
18+
}
19+
}
20+
21+
& > .next-wrapper {
22+
grid-area: next;
23+
text-align: right;
24+
&::after {
25+
content: "\203A";
26+
}
27+
28+
&:hover::after {
29+
transform: translateX(0.5em);
30+
color: var(--color-link-hover);
31+
}
32+
}
33+
34+
& > .previous-wrapper, & > .next-wrapper {
35+
&::before,
36+
&::after {
37+
color: var(--color-link);
38+
display: inline-block;
39+
font-weight: 700;
40+
margin: 0 0.5em;
41+
transition: transform 0.3s;
42+
}
43+
}
44+
}
45+
46+
47+
48+
.previous {
49+
&::before {
50+
content: "\2039";
51+
}
52+
53+
&:hover::before {
54+
transform: translateX(-0.5em);
55+
}
56+
}
57+
58+
.next {
59+
&::after {
60+
content: "\203A";
61+
}
62+
63+
&:hover::after {
64+
transform: translateX(0.5em);
65+
}
66+
}

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: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Pagination
2+
3+
Adds back and forth pagination, using `named blocks`. You insert your previous link into a `<:previous></:previous>` block and the next link into a `<:next></:next>` block. This will add the underline styling to the link and an animated arrow to your link.
4+
5+
## Usage
6+
7+
Add the following code to the template
8+
9+
```handlebars
10+
<EsPagination>
11+
<:previous>
12+
<LinkTo @route="page" @model={{this.previousId}}>
13+
Newer articles
14+
</LinkTo>
15+
</:previous>
16+
<:next>
17+
<LinkTo @route="page" @model={{this.nextId}}>
18+
Older articles
19+
</LinkTo>
20+
</:next>
21+
</EsPagination>
22+
```
23+
24+
The example below show what happens if you only provide the `previous` block when it's the last page you are on.
25+
26+
```handlebars
27+
<EsPagination>
28+
<:previous>
29+
<LinkTo @route="page" @model={{this.previousId}}>
30+
Newer articles
31+
</LinkTo>
32+
</:previous>
33+
</EsPagination>
34+
```
35+
The example below show what happens if you only provide the `next` block when it's the first page you are on.
36+
37+
```handlebars
38+
<EsPagination>
39+
<:next>
40+
<LinkTo @route="page" @model={{this.nextId}}>
41+
Older articles
42+
</LinkTo>
43+
</:next>
44+
</EsPagination>
45+
```

package-lock.json

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

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"normalize.css": "^8.0.1",
4848
"postcss-import": "^12.0.1",
4949
"postcss-preset-env": "^6.7.0",
50+
"ember-named-blocks-polyfill": "^0.2.5",
5051
"static-postcss-addon-tree": "^2.0.0"
5152
},
5253
"devDependencies": {
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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+
await render(hbs`
11+
<EsPagination>
12+
<:previous>
13+
Newer articles
14+
</:previous>
15+
<:next>
16+
Older articles
17+
</:next>
18+
</EsPagination>
19+
`);
20+
21+
assert.dom(this.element).hasText('Newer articles Older articles');
22+
});
23+
});

0 commit comments

Comments
 (0)