@1024pix/pix-ui 14.1.0 → 14.3.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 +18 -0
- package/addon/components/pix-icon-button.js +2 -2
- package/addon/components/pix-stars.hbs +2 -3
- package/addon/styles/_shadows.scss +46 -0
- package/addon/styles/_typography.scss +255 -0
- package/addon/styles/addon.scss +1 -5
- package/addon/styles/design-tokens.scss +7 -0
- package/docs/design-system.stories.mdx +1 -1
- package/docs/design-tokens-dev.stories.mdx +40 -0
- package/docs/design-tokens.stories.mdx +32 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# Pix-UI Changelog
|
|
2
2
|
|
|
3
|
+
## v14.3.0 (10/05/2022)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### :building_construction: Tech
|
|
7
|
+
- [#215](https://github.com/1024pix/pix-ui/pull/215) [TECH] Rajouter les classes de typographie et les mixins de box-shadow du design system
|
|
8
|
+
|
|
9
|
+
## v14.2.0 (06/05/2022)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### :coffee: Autre
|
|
13
|
+
- [#216](https://github.com/1024pix/pix-ui/pull/216) A11Y: add role=img on the stars container + add aria-label
|
|
14
|
+
|
|
15
|
+
## v14.1.1 (15/04/2022)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :bug: Correction
|
|
19
|
+
- [#214](https://github.com/1024pix/pix-ui/pull/214) [BUGFIX] Ajouter params à la méthode triggerAction à PixIconButton (PIX-4790)
|
|
20
|
+
|
|
3
21
|
## v14.1.0 (12/04/2022)
|
|
4
22
|
|
|
5
23
|
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
<div class={{this.pixStarsClass}} ...attributes>
|
|
2
|
-
<span class="sr-only">{{@alt}}</span>
|
|
1
|
+
<div class={{this.pixStarsClass}} ...attributes role="img" aria-label={{@alt}}>
|
|
3
2
|
{{#each this.stars as |star|}}
|
|
4
|
-
<svg class="pix-stars__{{star}}" data-test-status={{star}} viewBox="0 0 36 36">
|
|
3
|
+
<svg class="pix-stars__{{star}}" data-test-status={{star}} viewBox="0 0 36 36" role="img">
|
|
5
4
|
<defs>
|
|
6
5
|
<linearGradient id="pix-stars-default" x1="68.643%" y1="0%" x2="68.643%" y2="100%">
|
|
7
6
|
<stop stop-color="#FEDC41" offset="0%"></stop>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
// See https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=54%3A5141
|
|
2
|
+
|
|
3
|
+
// Mixin pour permettre l'utilisation dans une classe css si jamais le tag html a trop de classe
|
|
4
|
+
@mixin shadow($verticalSize, $blur) {
|
|
5
|
+
box-shadow: 0 $verticalSize $blur rgba(7, 20, 46, 0.08);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
@mixin shadow-xs() {
|
|
9
|
+
@include shadow(4px, 8px);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@mixin shadow-sm() {
|
|
13
|
+
@include shadow(6px, 12px);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@mixin shadow-md() {
|
|
17
|
+
@include shadow(8px, 16px);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@mixin shadow-lg() {
|
|
21
|
+
@include shadow(10px, 20px);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@mixin shadow-xl() {
|
|
25
|
+
@include shadow(12px, 24px);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.pix-shadow-xs {
|
|
29
|
+
@include shadow-xs;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.pix-shadow-sm {
|
|
33
|
+
@include shadow-sm;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.pix-shadow-md {
|
|
37
|
+
@include shadow-md;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.pix-shadow-lg {
|
|
41
|
+
@include shadow-lg;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.pix-shadow-xl {
|
|
45
|
+
@include shadow-xl;
|
|
46
|
+
}
|
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
// See https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=24%3A8
|
|
2
|
+
|
|
3
|
+
// Mixin pour permettre l'utilisation dans une classe css si jamais le tag html a trop de classe
|
|
4
|
+
@mixin display1() {
|
|
5
|
+
font-family: $font-open-sans;
|
|
6
|
+
font-weight: $font-light;
|
|
7
|
+
font-size: 4.5rem;
|
|
8
|
+
line-height: 5.5rem;
|
|
9
|
+
letter-spacing: -0.04em;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@mixin display2() {
|
|
13
|
+
font-family: $font-open-sans;
|
|
14
|
+
font-weight: $font-light;
|
|
15
|
+
font-size: 3.75rem;
|
|
16
|
+
line-height: 4.5rem;
|
|
17
|
+
letter-spacing: -0.04em;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@mixin display3() {
|
|
21
|
+
font-family: $font-open-sans;
|
|
22
|
+
font-weight: $font-light;
|
|
23
|
+
font-size: 3rem;
|
|
24
|
+
line-height: 3.75rem;
|
|
25
|
+
letter-spacing: -0.04em;
|
|
26
|
+
|
|
27
|
+
@include device-is('mobile') {
|
|
28
|
+
font-weight: $font-medium;
|
|
29
|
+
font-size: 2.25rem;
|
|
30
|
+
line-height: 2.75rem;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@mixin h1() {
|
|
35
|
+
font-family: $font-open-sans;
|
|
36
|
+
font-weight: $font-light;
|
|
37
|
+
font-size: 2.5rem;
|
|
38
|
+
line-height: 3rem;
|
|
39
|
+
letter-spacing: -0.04em;
|
|
40
|
+
|
|
41
|
+
@include device-is('mobile') {
|
|
42
|
+
font-weight: $font-medium;
|
|
43
|
+
font-size: 2rem;
|
|
44
|
+
line-height: 2.5rem;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@mixin h2() {
|
|
49
|
+
font-family: $font-open-sans;
|
|
50
|
+
font-weight: $font-medium;
|
|
51
|
+
font-size: 2rem;
|
|
52
|
+
line-height: 2.5rem;
|
|
53
|
+
letter-spacing: -0.04em;
|
|
54
|
+
|
|
55
|
+
@include device-is('mobile') {
|
|
56
|
+
font-size: 1.75rem;
|
|
57
|
+
line-height: 2.25rem;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
@mixin h3() {
|
|
62
|
+
font-family: $font-open-sans;
|
|
63
|
+
font-weight: $font-medium;
|
|
64
|
+
font-size: 1.75rem;
|
|
65
|
+
line-height: 2.25rem;
|
|
66
|
+
letter-spacing: -0.04em;
|
|
67
|
+
|
|
68
|
+
@include device-is('mobile') {
|
|
69
|
+
font-size: 1.5rem;
|
|
70
|
+
line-height: 2rem;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@mixin h4() {
|
|
75
|
+
font-family: $font-open-sans;
|
|
76
|
+
font-weight: $font-medium;
|
|
77
|
+
font-size: 1.5rem;
|
|
78
|
+
line-height: 2rem;
|
|
79
|
+
letter-spacing: -0.02em;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@mixin subheading() {
|
|
83
|
+
font-family: $font-open-sans;
|
|
84
|
+
font-weight: $font-semi-bold;
|
|
85
|
+
font-size: 1.25rem;
|
|
86
|
+
line-height: 1.75rem;
|
|
87
|
+
|
|
88
|
+
@include device-is('mobile') {
|
|
89
|
+
font-size: 1.125rem;
|
|
90
|
+
line-height: 1.575rem;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@mixin text() {
|
|
95
|
+
font-family: $font-roboto;
|
|
96
|
+
font-weight: $font-normal;
|
|
97
|
+
font-size: 1rem;
|
|
98
|
+
line-height: 1.375rem;
|
|
99
|
+
|
|
100
|
+
b,
|
|
101
|
+
strong {
|
|
102
|
+
font-weight: $font-medium;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
a {
|
|
106
|
+
font-weight: $font-medium;
|
|
107
|
+
color: $blue;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
@mixin text-bold() {
|
|
112
|
+
@include text;
|
|
113
|
+
font-weight: $font-medium;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@mixin text-link() {
|
|
117
|
+
@include text;
|
|
118
|
+
font-weight: $font-medium;
|
|
119
|
+
color: $blue;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
@mixin text-small() {
|
|
123
|
+
@include text;
|
|
124
|
+
font-size: 0.875rem;
|
|
125
|
+
line-height: 1.25rem;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
@mixin text-large() {
|
|
129
|
+
@include text;
|
|
130
|
+
font-size: 1.125rem;
|
|
131
|
+
line-height: 1.625rem;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
@mixin caption() {
|
|
135
|
+
font-family: $font-roboto;
|
|
136
|
+
font-weight: $font-normal;
|
|
137
|
+
font-size: 0.75rem;
|
|
138
|
+
line-height: 1.125rem;
|
|
139
|
+
|
|
140
|
+
b,
|
|
141
|
+
strong {
|
|
142
|
+
font-weight: $font-bold;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
@mixin caption-bold() {
|
|
147
|
+
@include caption;
|
|
148
|
+
font-weight: $font-bold;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
@mixin caption-uppercase() {
|
|
152
|
+
@include caption;
|
|
153
|
+
text-transform: uppercase;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
@mixin footer() {
|
|
157
|
+
font-family: $font-roboto;
|
|
158
|
+
font-weight: $font-normal;
|
|
159
|
+
font-size: 0.625rem;
|
|
160
|
+
line-height: 0.875rem;
|
|
161
|
+
letter-spacing: 0.02em;
|
|
162
|
+
|
|
163
|
+
b,
|
|
164
|
+
strong {
|
|
165
|
+
font-weight: $font-bold;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
@mixin footer-bold() {
|
|
170
|
+
@include footer;
|
|
171
|
+
font-weight: $font-bold;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
@mixin footer-uppercase() {
|
|
175
|
+
@include footer;
|
|
176
|
+
font-weight: $font-bold;
|
|
177
|
+
letter-spacing: 0.08em;
|
|
178
|
+
text-transform: uppercase;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.pix-display1 {
|
|
182
|
+
@include display1;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.pix-display2 {
|
|
186
|
+
@include display2;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.pix-display3 {
|
|
190
|
+
@include display3;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.pix-h1 {
|
|
194
|
+
@include h1;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.pix-h2 {
|
|
198
|
+
@include h2;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.pix-h3 {
|
|
202
|
+
@include h3;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.pix-h4 {
|
|
206
|
+
@include h4;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.pix-subheading {
|
|
210
|
+
@include subheading;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.pix-text {
|
|
214
|
+
@include text;
|
|
215
|
+
|
|
216
|
+
&--bold {
|
|
217
|
+
@include text-bold;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
&--link {
|
|
221
|
+
@include text-link;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
&--small {
|
|
225
|
+
@include text-small;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
&--large {
|
|
229
|
+
@include text-large;
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.pix-caption {
|
|
234
|
+
@include caption;
|
|
235
|
+
|
|
236
|
+
&--bold {
|
|
237
|
+
@include caption-bold;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
&--uppercase {
|
|
241
|
+
@include caption-uppercase;
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.pix-footer {
|
|
246
|
+
@include footer;
|
|
247
|
+
|
|
248
|
+
&--bold {
|
|
249
|
+
@include footer-bold;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
&--uppercase {
|
|
253
|
+
@include footer-uppercase;
|
|
254
|
+
}
|
|
255
|
+
}
|
package/addon/styles/addon.scss
CHANGED
|
@@ -10,7 +10,7 @@ import { Meta } from '@storybook/addon-docs/blocks';
|
|
|
10
10
|
|
|
11
11
|
Voir : https://www.usabilis.com/design-system/
|
|
12
12
|
|
|
13
|
-
Chez Pix, nos UX/UI designers guident notre Design System dont on retrouve la documentation sur [
|
|
13
|
+
Chez Pix, nos UX/UI designers guident notre Design System dont on retrouve la documentation sur [Figma](https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix).
|
|
14
14
|
|
|
15
15
|
Puis ce sont les développeurs qui s'occupent d'implémenter le Design System avec une [librairie de composants Ember](https://cli.emberjs.com/release/writing-addons/)
|
|
16
16
|
et dont la documentation est générée par [Storybook](https://storybook.js.org/docs/react/get-started/introduction).
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { Meta } from '@storybook/addon-docs/blocks';
|
|
2
|
+
|
|
3
|
+
<Meta title="Développement/Design Tokens" />
|
|
4
|
+
|
|
5
|
+
# Design Tokens
|
|
6
|
+
|
|
7
|
+
> Les design tokens contiennent plusieurs éléments de base de la charte graphique (les couleurs, la typographie, les icones, etc.)
|
|
8
|
+
|
|
9
|
+
## Rajouter des design tokens dans Pix UI
|
|
10
|
+
|
|
11
|
+
Quand vous êtes amenés à ajouter ou à modifier des éléments des design tokens, faites le dans le scss associé,
|
|
12
|
+
par example `addon/styles/_typography.scss` ou `addon/styles/_colors.scss` et s'il n'est pas déjà importé, rajoutez l'import dans `addon/styles/design-tokens.scss`.
|
|
13
|
+
Ceci nous permettra d'utiliser les mixin dans nos applications par la suite.
|
|
14
|
+
|
|
15
|
+
Le standard d'équipe est de créer un mixin et une classe et de préfixer la classe avec `pix-`.
|
|
16
|
+
|
|
17
|
+
Par example :
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
@mixin text() {
|
|
21
|
+
font-family: $font-roboto;
|
|
22
|
+
font-weight: $font-normal;
|
|
23
|
+
font-size: 1rem;
|
|
24
|
+
line-height: 1.375rem;
|
|
25
|
+
|
|
26
|
+
b,
|
|
27
|
+
strong {
|
|
28
|
+
font-weight: $font-medium;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
a {
|
|
32
|
+
font-weight: $font-medium;
|
|
33
|
+
color: $blue;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.pix-text {
|
|
38
|
+
@include text;
|
|
39
|
+
}
|
|
40
|
+
```
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { Meta } from '@storybook/addon-docs/blocks';
|
|
2
|
+
|
|
3
|
+
<Meta title="Utiliser Pix UI/Design Tokens" />
|
|
4
|
+
|
|
5
|
+
# Design Tokens
|
|
6
|
+
|
|
7
|
+
> Les design tokens contiennent plusieurs éléments de base de la charte graphique (les couleurs, la typographie, les icones, etc.)
|
|
8
|
+
|
|
9
|
+
## Utiliser les classes, mixin et variables dans votre css
|
|
10
|
+
|
|
11
|
+
En ajoutant la dépendance dans votre application avec `npm install`, vous avez déjà accès aux classes, mais pour avoir accès aux mixin et variables,
|
|
12
|
+
il faut ajouter le code ci-dessous dans le `new EmberApp()` de votre `ember-cli.build.js` qui se trouve à la racine du projet :
|
|
13
|
+
|
|
14
|
+
```
|
|
15
|
+
sassOptions: {
|
|
16
|
+
includePaths: ['node_modules/@1024pix/pix-ui/addon/styles'],
|
|
17
|
+
},
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Par la suite vous aurez accès à toutes les variables des design tokens avec le `$`, par example `border: 1px solid $blue;`.
|
|
21
|
+
|
|
22
|
+
Et pour les mixin, dans le scss voulu, il faudra importer (avec `@use`) les design tokens au haut du fichier et puis vous pourrez les utiliser
|
|
23
|
+
|
|
24
|
+
Par example :
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
@use 'design-tokens`;
|
|
28
|
+
|
|
29
|
+
.organization-title {
|
|
30
|
+
@include design-tokens.text-bold;
|
|
31
|
+
}
|
|
32
|
+
```
|