@1024pix/pix-ui 24.2.0 → 24.2.2

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

@@ -124,7 +124,8 @@ export const argTypes = {
     name: 'locale',
     description: "La langue de l'utilisateur",
     type: { name: 'string', required: false },
-    control: { type: 'select', options: ['fr', 'en'] },
+    control: { type: 'select' },
+    options: ['fr', 'en'],
     table: {
       type: { summary: 'string' },
       defaultValue: { summary: 'fr' },

package/app/stories/pix-pagination.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-pagination.stories.js';
 
-<Meta
-  title='Basics/Pagination'
-  component='PixPagination'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Basics/Pagination" component="PixPagination" argTypes={stories.argTypes} />
 
 # PixPagination
 
@@ -15,47 +11,52 @@ PixPagination est un élément permettant de trigger le changement de page dans
 > ** ⚠️ Pour utiliser ce composant, il est recommandé d'ajouter cette config dans les routes où tu l'utiliseras.**
 >
 > ** Cela permettra de reload le `model` si les queryParams `pageNumber` & `pageSize` ont été modifiés.**
+>
 > ```javascript
->  queryParams = { pageNumber: { refreshModel: true }, pageSize: { refreshModel: true }, };
->```
+> queryParams = { pageNumber: { refreshModel: true }, pageSize: { refreshModel: true } };
+> ```
 >
->** Installer la dépendance `@formatjs/intl` sur votre projet.**
+> ** Installer la dépendance `@formatjs/intl` sur votre projet.**
 
 Le paramètre `pageOptions` n'est pas requis et possède une valeur par défaut.
 
 ** ⚠ Si vous voulez utiliser des options différentes, il ne faut pas oublier que l'API fait le premier call avec un pageSize
- à 10 par défaut.**
+à 10 par défaut.**
 
 Sur mobile, le select qui permet de choisir le nombre d'élément à afficher sur la page est retiré.
 
 ## En français avec paramètres par défaut
+
 <Canvas>
-  <Story name='French' story={stories.French} height={110}/>
+  <Story name="French" story={stories.French} height={110} />
 </Canvas>
 
 ## En anglais avec le paramètre `pageOptions` custom
+
 <Canvas>
-  <Story name='English' story={stories.English} height={110} />
+  <Story name="English" story={stories.English} height={110} />
 </Canvas>
 
 ## Avec une seule page
+
 <Canvas>
-  <Story name='OnePage' story={stories.OnePage} height={110} />
+  <Story name="OnePage" story={stories.OnePage} height={110} />
 </Canvas>
 
 ## Version condensée
+
 <Canvas>
-  <Story name='Condensed' story={stories.Condensed} height={140} />
+  <Story name="Condensed" story={stories.Condensed} height={140} />
 </Canvas>
 
 ## Usage
 
 ```html
 <PixPagination
-   @pagination={{pagination}}
-   @locale = {{locale}}
-   @pageOptions = {{pageOptions}}
-   @isCondensed = {{isCondensed}}
+  @pagination="{{pagination}}"
+  @locale="{{locale}}"
+  @pageOptions="{{pageOptions}}"
+  @isCondensed="{{isCondensed}}"
 />
 ```
 

package/app/stories/pix-progress-gauge.stories.js

@@ -51,7 +51,8 @@ export const argTypes = {
       'Modifie la couleur de la barre de progression. Peut prendre les valeurs `yellow` ou `white`',
     type: { name: 'string', required: false },
     table: { defaultValue: { summary: 'yellow' } },
-    control: { type: 'select', options: ['yellow', 'white'] },
+    control: { type: 'select' },
+    options: ['yellow', 'white'],
   },
   isArrowLeft: {
     name: 'isArrowLeft',

package/app/stories/pix-progress-gauge.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-progress-gauge.stories.js';
 
-<Meta
-  title='Others/Progress Gauge'
-  component='PixProgressGauge'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Others/Progress Gauge" component="PixProgressGauge" argTypes={stories.argTypes} />
 
 # Progress Gauge
 
@@ -14,7 +10,7 @@ import * as stories from './pix-progress-gauge.stories.js';
 Permet d'afficher un barre de progression sur un barème de 100%. Des paramètres existent pour changer la position de la tooltip ou la couleur du composant
 
 <Canvas>
-  <Story name='Default' story={stories.Default} height={60} />
+  <Story name="Default" story={stories.Default} height={60} />
 </Canvas>
 
 ## White
@@ -22,7 +18,7 @@ Permet d'afficher un barre de progression sur un barème de 100%. Des paramètre
 Démonstration d'une barre de progression blanche avec l'info bulle à gauche avec un sous titre
 
 <Canvas>
-  <Story name='White' story={stories.whiteProgressGauge} height={100} />
+  <Story name="White" story={stories.whiteProgressGauge} height={100} />
 </Canvas>
 
 ## Usage
@@ -33,7 +29,8 @@ Démonstration d'une barre de progression blanche avec l'info bulle à gauche av
   @color="white"
   @tooltipText="50%"
   @isArrowLeft="true"
-  @subTitle="Un sous titre" />
+  @subTitle="Un sous titre"
+/>
 ```
 
 ## Arguments

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

@@ -39,19 +39,16 @@ export const argTypes = {
     name: 'label',
     description: 'Le label du bouton radio',
     type: { name: 'string', required: true },
-    defaultValue: null,
   },
   value: {
     name: 'value',
     description: "Valeur permettant d'identifier l'option sélectionnée",
     type: { name: 'string', required: false },
-    defaultValue: null,
   },
   isDisabled: {
     name: 'isDisabled',
     description: 'Pour désactiver/activer le bouton radio',
     type: { name: 'boolean', required: false },
-    defaultValue: false,
     table: {
       defaultValue: { summary: 'false' },
     },

package/app/stories/pix-radio-button.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-radio-button.stories.js';
 
-<Meta
-  title='Form/Radio Button'
-  component='PixRadioButton'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Form/Radio Button" component="PixRadioButton" argTypes={stories.argTypes} />
 
 # Pix Radio Button
 
@@ -18,8 +14,8 @@ Il est préférable de ne pas sélectionner d’option par défaut pour que le c
 ## Default
 
 <Canvas isColumn>
-  <Story name= "Default" story={stories.Default} height={60} />
-  <Story name='Default checked' story={stories.defaultChecked} height={60} />
+  <Story name="Default" story={stories.Default} height={60} />
+  <Story name="Default checked" story={stories.defaultChecked} height={60} />
 </Canvas>
 
 ## IsDisabled
@@ -27,19 +23,14 @@ Il est préférable de ne pas sélectionner d’option par défaut pour que le c
 État inactif du bouton radio.
 
 <Canvas isColumn>
-  <Story name='Disabled' story={stories.isDisabled} height={60} />
-  <Story name='Disabled checked' story={stories.disabledChecked} height={60} />
+  <Story name="Disabled" story={stories.isDisabled} height={60} />
+  <Story name="Disabled checked" story={stories.disabledChecked} height={60} />
 </Canvas>
 
 ## Usage
 
 ```html
-
-<PixRadioButton
-    @label={{label}}
-    @value={{value}}
-    @isDisabled={{isDisabled}}
-/>
+<PixRadioButton @label="{{label}}" @value="{{value}}" @isDisabled="{{isDisabled}}" />
 ```
 
 ## Arguments

package/app/stories/pix-return-to.stories.js

@@ -24,7 +24,6 @@ export const argTypes = {
     name: 'route',
     description: 'Route de redirection',
     type: { name: 'string', required: true },
-    defaultValue: null,
   },
   model: {
     name: 'model',
@@ -35,7 +34,8 @@ export const argTypes = {
     name: 'shade',
     description: 'Couleur du lien',
     type: { name: 'string', required: false },
-    defaultValue: 'black',
-    control: { type: 'select', options: ['white', 'black', 'blue'] },
+    table: { defaultValue: { summary: 'black' } },
+    control: { type: 'select' },
+    options: ['white', 'black', 'blue'],
   },
 };

package/app/stories/pix-return-to.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-return-to.stories.js';
 
-<Meta
-  title='Basics/Return To'
-  component='PixReturnTo'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Basics/Return To" component="PixReturnTo" argTypes={stories.argTypes} />
 
 # Pix Return To
 
@@ -26,12 +22,10 @@ Le `ReturnTo` est un lien de retour vers uneOpixRe page précédente.
 
 ```html
 Liens avec texte
-<PixReturnTo @route='profile'>
-  Un lien de retour
-</PixReturnTo>
+<PixReturnTo @route="profile"> Un lien de retour </PixReturnTo>
 
 Liens sans texte
-<PixReturnTo @route='profile' />
+<PixReturnTo @route="profile" />
 ```
 
 ## Arguments

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

@@ -1,51 +1,43 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
 import * as stories from './pix-search-input.stories.js';
 
-<Meta
-  title='Others/SearchInput'
-  component='PixSearchInput'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Others/SearchInput" component="PixSearchInput" argTypes={stories.argTypes} />
 
 # PixSearchInput
 
 Le PixSearchInput est un champ qui permet de filter des résultats. Un cas d'utilisation courant de ce genre de composant est un champ de filtre d'une colonne d'un tableau.
 
-
 A la différence d'un [PixSelect](?path=/docs/form-select--default#withsearch) searchable, la liste des résultats s'affiche en dehors du composant.
 
-
 Ce composant permet d'appeler la fonction triggerFiltering passée en paramètre selon un debounce (temps d'attente avant le prochain appel) fournis.
 
+⚠️ ⚠️ ⚠️ Pour utiliser ce composant des changements sont nécessaires dans l'application où est installé Pix UI :
 
+1- Rajoutez ceci dans le `ember-cli-build.js` de votre application (mon-pix/pix-orga/pix-certif/pix-admin) :
 
-⚠️ ⚠️ ⚠️ Pour utiliser ce composant des changements sont nécessaires dans l'application où est installé Pix UI : 
-
-1- Rajoutez ceci dans le `ember-cli-build.js` de votre application (mon-pix/pix-orga/pix-certif/pix-admin) : 
 ```js
-  app.import('node_modules/lodash.debounce/index.js', {
-    using: [{ transformation: 'cjs', as: 'lodash.debounce' }],
-  });
+app.import('node_modules/lodash.debounce/index.js', {
+  using: [{ transformation: 'cjs', as: 'lodash.debounce' }],
+});
 ```
 
 2- Installez la dépendance "ember-cli-cjs-transform" : `npm install ember-cli-cjs-transform`
 
-
 <Canvas>
-  <Story name='Default' story={stories.Default} height={80} />
+  <Story name="Default" story={stories.Default} height={80} />
 </Canvas>
 
 ## Usage
 
 ```html
 <PixSearchInput
-  @id={{this.id}}
-  @label={{this.label}}
-  @ariaLabel={{this.ariaLabel}}
-  @placeholder={{this.placeholder}}
-  @debounceTimeInMs={{this.debounceTimeInMs}}
-  @triggerFiltering={{this.triggerFiltering}}
+  @id="{{this.id}}"
+  @label="{{this.label}}"
+  @ariaLabel="{{this.ariaLabel}}"
+  @placeholder="{{this.placeholder}}"
+  @debounceTimeInMs="{{this.debounceTimeInMs}}"
+  @triggerFiltering="{{this.triggerFiltering}}"
 />
 ```
 

package/app/stories/pix-select.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-select.stories.js';
 
-<Meta
-  title='Form/Select'
-  component='PixSelect'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Form/Select" component="PixSelect" argTypes={stories.argTypes} />
 
 # Pix Select
 
@@ -13,9 +9,9 @@ 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 !
 
@@ -24,59 +20,58 @@ Les options sont représentées par un tableau d'objet contenant les propriété
 ## Default
 
 <Canvas>
-  <Story name='Default' story={stories.Default} height={200} />
+  <Story name="Default" story={stories.Default} height={200} />
 </Canvas>
 
 ## WithId
 
 <Canvas>
-  <Story name='WithId' story={stories.WithId} height={200} />
+  <Story name="WithId" story={stories.WithId} height={200} />
 </Canvas>
 
 ## WithCustomClass
 
 <Canvas>
-  <Story name='WithCustomClass' story={stories.WithCustomClass} height={200} />
+  <Story name="WithCustomClass" story={stories.WithCustomClass} height={200} />
 </Canvas>
 
 ## WithCategories
 
 <Canvas>
-  <Story name='Select with categories' story={stories.WithCategories} height={200} />
+  <Story name="Select with categories" story={stories.WithCategories} height={200} />
 </Canvas>
 
 ## WithSearch
 
 <Canvas>
-  <Story name='Select with search' story={stories.WithSearch} height={200} />
+  <Story name="Select with search" story={stories.WithSearch} height={200} />
 </Canvas>
 
-
 ## WithCategoriesAndSearch
 
 <Canvas>
-  <Story name='WithCategoriesAndSearch' story={stories.WithCategoriesAndSearch} height={200} />
+  <Story name="WithCategoriesAndSearch" story={stories.WithCategoriesAndSearch} height={200} />
 </Canvas>
 
 ## Usage
 
 ```html
-  <PixSelect
-    @className={{className}}
-    @label={{label}}
-    @subLabel={{subLabel}}
-    @placeholder={{placeholder}}
-    @options={{options}}
-    @onChange={{onChange}}
-    @value={{value}}
-    @isSearchable={{isSearchable}}
-    @searchLabel={{searchLabel}}
-    @searchPlaceholder={{searchPlaceholder}}
-    @emptySearchMessage={{emptySearchMessage}}
-    @screenReaderOnly={{screenReaderOnly}}
-    @requiredText={{requiredText}}
-    @errorMessage={{errorMessage}}
-  />
+<PixSelect
+  @className="{{className}}"
+  @label="{{label}}"
+  @subLabel="{{subLabel}}"
+  @placeholder="{{placeholder}}"
+  @options="{{options}}"
+  @onChange="{{onChange}}"
+  @value="{{value}}"
+  @isSearchable="{{isSearchable}}"
+  @searchLabel="{{searchLabel}}"
+  @searchPlaceholder="{{searchPlaceholder}}"
+  @emptySearchMessage="{{emptySearchMessage}}"
+  @screenReaderOnly="{{screenReaderOnly}}"
+  @requiredText="{{requiredText}}"
+  @errorMessage="{{errorMessage}}"
+/>
 ```
 
 ## Arguments

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

@@ -1,50 +1,40 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
 import * as stories from './pix-selectable-tag.stories.js';
 
-<Meta
-  title='basics/Tag/Selectable Tag'
-  component='PixSelectableTag'
-  argTypes={stories.argTypes}
-/>
+<Meta title="basics/Tag/Selectable Tag" component="PixSelectableTag" argTypes={stories.argTypes} />
 
 # Pix Selectable Tag
 
 Un tag permettant de sélectionner ou non la valeur.
 
-##  Default
+## Default
 
 <Canvas>
-  <Story name='Selectable Tag default' story={stories.selectableTagDefault} height={60} />
+  <Story name="Selectable Tag default" story={stories.selectableTagDefault} height={60} />
 </Canvas>
 
-##  Selected
+## Selected
 
 <Canvas>
-  <Story name='Selectable Tag checked' story={stories.selectableTagSelected} height={60} />
+  <Story name="Selectable Tag checked" story={stories.selectableTagSelected} height={60} />
 </Canvas>
 
 ## Multiple tags
+
 <Canvas>
-  <Story name='Selectable Tag multiple' story={stories.selectableTagMultiple} height={60} />
+  <Story name="Selectable Tag multiple" story={stories.selectableTagMultiple} height={60} />
 </Canvas>
 
 ## Usage
 
 ```html
 Par défaut :
-<PixSelectableTag>
-  @label={{label}}
-  @id={{id}}
-  @onChange={{onChange}}
-</PixSelectableTag>
+<PixSelectableTag> @label={{label}} @id={{id}} @onChange={{onChange}} </PixSelectableTag>
 
 Tag Sélectionné :
 <PixSelectableTag>
-  @label={{label}}
-  @id={{id}}
-  @onChange={{onChange}}
-  @checked={{true}}
+  @label={{label}} @id={{id}} @onChange={{onChange}} @checked={{true}}
 </PixSelectableTag>
 ```
 

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

@@ -44,7 +44,6 @@ export const argTypes = {
     name: 'showSidebar',
     description: 'Visibilité de la sidebar',
     type: { name: 'boolean', required: false },
-    control: { type: 'boolean' },
     table: {
       type: { summary: 'boolean' },
       defaultValue: { summary: false },
@@ -54,10 +53,6 @@ export const argTypes = {
     name: 'title',
     description: 'Titre de la sidebar',
     type: { name: 'string', required: true },
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: '' },
-    },
   },
   onClose: {
     name: 'onClose',

package/app/stories/pix-sidebar.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-sidebar.stories.js';
 
-<Meta
-  title="Basics/Sidebar"
-  component="PixSidebar"
-  argTypes={stories.argTypes}
-/>
+<Meta title="Basics/Sidebar" component="PixSidebar" argTypes={stories.argTypes} />
 
 # PixSidebar
 

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

@@ -1,36 +1,42 @@
 import { hbs } from 'ember-cli-htmlbars';
 
-export const stars = (args) => {
+const Template = (args) => {
   return {
     template: hbs`<PixStars @count={{this.count}} @total={{this.total}} @alt={{this.alt}} @color={{this.color}} />`,
     context: args,
   };
 };
 
+export const stars = Template.bind({});
+stars.args = {
+  count: 2,
+  total: 5,
+  alt: 'message alternatif',
+  color: 'blue',
+};
+
 export const argTypes = {
   count: {
     name: 'count',
     description: 'Nombre total d’étoiles actives',
     type: { name: 'number', required: false },
-    defaultValue: 2,
   },
   total: {
     name: 'total',
     description: 'Nombre total d’étoiles',
     type: { name: 'number', required: false },
-    defaultValue: 5,
   },
   alt: {
     name: 'alt',
     description: 'Message alternatif pour les étoiles',
     type: { name: 'string', required: true },
-    defaultValue: 'Message',
   },
   color: {
     name: 'color',
     description: 'Couleur des étoiles',
     type: { name: 'string', required: false },
-    defaultValue: 'yellow',
-    control: { type: 'select', options: ['yellow', 'blue', 'grey'] },
+    table: { defaultValue: { summary: 'yellow' } },
+    control: { type: 'select' },
+    options: ['yellow', 'blue', 'grey'],
   },
 };

package/app/stories/pix-stars.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-stars.stories.js';
 
-<Meta
-  title='Others/PixStars'
-  component='PixStars'
-  argTypes={stories.argTypes}
-/>
+<Meta title="Others/PixStars" component="PixStars" argTypes={stories.argTypes} />
 
 # Pix Stars
 
@@ -20,12 +16,7 @@ Pour ne pas afficher les étoiles vides, il suffit de ne pas donner le total d'
 ## Usage
 
 ```html
-<PixStars
-  @count={{2}}
-  @total={{5}}
-  @alt="message alternatif"
-  @color="blue"
-/>
+<PixStars @count="{{2}}" @total="{{5}}" @alt="message alternatif" @color="blue" />
 ```
 
 ## Arguments