File tree Expand file tree Collapse file tree 6 files changed +134
-0
lines changed
tests/integration/components Expand file tree Collapse file tree 6 files changed +134
-0
lines changed Original file line number Diff line number Diff line change
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 >
Original file line number Diff line number Diff line change 27
27
@import 'components/es-note.css' ;
28
28
@import 'components/es-sidebar.css' ;
29
29
@import 'components/es-progress-bar.css' ;
30
+ @import 'components/es-pagination.css' ;
Original file line number Diff line number Diff line change
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
+ }
Original file line number Diff line number Diff line change
1
+ export { default } from 'ember-styleguide/components/es-pagination' ;
Original file line number Diff line number Diff line change
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
+ ```
Original file line number Diff line number Diff line change
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
+ } ) ;
You can’t perform that action at this time.
0 commit comments