@1024pix/pix-ui 44.3.7 → 45.0.0

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

@@ -13,16 +13,6 @@ export default {
       description: "Valeur de l'input",
       type: { name: 'string', required: false },
     },
-    label: {
-      name: 'label',
-      description: "Le label de l'input",
-      type: { name: 'string', required: false },
-    },
-    information: {
-      name: 'information',
-      description: 'Un descriptif complétant le label',
-      type: { name: 'string', required: false },
-    },
     validationStatus: {
       name: 'validationStatus',
       description:
@@ -37,17 +27,40 @@ export default {
         "Affiche le message d'erreur donné. Doit s'accompagner du paramètre validationStatus en 'error'",
       type: { name: 'string', required: false },
     },
+
+    label: {
+      name: 'label',
+      description: 'Le label du champ',
+      type: { name: 'string', required: true },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    subLabel: {
+      name: 'subLabel',
+      description: 'Un descriptif complétant le label',
+      type: { name: 'string', required: false },
+    },
     requiredLabel: {
       name: 'requiredLabel',
-      description:
-        'Label indiquant que le champ est requis, le paramètre @label devient obligatoire avec ce paramètre.',
+      description: 'Label indiquant que le champ est requis.',
       type: { name: 'string', required: false },
       table: {
         type: { summary: 'string' },
       },
     },
-    labelSize: {
-      name: 'labelSize',
+    screenReaderOnly: {
+      name: 'screenReaderOnly',
+      description: "Permet de rendre le label lisible uniquement par les lecteurs d'écran",
+      control: { type: 'boolean' },
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    size: {
+      name: 'size',
       description: 'Correspond à la taille de la police du label.',
       type: { name: 'string', required: false },
       table: {
@@ -56,6 +69,15 @@ export default {
       control: { type: 'select' },
       options: ['small', 'large', 'default'],
     },
+    inlineLabel: {
+      name: 'inlineLabel',
+      description: 'Permet de ne pas afficher la marge pour les éléments de formulaire inline',
+      type: { name: 'boolean', required: false },
+      table: {
+        defaultValue: { summary: false },
+      },
+      control: { type: 'boolean' },
+    },
   },
 };
 
@@ -63,16 +85,19 @@ const Template = (args) => {
   return {
     template: hbs`<PixInput
   @id={{this.id}}
-  @label={{this.label}}
-  @information={{this.information}}
   @errorMessage={{this.errorMessage}}
   placeholder='Jeanne, Pierre ...'
-  @requiredLabel={{this.requiredLabel}}
   @validationStatus={{this.validationStatus}}
-  @labelSize={{this.labelSize}}
+  @size={{this.size}}
   disabled={{this.disabled}}
   readonly={{this.readonly}}
-/>`,
+  @subLabel={{this.subLabel}}
+  @inlineLabel={{this.inlineLabel}}
+  @requiredLabel={{this.requiredLabel}}
+  @screenReaderOnly={{this.screenReaderOnly}}
+>
+  <:label>{{this.label}}</:label>
+</PixInput>`,
     context: args,
   };
 };
@@ -80,14 +105,14 @@ const Template = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   id: 'first-name',
-  ariaLabel: 'Prénom',
+  label: 'Prénom',
 };
 
 export const withLabel = Template.bind({});
 withLabel.args = {
   id: 'first-name',
   label: 'Prénom',
-  information: 'a small information',
+  subLabel: 'a small information',
 };
 
 export const errorState = Template.bind({});

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

@@ -36,8 +36,8 @@ export default {
         defaultValue: { summary: false },
       },
     },
-    labelSize: {
-      name: 'labelSize',
+    size: {
+      name: 'size',
       description: 'Correspond à la taille de la police du label.',
       type: { name: 'string', required: false },
       table: {
@@ -64,6 +64,7 @@ const Template = (args) => {
     template: hbs`<PixLabel
   @id={{this.id}}
   @subLabel={{this.subLabel}}
+  @size={{this.size}}
   @requiredLabel={{this.requiredLabel}}
   @screenReaderOnly={{this.screenReaderOnly}}
   @inlineLabel={{this.inlineLabel}}

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

@@ -6,7 +6,11 @@ import * as ComponentStories from './pix-multi-select.stories';
 # 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 sont possibles.
+
+## Accessibilité
+
+Si vous utilisez le `PixMultiSelect` sans vouloir afficher le label, il faudra renseigner `screenReaderOnly` à `true`.
 
 > ⚠️ 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](https://github.com/1024pix/pix-ui/pull/76).
 
@@ -33,7 +37,6 @@ L'ajout de `class` et d'autres attributs comme `aria-label` sont possibles.
 ```html
 <PixMultiSelect
   @id="{{id}}"
-  @label="{{label}}"
   @screenReaderOnly="{{screenReaderOnly}}"
   @placeholder="{{placeholder}}"
   @onChange="{{doSomething}}"
@@ -41,10 +44,9 @@ L'ajout de `class` et d'autres attributs comme `aria-label` sont possibles.
   @emptyMessage="{{emptyMessage}}"
   @className="{{className}}"
   @options="{{options}}"
-  as
-  |option|
 >
-  {{option.label}}
+  <:label>{{label}}</:label>
+  <:default as |option|>{{option.label}}</:default>
 </PixMultiSelect>
 ```
 

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

@@ -16,10 +16,9 @@ export default {
 {{/if}}
 <PixMultiSelect
   @id={{this.id}}
-  @label={{this.label}}
   @placeholder={{this.placeholder}}
   @screenReaderOnly={{this.screenReaderOnly}}
-  @labelSize={{this.labelSize}}
+  @size={{this.size}}
   @onChange={{this.onChange}}
   @emptyMessage={{this.emptyMessage}}
   @className={{this.className}}
@@ -27,8 +26,10 @@ export default {
   @strictSearch={{this.strictSearch}}
   @values={{this.values}}
   @options={{this.options}}
-  as |option|
->{{option.label}}</PixMultiSelect>`,
+>
+  <:label>{{this.label}}</:label>
+  <:default as |option|>{{option.label}}</:default>
+</PixMultiSelect>`,
     context: args,
   }),
   argTypes: {
@@ -44,28 +45,6 @@ export default {
         'Rempli le contenu interne du composant, `placeholder` pour `isSearchable` `true`, sinon rawContent du `button`',
       type: { name: 'string', required: true },
     },
-    label: {
-      name: 'label',
-      description:
-        "Donne un label au champ qui sera celui vocalisé par le lecteur d'écran. **⚠️ Le`label` est obligatoire que si l'`id` n'est pas donné. ⚠️**",
-      type: { name: 'string' },
-    },
-    labelSize: {
-      name: 'labelSize',
-      description: 'Correspond à la taille de la police du label.',
-      type: { name: 'string', required: false },
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-      control: { type: 'select' },
-      options: ['small', 'large', 'default'],
-    },
-    screenReaderOnly: {
-      name: 'screenReaderOnly',
-      description: "Permet de cacher à l'écran le label tout en restant vocalisable",
-      type: { name: 'boolean', required: false },
-      table: { defaultValue: { summary: false } },
-    },
     emptyMessage: {
       name: 'emptyMessage',
       description:
@@ -120,6 +99,57 @@ export default {
         defaultValue: { summary: null },
       },
     },
+
+    label: {
+      name: 'label',
+      description: 'Le label du champ',
+      type: { name: 'string', required: true },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    subLabel: {
+      name: 'subLabel',
+      description: 'Un descriptif complétant le label',
+      type: { name: 'string', required: false },
+    },
+    requiredLabel: {
+      name: 'requiredLabel',
+      description: 'Label indiquant que le champ est requis.',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    screenReaderOnly: {
+      name: 'screenReaderOnly',
+      description: "Permet de rendre le label lisible uniquement par les lecteurs d'écran",
+      control: { type: 'boolean' },
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    size: {
+      name: 'size',
+      description: 'Correspond à la taille de la police du label.',
+      type: { name: 'string', required: false },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+      control: { type: 'select' },
+      options: ['small', 'large', 'default'],
+    },
+    inlineLabel: {
+      name: 'inlineLabel',
+      description: 'Permet de ne pas afficher la marge pour les éléments de formulaire inline',
+      type: { name: 'boolean', required: false },
+      table: {
+        defaultValue: { summary: false },
+      },
+      control: { type: 'boolean' },
+    },
   },
 };
 
@@ -152,20 +182,24 @@ export const multiSelectWithChildComponent = (args) => {
   return {
     template: hbs`<h4><strong>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</strong></h4>
 <PixMultiSelect
-  @label={{this.label}}
   @placeholder={{this.placeholder}}
-  @screenReaderOnly={{this.screenReaderOnly}}
   @onChange={{this.onChange}}
   @emptyMessage={{this.emptyMessage}}
   @className={{this.className}}
   @options={{this.options}}
-  as |option|
+  @size={{this.size}}
+  @subLabel={{this.subLabel}}
+  @inlineLabel={{this.inlineLabel}}
+  @screenReaderOnly={{this.screenReaderOnly}}
 >
-  <PixStars
-    @alt={{concat 'Étoiles ' option.value ' sur ' option.total}}
-    @count={{option.value}}
-    @total={{option.total}}
-  />
+  <:label>{{this.label}}</:label>
+  <:default as |option|>
+    <PixStars
+      @alt={{concat 'Étoiles ' option.value ' sur ' option.total}}
+      @count={{option.value}}
+      @total={{option.total}}
+    />
+  </:default>
 </PixMultiSelect>`,
     context: args,
   };
@@ -212,8 +246,6 @@ export const multiSelectWithId = {
 const TemplateWithYield = (args) => ({
   template: hbs`<PixMultiSelect
   @id={{this.id}}
-  @label={{this.label}}
-  @screenReaderOnly={{this.screenReaderOnly}}
   @onChange={{this.onChange}}
   @emptyMessage={{this.emptyMessage}}
   @className={{this.className}}
@@ -221,7 +253,13 @@ const TemplateWithYield = (args) => ({
   @strictSearch={{this.strictSearch}}
   @values={{this.values}}
   @options={{this.options}}
+  @size={{this.size}}
+  @subLabel={{this.subLabel}}
+  @inlineLabel={{this.inlineLabel}}
+  @requiredLabel={{this.requiredLabel}}
+  @screenReaderOnly={{this.screenReaderOnly}}
 >
+  <:label>{{this.label}}</:label>
   <:placeholder>filtres (2)</:placeholder>
   <:default as |option|>{{option.label}}</:default>
 </PixMultiSelect>`,

package/app/stories/pix-radio-button.mdx

@@ -37,7 +37,9 @@ Pour les considérer comme un seul groupe d'inputs, **il est nécessaire qu'ils
 ## Usage
 
 ```html
-<PixRadioButton name="input-name" @value="{{value}}"> Exemple de label </PixRadioButton>
+<PixRadioButton name="input-name" @value="{{value}}">
+  <:label>Exemple de label</:label>
+</PixRadioButton>
 ```
 
 ## Arguments

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

@@ -9,21 +9,6 @@ export default {
         'Identifiant du champ permettant de lui attacher un label. Généré automatiquement si non renseigné.',
       type: { name: 'string' },
     },
-    label: {
-      name: 'label',
-      description: 'Le label du bouton radio',
-      type: { name: 'string', required: true },
-    },
-    labelSize: {
-      name: 'labelSize',
-      description: 'Correspond à la taille de la police du label.',
-      type: { name: 'string', required: false },
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-      control: { type: 'select' },
-      options: ['small', 'large', 'default'],
-    },
     class: {
       name: 'class',
       description: "Permet d'ajouter une classe CSS au parent du composant.",
@@ -42,16 +27,48 @@ export default {
         defaultValue: { summary: 'false' },
       },
     },
+
+    label: {
+      name: 'label',
+      description: 'Le label du champ',
+      type: { name: 'string', required: true },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    subLabel: {
+      name: 'subLabel',
+      description: 'Un descriptif complétant le label',
+      type: { name: 'string', required: false },
+    },
+    requiredLabel: {
+      name: 'requiredLabel',
+      description: 'Label indiquant que le champ est requis.',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
     screenReaderOnly: {
       name: 'screenReaderOnly',
-      description:
-        "Permet de ne pas afficher le label à l'écran. Sert à garder un label qui sera lisible par les lecteurs d'écran.",
-      type: { name: 'boolean', required: true },
+      description: "Permet de rendre le label lisible uniquement par les lecteurs d'écran",
+      control: { type: 'boolean' },
+      type: { name: 'boolean', required: false },
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
       },
     },
+    size: {
+      name: 'size',
+      description: 'Correspond à la taille de la police du label.',
+      type: { name: 'string', required: false },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+      control: { type: 'select' },
+      options: ['small', 'large', 'default'],
+    },
   },
 };
 
@@ -64,9 +81,11 @@ const Template = (args) => {
   @class={{this.class}}
   disabled={{this.isDisabled}}
   @isDisabled={{this.isDisabled}}
-  @labelSize={{this.labelSize}}
+  @size={{this.size}}
+  @screenReaderOnly={{this.screenReaderOnly}}
+  @requiredLabel={{this.requiredLabel}}
 >
-  {{this.label}}
+  <:label>{{this.label}}</:label>
 </PixRadioButton>`,
     context: args,
   };
@@ -86,11 +105,8 @@ isDisabled.args = {
 /* Checked stories */
 const checked = (args) => {
   return {
-    template: hbs`<PixRadioButton
-  @value={{this.value}}
-  disabled={{this.disabled}}
-  checked
->{{this.label}}</PixRadioButton>`,
+    template: hbs`<PixRadioButton @value={{this.value}} disabled={{this.disabled}} checked><:label
+  >{{this.label}}</:label></PixRadioButton>`,
     context: args,
   };
 };
@@ -107,21 +123,12 @@ defaultChecked.args = Default.args;
 /* Multiple components story */
 const multipleTemplate = (args) => {
   return {
-    template: hbs`<PixRadioButton
-  disabled={{this.isDisabled}}
-  @isDisabled={{this.isDisabled}}
-  name='radio'
->{{this.label}}</PixRadioButton>
-<PixRadioButton
-  disabled={{this.isDisabled}}
-  @isDisabled={{this.isDisabled}}
-  name='radio'
->{{this.label}}</PixRadioButton>
-<PixRadioButton
-  disabled={{this.isDisabled}}
-  @isDisabled={{this.isDisabled}}
-  name='radio'
->{{this.label}}</PixRadioButton>`,
+    template: hbs`<PixRadioButton disabled={{this.isDisabled}} @isDisabled={{this.isDisabled}} name='radio'><:label
+  >{{this.label}}</:label></PixRadioButton>
+<PixRadioButton disabled={{this.isDisabled}} @isDisabled={{this.isDisabled}} name='radio'><:label
+  >{{this.label}}</:label></PixRadioButton>
+<PixRadioButton disabled={{this.isDisabled}} @isDisabled={{this.isDisabled}} name='radio'><:label
+  >{{this.label}}</:label></PixRadioButton>`,
     context: args,
   };
 };

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

@@ -17,7 +17,9 @@ Ce composant permet d'appeler la fonction triggerFiltering passée en paramètre
 Si vous utilisez le `PixSearchInput` sans vouloir afficher le label, il faudra renseigner `screenReaderOnly` à `true`.
 
 ```html
-<PixSearchInput @label="{{label}}" @screenReaderOnly={{true}} @id="{{id}}" />
+<PixSearchInput @screenReaderOnly={{true}} @id="{{id}}">
+  <:label>{{label}}</:label>
+</PixSearchInput>
 ```
 
 <Story of={ComponentStories.Default} height={80} />
@@ -27,11 +29,11 @@ Si vous utilisez le `PixSearchInput` sans vouloir afficher le label, il faudra r
 ```html
 <PixSearchInput
   @id="{{this.id}}"
-  @label="{{this.label}}"
   @placeholder="{{this.placeholder}}"
   @debounceTimeInMs="{{this.debounceTimeInMs}}"
-  @triggerFiltering="{{this.triggerFiltering}}"
-/>
+  @triggerFiltering="{{this.triggerFiltering}}">
+  <:label>{{this.label}}</:label>
+</PixSearchInput>
 ```
 
 ## Arguments

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

@@ -13,25 +13,6 @@ export default {
         type: { summary: 'string' },
       },
     },
-    label: {
-      name: 'label',
-      description:
-        "Label du champ. ** ⚠️ Le `label` est obligatoire si l'`ariaLabel` n'est pas donné. ⚠️ **",
-      type: { name: 'string', required: false },
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    labelSize: {
-      name: 'labelSize',
-      description: 'Correspond à la taille de la police du label.',
-      type: { name: 'string', required: false },
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-      control: { type: 'select' },
-      options: ['small', 'large', 'default'],
-    },
     placeholder: {
       name: 'placeholder',
       description: 'Placeholder du champ.',
@@ -55,6 +36,57 @@ export default {
       type: { required: true },
       control: { disable: true },
     },
+
+    label: {
+      name: 'label',
+      description: 'Le label du champ',
+      type: { name: 'string', required: true },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    subLabel: {
+      name: 'subLabel',
+      description: 'Un descriptif complétant le label',
+      type: { name: 'string', required: false },
+    },
+    requiredLabel: {
+      name: 'requiredLabel',
+      description: 'Label indiquant que le champ est requis.',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    screenReaderOnly: {
+      name: 'screenReaderOnly',
+      description: "Permet de rendre le label lisible uniquement par les lecteurs d'écran",
+      control: { type: 'boolean' },
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    size: {
+      name: 'size',
+      description: 'Correspond à la taille de la police du label.',
+      type: { name: 'string', required: false },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+      control: { type: 'select' },
+      options: ['small', 'large', 'default'],
+    },
+    inlineLabel: {
+      name: 'inlineLabel',
+      description: 'Permet de ne pas afficher la marge pour les éléments de formulaire inline',
+      type: { name: 'boolean', required: false },
+      table: {
+        defaultValue: { summary: false },
+      },
+      control: { type: 'boolean' },
+    },
   },
 };
 
@@ -62,12 +94,15 @@ export const Template = (args) => {
   return {
     template: hbs`<PixSearchInput
   @id={{this.id}}
-  @label={{this.label}}
-  @labelSize={{this.labelSize}}
   @placeholder={{this.placeholder}}
   @debounceTimeInMs={{this.debounceTimeInMs}}
   @triggerFiltering={{this.triggerFiltering}}
-/>`,
+  @size={{this.size}}
+  @subLabel={{this.subLabel}}
+  @inlineLabel={{this.inlineLabel}}
+  @requiredLabel={{this.requiredLabel}}
+  @screenReaderOnly={{this.screenReaderOnly}}
+><:label>{{this.label}}</:label></PixSearchInput>`,
     context: args,
   };
 };

package/app/stories/pix-select.mdx

@@ -56,7 +56,6 @@ Ici nous avons forcé le placement de la dropdown en haut du select mais sachez
 ```html
 <PixSelect
   @className="{{className}}"
-  @label="{{label}}"
   @subLabel="{{subLabel}}"
   @placeholder="{{placeholder}}"
   @options="{{options}}"
@@ -67,11 +66,13 @@ Ici nous avons forcé le placement de la dropdown en haut du select mais sachez
   @searchPlaceholder="{{searchPlaceholder}}"
   @emptySearchMessage="{{emptySearchMessage}}"
   @screenReaderOnly="{{screenReaderOnly}}"
-  @requiredText="{{requiredText}}"
+  @requiredLabel="{{requiredLabel}}"
   @errorMessage="{{errorMessage}}"
   @placement="{{placement}}"
   @icon="{{icon}}"
-/>
+>
+<:label>{{label}}</:label>
+</PixSelect>
 ```
 
 ## Arguments