@1024pix/pix-ui 24.2.0 → 24.2.1

package/app/stories/pix-tag.stories.js

@@ -1,6 +1,6 @@
 import { hbs } from 'ember-cli-htmlbars';
 
-export const tag = (args) => {
+const Template = (args) => {
   return {
     template: hbs`<PixTag @color={{this.color}} @compact={{this.compact}}>
   Contenu du tag
@@ -9,14 +9,10 @@ export const tag = (args) => {
   };
 };
 
-export const compactTag = (args) => {
-  return {
-    template: hbs`<PixTag @color={{this.color}} @compact={{this.compact}}>
-  Contenu du tag
-</PixTag>`,
-    context: args,
-  };
-};
+export const tag = Template.bind({});
+tag.args = {};
+
+export const compactTag = Template.bind({});
 compactTag.args = {
   compact: true,
 };
@@ -26,29 +22,29 @@ export const argTypes = {
     name: 'color',
     description: 'Couleur du tag',
     type: { name: 'number', required: false },
-    defaultValue: 'blue',
+    table: { defaultValue: { summary: 'blue' } },
     control: {
       type: 'select',
-      options: [
-        'blue',
-        'blue-light',
-        'green',
-        'green-light',
-        'grey',
-        'grey-light',
-        'purple',
-        'purple-light',
-        'orange',
-        'orange-light',
-        'yellow',
-        'yellow-light',
-      ],
     },
+    options: [
+      'blue',
+      'blue-light',
+      'green',
+      'green-light',
+      'grey',
+      'grey-light',
+      'purple',
+      'purple-light',
+      'orange',
+      'orange-light',
+      'yellow',
+      'yellow-light',
+    ],
   },
   compact: {
     name: 'compact',
     description: 'Tag compact ou non',
     type: { name: 'boolean', required: false },
-    defaultValue: false,
+    table: { defaultValue: { summary: false } },
   },
 };

package/app/stories/pix-tag.stories.mdx

@@ -1,11 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import * as stories from './pix-tag.stories.js';
 
-<Meta
-  title='Basics/Tag'
-  component='PixTag'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Basics/Tag" component="PixTag" argTypes={stories.argTypes} />
 
 # Pix Tag
 
@@ -24,19 +20,13 @@ Un `Tag` est un type de `Chips` qui permet de mettre en avant une information ou
 
 ```html
 Par défaut:
-<PixTag>
-  This is a blue tag
-</PixTag>
+<PixTag> This is a blue tag </PixTag>
 
 Customiser la couleur du tag:
-<PixTag @color='purple'>
-  This is a purple tag
-</PixTag>
+<PixTag @color="purple"> This is a purple tag </PixTag>
 
 Tag Compact
-<PixTag @compact={{true}} @color='blue'>
-  This is a compactg tag
-</PixTag>
+<PixTag @compact="{{true}}" @color="blue"> This is a compactg tag </PixTag>
 ```
 
 ## Arguments

package/app/stories/pix-textarea.stories.js

@@ -1,6 +1,6 @@
 import { hbs } from 'ember-cli-htmlbars';
 
-export const textarea = (args) => {
+const Template = (args) => {
   return {
     template: hbs`<PixTextarea
   @id={{this.id}}
@@ -13,45 +13,40 @@ export const textarea = (args) => {
   };
 };
 
+export const textarea = Template.bind({});
+textarea.args = {
+  id: 'textarea',
+  value: 'Contenu du textarea',
+};
+
 export const argTypes = {
   id: {
     name: 'id',
     description: 'Identifiant du champ permettant de lui attacher un label',
     type: { name: 'string', required: true },
-    defaultValue: '',
   },
 
   value: {
     name: 'value',
     description: 'Valeur du champ',
     type: { name: 'string', required: true },
-    defaultValue: '',
   },
 
   maxlength: {
     name: 'maxlength',
     description: 'Nombre de caractères maximal à taper dans le champ',
     type: { name: 'number', required: false },
-    defaultValue: 500,
   },
 
   label: {
     name: 'label',
     description: 'Donne un label au champ.',
     type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: null },
-    },
   },
 
   errorMessage: {
     name: 'errorMessage',
     description: 'Affiche une erreur en dessous du champ.',
     type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: null },
-    },
   },
 };

package/app/stories/pix-textarea.stories.mdx

@@ -1,11 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import * as stories from './pix-textarea.stories.js';
 
-<Meta
-  title='Form/Textarea'
-  component='PixTextarea'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Form/Textarea" component="PixTextarea" argTypes={stories.argTypes} />
 
 # PixTextarea
 
@@ -16,17 +12,18 @@ Optionellement, il peut afficher le nombre de caractères tapés ainsi que le no
 > A noter qu'un `id` est nécessaire pour attribuer au textarea un label. Par ailleurs, l'attribut `value` permet de traiter son contenu.
 
 <Canvas>
-  <Story name='PixTextarea' story={stories.textarea} height={100} />
+  <Story name="PixTextarea" story={stories.textarea} height={100} />
 </Canvas>
 
 ## Usage
 
 ```html
 <PixTextarea
-  @id={{id}}
-  @value={{value}}
-  @maxlength={{maxlength}}
-  @errorMessage={{errorMessage}} />
+  @id="{{id}}"
+  @value="{{value}}"
+  @maxlength="{{maxlength}}"
+  @errorMessage="{{errorMessage}}"
+/>
 ```
 
 ## Arguments

package/app/stories/pix-toggle.stories.mdx

@@ -1,11 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import * as stories from './pix-toggle.stories.js';
 
-<Meta
-  title='Form/Toggle'
-  component='PixToggle'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Form/Toggle" component="PixToggle" argTypes={stories.argTypes} />
 
 # Pix Toggle
 
@@ -14,27 +10,27 @@ Affiche un bouton à deux états.
 ## Default
 
 <Canvas>
-  <Story name='Default' story={stories.Default} height={200} />
+  <Story name="Default" story={stories.Default} height={200} />
 </Canvas>
 
 ## Inline
 
 <Canvas>
-  <Story name='Inline' story={stories.Inline} height={200} />
+  <Story name="Inline" story={stories.Inline} height={200} />
 </Canvas>
 
 ## ScreenReaderOnly
 
 <Canvas>
-  <Story name='ScreenReaderOnly' story={stories.ScreenReaderOnly} height={200} />
+  <Story name="ScreenReaderOnly" story={stories.ScreenReaderOnly} height={200} />
 </Canvas>
 
 ## WithYields
 
 <Canvas>
-  <Story name='WithYields' story={stories.WithYields} height={200} />
+  <Story name="WithYields" story={stories.WithYields} height={200} />
 </Canvas>
 
 ## Arguments
 
-<ArgsTable story="Default" />
+<ArgsTable story="Default" />

package/app/stories/pix-tooltip.stories.js

@@ -140,7 +140,6 @@ export const argTypes = {
   },
   text: {
     name: 'text',
-    defaultValue: 'Tooltiptop',
     description: 'Texte à afficher',
     type: { name: 'string', required: false },
   },
@@ -149,19 +148,17 @@ export const argTypes = {
     description: 'Position de la tooltip',
     type: { name: 'string', required: false },
     table: { defaultValue: { summary: 'top' } },
-    control: {
-      type: 'select',
-      options: [
-        'top',
-        'top-left',
-        'top-right',
-        'right',
-        'bottom',
-        'bottom-left',
-        'bottom-right',
-        'left',
-      ],
-    },
+    control: { type: 'select' },
+    options: [
+      'top',
+      'top-left',
+      'top-right',
+      'right',
+      'bottom',
+      'bottom-left',
+      'bottom-right',
+      'left',
+    ],
   },
   isLight: {
     name: 'isLight',

package/app/stories/pix-tooltip.stories.mdx

@@ -1,11 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import * as stories from './pix-tooltip.stories.js';
 
-<Meta
-  title='Basics/Tooltip'
-  component='PixTooltip'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Basics/Tooltip" component="PixTooltip" argTypes={stories.argTypes} />
 
 # Pix Tooltip
 
@@ -113,7 +109,6 @@ Infobulle dont le contenu reste sur une ligne.
   <Story name="Is Inline" story={stories.isInline} height={200} />
 </Canvas>
 
-
 ## With HTML
 
 Infobulle contenant des éléments HTML

package/docs/architecture.stories.mdx

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 
-<Meta title='Développement/Architecture' />
+<Meta title="Développement/Architecture" />
 
 # Architecture du projet Pix UI
 
@@ -77,7 +77,7 @@ Pour plus d'informations sur les blueprints ember voir [la documentation](https:
 - `config`
   - `ember-try.js` : configuration des versions d'Ember dont la compatibilité doit être vérifiée par la suite de tests.
   - `environment.js` : valeurs par défaut pour les applications qui utilisent notre addon.
-  Les changements de valeurs dans l'application hôte surchargeront celles par défaut.
+    Les changements de valeurs dans l'application hôte surchargeront celles par défaut.
 
 ### docs
 

package/docs/breaking-changes.stories.mdx

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 
-<Meta title='Développement/Breaking changes' />
+<Meta title="Développement/Breaking changes" />
 
 # Breaking changes dans Pix UI
 
@@ -22,13 +22,14 @@ la présence de ce breaking change (en faisant un release majeure) mais aussi
 lui donner un maximum d'informations sur ce qu'il va devoir vérifier et
 modifier.
 
-## Comment identifier les *breaking changes* dans Pix UI ?
+## Comment identifier les _breaking changes_ dans Pix UI ?
 
 Pour cela, on peut se poser les questions suivantes :
 
 Mes changements dans Pix UI peuvent-ils déclencher une erreur dans une app Pix ?
 
 Exemples :
+
 - Un composant est supprimé
 - Un composant change de nom
 - Un argument obligatoire est ajouté à un composant
@@ -37,6 +38,7 @@ Mes changements dans Pix UI peuvent-ils provoquer un problème silencieux dans
 une app Pix ?
 
 Exemples :
+
 - Un argument facultatif change de nom
 - La valeur par défaut d'un argument change
 - Un changement de style CSS à l'intérieur va avoir des effets de bord à
@@ -44,41 +46,43 @@ Exemples :
 
 Il faut prêter une attention particulière aux modifications et aux ajouts de
 code existant touchant les interfaces publiques des composants. Les ajouts de
-code provoquent rarement des *breaking-changes*.
+code provoquent rarement des _breaking-changes_.
 
 Exemples :
+
 - Un nouveau composant est ajouté
 - Un argument facultatif est ajouté
 
 Astuce : pour repérer les potentiels breaking changes, le mieux est d'installer
 la version en cours de développement de Pix UI dans une app Ember à partir de
 sa branche sur Github. Si, sans faire aucune autre modification que cette mise
-à jour, on observe des changements, alors il s'agit probablement de *breaking
-changes*.
+à jour, on observe des changements, alors il s'agit probablement de _breaking
+changes_.
 
-## Comment communiquer en cas de *breaking change* ?
+## Comment communiquer en cas de _breaking change_ ?
 
-C'est au développeur qui ouvre la *pull request* qu'incombe la responsabilité
-d'identifier les éventuels *breaking changes* dans ses modifications et, le cas
+C'est au développeur qui ouvre la _pull request_ qu'incombe la responsabilité
+d'identifier les éventuels _breaking changes_ dans ses modifications et, le cas
 échéant, de les signaler dans le titre de la PR. Il lui faudra donner aussi un
 maximum d'informations dans une section breaking changes de la PR sur ce qu'il
 convient de faire pour vérifier que rien de casse lors de la montée de version
 de Pix UI.
 
 Ainsi :
+
 - le développeur qui fera la prochaine release de Pix UI saura que ce doit être
   une version majeure ;
 - le développeur qui fera la montée de version de Pix UI côté app Ember aura
-  connaissance de ces *breaking changes* et de ce qu'il a à vérifier.
+  connaissance de ces _breaking changes_ et de ce qu'il a à vérifier.
 
-## Comment éviter un *breaking change* ?
+## Comment éviter un _breaking change_ ?
 
 On veut éviter de faire de trop nombreuses versions majeures, car elles
 impliquent un risque et un effort d'attention supplémentaire du développeur qui
 va faire la montée de version de Pix UI dans une app Ember.
 
 Plutôt que de supprimer une partie du code (comme par exemple l'argument d'une
-fonction devenu obsolète), on peut la marquer comme *deprecated* et lancer un
+fonction devenu obsolète), on peut la marquer comme _deprecated_ et lancer un
 warning pour avertir le développeur que la fonctionnalité sera prochainement
 supprimée ou modifiée.
 
@@ -86,5 +90,3 @@ Lors de la montée de version suivante, on pourra supprimer tous les codes
 deprecated, ce qui permet de regrouper les breaking changes, laisser au
 développeur le temps d'adapter le code et éviter de multiplier les montées de
 versions majeures.
-
-

package/docs/changelog.stories.mdx

@@ -1,5 +1,5 @@
 import Changelog from '../CHANGELOG.md';
-import { Meta, Description } from '@storybook/addon-docs/blocks';
+import { Meta, Description } from '@storybook/addon-docs';
 
 <Meta title="CHANGELOG" />
 

package/docs/create-component.stories.mdx

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 
-<Meta title='Développement/Créer un composant' />
+<Meta title="Développement/Créer un composant" />
 
 # Créer un composant et sa story
 
@@ -18,20 +18,23 @@ Cette commande est [un blueprint ember](https://cli.emberjs.com/release/advanced
 commande customisée, elle permet d'automatiser plusieurs choses.
 
 La commande crée et pré-remplit les fichiers suivant :
-* `addon/templates/components/pix-<component-name>.hbs`: template du composant.
-* `addon/components/pix-<component-name>.js`: controller du composant.
-* `addon/stories/pix-<component-name>.stories.mdx`: documentation du composant.
-* `addon/stories/pix-<component-name>.stories.js`: arguments et code de l'aperçu du composant dans la documentation.
-* `addon/styles/_pix-<component-name>.scss`: style du composant.
-* `app/components/pix-<component-name>.js`, sert uniquement à ember pour retrouver les composants existants dans le dossier `addon`. **On ne modifiera pas ce fichier là.**
-* `tests/integration/components/pix-<component-name>-test.js`: test du composant.
+
+- `addon/templates/components/pix-<component-name>.hbs`: template du composant.
+- `addon/components/pix-<component-name>.js`: controller du composant.
+- `addon/stories/pix-<component-name>.stories.mdx`: documentation du composant.
+- `addon/stories/pix-<component-name>.stories.js`: arguments et code de l'aperçu du composant dans la documentation.
+- `addon/styles/_pix-<component-name>.scss`: style du composant.
+- `app/components/pix-<component-name>.js`, sert uniquement à ember pour retrouver les composants existants dans le dossier `addon`. **On ne modifiera pas ce fichier là.**
+- `tests/integration/components/pix-<component-name>-test.js`: test du composant.
 
 De plus la commande met à jour les imports scss dans le fichier :
-* `addon.scss` (elle rajoutera l'import juste avant la ligne `html {`)
+
+- `addon.scss` (elle rajoutera l'import juste avant la ligne `html {`)
 
 ## C'est quoi une story ?
 
 Une story, c'est deux fichiers :
+
 - un dont l'extension est `.stories.mdx`
 - un dont l'extension est `.stories.js`
 
@@ -58,7 +61,7 @@ export const message = (args) => {
         Ceci est un message {{type}}
       </PixMessage>
     `,
-    context: args
+    context: args,
   };
 };
 
@@ -68,18 +71,19 @@ export const argTypes = {
     name: 'type',
     description: 'Type du message',
     type: { name: 'string', required: false },
-    defaultValue: 'info',
-    control: { type: 'select', options: ['info', 'success', 'warning', 'alert'] },
+    table: { defaultValue: { summary: 'info' } },
+    control: { type: 'select' },
+    options: ['info', 'success', 'warning', 'alert'],
   },
-}
+};
 ```
 
-```markdown
-{/* pix-message.stories.mdx */}
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import * as stories from './pix-message.stories.js';
+`````markdown
+{/_ pix-message.stories.mdx _/}
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import \* as stories from './pix-message.stories.js';
 
-{/* Titre de la section affichée dans le menu de storybook */}
+{/_ Titre de la section affichée dans le menu de storybook _/}
 
 <Meta
   title='Notification/Message'
@@ -91,7 +95,7 @@ import * as stories from './pix-message.stories.js';
 
 Un bandeau d'information, par défaut de type info, avec une icône facultative.
 
-{/* Affiche la prévisualisation du composant telle que définie dans pix-message.stories.js */}
+{/_ Affiche la prévisualisation du composant telle que définie dans pix-message.stories.js _/}
 
 <Canvas isColumn>
   <Story name="Message" story={stories.message} height={140} />
@@ -99,18 +103,16 @@ Un bandeau d'information, par défaut de type info, avec une icône facultative.
 
 ## Usage
 
-```html
-<PixMessage @type='info' @withIcon='true'>
-  Ceci est un message à caractère informatif.
-</PixMessage>
-\```
-
-## Arguments
-
-{/* Affiche le tableau des arguments tels que définis dans pix-message.stories.js */}
+````html
+<PixMessage @type="info" @withIcon="true"> Ceci est un message à caractère informatif. </PixMessage>
+\``` ## Arguments {/* Affiche le tableau des arguments tels que définis dans pix-message.stories.js
+*/}
 
 <ArgsTable story="Message" />
+````
+`````
 
 ```
 
 Plus d'information sur le [guide d'ember de Storybook ici](https://storybook.js.org/docs/guides/guide-ember/).
+```

package/docs/design-system.stories.mdx

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 
-<Meta title='Développement/Design System' />
+<Meta title="Développement/Design System" />
 
 # Design System
 

package/docs/design-tokens.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Utiliser Pix UI/Design Tokens/ Utilisation" />
 
@@ -29,31 +29,35 @@ Par exemple :
 .organization-title {
   @include design-tokens.text-bold;
 }
-````
+```
 
 ## Définir les alertes
 
 Les couleurs pour définir un état d'une alerte ont été attribuées pour uniformiser le visuel sur toutes les applications.
 
 ### Success
+
 ```
 Texte ou bordure : $pix-success-70
 Background : $pix-success-5
 ```
 
 ### Warning
+
 ```
 Texte ou bordure : $pix-warning-70
 Background : $pix-warning-5
 ```
 
 ### Error
+
 ```
 Texte ou bordure : $pix-error-70
 Background : $pix-error-5
 ```
 
 ### Information
+
 ```
 Texte ou bordure : $pix-primary-70
 Background : $pix-primary-5

package/docs/good-practices-a11y.stories.mdx

@@ -1,7 +1,7 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 import accessibilityImage from './assets/accessibility-storybook.png';
 
-<Meta title='Développement/Bonnes pratiques/Accessibilité' />
+<Meta title="Développement/Bonnes pratiques/Accessibilité" />
 
 # Bonnes pratiques d'accessibilité
 
@@ -15,8 +15,8 @@ L'accessiblité est un enjeu important sur nos composants UI.
 - S'assurer que les éléments en focus suivent un ordre logique.
 - Lancer un logiciel de lecture d'écran (VoiceOver pour Mac) et s'assurer que ce soit compréhensible pour l'utilisateur.
 
-
 Exemples pour l'utilisation du lecteur d'écran :
+
 - Est-ce que l’information est lu et est compréhensible ?
 
 - Si l'information est obligatoire, est-ce signalé ?
@@ -25,7 +25,6 @@ Exemples pour l'utilisation du lecteur d'écran :
 
 - En cas d’erreur, est-ce que l’on prévient bien l'utilisateur pour corriger son erreur ?
 
-
 Pour vous aider à créer un composant accessible :
 
 - les channels Slack `#tech-a11y` (interne) et `#ext-hotline-accessibilité-pix-tanaguru` (externe avec Tanaguru) sont disponibles pour répondre à vos questions sur le sujet.
@@ -33,16 +32,12 @@ Pour vous aider à créer un composant accessible :
 - Compte-rendu détaillé de notre atelier avec Tanaguru [ici](https://1024pix.atlassian.net/wiki/spaces/DEV/pages/2856288297/2021-05-27+-+Compte-rendu+Atelier+accessibilit+Tanaguru+les+devs)
 - Checklist des recommandations WebAIM [ici](https://webaim.org/standards/wcag/checklist#sc2.4.4)
 
-
 ## Vérifier l'accessibilité d'un composant sur Storybook
 
 Pour chaque composant, dans la partie 'Canvas', vous pouvez accéder à l'onglet 'Accessibility' qui donne un aperçu des règles d'accessibilité validées (Passes) ou non (Violations).
 
-
 Il est possible de cliquer sur "More info..." pour connaître en détail ces règles.
 
-<img src={accessibilityImage} alt="Accessibility in Storybook"/>
+<img src={accessibilityImage} alt="Accessibility in Storybook" />
 
 Mais cela ne couvre pas à 100% les règles d'accessibilité.
-
-