@1024pix/pix-ui 37.0.0 → 38.1.0

package/app/stories/{pix-progress-gauge.stories.mdx → pix-progress-gauge.mdx}

@@ -1,7 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import * as stories from './pix-progress-gauge.stories.js';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-progress-gauge.stories';
 
-<Meta title="Others/Progress Gauge" component="PixProgressGauge" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # PixProgressGauge
 
@@ -11,17 +11,13 @@ Permet d'afficher un barre de progression sur un barème de 100%. Des paramètre
 
 > **⚠️** **Il est nécessaire d'avoir un `label` pour rendre le composant accessible !**
 
-<Canvas>
-  <Story name="Default" story={stories.Default} height={60} />
-</Canvas>
+<Story of={ComponentStories.Default} height={60} />
 
 ## Dark mode
 
 Démonstration d'une barre de progression blanche en dark mode avec un sous titre.
 
-<Canvas>
-  <Story name="Dark" story={stories.darkModeProgressGauge} height={100} />
-</Canvas>
+<Story of={ComponentStories.darkModeProgressGauge} height={100} />
 
 ## Usage
 
@@ -37,4 +33,4 @@ Démonstration d'une barre de progression blanche en dark mode avec un sous titr
 
 ## Arguments
 
-<ArgsTable story="Default" />
+<ArgTypes />

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

@@ -1,5 +1,48 @@
 import { hbs } from 'ember-cli-htmlbars';
 
+export default {
+  title: 'Others/Progress Gauge',
+  argTypes: {
+    value: {
+      name: 'value',
+      description: 'Valeur atteinte sur 100',
+      type: { name: 'number', required: true },
+      table: { defaultValue: { summary: null } },
+    },
+    label: {
+      name: 'label',
+      description:
+        "Afficher un label caché permettant d'expliciter le contexte de la jauge de progression",
+      type: { name: 'string', required: true },
+      table: { defaultValue: { summary: 'null' } },
+    },
+    themeMode: {
+      name: 'themeMode',
+      description:
+        "Permet d'indiquer si le thème de la barre de progression est en dark mode ou light mode. Modifie la couleur de fond de la barre de progression. Peut prendre les valeurs `light` ou `dark`",
+      type: { name: 'string', required: false },
+      table: { defaultValue: { summary: 'light' } },
+      control: { type: 'select' },
+      options: ['dark', 'light'],
+    },
+    color: {
+      name: 'color',
+      description:
+        "Modifie la couleur du contenu de la barre de progression. Peut prendre les valeurs `blue`, 'green' ou `purple`",
+      type: { name: 'string', required: false },
+      table: { defaultValue: { summary: 'blue' } },
+      control: { type: 'select' },
+      options: ['blue', 'green', 'purple'],
+    },
+    subtitle: {
+      name: 'subtitle',
+      description: 'Afficher un sous-titre sous la barre de progression',
+      type: { name: 'string', required: false },
+      table: { defaultValue: { summary: 'null' } },
+    },
+  },
+};
+
 export const Default = (args) => {
   return {
     template: hbs`<PixProgressGauge
@@ -37,43 +80,3 @@ darkModeProgressGauge.args = {
   themeMode: 'dark',
   subtitle: 'Avancement',
 };
-
-export const argTypes = {
-  value: {
-    name: 'value',
-    description: 'Valeur atteinte sur 100',
-    type: { name: 'number', required: true },
-    table: { defaultValue: { summary: null } },
-  },
-  label: {
-    name: 'label',
-    description:
-      "Afficher un label caché permettant d'expliciter le contexte de la jauge de progression",
-    type: { name: 'string', required: true },
-    table: { defaultValue: { summary: 'null' } },
-  },
-  themeMode: {
-    name: 'themeMode',
-    description:
-      "Permet d'indiquer si le thème de la barre de progression est en dark mode ou light mode. Modifie la couleur de fond de la barre de progression. Peut prendre les valeurs `light` ou `dark`",
-    type: { name: 'string', required: false },
-    table: { defaultValue: { summary: 'light' } },
-    control: { type: 'select' },
-    options: ['dark', 'light'],
-  },
-  color: {
-    name: 'color',
-    description:
-      "Modifie la couleur du contenu de la barre de progression. Peut prendre les valeurs `blue`, 'green' ou `purple`",
-    type: { name: 'string', required: false },
-    table: { defaultValue: { summary: 'blue' } },
-    control: { type: 'select' },
-    options: ['blue', 'green', 'purple'],
-  },
-  subtitle: {
-    name: 'subtitle',
-    description: 'Afficher un sous-titre sous la barre de progression',
-    type: { name: 'string', required: false },
-    table: { defaultValue: { summary: 'null' } },
-  },
-};

package/app/stories/{pix-radio-button.stories.mdx → pix-radio-button.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-radio-button.stories.js';
+import * as ComponentStories from './pix-radio-button.stories.js';
 
-<Meta title="Form/Radio Button" component="PixRadioButton" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # Pix Radio Button
 
@@ -13,28 +13,26 @@ 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} />
-</Canvas>
+<Story of={ComponentStories.Default} height={60} />
+
+<Story of={ComponentStories.defaultChecked} height={60} />
 
 ### Liste de radios
 
 Puisqu'on ne souhaite en aucune avoir un input radio unique, il est déjà prévu l'espacement vertical avec un input radio suivant.<br/>
 Pour les considérer comme un seul groupe d'inputs, **il est nécessaire qu'ils aient chacun un attribut `name` avec une valeur commune**.
 
-<Canvas>
-  <Story name="Multiple" story={stories.multiple} height={140} />
-</Canvas>
+<Story of={ComponentStories.multiple} height={140} />
+
 
 ## Disabled
 
 État inactif du bouton radio.
 
-<Canvas isColumn>
-  <Story name="Disabled" story={stories.isDisabled} height={60} />
-  <Story name="Disabled checked" story={stories.disabledChecked} height={60} />
-</Canvas>
+<Story of={ComponentStories.isDisabled} height={60} />
+
+<Story of={ComponentStories.disabledChecked} height={60} />
+
 
 ## Usage
 
@@ -44,4 +42,4 @@ Pour les considérer comme un seul groupe d'inputs, **il est nécessaire qu'ils
 
 ## Arguments
 
-<ArgsTable story="Default" />
+<ArgTypes of={ComponentStories} />

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

@@ -1,5 +1,40 @@
 import { hbs } from 'ember-cli-htmlbars';
 
+export default {
+  title: 'Form/Radio Button',
+  argTypes: {
+    id: {
+      name: 'id',
+      description:
+        '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 },
+    },
+    class: {
+      name: 'class',
+      description: "Permet d'ajouter une classe CSS au parent du composant.",
+      type: { name: 'string' },
+    },
+    value: {
+      name: 'value',
+      description: "Valeur permettant d'identifier l'option sélectionnée",
+      type: { name: 'string', required: false },
+    },
+    disabled: {
+      name: 'disabled',
+      description: 'Pour désactiver/activer le bouton radio',
+      type: { name: 'boolean', required: false },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+};
+
 /* Default stories */
 const Template = (args) => {
   return {
@@ -61,35 +96,3 @@ export const multiple = multipleTemplate.bind({});
 multiple.args = {
   ...Default.args,
 };
-
-export const argTypes = {
-  id: {
-    name: 'id',
-    description:
-      '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 },
-  },
-  class: {
-    name: 'class',
-    description: "Permet d'ajouter une classe CSS au parent du composant.",
-    type: { name: 'string' },
-  },
-  value: {
-    name: 'value',
-    description: "Valeur permettant d'identifier l'option sélectionnée",
-    type: { name: 'string', required: false },
-  },
-  disabled: {
-    name: 'disabled',
-    description: 'Pour désactiver/activer le bouton radio',
-    type: { name: 'boolean', required: false },
-    table: {
-      defaultValue: { summary: 'false' },
-    },
-  },
-};

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

@@ -0,0 +1,34 @@
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-return-to.stories';
+
+<Meta of={ComponentStories} />
+
+# Pix Return To
+
+Le `ReturnTo` est un lien de retour vers uneOpixRe page précédente.
+
+> Il est nécessaire de passer une @route au composant.
+
+> Il est possible d'afficher uniquement l'icone flèche en omettant de mettre du contenu enfant dans la balise.
+
+Lien sans texte
+
+<Story of={ComponentStories.returnTo} height={60} />
+
+Lien avec texte
+
+<Story of={ComponentStories.returnToWithText} height={60} />
+
+## Usage
+
+```html
+Liens avec texte
+<PixReturnTo @route="profile"> Un lien de retour </PixReturnTo>
+
+Liens sans texte
+<PixReturnTo @route="profile" />
+```
+
+## Arguments
+
+<ArgTypes />

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

@@ -1,41 +1,41 @@
 import { hbs } from 'ember-cli-htmlbars';
 
-export const returnTo = (args) => {
-  return {
-    template: hbs`<PixReturnTo @route='profile' @shade={{this.shade}} />`,
+export default {
+  title: 'Basics/Return To',
+  render: (args) => ({
+    template: hbs`<PixReturnTo @route='profile' @shade={{this.shade}}>{{this.content}}</PixReturnTo>`,
     context: args,
-  };
-};
-returnTo.args = {
-  shade: 'blue',
+  }),
+  argTypes: {
+    route: {
+      name: 'route',
+      description: 'Route de redirection',
+      type: { name: 'string', required: true },
+    },
+    model: {
+      name: 'model',
+      description: 'Model Ember',
+      type: { required: false },
+    },
+    shade: {
+      name: 'shade',
+      description: 'Couleur du lien',
+      type: { name: 'string', required: false },
+      table: { defaultValue: { summary: 'black' } },
+      control: { type: 'select' },
+      options: ['white', 'black', 'blue'],
+    },
+  },
 };
 
-export const returnToWithText = (args) => {
-  return {
-    template: hbs`<PixReturnTo @route='profile' @shade={{this.shade}}>
-  Retour vers mon profil
-</PixReturnTo>`,
-    context: args,
-  };
+export const returnTo = {
+  args: {
+    shade: 'blue',
+  },
 };
 
-export const argTypes = {
-  route: {
-    name: 'route',
-    description: 'Route de redirection',
-    type: { name: 'string', required: true },
-  },
-  model: {
-    name: 'model',
-    description: 'Model Ember',
-    type: { required: false },
-  },
-  shade: {
-    name: 'shade',
-    description: 'Couleur du lien',
-    type: { name: 'string', required: false },
-    table: { defaultValue: { summary: 'black' } },
-    control: { type: 'select' },
-    options: ['white', 'black', 'blue'],
+export const returnToWithText = {
+  args: {
+    content: 'Retour vers mon profil',
   },
 };

package/app/stories/{pix-search-input.stories.mdx → pix-search-input.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-search-input.stories.js';
+import * as ComponentStories from './pix-search-input.stories.js';
 
-<Meta title="Others/SearchInput" component="PixSearchInput" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # PixSearchInput
 
@@ -12,9 +12,7 @@ A la différence d'un [PixSelect](?path=/docs/form-select--default#withsearch) s
 
 Ce composant permet d'appeler la fonction triggerFiltering passée en paramètre selon un debounce (temps d'attente avant le prochain appel) fournis.
 
-<Canvas>
-  <Story name="Default" story={stories.Default} height={80} />
-</Canvas>
+<Story of={ComponentStories.Default} height={80} />
 
 ## Usage
 
@@ -31,4 +29,4 @@ Ce composant permet d'appeler la fonction triggerFiltering passée en paramètre
 
 ## Arguments
 
-<ArgsTable story="Default" />
+<ArgTypes of={ComponentStories} />

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

@@ -1,6 +1,62 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
+export default {
+  title: 'Others/SearchInput',
+  argTypes: {
+    id: {
+      name: 'id',
+      description:
+        "Un identifiant unique placé sur le composant. Si l'id n'est pas fourni un id par défaut sera mis.",
+      type: { name: 'string', required: false },
+      table: {
+        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' },
+      },
+    },
+    ariaLabel: {
+      name: 'ariaLabel',
+      description:
+        "Label du champ. ** ⚠️ L'`ariaLabel` est obligatoire si le `label` n'est pas donné. ⚠️ **",
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    placeholder: {
+      name: 'placeholder',
+      description: 'Placeholder du champ.',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    debounceTimeInMs: {
+      name: 'debounceTimeInMs',
+      description:
+        "Temps d'attente en millisecondes entre 2 appels à la fonction triggerFiltering.",
+      type: { name: 'string', required: true },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    triggerFiltering: {
+      name: 'triggerFiltering',
+      description: 'Fonction appelée quand le champ est modifié.',
+      type: { required: true },
+      control: { disable: true },
+    },
+  },
+};
+
 export const Template = (args) => {
   return {
     template: hbs`
@@ -26,55 +82,3 @@ Default.args = {
   debounceTimeInMs: 500,
   triggerFiltering: action('triggerFiltering'),
 };
-
-export const argTypes = {
-  id: {
-    name: 'id',
-    description:
-      "Un identifiant unique placé sur le composant. Si l'id n'est pas fourni un id par défaut sera mis.",
-    type: { name: 'string', required: false },
-    table: {
-      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' },
-    },
-  },
-  ariaLabel: {
-    name: 'ariaLabel',
-    description:
-      "Label du champ. ** ⚠️ L'`ariaLabel` est obligatoire si le `label` n'est pas donné. ⚠️ **",
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  placeholder: {
-    name: 'placeholder',
-    description: 'Placeholder du champ.',
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  debounceTimeInMs: {
-    name: 'debounceTimeInMs',
-    description: "Temps d'attente en millisecondes entre 2 appels à la fonction triggerFiltering.",
-    type: { name: 'string', required: true },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  triggerFiltering: {
-    name: 'triggerFiltering',
-    description: 'Fonction appelée quand le champ est modifié.',
-    type: { required: true },
-    control: { disable: true },
-  },
-};

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

@@ -1,7 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import * as stories from './pix-select.stories.js';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-select.stories.js';
 
-<Meta title="Form/Select" component="PixSelect" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # Pix Select
 
@@ -19,53 +19,37 @@ 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} />
-</Canvas>
+<Story of={ComponentStories.Default} height={200} />
 
 ## WithId
 
-<Canvas>
-  <Story name="WithId" story={stories.WithId} height={200} />
-</Canvas>
+<Story of={ComponentStories.WithId} height={200} />
 
 ## WithCustomClass
 
-<Canvas>
-  <Story name="WithCustomClass" story={stories.WithCustomClass} height={200} />
-</Canvas>
+<Story of={ComponentStories.WithCustomClass} height={200} />
 
 ## WithCategories
 
-<Canvas>
-  <Story name="Select with categories" story={stories.WithCategories} height={200} />
-</Canvas>
+<Story of={ComponentStories.WithCategories} height={200} />
 
 ## WithSearch
 
-<Canvas>
-  <Story name="Select with search" story={stories.WithSearch} height={200} />
-</Canvas>
+<Story of={ComponentStories.WithSearch} height={200} />
 
 ## WithCategoriesAndSearch
 
-<Canvas>
-  <Story name="WithCategoriesAndSearch" story={stories.WithCategoriesAndSearch} height={200} />
-</Canvas>
+<Story of={ComponentStories.WithCategoriesAndSearch} height={200} />
 
 ## WithDropDownAtTheTop
 
 Ici nous avons forcé le placement de la dropdown en haut du select mais sachez que ce placement se fait automatiquement par défaut.
 
-<Canvas>
-  <Story name="WithDropDownAtTheTop" story={stories.WithDropDownAtTheTop} />
-</Canvas>
+<Story of={ComponentStories.WithDropDownAtTheTop} />
 
 ## WithIcon
 
-<Canvas>
-  <Story name="WithIcon" story={stories.WithIcon} />
-</Canvas>
+<Story of={ComponentStories.WithIcon} />
 
 ## Usage
 
@@ -92,4 +76,4 @@ Ici nous avons forcé le placement de la dropdown en haut du select mais sachez
 
 ## Arguments
 
-<ArgsTable story="Default" />
+<ArgTypes of={ComponentStories} />