@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.
Files changed (58) hide show
  1. package/addon/common/add-dynamic-style-tag.js +8 -0
  2. package/addon/components/pix-filterable-and-searchable-select.hbs +11 -10
  3. package/addon/components/pix-filterable-and-searchable-select.js +30 -2
  4. package/addon/components/pix-multi-select.hbs +68 -64
  5. package/addon/components/pix-multi-select.js +9 -0
  6. package/addon/components/pix-select.hbs +6 -2
  7. package/addon/components/pix-select.js +13 -19
  8. package/addon/styles/_pix-filterable-and-searchable-select.scss +6 -1
  9. package/addon/styles/_pix-input.scss +11 -0
  10. package/addon/styles/_pix-multi-select.scss +2 -2
  11. package/addon/styles/_pix-select.scss +4 -2
  12. package/addon/styles/pix-design-tokens/_form.scss +1 -0
  13. package/app/stories/pix-input.mdx +15 -4
  14. package/app/stories/pix-input.stories.js +16 -0
  15. package/app/stories/pix-multi-select.stories.js +13 -2
  16. package/app/stories/pix-select.stories.js +9 -0
  17. package/package.json +21 -16
  18. package/.buildpacks +0 -2
  19. package/.circleci/config.yml +0 -84
  20. package/.gitattributes +0 -7
  21. package/.nvmrc +0 -1
  22. package/.prettierrc.json +0 -12
  23. package/.storybook/logo.svg +0 -1
  24. package/.storybook/main.js +0 -10
  25. package/.storybook/manager.js +0 -6
  26. package/.storybook/preview.js +0 -39
  27. package/.storybook/storybook-custom-theme.js +0 -37
  28. package/.stylelintrc.json +0 -17
  29. package/CHANGELOG.md +0 -1367
  30. package/CNAME +0 -1
  31. package/config/environment.js +0 -5
  32. package/docs/adr/0001-utiliser-les-balises-html-natives.md +0 -51
  33. package/docs/architecture.mdx +0 -106
  34. package/docs/assets/accessibility-storybook.png +0 -0
  35. package/docs/assets/screen-pix-storybook.png +0 -0
  36. package/docs/breaking-changes.mdx +0 -102
  37. package/docs/changelog.mdx +0 -6
  38. package/docs/colors-palette.mdx +0 -237
  39. package/docs/create-component.mdx +0 -112
  40. package/docs/design-system.mdx +0 -20
  41. package/docs/design-tokens.mdx +0 -72
  42. package/docs/good-practices-a11y.mdx +0 -43
  43. package/docs/good-practices-design.mdx +0 -62
  44. package/docs/good-practices-responsive.mdx +0 -51
  45. package/docs/good-practices-style-css.mdx +0 -40
  46. package/docs/good-practices-tests.mdx +0 -9
  47. package/docs/make-a-release.mdx +0 -45
  48. package/docs/pix-design-tokens-dev.mdx +0 -39
  49. package/docs/pull_request_template.md +0 -14
  50. package/docs/shadow.mdx +0 -25
  51. package/docs/spacing.mdx +0 -19
  52. package/docs/storybook.mdx +0 -45
  53. package/docs/test-component-without-release.mdx +0 -19
  54. package/docs/typography.mdx +0 -163
  55. package/docs/use-component.mdx +0 -90
  56. package/docs/use-install.mdx +0 -37
  57. package/scalingo.json +0 -17
  58. package/servers.conf.erb +0 -30
@@ -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`._
@@ -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
- }