@1024pix/pix-ui 26.0.5 → 27.0.0
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 +12 -0
- package/addon/components/pix-button.hbs +6 -0
- package/addon/components/pix-collapsible.hbs +7 -10
- package/addon/components/pix-collapsible.js +0 -4
- package/addon/styles/_pix-button.scss +43 -33
- package/addon/styles/_pix-collapsible.scss +56 -73
- package/app/stories/pix-button.stories.js +33 -0
- package/app/stories/pix-button.stories.mdx +10 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# Pix-UI Changelog
|
|
2
2
|
|
|
3
|
+
## v27.0.0 (22/02/2023)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### :rocket: Amélioration
|
|
7
|
+
- [#339](https://github.com/1024pix/pix-ui/pull/339) [FEATURE] Accorder le style du PixCollapsible au Design System (PIX-7164)
|
|
8
|
+
|
|
9
|
+
## v26.1.0 (21/02/2023)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### :rocket: Amélioration
|
|
13
|
+
- [#338](https://github.com/1024pix/pix-ui/pull/338) [FEATURE] Permettre au PixButton d'avoir des icônes avant et après le label (PIX-3038)
|
|
14
|
+
|
|
3
15
|
## v26.0.5 (20/02/2023)
|
|
4
16
|
|
|
5
17
|
|
|
@@ -24,7 +24,13 @@
|
|
|
24
24
|
</div>
|
|
25
25
|
<span class="loader__not-visible-text">{{yield}}</span>
|
|
26
26
|
{{else}}
|
|
27
|
+
{{#if @iconBefore}}
|
|
28
|
+
<FaIcon class="pix-button__icon pix-button__icon--before" @icon={{@iconBefore}} />
|
|
29
|
+
{{/if}}
|
|
27
30
|
{{yield}}
|
|
31
|
+
{{#if @iconAfter}}
|
|
32
|
+
<FaIcon class="pix-button__icon pix-button__icon--after" @icon={{@iconAfter}} />
|
|
33
|
+
{{/if}}
|
|
28
34
|
{{/if}}
|
|
29
35
|
</button>
|
|
30
36
|
{{/if}}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
<div class="pix-collapsible
|
|
1
|
+
<div class="pix-collapsible">
|
|
2
2
|
|
|
3
3
|
<button
|
|
4
|
+
class="pix-collapsible__title"
|
|
4
5
|
type="button"
|
|
5
6
|
{{on "click" this.toggleCollapsible}}
|
|
6
|
-
class="pix-collapsible__title {{if this.isUnCollapsed 'pix-collapsible__title--uncollapsed'}}"
|
|
7
7
|
aria-controls={{this.contentId}}
|
|
8
8
|
aria-expanded={{if this.isUnCollapsed "true" "false"}}
|
|
9
9
|
...attributes
|
|
10
10
|
>
|
|
11
|
-
<span class="pix-collapsible-
|
|
11
|
+
<span class="pix-collapsible-title__label">
|
|
12
12
|
{{#if @titleIcon}}
|
|
13
|
-
<FaIcon @icon={{@titleIcon}}
|
|
13
|
+
<FaIcon class="pix-collapsible-title__icon" @icon={{@titleIcon}} />
|
|
14
14
|
{{/if}}
|
|
15
15
|
|
|
16
16
|
{{#if (has-block "title")}}
|
|
@@ -21,19 +21,16 @@
|
|
|
21
21
|
</span>
|
|
22
22
|
|
|
23
23
|
<FaIcon
|
|
24
|
-
@icon="{{if this.isCollapsed 'plus' 'minus'}}"
|
|
25
24
|
class="pix-collapsible-title__toggle-icon"
|
|
25
|
+
@icon="{{if this.isCollapsed 'chevron-down' 'chevron-up'}}"
|
|
26
26
|
/>
|
|
27
27
|
</button>
|
|
28
28
|
|
|
29
29
|
<div
|
|
30
30
|
id={{this.contentId}}
|
|
31
|
+
class="pix-collapsible__content"
|
|
31
32
|
aria-hidden={{if this.isCollapsed "true" "false"}}
|
|
32
|
-
class="pix-collapsible__content
|
|
33
|
-
{{if this.isUnCollapsed ' pix-collapsible__content--uncollapse'}}"
|
|
34
33
|
>
|
|
35
|
-
{{
|
|
36
|
-
{{yield}}
|
|
37
|
-
{{/if}}
|
|
34
|
+
{{yield}}
|
|
38
35
|
</div>
|
|
39
36
|
</div>
|
|
@@ -14,10 +14,6 @@ export default class PixCollapsible extends Component {
|
|
|
14
14
|
return !this.isCollapsed;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
get isContentRendered() {
|
|
18
|
-
return this.hasUnCollapsedOnce;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
17
|
get title() {
|
|
22
18
|
if (!this.args.title || !this.args.title.trim()) {
|
|
23
19
|
throw new Error('ERROR in PixCollapsible component, @title param is not provided');
|
|
@@ -1,43 +1,53 @@
|
|
|
1
|
-
.pix-
|
|
2
|
-
|
|
3
|
-
position: absolute;
|
|
1
|
+
.pix-button__icon {
|
|
2
|
+
height: 1rem;
|
|
4
3
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
4
|
+
&--before {
|
|
5
|
+
margin-right: $spacing-xs;
|
|
8
6
|
}
|
|
9
7
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
height: 10px;
|
|
13
|
-
background-color: $pix-neutral-0;
|
|
14
|
-
border-radius: 100%;
|
|
15
|
-
display: inline-block;
|
|
16
|
-
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
|
8
|
+
&--after {
|
|
9
|
+
margin-left: $spacing-xs;
|
|
17
10
|
}
|
|
11
|
+
}
|
|
18
12
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
.loader--grey > div {
|
|
23
|
-
background-color: $pix-neutral-80;
|
|
24
|
-
}
|
|
25
|
-
.loader .bounce1 {
|
|
26
|
-
animation-delay: -0.32s;
|
|
27
|
-
}
|
|
13
|
+
.pix-button .loader {
|
|
14
|
+
position: absolute;
|
|
28
15
|
|
|
29
|
-
|
|
30
|
-
|
|
16
|
+
&__not-visible-text {
|
|
17
|
+
visibility: hidden;
|
|
31
18
|
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.loader > div {
|
|
22
|
+
width: 10px;
|
|
23
|
+
height: 10px;
|
|
24
|
+
background-color: $pix-neutral-0;
|
|
25
|
+
border-radius: 100%;
|
|
26
|
+
display: inline-block;
|
|
27
|
+
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
|
28
|
+
}
|
|
32
29
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
30
|
+
.loader--white > div {
|
|
31
|
+
background-color: $pix-neutral-0;
|
|
32
|
+
}
|
|
33
|
+
.loader--grey > div {
|
|
34
|
+
background-color: $pix-neutral-80;
|
|
35
|
+
}
|
|
36
|
+
.loader .bounce1 {
|
|
37
|
+
animation-delay: -0.32s;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.loader .bounce2 {
|
|
41
|
+
animation-delay: -0.16s;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@keyframes sk-bouncedelay {
|
|
45
|
+
0%,
|
|
46
|
+
80%,
|
|
47
|
+
100% {
|
|
48
|
+
transform: scale(0);
|
|
49
|
+
}
|
|
50
|
+
40% {
|
|
51
|
+
transform: scale(1);
|
|
42
52
|
}
|
|
43
53
|
}
|
|
@@ -1,95 +1,78 @@
|
|
|
1
1
|
.pix-collapsible {
|
|
2
|
-
width: 100%;
|
|
3
|
-
display: flex;
|
|
4
|
-
flex-direction: column;
|
|
5
|
-
font-family: $font-roboto;
|
|
6
|
-
font-size: 1rem;
|
|
7
2
|
border: 1px solid $pix-neutral-20;
|
|
8
|
-
padding: 0;
|
|
9
|
-
cursor: pointer;
|
|
10
3
|
background-color: $pix-neutral-0;
|
|
11
4
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
display: flex;
|
|
17
|
-
justify-content: space-between;
|
|
18
|
-
background: transparent;
|
|
19
|
-
border: none;
|
|
20
|
-
color: $pix-neutral-60;
|
|
21
|
-
font-size: 1rem;
|
|
22
|
-
align-items: center;
|
|
23
|
-
|
|
24
|
-
&:hover {
|
|
25
|
-
background-color: $pix-neutral-10;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
&:focus {
|
|
29
|
-
background-color: $pix-neutral-10;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
&--uncollapsed {
|
|
33
|
-
background-color: $pix-neutral-10;
|
|
34
|
-
}
|
|
5
|
+
&:first-child,
|
|
6
|
+
&:first-child .pix-collapsible__title {
|
|
7
|
+
border-top-left-radius: 0.5rem;
|
|
8
|
+
border-top-right-radius: 0.5rem;
|
|
35
9
|
}
|
|
36
10
|
|
|
37
|
-
|
|
11
|
+
&:last-child,
|
|
12
|
+
&:last-child .pix-collapsible__title:not([aria-expanded='true']) {
|
|
13
|
+
border-bottom-left-radius: 0.5rem;
|
|
14
|
+
border-bottom-right-radius: 0.5rem;
|
|
15
|
+
}
|
|
38
16
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
17
|
+
&:not(:first-child) {
|
|
18
|
+
border-top: none;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
44
21
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
22
|
+
.pix-collapsible__title {
|
|
23
|
+
display: flex;
|
|
24
|
+
justify-content: space-between;
|
|
25
|
+
align-items: center;
|
|
26
|
+
width: 100%;
|
|
27
|
+
padding: $spacing-s;
|
|
28
|
+
border: none;
|
|
29
|
+
color: $pix-neutral-90;
|
|
30
|
+
font-size: 1rem;
|
|
31
|
+
line-height: 1.25;
|
|
49
32
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
33
|
+
&:hover,
|
|
34
|
+
&:focus,
|
|
35
|
+
&[aria-expanded='true'] {
|
|
36
|
+
background-color: $pix-neutral-10;
|
|
54
37
|
}
|
|
55
38
|
|
|
56
|
-
&
|
|
57
|
-
|
|
58
|
-
display: none;
|
|
59
|
-
|
|
60
|
-
&--uncollapse {
|
|
61
|
-
display: initial;
|
|
62
|
-
}
|
|
39
|
+
&[aria-expanded='true'] {
|
|
40
|
+
border-bottom: 1px solid $pix-neutral-20;
|
|
63
41
|
}
|
|
64
42
|
}
|
|
65
43
|
|
|
66
|
-
.pix-collapsible
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
44
|
+
.pix-collapsible-title {
|
|
45
|
+
&__container {
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
flex-grow: 1;
|
|
49
|
+
}
|
|
70
50
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
}
|
|
51
|
+
&__icon {
|
|
52
|
+
margin-right: $spacing-xs;
|
|
53
|
+
color: $pix-neutral-50;
|
|
54
|
+
}
|
|
75
55
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
56
|
+
&__toggle-icon {
|
|
57
|
+
width: 1rem;
|
|
58
|
+
height: 1rem;
|
|
59
|
+
padding: 0.5rem;
|
|
60
|
+
margin-left: $spacing-xs;
|
|
61
|
+
border-radius: 50%;
|
|
62
|
+
}
|
|
81
63
|
}
|
|
82
64
|
|
|
83
|
-
.pix-
|
|
84
|
-
|
|
65
|
+
.pix-collapsible__title:hover .pix-collapsible-title__toggle-icon {
|
|
66
|
+
background-color: $pix-neutral-20;
|
|
85
67
|
}
|
|
86
68
|
|
|
87
|
-
.pix-
|
|
88
|
-
|
|
89
|
-
|
|
69
|
+
.pix-collapsible__content {
|
|
70
|
+
padding: $spacing-s;
|
|
71
|
+
font-size: 0.875rem;
|
|
72
|
+
line-height: 1.25rem;
|
|
73
|
+
color: $pix-neutral-60;
|
|
90
74
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
border-top: none;
|
|
75
|
+
&[aria-hidden='true'] {
|
|
76
|
+
display: none;
|
|
77
|
+
}
|
|
95
78
|
}
|
|
@@ -11,6 +11,8 @@ const Template = (args) => ({
|
|
|
11
11
|
@isLoading={{this.isLoading}}
|
|
12
12
|
@size={{this.size}}
|
|
13
13
|
@isBorderVisible={{this.isBorderVisible}}
|
|
14
|
+
@iconBefore={{this.iconBefore}}
|
|
15
|
+
@iconAfter={{this.iconAfter}}
|
|
14
16
|
>
|
|
15
17
|
{{this.label}}
|
|
16
18
|
</PixButton>
|
|
@@ -26,6 +28,8 @@ const Template = (args) => ({
|
|
|
26
28
|
@isLoading={{button.isLoading}}
|
|
27
29
|
@size={{button.size}}
|
|
28
30
|
@isBorderVisible={{button.isBorderVisible}}
|
|
31
|
+
@iconBefore={{button.iconBefore}}
|
|
32
|
+
@iconAfter={{button.iconAfter}}
|
|
29
33
|
>
|
|
30
34
|
{{button.label}}
|
|
31
35
|
</PixButton>
|
|
@@ -103,6 +107,13 @@ colors.args = {
|
|
|
103
107
|
],
|
|
104
108
|
};
|
|
105
109
|
|
|
110
|
+
export const icons = Template.bind({});
|
|
111
|
+
icons.args = {
|
|
112
|
+
...Default.args,
|
|
113
|
+
iconBefore: 'magnifying-glass',
|
|
114
|
+
iconAfter: 'heart',
|
|
115
|
+
};
|
|
116
|
+
|
|
106
117
|
export const disabled = Template.bind({});
|
|
107
118
|
disabled.args = {
|
|
108
119
|
...Default.args,
|
|
@@ -196,6 +207,28 @@ export const argsTypes = {
|
|
|
196
207
|
defaultValue: { summary: 'blue' },
|
|
197
208
|
},
|
|
198
209
|
},
|
|
210
|
+
iconBefore: {
|
|
211
|
+
name: 'iconBefore',
|
|
212
|
+
description: `Nom de l'icône font-awesome à afficher **avant** le label`,
|
|
213
|
+
type: { name: 'string', required: false },
|
|
214
|
+
control: { type: 'select' },
|
|
215
|
+
options: ['heart', 'magnifying-glass', 'plus', 'xmark'],
|
|
216
|
+
table: {
|
|
217
|
+
type: { summary: 'string' },
|
|
218
|
+
defaultValue: { summary: null },
|
|
219
|
+
},
|
|
220
|
+
},
|
|
221
|
+
iconAfter: {
|
|
222
|
+
name: 'iconAfter',
|
|
223
|
+
description: `Nom de l'icône font-awesome à afficher **après** le label`,
|
|
224
|
+
type: { name: 'string', required: false },
|
|
225
|
+
control: { type: 'select' },
|
|
226
|
+
options: ['heart', 'magnifying-glass', 'plus', 'xmark'],
|
|
227
|
+
table: {
|
|
228
|
+
type: { summary: 'string' },
|
|
229
|
+
defaultValue: { summary: null },
|
|
230
|
+
},
|
|
231
|
+
},
|
|
199
232
|
isDisabled: {
|
|
200
233
|
name: 'isDisabled',
|
|
201
234
|
type: { name: 'boolean', required: false },
|
|
@@ -29,6 +29,16 @@ Le bouton avec toutes ses variations de couleur
|
|
|
29
29
|
<Story story={stories.colors} height={500} />
|
|
30
30
|
</Canvas>
|
|
31
31
|
|
|
32
|
+
## Icons
|
|
33
|
+
|
|
34
|
+
Le bouton avec des icônes `font-awesome` à afficher avant (`@iconBefore`) ou après (`@iconAfter`) le label.
|
|
35
|
+
|
|
36
|
+
> ℹ️ Accessibilité : dans le cas où les icônes ont une valeur d'information (ex: un bouton `⬅️ Précédent`), il est important d'apporter un aria-label au bouton (ex: "Retour à la page précédente").
|
|
37
|
+
|
|
38
|
+
<Canvas isColumn>
|
|
39
|
+
<Story story={stories.icons} height={75} />
|
|
40
|
+
</Canvas>
|
|
41
|
+
|
|
32
42
|
## Disabled
|
|
33
43
|
|
|
34
44
|
Le bouton désactivé
|