@1024pix/pix-ui 38.0.0 → 38.2.0

package/app/stories/{pix-input.stories.mdx → pix-input.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.stories';
 
-import * as stories from './pix-input.stories.js';
-
-<Meta title="Form/Inputs/Input" component="PixInput" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # Pix Input
 
@@ -36,33 +35,28 @@ screen.getByLabelText('Prénom exemple: Barry');
 
 ## 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.withLabel} height={110} />
-</Canvas>
+<Story of={ComponentStories.withLabel} 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 required label
 
-<Canvas>
-  <Story story={stories.withRequiredLabel} height={100} />
-</Canvas>
+<Story of={ComponentStories.withRequiredLabel} height={100} />
+
 
 ## Usage
 
@@ -79,4 +73,4 @@ screen.getByLabelText('Prénom exemple: Barry');
 
 ## Arguments
 
-<ArgsTable story="Default" />
+<ArgTypes of={ComponentStories} />

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

@@ -1,6 +1,60 @@
 import { hbs } from 'ember-cli-htmlbars';
 
-export const Template = (args) => {
+export default {
+  title: 'Form/Inputs/Input',
+  argTypes: {
+    ariaLabel: {
+      name: 'ariaLabel',
+      description: "L'action du champ, pour l'accessibilité. Requis si label n'est pas définit.",
+      type: { name: 'string', required: false },
+    },
+    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: "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:
+        "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 },
+    },
+    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`<PixInput
   @id={{this.id}}
@@ -50,54 +104,3 @@ withRequiredLabel.args = {
   label: 'Prénom',
   requiredLabel: 'Champ obligatoire',
 };
-
-export const argTypes = {
-  ariaLabel: {
-    name: 'ariaLabel',
-    description: "L'action du champ, pour l'accessibilité. Requis si label n'est pas définit.",
-    type: { name: 'string', required: false },
-  },
-  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: "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:
-      "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 },
-  },
-  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' },
-    },
-  },
-};

package/app/stories/pix-message.mdx

@@ -0,0 +1,54 @@
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-message.stories';
+
+<Meta of={ComponentStories} />
+
+# Pix Message
+
+Un bandeau d'information avec une icône facultative.
+
+## Default / Info
+
+Le bandeau est de type informatif sans icône (par défaut).
+
+<Story of={ComponentStories.Default} height={110} />
+
+## With icon
+
+Le bandeau avec une icône.
+
+<Story of={ComponentStories.withIcon} height={110} />
+
+## Warning
+
+Le bandeau en cas d'alerte.
+
+<Story of={ComponentStories.warning} height={110} />
+
+## Success
+
+Le bandeau en cas de validation.
+
+<Story of={ComponentStories.success} height={110} />
+
+## Error
+
+Le bandeau en cas de d'erreur.
+
+<Story of={ComponentStories.error} height={110} />
+
+## Alert
+
+⚠️ Ce type est déprécié, utilisez le type `error` à la place.
+
+## Usage
+
+Par défaut
+
+```html
+<PixMessage> Ceci est un message à caractère informatif. </PixMessage>
+```
+
+## Arguments
+
+<ArgTypes />

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

@@ -1,7 +1,8 @@
 import { hbs } from 'ember-cli-htmlbars';
 
-const Template = (args) => {
-  return {
+export default {
+  title: 'Notification/Message',
+  render: (args) => ({
     template: hbs`<PixMessage @type={{this.type}} @withIcon={{this.withIcon}}>
   Ceci est un message
   {{this.type}}
@@ -10,48 +11,51 @@ const Template = (args) => {
   de l'afficher sur deux lignes.
 </PixMessage>`,
     context: args,
-  };
+  }),
+  argTypes: {
+    type: {
+      name: 'type',
+      description: 'Type du message',
+      type: { name: 'string', required: false },
+      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 },
+      control: { type: 'boolean' },
+    },
+  },
 };
 
-export const Default = Template.bind({});
-
-export const error = Template.bind({});
-error.args = {
-  type: 'error',
-  withIcon: true,
-};
+export const Default = {};
 
-export const warning = Template.bind({});
-warning.args = {
-  type: 'warning',
-  withIcon: true,
+export const error = {
+  args: {
+    type: 'error',
+    withIcon: true,
+  },
 };
 
-export const success = Template.bind({});
-success.args = {
-  type: 'success',
-  withIcon: true,
+export const warning = {
+  args: {
+    type: 'warning',
+    withIcon: true,
+  },
 };
 
-export const withIcon = Template.bind({});
-withIcon.args = {
-  withIcon: true,
+export const success = {
+  args: {
+    type: 'success',
+    withIcon: true,
+  },
 };
 
-export const argTypes = {
-  type: {
-    name: 'type',
-    description: 'Type du message',
-    type: { name: 'string', required: false },
-    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 },
-    control: { type: 'boolean' },
+export const withIcon = {
+  args: {
+    withIcon: true,
   },
 };

package/app/stories/{pix-modal.stories.mdx → pix-modal.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-modal.stories.js';
+import * as ComponentStories from './pix-modal.stories.js';
 
-<Meta title="Basics/Modal" component="PixModal" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # PixModal
 
@@ -15,9 +15,7 @@ Ce composant possède deux `yield` :
 - `:footer` peut également accueillir tout type de contenu HTML, mais est destiné aux boutons permettant d'interagir
   avec la modale, ce qui permettra de les positionner correctement dans tous les cas de figure.
 
-<Canvas>
-  <Story name="Default" story={stories.Default} height={500} />
-</Canvas>
+<Story of={ComponentStories.Default} height={500} />
 
 ## Usage
 
@@ -52,4 +50,4 @@ Ce composant possède deux `yield` :
 
 ## Arguments
 
-<ArgsTable story="Default" />
+<ArgTypes />

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

@@ -1,7 +1,8 @@
 import { hbs } from 'ember-cli-htmlbars';
 
-export const Template = (args) => {
-  return {
+export default {
+  title: 'Basics/Modal',
+  render: (args) => ({
     template: hbs`<PixModal
   @showModal={{this.showModal}}
   @title={{this.title}}
@@ -28,35 +29,35 @@ export const Template = (args) => {
   <PixButton @triggerAction={{fn (mut this.showModal) (not this.showModal)}}>Ouvrir la modale</PixButton>
 </div>`,
     context: args,
-  };
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  showModal: true,
-  title: "Qu'est-ce qu'une modale ?",
-  onCloseButtonClick: () => {},
+  }),
+  argTypes: {
+    title: {
+      name: 'title',
+      description: 'Titre de la modale',
+      type: { name: 'string', required: true },
+    },
+    onCloseButtonClick: {
+      name: 'onCloseButtonClick',
+      description: 'Fonction à exécuter à la fermeture de la modale',
+      type: { name: 'function', required: true },
+    },
+    showModal: {
+      name: 'showModal',
+      description: "Gérer l'ouverture de la modale",
+      type: { name: 'boolean', required: true },
+      control: { type: 'boolean' },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+  },
 };
 
-export const argTypes = {
-  title: {
-    name: 'title',
-    description: 'Titre de la modale',
-    type: { name: 'string', required: true },
-  },
-  onCloseButtonClick: {
-    name: 'onCloseButtonClick',
-    description: 'Fonction à exécuter à la fermeture de la modale',
-    type: { name: 'function', required: true },
-  },
-  showModal: {
-    name: 'showModal',
-    description: "Gérer l'ouverture de la modale",
-    type: { name: 'boolean', required: true },
-    control: { type: 'boolean' },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
+export const Default = {
+  args: {
+    showModal: true,
+    title: "Qu'est-ce qu'une modale ?",
+    onCloseButtonClick: () => {},
   },
 };

package/app/stories/{pix-multi-select.stories.mdx → pix-multi-select.mdx}

@@ -1,7 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import * as stories from './pix-multi-select.stories.js';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-multi-select.stories';
 
-<Meta title="Form/Multi Select" component="Multi Select" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # Pix Multi Select
 
@@ -12,33 +12,21 @@ L'ajout de `class` et d'autres attributs comme `aria-label` sont possibles.
 
 ## With child component
 
-<Canvas>
-  <Story name="With child component" story={stories.multiSelectWithChildComponent} height={310} />
-</Canvas>
+<Story of={ComponentStories.multiSelectWithChildComponent} height={310} />
 
 ## Searchable
 
-<Canvas>
-  <Story name="Searchable" story={stories.multiSelectSearchable} height={330} />
-</Canvas>
+<Story of={ComponentStories.multiSelectSearchable} height={330} />
 
 ## withCustomClass
 
-<Canvas>
-  <Story name="withCustomClass" story={stories.multiSelectWithCustomClass} height={330} />
-</Canvas>
+<Story of={ComponentStories.multiSelectWithCustomClass} height={330} />
 
 ## withId
 
-<Canvas>
-  <Story name="withId" story={stories.multiSelectWithId} height={330} />
-</Canvas>
+<Story of={ComponentStories.multiSelectWithId} height={330} />
 
-## withYield
-
-<Canvas>
-  <Story name="withYield" story={stories.multiSelectWithYield} height={330} />
-</Canvas>
+<Story of={ComponentStories.multiSelectWithYield} height={330} />
 
 ## Usage
 
@@ -62,4 +50,4 @@ L'ajout de `class` et d'autres attributs comme `aria-label` sont possibles.
 
 ## Arguments
 
-<ArgsTable story="Searchable" />
+<ArgTypes />