@1024pix/pix-ui 24.2.0 → 24.2.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Pix-UI Changelog
 
+## v24.2.1 (31/01/2023)
+
+
+### :building_construction: Tech
+- [#323](https://github.com/1024pix/pix-ui/pull/323) [TECH] Supprime des warnings de deprecation Storybook
+- [#327](https://github.com/1024pix/pix-ui/pull/327) [TECH] Remplacer les valeurs d'`id` par du kebab case
+
 ## v24.2.0 (31/01/2023)
 
 

package/app/stories/form.stories.mdx

@@ -1,9 +1,7 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
 import * as stories from './form.stories.js';
 
-<Meta
-  title='Form/Example'
-/>
+<Meta title="Form/Example" />
 
 # Formulaire avec les composants Pix UI
 

package/app/stories/pix-background-header.stories.mdx

@@ -1,10 +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-background-header.stories.js';
 
-<Meta
-  title='Layout/Background Header'
-  component='PixBackgroundHeader'
-/>
+<Meta title="Layout/Background Header" component="PixBackgroundHeader" />
 
 # Pix Background Header
 
@@ -23,9 +20,7 @@ Les enfants de la bannière se mettrons en colonne.
 
 ```html
 <PixBackgroundHeader>
-  <PixBlock>
-    Lorem ipsum
-  </PixBlock>
+  <PixBlock> Lorem ipsum </PixBlock>
 </PixBackgroundHeader>
 ```
 

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

@@ -67,30 +67,28 @@ export const argsTypes = {
     name: 'actionLabel',
     description: 'Nom de l‘action',
     type: { name: 'string', required: false },
-    defaultValue: '',
   },
   actionUrl: {
     name: 'actionUrl',
     description: 'Lien de l‘action',
     type: { name: 'string', required: false },
-    defaultValue: '',
   },
   type: {
     name: 'type',
     description: 'Définit le type de bannière',
     type: { name: 'string', required: false },
-    defaultValue: { summary: 'information' },
+    table: { defaultValue: { summary: 'information' } },
     control: {
       type: 'select',
-      options: [
-        'information',
-        'warning',
-        'error',
-        'communication',
-        'communication-orga',
-        'communication-certif',
-      ],
     },
+    options: [
+      'information',
+      'warning',
+      'error',
+      'communication',
+      'communication-orga',
+      'communication-certif',
+    ],
   },
   canCloseBanner: {
     name: 'canCloseBanner',

package/app/stories/pix-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-banner.stories.js';
 
-<Meta
-  title='Notification/Banner'
-  component='PixBanner'
-  argTypes={stories.argsTypes}
-/>
+<Meta title="Notification/Banner" component="PixBanner" argTypes={stories.argsTypes} />
 
 # Pix Banner
 
@@ -13,7 +9,6 @@ Une `Banner` permet de mettre en avant une information importante.
 
 > Il est possible de surcharger le style d'une `<PixBanner>` via l'attribut `class` ainsi que de passer n'importe quel attribut sur sa `div` wrapper (par exemple, un `aria-label`)
 
-
 ## Default
 
 Bannière Information (par défaut).
@@ -76,43 +71,25 @@ Bannière contenant un bouton qui permet de fermer la bannière.
 ## Usage
 
 ```html
-<PixBanner>
-Bannière Info par défaut
-</PixBanner>
+<PixBanner> Bannière Info par défaut </PixBanner>
 
-<PixBanner @type='communication'>
-  Bannière Communication pour Pix App
-</PixBanner>
+<PixBanner @type="communication"> Bannière Communication pour Pix App </PixBanner>
 
-<PixBanner @type='warning'>
-  Bannière Warning
-</PixBanner>
+<PixBanner @type="warning"> Bannière Warning </PixBanner>
 
-<PixBanner @type='error'>
-  Bannière Error
-</PixBanner>
+<PixBanner @type="error"> Bannière Error </PixBanner>
 
-<PixBanner
-  @actionLabel='Liste des campagnes'
-  @actionUrl='authenticated.campaigns'
->
+<PixBanner @actionLabel="Liste des campagnes" @actionUrl="authenticated.campaigns">
   Bannière avec une route pour lien
 </PixBanner>
 
-<PixBanner
-  @actionLabel='Ajouter des élèves'
-  @actionUrl='https://orga.pix.fr/eleves'
->
+<PixBanner @actionLabel="Ajouter des élèves" @actionUrl="https://orga.pix.fr/eleves">
   Bannière avec une route externe
 </PixBanner>
 
-<PixBanner
-  @type='warning'
-  @canCloseBanner=true
->
+<PixBanner @type="warning" @canCloseBanner="true">
   Bannière possédant un bouton de fermeture
 </PixBanner>
-
 ```
 
 ## Arguments

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

@@ -12,7 +12,8 @@ export const argTypes = {
     name: 'shadow',
     description: 'Ombre sur le bloc',
     type: { name: 'string', required: false },
-    defaultValue: 'light',
-    control: { type: 'select', options: ['light', 'heavy'] },
+    table: { defaultValue: { summary: 'light' } },
+    control: { type: 'select' },
+    options: ['light', 'heavy'],
   },
 };

package/app/stories/pix-block.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-block.stories.js';
 
 <Meta title="Layout/Block" component="PixBlock" argTypes={stories.argTypes} />

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

@@ -44,14 +44,12 @@ export const argTypes = {
     name: 'href',
     description: 'Paramètre à renseigner pour utiliser lien HTML.',
     type: { name: 'string', required: false },
-    defaultValue: null,
   },
   route: {
     name: 'route',
     description:
       "Paramètre à renseigner pour utiliser un composant LinkTo à la place d'un lien classique. Il prend comme valeur la route de redirection",
     type: { name: 'string', required: false },
-    defaultValue: null,
   },
   model: {
     name: 'model',

package/app/stories/pix-button-link.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-button-link.stories.js';
 
-<Meta
-  title='Basics/ButtonLink'
-  component='PixButtonLink'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Basics/ButtonLink" component="PixButtonLink" argTypes={stories.argTypes} />
 
 # ButtonLink
 
@@ -22,13 +18,11 @@ Prend en entrée la propriété `@href`.
 Redirige directement les attributs de la balise HTML `<a>` (eg. `target`...).
 
 <Canvas>
-  <Story name='Lien HTML' story={stories.htmlLink} height={60} />
+  <Story name="Lien HTML" story={stories.htmlLink} height={60} />
 </Canvas>
 
 ```html
-<PixButtonLink @href="https://pix.fr" target="_blank">
-  Libellé du lien
-</PixButtonLink>
+<PixButtonLink @href="https://pix.fr" target="_blank"> Libellé du lien </PixButtonLink>
 ```
 
 ## Route EmberJS
@@ -38,16 +32,14 @@ Equivalent au `<LinkTo />` de EmberJS avec le style d'un bouton Pix.
 
 Prend en entrée la propriété `@route` et `@model`.
 
-Un bouton de route EmberJS peut être désactivé via la propriété `@isDisabled`. 
+Un bouton de route EmberJS peut être désactivé via la propriété `@isDisabled`.
 
 <Canvas>
-  <Story name='Route EmberJS' story={stories.emberLink} height={60} />
+  <Story name="Route EmberJS" story={stories.emberLink} height={60} />
 </Canvas>
 
 ```html
-<PixButtonLink @route="ma.route.ember" @model="mon-model">
-  Libellé du lien
-</PixButtonLink>
+<PixButtonLink @route="ma.route.ember" @model="mon-model"> Libellé du lien </PixButtonLink>
 ```
 
 ## Arguments

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

@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
 export const buttonUpload = (args) => {
   return {
     template: hbs`<PixButtonUpload
-  @id='id'
+  @id={{this.id}}
   @onChange={{this.onChange}}
   @shape={{this.shape}}
   @backgroundColor={{this.backgroundColor}}
@@ -18,6 +18,7 @@ export const buttonUpload = (args) => {
 };
 
 buttonUpload.args = {
+  id: 'file-upload',
   onChange: action('onChange'),
 };
 
@@ -26,14 +27,12 @@ export const argTypes = {
     name: 'id',
     description: "identifiant du bouton d'upload",
     type: { name: 'string', required: true },
-    defaultValue: 'file-upload',
   },
   onChange: {
     name: 'onChange',
     description:
       "fonction à exécuter au moment de l'upload du fichier, elle prend en entrée la liste des fichiers uploadés.",
     type: { name: 'function', required: true },
-    defaultValue: null,
   },
   shape: {
     name: 'shape',

package/app/stories/pix-button-upload.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-button-upload.stories.js';
 
-<Meta
-  title='Basics/ButtonUpload'
-  component='PixButtonUpload'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Basics/ButtonUpload" component="PixButtonUpload" argTypes={stories.argTypes} />
 
 # PixButtonUpload
 
@@ -17,15 +13,11 @@ Hérite des styles de base de `PixButton` (`shape`, `backgroundColor`, `size`, `
 Toutes les [propriétés HTML d'un input de type file](https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/file) sont supportées.
 
 <Canvas>
-  <Story name='PixButtonUpload' story={stories.buttonUpload} height={60} />
+  <Story name="PixButtonUpload" story={stories.buttonUpload} height={60} />
 </Canvas>
 
 ```html
-<PixButtonUpload
-  @id="file-upload"
-  @onChange={{this.uploadFile}}
-  accept=".csv"
->
+<PixButtonUpload @id="file-upload" @onChange="{{this.uploadFile}}" accept=".csv">
   Libellé du bouton
 </PixButtonUpload>
 ```

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

@@ -1,11 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable, SourceContainer } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable, SourceContainer } from '@storybook/addon-docs';
 import * as stories from './pix-button.stories.js';
 
-<Meta
-  title='Basics/Button'
-  component='PixButton'
-  argTypes={stories.argsTypes}
-/>
+<Meta title="Basics/Button" component="PixButton" argTypes={stories.argsTypes} />
 
 # Pix Button
 
@@ -51,6 +47,7 @@ Utiliser le composant `<PixButtonLink />` à la place.
 
 Le bouton avec loader.
 Le loader peut être affiché de deux façons :
+
 - En passant une promesse dans l'attribut `@triggerAction`
 - En passant directement l'attribut `@isLoading={{true}}`
 
@@ -80,13 +77,14 @@ Un petit bouton avec les bords arrondis en fond transparent avec une bordure
 
 ```html
 <PixButton
-  @triggerAction={{action triggerAction}}
+  @triggerAction="{{action"
+  triggerAction}}
   @loadingColor="white"
   @shape="squircle"
   @backgroundColor="transparent-light"
-  @isDisabled={{false}}
+  @isDisabled="{{false}}"
   @size="small"
-  @isBorderVisible={{true}}
+  @isBorderVisible="{{true}}"
 >
   Cliquez-moi
 </PixButton>

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

@@ -17,27 +17,27 @@ export const Template = (args) => {
 
 export const Default = Template.bind({});
 Default.args = {
-  id: 'acceptNewsletter',
+  id: 'accept-newsletter',
   label: 'Recevoir la newsletter',
 };
 
 export const indeterminateCheckbox = Template.bind({});
 indeterminateCheckbox.args = {
-  id: 'acceptNewsletter2',
+  id: 'accept-newsletter-2',
   label: 'Recevoir la newsletter',
   isIndeterminate: true,
 };
 
 export const checkboxWithSmallLabel = Template.bind({});
 checkboxWithSmallLabel.args = {
-  id: 'acceptNewsletter2',
+  id: 'accept-newsletter-2',
   label: 'Recevoir la newsletter',
   labelSize: 'small',
 };
 
 export const checkboxWithLargeLabel = Template.bind({});
 checkboxWithLargeLabel.args = {
-  id: 'acceptNewsletter2',
+  id: 'accept-newsletter-2',
   label: 'Recevoir la newsletter',
   labelSize: 'large',
 };
@@ -47,12 +47,10 @@ export const argTypes = {
     name: 'id',
     description: 'Identifiant du champ permettant de lui attacher un label',
     type: { name: 'string', required: true },
-    defaultValue: null,
   },
   label: {
     name: 'label',
     description: "Le label de l'input",
-    defaultValue: null,
   },
   screenReaderOnly: {
     name: 'screenReaderOnly',
@@ -78,11 +76,11 @@ export const argTypes = {
     name: 'labelSize',
     description: 'Correspond à la taille de la police du label.',
     type: { name: 'string', required: false },
-    defaultValue: { summary: 'default' },
-    control: {
-      type: 'select',
-      options: ['small', 'default', 'large'],
+    table: {
+      defaultValue: { summary: 'default' },
     },
+    control: { type: 'select' },
+    options: ['small', 'default', 'large'],
   },
   checked: {
     name: 'checked',

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

@@ -1,34 +1,33 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
 import * as stories from './pix-checkbox.stories.js';
 
-<Meta
-  title='Form/Checkbox'
-  component='PixCheckbox'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Form/Checkbox" component="PixCheckbox" argTypes={stories.argTypes} />
 
 # PixCheckbox
 
 La PixCheckbox permet de créer des checkbox basiques ou des checkbox mixées (checkbox servant d'indicateur lors d'une sélection multiple).
 
 <Canvas>
-  <Story name='Default' story={stories.Default} height={60} />
+  <Story name="Default" story={stories.Default} height={60} />
 </Canvas>
 
 ## Checkbox indéterminée
+
 <Canvas>
-  <Story name='Indeterminate' story={stories.indeterminateCheckbox} height={60} />
+  <Story name="Indeterminate" story={stories.indeterminateCheckbox} height={60} />
 </Canvas>
 
 ## Checkbox avec un petit label
+
 <Canvas>
-  <Story name='SmallLabel' story={stories.checkboxWithSmallLabel} height={60} />
+  <Story name="SmallLabel" story={stories.checkboxWithSmallLabel} height={60} />
 </Canvas>
 
 ## Checkbox avec un grand label
+
 <Canvas>
-  <Story name='LargeLabel' story={stories.checkboxWithLargeLabel} height={60} />
+  <Story name="LargeLabel" story={stories.checkboxWithLargeLabel} height={60} />
 </Canvas>
 
 ## Usage
@@ -36,12 +35,12 @@ La PixCheckbox permet de créer des checkbox basiques ou des checkbox mixées (c
 ```html
 <PixCheckbox
   @id="superId"
-  @screenReaderOnly={{false}}
-  @isIndeterminate={{false}}
+  @screenReaderOnly="{{false}}"
+  @isIndeterminate="{{false}}"
   @labelSize="small"
 >
   Recevoir la newsletter
-</PixCheckBox>
+</PixCheckbox>
 ```
 
 ## Arguments

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

@@ -1,6 +1,6 @@
 import { hbs } from 'ember-cli-htmlbars';
 
-export const collapsible = (args) => {
+const Template = (args) => {
   return {
     template: hbs`<PixCollapsible @title={{this.title}} @titleIcon={{this.titleIcon}}>
   <div>Contenu du PixCollapsible</div>
@@ -9,6 +9,12 @@ export const collapsible = (args) => {
   };
 };
 
+export const collapsible = Template.bind({});
+collapsible.args = {
+  title: 'Titre du contenu à dérouler en cliquant',
+  titleIcon: 'user',
+};
+
 export const collapsibleWithBlockTitle = (args) => {
   return {
     template: hbs`<PixCollapsible @titleIcon={{this.titleIcon}}>
@@ -47,12 +53,10 @@ export const argTypes = {
     name: 'title',
     description: 'Intitulé du contenu du PixCollapsible',
     type: { name: 'string', required: true },
-    defaultValue: 'Titre du contenu à dérouler en cliquant',
   },
   titleIcon: {
     name: 'titleIcon',
     description: "Ajoute l'icône donnée en paramètre avant le titre du PixCollapsible",
     type: { name: 'string', required: false },
-    defaultValue: 'user',
   },
 };

package/app/stories/pix-collapsible.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-collapsible.stories.js';
 
-<Meta
-  title='Others/Collapsible'
-  component='PixCollapsible'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Others/Collapsible" component="PixCollapsible" argTypes={stories.argTypes} />
 
 # PixCollapsible
 
@@ -16,23 +12,21 @@ Par défaut le contenu est masqué et cliquer sur le libellé permet de montrer
 > Il est possible de cumuler les `PixCollapsible` de sorte à former un accordéon, il suffit de les mettre dans une même div parente.
 
 <Canvas>
-  <Story name='PixCollapsible' story={stories.collapsible} height={150} />
+  <Story name="PixCollapsible" story={stories.collapsible} height={150} />
 </Canvas>
 
 <Canvas>
-  <Story name='With block title' story={stories.collapsibleWithBlockTitle} height={150} />
+  <Story name="With block title" story={stories.collapsibleWithBlockTitle} height={150} />
 </Canvas>
 
 <Canvas>
-  <Story name='MultiplePixCollapsible' story={stories.multipleCollapsible} height={260} />
+  <Story name="MultiplePixCollapsible" story={stories.multipleCollapsible} height={260} />
 </Canvas>
 
 ## Usage
 
 ```html
-<PixCollapsible
-  @title="Titre du contenu à dérouler en cliquant"
-  @iconTitle="user">
+<PixCollapsible @title="Titre du contenu à dérouler en cliquant" @iconTitle="user">
   <p>Contenu du PixCollapsible</p>
 </PixCollapsible>
 ```

package/app/stories/pix-dropdown.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-dropdown.stories.js';
 
-<Meta
-  title='Form/Dropdown'
-  component='PixDropdown'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Form/Dropdown" component="PixDropdown" argTypes={stories.argTypes} />
 
 # Pix Dropdown
 
@@ -14,16 +10,16 @@ Affiche un menu déroulant avec la liste des options fournies.
 
 Les options sont représentées par un tableau d'objet contenant les propriétés value et label.
 
-> **⚠️** __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 !
 
 ## Default
 
 <Canvas>
-  <Story name='Dropdown' story={stories.Default} height={200} />
+  <Story name="Dropdown" story={stories.Default} height={200} />
 </Canvas>
 
 ## With label
@@ -48,11 +44,11 @@ Les options sont représentées par un tableau d'objet contenant les propriété
 
 ```html
 <PixDropdown
-  @id={{id}}
-  @options={{options}}
-  @onSelect={{onSelect}}
+  @id="{{id}}"
+  @options="{{options}}"
+  @onSelect="{{onSelect}}"
   @selectedOption="1"
-  @isSearchable={{false}}
+  @isSearchable="{{false}}"
   @placeholder="Choisissez une option"
   @searchPlaceholder="Rechercher"
   @label="Mon menu déroulant"
@@ -60,7 +56,7 @@ Les options sont représentées par un tableau d'objet contenant les propriété
   @clearLabel="Supprimer la sélection"
   @expandLabel="Ouvrir le menu déroulant"
   @collapseLabel="Réduire le menu déroulant"
-  @pageSize={{10}}
+  @pageSize="{{10}}"
 />
 ```
 

package/app/stories/pix-filter-banner.stories.js

@@ -25,6 +25,7 @@ filterBanner.args = {
     { value: '2', label: 'Mozza' },
   ],
   onChange: action('select-onchange'),
+  onClearFilters: action('onClearFilters'),
 };
 
 export const argTypes = {
@@ -32,24 +33,20 @@ export const argTypes = {
     name: 'title',
     description: 'Titre du filtre',
     type: { name: 'string', required: false },
-    defaultValue: null,
   },
   details: {
     name: 'details',
     description: 'Détails du filtre',
     type: { name: 'string', required: false },
-    defaultValue: null,
   },
   clearFiltersLabel: {
     name: 'clearFiltersLabel',
     description: 'libellé du bouton',
     type: { name: 'string', required: false },
-    defaultValue: null,
   },
   onClearFilters: {
     name: 'onClearFilters',
     description: 'fonction à appeler pour déclencher l’action de suppression des filtres',
     type: { required: false },
-    defaultValue: action('onClearFilters'),
   },
 };