@1024pix/pix-ui 38.0.0 → 38.2.0

package/app/stories/{pix-icon-button.stories.mdx → pix-icon-button.mdx}

@@ -1,7 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import * as stories from './pix-icon-button.stories.js';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-icon-button.stories.js';
 
-<Meta title="Basics/Icon button" component="PixIconButton" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # Pix Icon Button
 
@@ -11,33 +11,25 @@ Le PixIconButton permet de créer un bouton contenant une icône font-awesome.
 
 Le bouton en version big et sans fond grisé.
 
-<Canvas>
-  <Story name="Default" story={stories.Default} height={60} />
-</Canvas>
+<Story of={ComponentStories.Default} height={60} />
 
 ## Small
 
 Le bouton en version small.
 
-<Canvas>
-  <Story name="Small" story={stories.small} height={60} />
-</Canvas>
+<Story of={ComponentStories.small} height={60} />
 
 ## With Background
 
 Le bouton avec le fond grisé.
 
-<Canvas>
-  <Story name="With Background" story={stories.withBackground} height={60} />
-</Canvas>
+<Story of={ComponentStories.withBackground} height={60} />
 
 ## Disabled
 
 Exemple avec le bouton disabled
 
-<Canvas>
-  <Story name="Disabled" story={stories.disabled} height={60} />
-</Canvas>
+<Story of={ComponentStories.disabled} height={60} />
 
 ## Accessibilité / aria-label
 
@@ -89,4 +81,4 @@ Bouton d'action
 />
 ```
 
-<ArgsTable story="Default" />
+<ArgTypes of={ComponentStories} />

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

@@ -1,6 +1,66 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
+export default {
+  title: 'Basics/Icon button',
+  argTypes: {
+    ariaLabel: {
+      name: 'ariaLabel',
+      description: "l'action du bouton, pour l'accessibilité",
+      type: { name: 'string', required: true },
+    },
+    icon: {
+      name: 'icon',
+      description: 'Icône font-awesome',
+      type: { name: 'string', required: true },
+      table: { defaultValue: { summary: 'plus' } },
+    },
+    iconPrefix: {
+      name: 'iconPrefix',
+      description: "Prefix de l'icône font-awesome",
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: ['far', 'fas'],
+    },
+    triggerAction: {
+      name: 'triggerAction',
+      description: 'Fonction à appeler au clic du bouton',
+      type: { required: true },
+    },
+    withBackground: {
+      name: 'withBackground',
+      description: 'Affichage du fond grisé',
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    size: {
+      name: 'size',
+      description: 'Size: `small`, `big`',
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: ['big', 'small'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'big' },
+      },
+    },
+    color: {
+      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'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'light-grey' },
+      },
+    },
+  },
+};
+
 const Template = (args) => {
   return {
     template: hbs`<PixIconButton
@@ -46,60 +106,3 @@ disabled.args = {
   disabled: true,
   triggerAction,
 };
-
-export const argTypes = {
-  ariaLabel: {
-    name: 'ariaLabel',
-    description: "l'action du bouton, pour l'accessibilité",
-    type: { name: 'string', required: true },
-  },
-  icon: {
-    name: 'icon',
-    description: 'Icône font-awesome',
-    type: { name: 'string', required: true },
-    table: { defaultValue: { summary: 'plus' } },
-  },
-  iconPrefix: {
-    name: 'iconPrefix',
-    description: "Prefix de l'icône font-awesome",
-    type: { name: 'string', required: false },
-    control: { type: 'select' },
-    options: ['far', 'fas'],
-  },
-  triggerAction: {
-    name: 'triggerAction',
-    description: 'Fonction à appeler au clic du bouton',
-    type: { required: true },
-  },
-  withBackground: {
-    name: 'withBackground',
-    description: 'Affichage du fond grisé',
-    type: { name: 'boolean', required: false },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: 'false' },
-    },
-  },
-  size: {
-    name: 'size',
-    description: 'Size: `small`, `big`',
-    type: { name: 'string', required: false },
-    control: { type: 'select' },
-    options: ['big', 'small'],
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: 'big' },
-    },
-  },
-  color: {
-    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'],
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: 'light-grey' },
-    },
-  },
-};

package/app/stories/{pix-indicator-card.stories.mdx → pix-indicator-card.mdx}

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

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

@@ -1,5 +1,42 @@
 import { hbs } from 'ember-cli-htmlbars';
 
+export default {
+  title: 'Others/Indicator Card',
+  argTypes: {
+    title: {
+      name: 'Title',
+      description: 'Titre de la carte',
+    },
+    color: {
+      name: 'Color',
+      description: "Couleur de l'icone",
+      table: { defaultValue: { summary: 'grey' } },
+      control: { type: 'select' },
+      options: ['grey', 'blue', 'green', 'purple'],
+    },
+    icon: {
+      name: 'Icon',
+      description: "Icone dans l'encart",
+    },
+    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.",
+      table: { defaultValue: { summary: 'fas' } },
+      control: { type: 'select' },
+      options: ['far', 'fas'],
+    },
+    value: {
+      name: 'Value',
+      description: 'Contenu principal',
+    },
+    info: {
+      name: 'Info',
+      description: "Contenu de la bulle d'info",
+    },
+  },
+};
+
 const Template = (args) => {
   return {
     template: hbs`
@@ -39,37 +76,3 @@ withIconPrefix.args = {
   ...Default.args,
   iconPrefix: 'far',
 };
-
-export const argTypes = {
-  title: {
-    name: 'Title',
-    description: 'Titre de la carte',
-  },
-  color: {
-    name: 'Color',
-    description: "Couleur de l'icone",
-    table: { defaultValue: { summary: 'grey' } },
-    control: { type: 'select' },
-    options: ['grey', 'blue', 'green', 'purple'],
-  },
-  icon: {
-    name: 'Icon',
-    description: "Icone dans l'encart",
-  },
-  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.",
-    table: { defaultValue: { summary: 'fas' } },
-    control: { type: 'select' },
-    options: ['far', 'fas'],
-  },
-  value: {
-    name: 'Value',
-    description: 'Contenu principal',
-  },
-  info: {
-    name: 'Info',
-    description: "Contenu de la bulle d'info",
-  },
-};

package/app/stories/{pix-input-code.stories.mdx → pix-input-code.mdx}

@@ -1,8 +1,8 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
 
-import * as stories from './pix-input-code.stories.js';
+import * as ComponentStories from './pix-input-code.stories.js';
 
-<Meta title="Form/Inputs/Code" component="PixInputCode" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # Pix Input Code
 
@@ -18,9 +18,7 @@ Le composant peut être numérique ou alphanumérique précisé avec la proprié
 
 ## Default
 
-<Canvas>
-  <Story name="Default" story={stories.Default} height={70} />
-</Canvas>
+<Story of={ComponentStories.Default} height={70} />
 
 ## Usage
 
@@ -32,4 +30,4 @@ email" @explanationOfUse="Détails d'utilisation du PixInputCode" @numInputs={{6
 
 ## Arguments
 
-<ArgsTable story="Default" />
+<ArgTypes story="Default" />

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

@@ -1,5 +1,60 @@
 import { hbs } from 'ember-cli-htmlbars';
 
+export default {
+  title: 'Form/Inputs/Code',
+  argTypes: {
+    ariaLabel: {
+      name: 'ariaLabel',
+      description:
+        "L'aria-label de chaque champ. L'aria-label est automatiquement complété à la fin par ` <numero>`, où `<numero>` correspond à la position du champ dans le PixInputCode.",
+      type: { name: 'string', required: true },
+    },
+    legend: {
+      name: 'legend',
+      description:
+        "La description du composant. Ce champ n'est pas visible. Indiquer ce à quoi correspond votre PixInputCode.",
+      type: { name: 'string', required: true },
+    },
+    explanationOfUse: {
+      name: 'explanationOfUse',
+      description:
+        "Explication du fonctionnement des champs du PixInputCode. Ce champ n'est pas visible. Le texte par défaut est uniquement en Français. Veillez à donc le surchager avec vos traductions. Par ailleurs, le texte par défaut change selon le type du champ du PixInputCode",
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: {
+          summary:
+            'Pour se déplacer de champ en champ vous pouvez utiliser la tabulation ou bien les flèches gauche et droite de votre clavier. Pour remplir un champ vous pouvez utiliser des chiffres de 1 à 9 ou bien les flèches haut et bas de votre clavier pour incrémenter de 1 la valeur du champ.',
+        },
+      },
+    },
+    inputType: {
+      name: 'inputType',
+      description: 'Le type de chaque champ : `number` ou `text`',
+      type: { name: 'string', required: false },
+      options: ['number', 'text'],
+      control: { type: 'select' },
+      table: {
+        defaultValue: { summary: 'number' },
+      },
+    },
+    numInputs: {
+      name: 'numInputs',
+      description: 'Le nombre de champ',
+      type: { name: 'number', required: false },
+      table: {
+        defaultValue: { summary: 6 },
+      },
+    },
+    onAllInputsFilled: {
+      name: 'onAllInputsFilled',
+      description: 'Fonction appelée (avec le code en paramètre) une fois tous les champs remplis',
+      type: { required: false },
+      control: { disable: true },
+    },
+  },
+};
+
 export const Template = (args) => {
   return {
     template: hbs`<PixInputCode
@@ -18,55 +73,3 @@ Default.args = {
   ariaLabel: 'Champ',
   legend: "Code de validation d'adresse e-mail",
 };
-
-export const argTypes = {
-  ariaLabel: {
-    name: 'ariaLabel',
-    description:
-      "L'aria-label de chaque champ. L'aria-label est automatiquement complété à la fin par ` <numero>`, où `<numero>` correspond à la position du champ dans le PixInputCode.",
-    type: { name: 'string', required: true },
-  },
-  legend: {
-    name: 'legend',
-    description:
-      "La description du composant. Ce champ n'est pas visible. Indiquer ce à quoi correspond votre PixInputCode.",
-    type: { name: 'string', required: true },
-  },
-  explanationOfUse: {
-    name: 'explanationOfUse',
-    description:
-      "Explication du fonctionnement des champs du PixInputCode. Ce champ n'est pas visible. Le texte par défaut est uniquement en Français. Veillez à donc le surchager avec vos traductions. Par ailleurs, le texte par défaut change selon le type du champ du PixInputCode",
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-      defaultValue: {
-        summary:
-          'Pour se déplacer de champ en champ vous pouvez utiliser la tabulation ou bien les flèches gauche et droite de votre clavier. Pour remplir un champ vous pouvez utiliser des chiffres de 1 à 9 ou bien les flèches haut et bas de votre clavier pour incrémenter de 1 la valeur du champ.',
-      },
-    },
-  },
-  inputType: {
-    name: 'inputType',
-    description: 'Le type de chaque champ : `number` ou `text`',
-    type: { name: 'string', required: false },
-    options: ['number', 'text'],
-    control: { type: 'select' },
-    table: {
-      defaultValue: { summary: 'number' },
-    },
-  },
-  numInputs: {
-    name: 'numInputs',
-    description: 'Le nombre de champ',
-    type: { name: 'number', required: false },
-    table: {
-      defaultValue: { summary: 6 },
-    },
-  },
-  onAllInputsFilled: {
-    name: 'onAllInputsFilled',
-    description: 'Fonction appelée (avec le code en paramètre) une fois tous les champs remplis',
-    type: { required: false },
-    control: { disable: true },
-  },
-};

package/app/stories/{pix-input-password.stories.mdx → pix-input-password.mdx}

@@ -1,8 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-input-password.stories';
 
-import * as stories from './pix-input-password.stories.js';
-
-<Meta title="Form/Inputs/Password" component="PixInputPassword" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # Pix Input Password
 
@@ -22,39 +21,39 @@ Si vous utilisez le `PixInputPassword` sans label alors il faut renseigner le pa
 
 ## Default
 
-<Canvas>
-  <Story name="Default" story={stories.Default} height={100} />
-</Canvas>
+
+<Story of={ComponentStories.Default} height={100} />
+
 
 ## With label and information
 
-<Canvas>
-  <Story story={stories.withLabelAndInformation} height={110} />
-</Canvas>
+
+<Story of={ComponentStories.withLabelAndInformation} height={110} />
+
 
 ## Error state (with error message)
 
-<Canvas>
-  <Story story={stories.errorState} height={110} />
-</Canvas>
+
+<Story of={ComponentStories.errorState} height={110} />
+
 
 ## Success state
 
-<Canvas>
-  <Story story={stories.successState} height={100} />
-</Canvas>
+
+<Story of={ComponentStories.successState} height={100} />
+
 
 ## With prefix
 
-<Canvas>
-  <Story story={stories.withPrefix} height={100} />
-</Canvas>
+
+<Story of={ComponentStories.withPrefix} height={100} />
+
 
 ## With required label
 
-<Canvas>
-  <Story story={stories.withRequiredLabel} height={100} />
-</Canvas>
+
+<Story of={ComponentStories.withRequiredLabel} height={100} />
+
 
 ## Usage
 
@@ -73,4 +72,4 @@ Si vous utilisez le `PixInputPassword` sans label alors il faut renseigner le pa
 
 ## Arguments
 
-<ArgsTable story="Default" />
+<ArgTypes of={ComponentStories} />

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

@@ -1,6 +1,65 @@
 import { hbs } from 'ember-cli-htmlbars';
 
-export const Template = (args) => {
+export default {
+  title: 'Form/Inputs/Password',
+  argTypes: {
+    id: {
+      name: 'id',
+      description: 'Identifiant du champ permettant de lui attacher un label',
+      type: { name: 'string', required: true },
+    },
+    value: {
+      name: 'value',
+      description: "Valeur de l'input",
+      type: { name: 'string', required: false },
+    },
+    label: {
+      name: 'label',
+      description: "Label de l'input. Requis si ariaLabel n'est pas définit.",
+      type: { name: 'string', required: true },
+    },
+    ariaLabel: {
+      name: 'ariaLabel',
+      description: "L'action du champ, pour l'accessibilité. Requis si label n'est pas définit.",
+      type: { name: 'string', required: true },
+    },
+    information: {
+      name: 'information',
+      description: 'Un descriptif complétant le label',
+      type: { name: 'string', required: false },
+    },
+    validationStatus: {
+      name: 'validationStatus',
+      description:
+        "Définit l'état du champ, neutre par défaut, en succès ou erreur selon l'action de l'utilisateur",
+      type: { name: 'string', required: false },
+      options: ['default', 'success', 'error'],
+      control: { type: 'select' },
+    },
+    errorMessage: {
+      name: 'errorMessage',
+      description:
+        "Affiche le message d'erreur donné. Doit s'accompagner du paramètre validationStatus en 'error'",
+      type: { name: 'string', required: false },
+    },
+    prefix: {
+      name: 'prefix',
+      description: 'Affiche un préfixe avant la zone de saisie du champ',
+      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.',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+};
+
+const Template = (args) => {
   return {
     template: hbs`<PixInputPassword
   @ariaLabel={{this.ariaLabel}}
@@ -57,59 +116,3 @@ withRequiredLabel.args = {
   label: 'Mot de passe',
   requiredLabel: 'Champ obligatoire',
 };
-
-export const argTypes = {
-  id: {
-    name: 'id',
-    description: 'Identifiant du champ permettant de lui attacher un label',
-    type: { name: 'string', required: true },
-  },
-  value: {
-    name: 'value',
-    description: "Valeur de l'input",
-    type: { name: 'string', required: false },
-  },
-  label: {
-    name: 'label',
-    description: "Label de l'input. Requis si ariaLabel n'est pas définit.",
-    type: { name: 'string', required: true },
-  },
-  ariaLabel: {
-    name: 'ariaLabel',
-    description: "L'action du champ, pour l'accessibilité. Requis si label n'est pas définit.",
-    type: { name: 'string', required: true },
-  },
-  information: {
-    name: 'information',
-    description: 'Un descriptif complétant le label',
-    type: { name: 'string', required: false },
-  },
-  validationStatus: {
-    name: 'validationStatus',
-    description:
-      "Définit l'état du champ, neutre par défaut, en succès ou erreur selon l'action de l'utilisateur",
-    type: { name: 'string', required: false },
-    options: ['default', 'success', 'error'],
-    control: { type: 'select' },
-  },
-  errorMessage: {
-    name: 'errorMessage',
-    description:
-      "Affiche le message d'erreur donné. Doit s'accompagner du paramètre validationStatus en 'error'",
-    type: { name: 'string', required: false },
-  },
-  prefix: {
-    name: 'prefix',
-    description: 'Affiche un préfixe avant la zone de saisie du champ',
-    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.',
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-};