@1024pix/pix-ui 13.4.0 → 13.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/addon/components/pix-pagination.hbs +4 -2
- package/addon/components/pix-pagination.js +5 -0
- package/addon/styles/_pix-pagination.scss +19 -8
- package/app/stories/pix-pagination.stories.js +24 -0
- package/app/stories/pix-pagination.stories.mdx +6 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<footer class=
|
|
1
|
+
<footer class={{this.isCondensed}}>
|
|
2
2
|
<section class="pix-pagination__size">
|
|
3
3
|
<span class="pagination-size__label">{{this.beforeResultsPerPage}}</span>
|
|
4
4
|
<PixSelect
|
|
@@ -17,8 +17,9 @@
|
|
|
17
17
|
{{this.pageInfo}}
|
|
18
18
|
{{/if}}
|
|
19
19
|
</span>
|
|
20
|
-
<div class="pix-
|
|
20
|
+
<div class="pix-pagination-navigation__action">
|
|
21
21
|
<PixIconButton
|
|
22
|
+
class="pix-pagination-navigation__action-button"
|
|
22
23
|
@icon="arrow-left"
|
|
23
24
|
aria-label={{this.previousPageLabel}}
|
|
24
25
|
@triggerAction={{this.goToPreviousPage}}
|
|
@@ -32,6 +33,7 @@
|
|
|
32
33
|
{{this.pageNumber}}
|
|
33
34
|
</span>
|
|
34
35
|
<PixIconButton
|
|
36
|
+
class="pix-pagination-navigation__action-button"
|
|
35
37
|
@icon="arrow-right"
|
|
36
38
|
aria-label={{this.nextPageLabel}}
|
|
37
39
|
@triggerAction={{this.goToNextPage}}
|
|
@@ -9,9 +9,14 @@ const DEFAULT_PAGE_OPTIONS = [
|
|
|
9
9
|
{ label: '50', value: 50 },
|
|
10
10
|
{ label: '100', value: 100 },
|
|
11
11
|
];
|
|
12
|
+
|
|
12
13
|
export default class PixPagination extends Component {
|
|
13
14
|
@service router;
|
|
14
15
|
|
|
16
|
+
get isCondensed() {
|
|
17
|
+
return this.args.isCondensed ? 'pix-pagination-condensed' : 'pix-pagination';
|
|
18
|
+
}
|
|
19
|
+
|
|
15
20
|
get beforeResultsPerPage() {
|
|
16
21
|
return this.formatMessage('beforeResultsPerPage');
|
|
17
22
|
}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
.pix-pagination{
|
|
1
|
+
.pix-pagination, .pix-pagination-condensed {
|
|
2
2
|
display: flex;
|
|
3
3
|
justify-content: center;
|
|
4
4
|
margin: 16px 0;
|
|
5
5
|
color: $grey-60;
|
|
6
6
|
font-size: 0.875rem;
|
|
7
|
+
|
|
7
8
|
&__size {
|
|
8
9
|
display: none;
|
|
9
10
|
align-items: center;
|
|
@@ -21,15 +22,22 @@
|
|
|
21
22
|
}
|
|
22
23
|
}
|
|
23
24
|
|
|
24
|
-
&__navigation{
|
|
25
|
+
&__navigation {
|
|
25
26
|
display: flex;
|
|
26
27
|
align-items: center;
|
|
27
28
|
padding: 0;
|
|
28
29
|
gap: 12px;
|
|
29
30
|
flex-direction: column-reverse;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.pix-pagination-navigation {
|
|
35
|
+
&__action {
|
|
36
|
+
display: flex;
|
|
37
|
+
align-items: center;
|
|
38
|
+
|
|
39
|
+
&-button {
|
|
40
|
+
margin: 0 8px;
|
|
33
41
|
}
|
|
34
42
|
}
|
|
35
43
|
}
|
|
@@ -37,12 +45,15 @@
|
|
|
37
45
|
@include device-is('tablet') {
|
|
38
46
|
.pix-pagination {
|
|
39
47
|
justify-content: space-between;
|
|
40
|
-
|
|
48
|
+
}
|
|
49
|
+
.pix-pagination > .pix-pagination {
|
|
50
|
+
&__size {
|
|
41
51
|
display: flex;
|
|
42
52
|
}
|
|
43
|
-
|
|
53
|
+
|
|
54
|
+
&__navigation {
|
|
44
55
|
gap: initial;
|
|
45
|
-
flex-direction:initial
|
|
56
|
+
flex-direction: initial;
|
|
46
57
|
}
|
|
47
58
|
}
|
|
48
59
|
}
|
|
@@ -7,6 +7,7 @@ export const Template = (args) => {
|
|
|
7
7
|
@pagination={{pagination}}
|
|
8
8
|
@locale = {{locale}}
|
|
9
9
|
@pageOptions= {{pageOptions}}
|
|
10
|
+
@isCondensed= {{isCondensed}}
|
|
10
11
|
/>
|
|
11
12
|
`,
|
|
12
13
|
context: args,
|
|
@@ -52,6 +53,18 @@ OnePage.args = {
|
|
|
52
53
|
locale: 'fr',
|
|
53
54
|
};
|
|
54
55
|
|
|
56
|
+
export const Condensed = Template.bind({});
|
|
57
|
+
Condensed.args = {
|
|
58
|
+
pagination: {
|
|
59
|
+
page: 1,
|
|
60
|
+
pageSize: 10,
|
|
61
|
+
rowCount: 2,
|
|
62
|
+
pageCount: 1,
|
|
63
|
+
},
|
|
64
|
+
locale: 'fr',
|
|
65
|
+
isCondensed: true,
|
|
66
|
+
};
|
|
67
|
+
|
|
55
68
|
// select attribute data type from https://storybook.js.org/docs/react/essentials/controls
|
|
56
69
|
export const argTypes = {
|
|
57
70
|
pagination: {
|
|
@@ -119,4 +132,15 @@ export const argTypes = {
|
|
|
119
132
|
defaultValue: { summary: 'fr' },
|
|
120
133
|
},
|
|
121
134
|
},
|
|
135
|
+
isCondensed: {
|
|
136
|
+
name: 'isCondensed',
|
|
137
|
+
description:
|
|
138
|
+
"En desktop, retire le contrôle du nombre d'élèments par page pour simplifier l'usage",
|
|
139
|
+
type: { name: 'boolean', required: false },
|
|
140
|
+
control: { type: 'boolean' },
|
|
141
|
+
table: {
|
|
142
|
+
type: { summary: 'boolean' },
|
|
143
|
+
defaultValue: { summary: 'false' },
|
|
144
|
+
},
|
|
145
|
+
},
|
|
122
146
|
};
|
|
@@ -44,6 +44,11 @@ Sur mobile, le select qui permet de choisir le nombre d'élément à afficher su
|
|
|
44
44
|
<Story name='OnePage' story={stories.OnePage} height={110} />
|
|
45
45
|
</Canvas>
|
|
46
46
|
|
|
47
|
+
## Version condensée
|
|
48
|
+
<Canvas>
|
|
49
|
+
<Story name='Condensed' story={stories.Condensed} height={140} />
|
|
50
|
+
</Canvas>
|
|
51
|
+
|
|
47
52
|
## Usage
|
|
48
53
|
|
|
49
54
|
```html
|
|
@@ -51,6 +56,7 @@ Sur mobile, le select qui permet de choisir le nombre d'élément à afficher su
|
|
|
51
56
|
@pagination={{pagination}}
|
|
52
57
|
@locale = {{locale}}
|
|
53
58
|
@pageOptions = {{pageOptions}
|
|
59
|
+
@isCondensed = {{isCondensed}
|
|
54
60
|
/>
|
|
55
61
|
```
|
|
56
62
|
|