@1024pix/pix-ui 39.0.2 → 40.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/addon/common/add-dynamic-style-tag.js +8 -0
- package/addon/components/pix-filterable-and-searchable-select.hbs +11 -10
- package/addon/components/pix-filterable-and-searchable-select.js +30 -2
- package/addon/components/pix-multi-select.hbs +68 -64
- package/addon/components/pix-multi-select.js +9 -0
- package/addon/components/pix-select.hbs +6 -2
- package/addon/components/pix-select.js +13 -19
- package/addon/styles/_pix-filterable-and-searchable-select.scss +6 -1
- package/addon/styles/_pix-input.scss +11 -0
- package/addon/styles/_pix-multi-select.scss +2 -2
- package/addon/styles/_pix-select.scss +4 -2
- package/addon/styles/pix-design-tokens/_form.scss +1 -0
- package/app/stories/pix-input.mdx +15 -4
- package/app/stories/pix-input.stories.js +16 -0
- package/app/stories/pix-multi-select.stories.js +13 -2
- package/app/stories/pix-select.stories.js +9 -0
- package/package.json +21 -16
- package/.buildpacks +0 -2
- package/.circleci/config.yml +0 -84
- package/.gitattributes +0 -7
- package/.nvmrc +0 -1
- package/.prettierrc.json +0 -12
- package/.storybook/logo.svg +0 -1
- package/.storybook/main.js +0 -10
- package/.storybook/manager.js +0 -6
- package/.storybook/preview.js +0 -39
- package/.storybook/storybook-custom-theme.js +0 -37
- package/.stylelintrc.json +0 -17
- package/CHANGELOG.md +0 -1367
- package/CNAME +0 -1
- package/config/environment.js +0 -5
- package/docs/adr/0001-utiliser-les-balises-html-natives.md +0 -51
- package/docs/architecture.mdx +0 -106
- package/docs/assets/accessibility-storybook.png +0 -0
- package/docs/assets/screen-pix-storybook.png +0 -0
- package/docs/breaking-changes.mdx +0 -102
- package/docs/changelog.mdx +0 -6
- package/docs/colors-palette.mdx +0 -237
- package/docs/create-component.mdx +0 -112
- package/docs/design-system.mdx +0 -20
- package/docs/design-tokens.mdx +0 -72
- package/docs/good-practices-a11y.mdx +0 -43
- package/docs/good-practices-design.mdx +0 -62
- package/docs/good-practices-responsive.mdx +0 -51
- package/docs/good-practices-style-css.mdx +0 -40
- package/docs/good-practices-tests.mdx +0 -9
- package/docs/make-a-release.mdx +0 -45
- package/docs/pix-design-tokens-dev.mdx +0 -39
- package/docs/pull_request_template.md +0 -14
- package/docs/shadow.mdx +0 -25
- package/docs/spacing.mdx +0 -19
- package/docs/storybook.mdx +0 -45
- package/docs/test-component-without-release.mdx +0 -19
- package/docs/typography.mdx +0 -163
- package/docs/use-component.mdx +0 -90
- package/docs/use-install.mdx +0 -37
- package/scalingo.json +0 -17
- package/servers.conf.erb +0 -30
package/docs/use-component.mdx
DELETED
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
import { Meta } from '@storybook/blocks';
|
|
2
|
-
|
|
3
|
-
<Meta title="Utiliser Pix UI/Utiliser un composant" />
|
|
4
|
-
|
|
5
|
-
# Utiliser un composant
|
|
6
|
-
|
|
7
|
-
Pour utiliser un composant dans une application Ember, on peut se référer à la documentation de ce composant.
|
|
8
|
-
|
|
9
|
-
Par exemple, pour `PixMessage`, [la documentation](https://storybook.pix.fr/?path=/docs/notification-message--message)
|
|
10
|
-
nous indique :
|
|
11
|
-
|
|
12
|
-
```hbs
|
|
13
|
-
<PixMessage @type='info' @withIcon='true'>
|
|
14
|
-
Ceci est un message à caractère informatif.
|
|
15
|
-
</PixMessage>
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
La documentation d'un composant liste tous les arguments acceptés par le composant, notamment les arguments requis
|
|
19
|
-
pour le fonctionnement du composant. On peut tester le rendu du composant en fonction de ses arguments dans l'onglet
|
|
20
|
-
Canvas de storybook.
|
|
21
|
-
|
|
22
|
-
## Bonnes pratiques
|
|
23
|
-
|
|
24
|
-
### Éviter de surcharger le CSS
|
|
25
|
-
|
|
26
|
-
Si l'on veut changer l'apparence d'un composant, il faut se poser plusieurs questions au préalable.
|
|
27
|
-
|
|
28
|
-
Veut-on voir ce changement à chaque utilisation du composant ? Dans ce cas, il faut mieux modifier directement le
|
|
29
|
-
composant dans Pix UI, en ouvrant une pull request, plutôt que de surcharger une instanciation dans l'application front.
|
|
30
|
-
|
|
31
|
-
Dans le cas où le changement est très spécifique, il est recommandé de ne pas surchager les classes CSS du composant
|
|
32
|
-
Pix UI.
|
|
33
|
-
|
|
34
|
-
Par exemple, le rendu du composant PixMessage sera :
|
|
35
|
-
|
|
36
|
-
```html
|
|
37
|
-
<div class="pix-message"></div>
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
⚠️ NE PAS surcharger directement la classe du composant en faisant :
|
|
41
|
-
|
|
42
|
-
```css
|
|
43
|
-
.pix-message {
|
|
44
|
-
color: pink;
|
|
45
|
-
}
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
👍🏻 Ajouter plutôt une nouvelle classe au composant avec l'attribut `class` :
|
|
49
|
-
|
|
50
|
-
```hbs
|
|
51
|
-
<PixMessage @type='info' @withIcon='true' class='message-rose'>
|
|
52
|
-
Ceci est un message à caractère informatif rose.
|
|
53
|
-
</PixMessage>
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
```css
|
|
57
|
-
.message-rose {
|
|
58
|
-
color: pink;
|
|
59
|
-
}
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
Si cela ne fonctionne pas, vérifier dans Pix UI que le composant hérite des attributs grâce à l'argument `...attributes`
|
|
63
|
-
et que cet argument soit placé en dernier pour qu'il puisse surchager les attributs par défaut du composant.
|
|
64
|
-
|
|
65
|
-
```hbs
|
|
66
|
-
<p class='pix-message {{concat "pix-message--" this.type}}' ...attributes>
|
|
67
|
-
...
|
|
68
|
-
</p>
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
### Tester l'accessibilité
|
|
72
|
-
|
|
73
|
-
L'accessibilité du composant lui-même est déjà testé par Storybook, voir
|
|
74
|
-
[Bonnes Pratiques / Accessibilité](/?path=/docs/développement-bonnes-pratiques-accessibilité--page).
|
|
75
|
-
|
|
76
|
-
Mais il faut aussi vérifier son accessibilité une fois composant intégré dans l'application front.
|
|
77
|
-
_Par exemple, le libellé étant spécifique à chaque bouton, il doit être défini à l'instanciation._
|
|
78
|
-
|
|
79
|
-
Pour tester l'accessibilité, on peut utiliser [l'extension Wave](https://wave.webaim.org/extension/) (Chrome et Firefox).
|
|
80
|
-
|
|
81
|
-
Voici quelques liens utiles :
|
|
82
|
-
|
|
83
|
-
- https://github.com/1024pix/pix/blob/dev/docs/Accessibilite.md
|
|
84
|
-
- https://1024pix.atlassian.net/wiki/spaces/DEV/pages/2856288297/2021-05-27+-+Compte-rendu+Atelier+accessibilit+Tanaguru+les+devs
|
|
85
|
-
|
|
86
|
-
### Icônes utilisées par un composant
|
|
87
|
-
|
|
88
|
-
Si une icône n'apparaît pas lorsqu'un composant est instancié, il faut vérifier que l'icône est bien déclarée dans le
|
|
89
|
-
fichier `config/icons.js` de l'application concernée.
|
|
90
|
-
_Par exemple, `PixBanner` utilise l'icône `info-circle`, il faut penser à l'ajouter au fichier `icons.js`._
|
package/docs/use-install.mdx
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { Meta } from '@storybook/blocks';
|
|
2
|
-
|
|
3
|
-
<Meta title="Utiliser Pix UI/Installation" />
|
|
4
|
-
|
|
5
|
-
# Installer l'addon Pix UI
|
|
6
|
-
|
|
7
|
-
Pour installer Pix UI dans une application Ember il suffit d'écrire la commande suivante :
|
|
8
|
-
|
|
9
|
-
`npm install @1024pix/pix-ui@<tag_souhaité>` où `<tag_souhaité>` est la [dernière version](https://github.com/1024pix/pix-ui/tags).
|
|
10
|
-
|
|
11
|
-
# Mise à jour de l'addon Pix UI <a id="Addon"></a>
|
|
12
|
-
|
|
13
|
-
`npm install @1024pix/pix-ui@<tag_souhaité>`
|
|
14
|
-
|
|
15
|
-
ou bien, aller changer dans le `package.json` la version de Pix UI et faire un `npm install`.
|
|
16
|
-
|
|
17
|
-
##### Quel tag choisir ?
|
|
18
|
-
|
|
19
|
-
`<tag_souhaité>` doit correspondre au numéro de version à installer. Ce numéro de version correspond à une release.
|
|
20
|
-
|
|
21
|
-
_Par exemple, on peut remplacer `<tag_souhaité>` par `v0.1.1`._
|
|
22
|
-
Pour voir la liste des tags de Pix UI, [c'est par ici.](https://github.com/1024pix/pix-ui/tags)
|
|
23
|
-
|
|
24
|
-
Selon la convention [Semver](https://semver.org/lang/fr/), un tag est sous le format `vx.y.z`.
|
|
25
|
-
|
|
26
|
-
- `x` est une version majeure
|
|
27
|
-
- `y` est une version mineure
|
|
28
|
-
- `z` est un patch
|
|
29
|
-
|
|
30
|
-
# Breaking changes
|
|
31
|
-
|
|
32
|
-
Lorsqu'il y a un changement de version majeure, il faut faire attention aux changements bloquants.
|
|
33
|
-
|
|
34
|
-
Pour se mettre au courant des changements majeurs, il faut aller voir dans le [CHANGELOG](https://github.com/1024pix/pix-ui/blob/dev/CHANGELOG.md), pour pouvoir voir chaque PR concernée par la montée de version.
|
|
35
|
-
|
|
36
|
-
_Par exemple, si l'on souhaite passer de la version v2.2.0 de Pix UI à v3.0.0, on voit dans le CHANGELOG que la PR [#79](https://github.com/1024pix/pix-ui/pull/79) a changé le nom d'un composant.
|
|
37
|
-
Cela implique donc de changer le nom du composant partout dans l'application front où l'on souhaite monter de version._
|
package/scalingo.json
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "Pix UI Review App",
|
|
3
|
-
"env": {
|
|
4
|
-
"REVIEW_APP": {
|
|
5
|
-
"description": "Indicates that the application is a review app",
|
|
6
|
-
"value": "true"
|
|
7
|
-
}
|
|
8
|
-
},
|
|
9
|
-
"addons": [
|
|
10
|
-
],
|
|
11
|
-
"formation": {
|
|
12
|
-
"web": {
|
|
13
|
-
"amount": 1,
|
|
14
|
-
"size": "S"
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
}
|
package/servers.conf.erb
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
log_format keyvalue
|
|
2
|
-
'method=$request_method'
|
|
3
|
-
' path="$request_uri"'
|
|
4
|
-
' host=$host'
|
|
5
|
-
' request_id=$http_x_request_id'
|
|
6
|
-
' from="$remote_addr"'
|
|
7
|
-
' protocol=$scheme'
|
|
8
|
-
' status=$status'
|
|
9
|
-
' duration=${request_time}s'
|
|
10
|
-
' bytes=$bytes_sent'
|
|
11
|
-
' referer="$http_referer"'
|
|
12
|
-
' user_agent="$http_user_agent"';
|
|
13
|
-
|
|
14
|
-
# In order to avoid logging access twice per request
|
|
15
|
-
# it is necessary to turn off the top-level (e.g. http) buildpack default access_log
|
|
16
|
-
# as we are about to override it in the server directive here below
|
|
17
|
-
access_log off;
|
|
18
|
-
|
|
19
|
-
port_in_redirect off;
|
|
20
|
-
|
|
21
|
-
server {
|
|
22
|
-
listen <%= ENV['PORT'] %>;
|
|
23
|
-
|
|
24
|
-
charset utf-8;
|
|
25
|
-
|
|
26
|
-
# Disable compression that is performed by the Scalingo router anyway
|
|
27
|
-
gzip off;
|
|
28
|
-
|
|
29
|
-
root /app/storybook-static/;
|
|
30
|
-
}
|