@1024pix/pix-ui 14.1.1 → 14.3.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 +18 -0
- 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/pix-design-tokens.scss +7 -0
- package/docs/design-system.stories.mdx +1 -1
- package/docs/pix-design-tokens-dev.stories.mdx +40 -0
- package/docs/pix-design-tokens.stories.mdx +23 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# Pix-UI Changelog
|
|
2
2
|
|
|
3
|
+
## v14.3.1 (11/05/2022)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### :building_construction: Tech
|
|
7
|
+
- [#218](https://github.com/1024pix/pix-ui/pull/218) [TECH] Ajouter la notion de Pix dans le nom du fichier des design tokens (PIX-4936).
|
|
8
|
+
|
|
9
|
+
## v14.3.0 (10/05/2022)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### :building_construction: Tech
|
|
13
|
+
- [#215](https://github.com/1024pix/pix-ui/pull/215) [TECH] Rajouter les classes de typographie et les mixins de box-shadow du design system
|
|
14
|
+
|
|
15
|
+
## v14.2.0 (06/05/2022)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :coffee: Autre
|
|
19
|
+
- [#216](https://github.com/1024pix/pix-ui/pull/216) A11Y: add role=img on the stars container + add aria-label
|
|
20
|
+
|
|
3
21
|
## v14.1.1 (15/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/Pix 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 exemple :
|
|
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,23 @@
|
|
|
1
|
+
import { Meta } from '@storybook/addon-docs/blocks';
|
|
2
|
+
|
|
3
|
+
<Meta title="Utiliser Pix UI/Pix 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 icônes, etc.)
|
|
8
|
+
|
|
9
|
+
## Utiliser les classes, mixins et variables dans votre css
|
|
10
|
+
|
|
11
|
+
En ajoutant la dépendance dans votre application avec `npm install`, pour avoir accès aux classes, mixins 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
|
+
Et aussi importer les design-tokens avec `@import 'design-tokens';` dans `app/styles/app.scss`.
|
|
21
|
+
|
|
22
|
+
Par la suite vous aurez accès à toutes les variables des design tokens avec le `$`, par exemple `border: 1px solid $blue;`
|
|
23
|
+
et les mixins avec `@include 'nom du mixin';`
|