@1024pix/pix-ui 24.2.0 → 24.2.1

package/app/stories/pix-filter-banner.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-filter-banner.stories.js';
 
-<Meta
-  title='Form/Filter banner'
-  component='PixFilterBanner'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Form/Filter banner" component="PixFilterBanner" argTypes={stories.argTypes} />
 
 # Pix Filter Banner
 
@@ -21,9 +17,9 @@ Une `FilterBanner` permet de wrapper les éléments de filtres (`Select`, `Multi
 
 ```html
 <PixFilterBanner aria-label="Filtres sur les campagnes">
-  <PixSelect @options={{options}} @onChange={{onChange}} />
-  <PixSelect @options={{options}} @onChange={{onChange}} />
-  <PixSelect @options={{options}} @onChange={{onChange}} />
+  <PixSelect @options="{{options}}" @onChange="{{onChange}}" />
+  <PixSelect @options="{{options}}" @onChange="{{onChange}}" />
+  <PixSelect @options="{{options}}" @onChange="{{onChange}}" />
 </PixFilterBanner>
 ```
 

package/app/stories/pix-filterable-and-searchable-select.stories.js

@@ -201,13 +201,11 @@ export const argTypes = {
     description:
       'Pour le filtre de categories, cela rempli le contenu interne du composant, `categoriesPlaceholder` pour `isSearchable` `true`, sinon rawContent du `button`',
     type: { name: 'string', required: true },
-    defaultValue: 'Rechercher un condiment',
   },
   categoriesLabel: {
     name: 'categoriesLabel',
     description:
       "Pour le composant de filtre sur les catégories, cela donne un label au champ qui sera celui vocalisé par le lecteur d'écran",
     type: { name: 'string', required: true },
-    defaultValue: 'Label du champ',
   },
 };

package/app/stories/pix-filterable-and-searchable-select.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import * as stories from './pix-filterable-and-searchable-select.stories.js';
 
 <Meta
@@ -15,9 +15,9 @@ Il permet de sélectionner une option, de filter sur la liste des options en fon
 
 Les options sont représentées par un tableau d'objet contenant les propriétés value, label et category.
 
-> **⚠️** __Il est nécessaire d'avoir au moins un label ou un placeholder !__
+> **⚠️** **Il est nécessaire d'avoir au moins un label ou un placeholder !**
 
-> **⚠️** __N'oubliez pas de rajouter un searchLabel dans le cas ou le menu déroulant est cherchable pour le rendre accessible !__
+> **⚠️** **N'oubliez pas de rajouter un searchLabel dans le cas ou le menu déroulant est cherchable pour le rendre accessible !**
 
 > Pour aider l'utilisateur, rajoutez un placeholder cohérent !
 
@@ -42,28 +42,28 @@ Les options sont représentées par un tableau d'objet contenant les propriété
 ## Usage
 
 ```html
-  <PixFilterableAndSearchableSelect
-    @label={{label}}
-    @sublabel={{sublabel}}
-    @selectLabel={{selectLabel}}
-    @placeholder={{placeholder}}
-    @options={{options}}
-    @value={{value}}
-    @isSearchable={{isSearchable}}
-    @hideDefaultOption={{hideDefaultOption}}
-    @screenReaderOnly={{screenReaderOnly}}
-    @searchLabel={{searchLabel}}
-    @searchPlaceholder={{searchPlaceholder}}
-    @emptySearchMessage={{emptySearchMessage}}
-    @requiredText={{requiredText}}
-    @errorMessage={{errorMessage}}
-    @onChange={{onChange}}
-    @categoriesLabel={{categoriesLabel}}
-    @categoriesPlaceholder={{categoriesPlaceholder}}
-    @categoriesEmptyMessage={{categoriesEmptyMessage}}
-    @requiredText={{requiredText}}
-    @errorMessage={{errorMessage}}
-  />
+<PixFilterableAndSearchableSelect
+  @label="{{label}}"
+  @sublabel="{{sublabel}}"
+  @selectLabel="{{selectLabel}}"
+  @placeholder="{{placeholder}}"
+  @options="{{options}}"
+  @value="{{value}}"
+  @isSearchable="{{isSearchable}}"
+  @hideDefaultOption="{{hideDefaultOption}}"
+  @screenReaderOnly="{{screenReaderOnly}}"
+  @searchLabel="{{searchLabel}}"
+  @searchPlaceholder="{{searchPlaceholder}}"
+  @emptySearchMessage="{{emptySearchMessage}}"
+  @requiredText="{{requiredText}}"
+  @errorMessage="{{errorMessage}}"
+  @onChange="{{onChange}}"
+  @categoriesLabel="{{categoriesLabel}}"
+  @categoriesPlaceholder="{{categoriesPlaceholder}}"
+  @categoriesEmptyMessage="{{categoriesEmptyMessage}}"
+  @requiredText="{{requiredText}}"
+  @errorMessage="{{errorMessage}}"
+/>
 ```
 
 ## Arguments

package/app/stories/pix-icon-button.stories.js

@@ -17,7 +17,7 @@ const Template = (args) => {
   };
 };
 
-const triggerAction = () => Promise.resolve();
+const triggerAction = action('triggerAction');
 
 export const Default = Template.bind({});
 Default.args = {
@@ -63,13 +63,13 @@ export const argTypes = {
     name: 'iconPrefix',
     description: "Prefix de l'icône font-awesome",
     type: { name: 'string', required: false },
-    control: { type: 'select', options: ['far', 'fas'] },
+    control: { type: 'select' },
+    options: ['far', 'fas'],
   },
   triggerAction: {
     name: 'triggerAction',
     description: 'Fonction à appeler au clic du bouton',
     type: { required: true },
-    defaultValue: action('triggerAction'),
   },
   withBackground: {
     name: 'withBackground',
@@ -84,7 +84,8 @@ export const argTypes = {
     name: 'size',
     description: 'Size: `small`, `big`',
     type: { name: 'string', required: false },
-    control: { type: 'select', options: ['big', 'small'] },
+    control: { type: 'select' },
+    options: ['big', 'small'],
     table: {
       type: { summary: 'string' },
       defaultValue: { summary: 'big' },
@@ -94,7 +95,8 @@ export const argTypes = {
     name: 'color',
     description: ' ⚠️ **Propriété dépréciée** ⚠️ Color: `light-grey`, `dark-grey`',
     type: { name: 'string', required: false },
-    control: { type: 'select', options: ['light-grey', 'dark-grey'] },
+    control: { type: 'select' },
+    options: ['light-grey', 'dark-grey'],
     table: {
       type: { summary: 'string' },
       defaultValue: { summary: 'light-grey' },

package/app/stories/pix-icon-button.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-icon-button.stories.js';
 
-<Meta
-  title="Basics/Icon button"
-  component="PixIconButton"
-  argTypes={stories.argTypes}
-/>
+<Meta title="Basics/Icon button" component="PixIconButton" argTypes={stories.argTypes} />
 
 # Pix Icon Button
 

package/app/stories/pix-indicator-card.stories.js

@@ -56,8 +56,8 @@ export const argTypes = {
   iconPrefix: {
     name: 'IconPrefix',
     description:
-      "Préfixe pour l'icone dans l'encart - permet d'utiliser une variation de l'icone font awesome différente de celle par défaut (fa).",
-    defaultValue: null,
+      "Préfixe pour l'icone dans l'encart - permet d'utiliser une variation de l'icone font awesome différente de celle par défaut.",
+    table: { defaultValue: { summary: 'fas' } },
   },
   value: {
     name: 'Value',

package/app/stories/pix-indicator-card.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import * as stories from './pix-indicator-card.stories.js';
 
 <Meta title="Others/Indicator Card" component="PixIndicatorCard" argTypes={stories.argTypes} />
@@ -18,6 +18,7 @@ Une carte est un bloc en 2 parties dont les bords sont arrondis et ayant une omb
 </Canvas>
 
 ## WithIconPrefix
+
 <Canvas>
   <Story name="WithIconPrefix" story={stories.withIconPrefix} height={200} />
 </Canvas>

package/app/stories/pix-input-code.stories.mdx

@@ -1,12 +1,8 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
 import * as stories from './pix-input-code.stories.js';
 
-<Meta
-  title='Form/Inputs/Code'
-  component='PixInputCode'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Form/Inputs/Code" component="PixInputCode" argTypes={stories.argTypes} />
 
 # Pix Input Code
 
@@ -23,22 +19,17 @@ Le composant peut être numérique ou alphanumérique précisé avec la proprié
 ## Default
 
 <Canvas>
-  <Story name='Default' story={stories.Default} height={70}/>
+  <Story name="Default" story={stories.Default} height={70} />
 </Canvas>
 
 ## Usage
 
 ```html
-<PixInputCode
-    @ariaLabel="Champ"
-    @legend="Code correspondant au code de vérification envoyé par email"
-    @explanationOfUse="Détails d'utilisation du PixInputCode"
-    @numInputs={{6}}
-    @inputType="number"
-    @onAllInputsFilled={{(code) => {}}}
-/>
+<PixInputCode @ariaLabel="Champ" @legend="Code correspondant au code de vérification envoyé par
+email" @explanationOfUse="Détails d'utilisation du PixInputCode" @numInputs={{6}}
+@inputType="number" @onAllInputsFilled={{(code) => {}}} />
 ```
 
 ## Arguments
 
-<ArgsTable story="Default"/>
+<ArgsTable story="Default" />

package/app/stories/pix-input-password.stories.js

@@ -17,7 +17,7 @@ export const Template = (args) => {
 
 export const Default = Template.bind({});
 Default.args = {
-  id: 'firstName',
+  id: 'first-name',
   ariaLabel: 'Mot de passe',
 };
 
@@ -54,43 +54,36 @@ export const argTypes = {
     name: 'id',
     description: 'Identifiant du champ permettant de lui attacher un label',
     type: { name: 'string', required: true },
-    defaultValue: null,
   },
   value: {
     name: 'value',
     description: "Valeur de l'input",
     type: { name: 'string', required: false },
-    defaultValue: null,
   },
   label: {
     name: 'label',
     description: "Label de l'input. Requis si ariaLabel n'est pas définit.",
     type: { name: 'string', required: true },
-    defaultValue: null,
   },
   ariaLabel: {
     name: 'ariaLabel',
     description: "L'action du champ, pour l'accessibilité. Requis si label n'est pas définit.",
     type: { name: 'string', required: true },
-    defaultValue: null,
   },
   information: {
     name: 'information',
     description: 'Un descriptif complétant le label',
     type: { name: 'string', required: false },
-    defaultValue: null,
   },
   errorMessage: {
     name: 'errorMessage',
     description: "Affiche le message d'erreur donné et encadre en rouge le champ",
     type: { name: 'string', required: false },
-    defaultValue: null,
   },
   prefix: {
     name: 'prefix',
     description: 'Affiche un préfixe avant la zone de saisie du champ',
     type: { name: 'string', required: false },
-    defaultValue: null,
   },
   requiredLabel: {
     name: 'requiredLabel',

package/app/stories/pix-input-password.stories.mdx

@@ -1,12 +1,8 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
 import * as stories from './pix-input-password.stories.js';
 
-<Meta
-  title='Form/Inputs/Password'
-  component='PixInputPassword'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Form/Inputs/Password" component="PixInputPassword" argTypes={stories.argTypes} />
 
 # Pix Input Password
 
@@ -21,13 +17,13 @@ Si vous utilisez le `PixInputPassword` sans label alors il faut renseigner le pa
 > Si vous renseignez les paramètres label et ariaLabel ensemble, ariaLabel sera nullifié.
 
 ```html
-<PixInputPassword @ariaLabel='{{ariaLabel}}' @id='{{id}}' />
+<PixInputPassword @ariaLabel="{{ariaLabel}}" @id="{{id}}" />
 ```
 
 ## Default
 
 <Canvas>
-  <Story name='Default' story={stories.Default} height={100} />
+  <Story name="Default" story={stories.Default} height={100} />
 </Canvas>
 
 ## With label and information
@@ -58,16 +54,16 @@ Si vous utilisez le `PixInputPassword` sans label alors il faut renseigner le pa
 
 ```html
 <PixInputPassword
-  @id='password'
-  @label='Mot de passe'
-  @information='8 caractères dont une majuscule...'
-  @value='pix123'
-  @errorMessage='Le mot de passe est erroné'
-  @prefix='C-'
-  @requiredLabel='Champ obligatoire'
+  @id="password"
+  @label="Mot de passe"
+  @information="8 caractères dont une majuscule..."
+  @value="pix123"
+  @errorMessage="Le mot de passe est erroné"
+  @prefix="C-"
+  @requiredLabel="Champ obligatoire"
 />
 ```
 
 ## Arguments
 
-<ArgsTable story='Default' />
+<ArgsTable story="Default" />

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

@@ -17,20 +17,20 @@ export const Template = (args) => {
 
 export const Default = Template.bind({});
 Default.args = {
-  id: 'firstName',
+  id: 'first-name',
   ariaLabel: 'Prénom',
 };
 
 export const withLabel = Template.bind({});
 withLabel.args = {
-  id: 'firstName',
+  id: 'first-name',
   label: 'Prénom',
   information: 'a small information',
 };
 
 export const withErrorMessage = Template.bind({});
 withErrorMessage.args = {
-  id: 'firstName',
+  id: 'first-name',
   label: 'Prénom',
   information: 'a small information',
   errorMessage: "un message d'erreur",
@@ -38,7 +38,7 @@ withErrorMessage.args = {
 
 export const withRequiredLabel = Template.bind({});
 withRequiredLabel.args = {
-  id: 'firstName',
+  id: 'first-name',
   label: 'Prénom',
   requiredLabel: 'Champ obligatoire',
 };
@@ -48,37 +48,31 @@ export const argTypes = {
     name: 'ariaLabel',
     description: "L'action du champ, pour l'accessibilité. Requis si label n'est pas définit.",
     type: { name: 'string', required: true },
-    defaultValue: null,
   },
   id: {
     name: 'id',
     description: 'Identifiant du champ permettant de lui attacher un label',
     type: { name: 'string', required: true },
-    defaultValue: null,
   },
   value: {
     name: 'value',
     description: "Valeur de l'input",
     type: { name: 'string', required: false },
-    defaultValue: null,
   },
   label: {
     name: 'label',
     description: "Le label de l'input",
     type: { name: 'string', required: false },
-    defaultValue: null,
   },
   information: {
     name: 'information',
     description: 'Un descriptif complétant le label',
     type: { name: 'string', required: false },
-    defaultValue: null,
   },
   errorMessage: {
     name: 'errorMessage',
     description: "Affiche le message d'erreur donné et encadre en rouge le champ",
     type: { name: 'string', required: false },
-    defaultValue: null,
   },
   requiredLabel: {
     name: 'requiredLabel',

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

@@ -1,12 +1,8 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
 import * as stories from './pix-input.stories.js';
 
-<Meta
-  title='Form/Inputs/Input'
-  component='PixInput'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Form/Inputs/Input" component="PixInput" argTypes={stories.argTypes} />
 
 # Pix Input
 
@@ -21,35 +17,27 @@ Si vous utilisez le `PixInput` sans label alors il faut renseigner le paramètre
 Pour acceder à l'élément via son label/aria-label avec testing-library:
 
 ```html
-<PixInput
-  @id='firstName'
-  @label='Prénom'
-/>
+<PixInput @id="firstName" @label="Prénom" />
 ```
 
 ```javascript
-screen.getByLabelText('Prénom')
-````
+screen.getByLabelText('Prénom');
+```
 
 Si le paramètre @information est utilisé, il faudra concatener les valeurs de `@label`/`@ariaLabel` et `@information`
 
 ```html
-<PixInput
-  @id='firstName'
-  @label='Prénom'
-  @information='exemple: Barry'
-/>
+<PixInput @id="firstName" @label="Prénom" @information="exemple: Barry" />
 ```
 
 ```javascript
-screen.getByLabelText('Prénom exemple: Barry')
-````
-
+screen.getByLabelText('Prénom exemple: Barry');
+```
 
 ## Default
 
 <Canvas>
-  <Story name='Default' story={stories.Default} height={100} />
+  <Story name="Default" story={stories.Default} height={100} />
 </Canvas>
 
 ## With label and information
@@ -74,11 +62,11 @@ screen.getByLabelText('Prénom exemple: Barry')
 
 ```html
 <PixInput
-  @id='firstName'
-  @label='Prénom'
-  @information='Complément du label'
-  @errorMessage='Un message d`erreur'
-  @requiredLabel='Champ obligatoire'
+  @id="firstName"
+  @label="Prénom"
+  @information="Complément du label"
+  @errorMessage="Un message d`erreur"
+  @requiredLabel="Champ obligatoire"
 />
 ```
 

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

@@ -43,14 +43,15 @@ export const argTypes = {
     name: 'type',
     description: 'Type du message',
     type: { name: 'string', required: false },
-    defaultValue: 'info',
-    control: { type: 'select', options: ['info', 'success', 'warning', 'alert', 'error'] },
+    table: { defaultValue: { summary: 'info' } },
+    control: { type: 'select' },
+    options: ['info', 'success', 'warning', 'alert', 'error'],
   },
   withIcon: {
     name: 'withIcon',
     description: 'Icône du message',
+    table: { defaultValue: { summary: false } },
     type: { name: 'boolean', required: false },
-    defaultValue: false,
     control: { type: 'boolean' },
   },
 };

package/app/stories/pix-message.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-message.stories.js';
 
-<Meta
-  title='Notification/Message'
-  component='PixMessage'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Notification/Message" component="PixMessage" argTypes={stories.argTypes} />
 
 # Pix Message
 
@@ -58,10 +54,9 @@ Le bandeau en cas de d'erreur.
 ## Usage
 
 Par défaut
+
 ```html
-<PixMessage>
-  Ceci est un message à caractère informatif.
-</PixMessage>
+<PixMessage> Ceci est un message à caractère informatif. </PixMessage>
 ```
 
 ## Arguments

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

@@ -43,13 +43,11 @@ export const argTypes = {
     name: 'title',
     description: 'Titre de la modale',
     type: { name: 'string', required: true },
-    defaultValue: null,
   },
   onCloseButtonClick: {
     name: 'onCloseButtonClick',
     description: 'Fonction à exécuter à la fermeture de la modale',
     type: { name: 'function', required: true },
-    defaultValue: null,
   },
   showModal: {
     name: 'showModal',

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

@@ -1,12 +1,8 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
 import * as stories from './pix-modal.stories.js';
 
-<Meta
-  title="Basics/Modal"
-  component="PixModal"
-  argTypes={stories.argTypes}
-/>
+<Meta title="Basics/Modal" component="PixModal" argTypes={stories.argTypes} />
 
 # PixModal
 

package/app/stories/pix-multi-select.stories.mdx

@@ -1,58 +1,61 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import * as stories from './pix-multi-select.stories.js';
 
-<Meta
-  title='Form/Multi Select'
-  component='Multi Select'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Form/Multi Select" component="Multi Select" argTypes={stories.argTypes} />
 
 # Pix Multi Select
 
 Un select custom permettant une gestion de la multiselection. Permet de passer soit du texte brut soit des composants à sa liste. (PixStars etc...)
-L'ajout de ``class`` et d'autres attributs comme ``aria-label`` sont possibles.
+L'ajout de `class` et d'autres attributs comme `aria-label` sont possibles.
 
 > ⚠️ La démonstration de PixMultiSelect NE fonctionne PAS comme prévu dans storybook (mais fonctionne très bien sur les app fronts). Pour plus d'informations, voir https://github.com/1024pix/pix-ui/pull/76.
 
 ## With child component
+
 <Canvas>
   <Story name="With child component" story={stories.multiSelectWithChildComponent} height={310} />
 </Canvas>
 
 ## Searchable
+
 <Canvas>
-  <Story name="Searchable" story={stories.multiSelectSearchable} height={330}/>
+  <Story name="Searchable" story={stories.multiSelectSearchable} height={330} />
 </Canvas>
 
 ## withCustomClass
+
 <Canvas>
-  <Story name="withCustomClass" story={stories.multiSelectWithCustomClass} height={330}/>
+  <Story name="withCustomClass" story={stories.multiSelectWithCustomClass} height={330} />
 </Canvas>
 
 ## withId
+
 <Canvas>
-  <Story name="withId" story={stories.multiSelectWithId} height={330}/>
+  <Story name="withId" story={stories.multiSelectWithId} height={330} />
 </Canvas>
 
 ## withYield
+
 <Canvas>
-  <Story name="withYield" story={stories.multiSelectWithYield} height={330}/>
+  <Story name="withYield" story={stories.multiSelectWithYield} height={330} />
 </Canvas>
 
 ## Usage
 
 ```html
 <PixMultiSelect
-  @id={{id}}
-  @label={{label}}
-  @screenReaderOnly={{screenReaderOnly}}
-  @placeholder={{placeholder}}
-
-  @onChange={{doSomething}}
-  @values={{values}}
-  @emptyMessage={{emptyMessage}}
-  @className={{className}}
-  @options={{options}} as |option|>
+  @id="{{id}}"
+  @label="{{label}}"
+  @screenReaderOnly="{{screenReaderOnly}}"
+  @placeholder="{{placeholder}}"
+  @onChange="{{doSomething}}"
+  @values="{{values}}"
+  @emptyMessage="{{emptyMessage}}"
+  @className="{{className}}"
+  @options="{{options}}"
+  as
+  |option|
+>
   {{option.label}}
 </PixMultiSelect>
 ```