@1024pix/pix-ui 38.0.0 → 38.2.0

package/app/stories/pix-multi-select.stories.js

@@ -1,8 +1,10 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
-const Template = (args) => ({
-  template: hbs`
+export default {
+  title: 'Form/Multi Select',
+  render: (args) => ({
+    template: hbs`
   <style>
     .custom {
       border : none;
@@ -28,8 +30,79 @@ const Template = (args) => ({
     @options={{this.options}} as |option|
   >{{option.label}}</PixMultiSelect>
  `,
-  context: args,
-});
+    context: args,
+  }),
+  argTypes: {
+    id: {
+      name: 'id',
+      description:
+        "Permet l'accessibilité du composant attribuant des ``for`` pour chaque entité. **⚠️ L'`id` est obligatoire que si le `label` n'est pas donné. ⚠️**",
+      type: { name: 'string' },
+    },
+    placeholder: {
+      name: 'placeholder',
+      description:
+        'Rempli le contenu interne du composant, `placeholder` pour `isSearchable` `true`, sinon rawContent du `button`',
+      type: { name: 'string', required: true },
+    },
+    label: {
+      name: 'label',
+      description:
+        "Donne un label au champ qui sera celui vocalisé par le lecteur d'écran. **⚠️ Le`label` est obligatoire que si l'`id` n'est pas donné. ⚠️**",
+      type: { name: 'string' },
+    },
+    screenReaderOnly: {
+      name: 'screenReaderOnly',
+      description: "Permet de cacher à l'écran le label tout en restant vocalisable",
+      type: { name: 'boolean', required: false },
+      table: { defaultValue: { summary: false } },
+    },
+    emptyMessage: {
+      name: 'emptyMessage',
+      description:
+        'Un intitulé de choix indisponible (dans le cas ou certains filtres seraient excluant)',
+      type: { name: 'string', required: true },
+    },
+    options: {
+      name: 'options',
+      description:
+        'Les options sont représentées par un tableau d‘objet contenant les propriétés ``value`` et ``label``. ``value`` doit être de type ``String`` pour être conforme au traitement des input value.',
+      type: { name: 'array', required: false },
+    },
+    onChange: {
+      name: 'onChange',
+      description: "Une fonction permettant d'effectuer une action à chaque sélection",
+      type: { required: true },
+    },
+    values: {
+      name: 'values',
+      description: 'Une pré-sélection peut être donnée au composant',
+      type: { name: 'array', required: false },
+    },
+    isSearchable: {
+      name: 'isSearchable',
+      description: 'Permet de rajouter une saisie utilisateur pour faciliter la recherche',
+      type: { name: 'boolean', required: false },
+      table: { defaultValue: { summary: false } },
+    },
+    strictSearch: {
+      name: 'strictSearch',
+      description:
+        'Permet de rendre sensible à la casse et au diacritiques lorsque ``isSearchable`` à ``true``',
+      type: { name: 'boolean', required: false },
+      table: { defaultValue: { summary: false } },
+    },
+    className: {
+      name: 'className',
+      description: 'Cette classe css permet de surcharger le css par défaut du composant.',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+};
+
 const DEFAULT_OPTIONS = [
   { label: 'ANETH HERBE AROMATIQUE', value: '1' },
   { label: 'ANIS VERT HERBE AROMATIQUE', value: '2' },
@@ -44,14 +117,15 @@ const DEFAULT_OPTIONS = [
   { label: 'CERFEUIL HERBE AROMATIQUE', value: '11' },
 ];
 
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Label du champ',
-  options: DEFAULT_OPTIONS,
-  onChange: action('onChange'),
-  emptyMessage: 'pas de résultat',
-  values: ['1', '3'],
-  placeholder: 'placeholder',
+export const Default = {
+  args: {
+    label: 'Label du champ',
+    options: DEFAULT_OPTIONS,
+    onChange: action('onChange'),
+    emptyMessage: 'pas de résultat',
+    values: ['1', '3'],
+    placeholder: 'placeholder',
+  },
 };
 
 export const multiSelectWithChildComponent = (args) => {
@@ -90,27 +164,30 @@ multiSelectWithChildComponent.args = {
   ],
 };
 
-export const multiSelectSearchable = Template.bind({});
-multiSelectSearchable.args = {
-  ...Default.args,
-  isSearchable: true,
-  strictSearch: true,
-  emptyMessage: 'Aucune option trouvée',
+export const multiSelectSearchable = {
+  args: {
+    ...Default.args,
+    isSearchable: true,
+    strictSearch: true,
+    emptyMessage: 'Aucune option trouvée',
+  },
 };
 
-export const multiSelectWithCustomClass = Template.bind({});
-multiSelectWithCustomClass.args = {
-  ...Default.args,
-  className: 'custom',
-  isSearchable: false,
+export const multiSelectWithCustomClass = {
+  args: {
+    ...Default.args,
+    className: 'custom',
+    isSearchable: false,
+  },
 };
 
-export const multiSelectWithId = Template.bind({});
-multiSelectWithId.args = {
-  ...Default.args,
-  label: undefined,
-  id: 'custom',
-  isSearchable: false,
+export const multiSelectWithId = {
+  args: {
+    ...Default.args,
+    label: undefined,
+    id: 'custom',
+    isSearchable: false,
+  },
 };
 
 const TemplateWithYield = (args) => ({
@@ -140,73 +217,3 @@ multiSelectWithYield.args = {
   placeholder: undefined,
   isSearchable: false,
 };
-
-export const argTypes = {
-  id: {
-    name: 'id',
-    description:
-      "Permet l'accessibilité du composant attribuant des ``for`` pour chaque entité. **⚠️ L'`id` est obligatoire que si le `label` n'est pas donné. ⚠️**",
-    type: { name: 'string' },
-  },
-  placeholder: {
-    name: 'placeholder',
-    description:
-      'Rempli le contenu interne du composant, `placeholder` pour `isSearchable` `true`, sinon rawContent du `button`',
-    type: { name: 'string', required: true },
-  },
-  label: {
-    name: 'label',
-    description:
-      "Donne un label au champ qui sera celui vocalisé par le lecteur d'écran. **⚠️ Le`label` est obligatoire que si l'`id` n'est pas donné. ⚠️**",
-    type: { name: 'string' },
-  },
-  screenReaderOnly: {
-    name: 'screenReaderOnly',
-    description: "Permet de cacher à l'écran le label tout en restant vocalisable",
-    type: { name: 'boolean', required: false },
-    table: { defaultValue: { summary: false } },
-  },
-  emptyMessage: {
-    name: 'emptyMessage',
-    description:
-      'Un intitulé de choix indisponible (dans le cas ou certains filtres seraient excluant)',
-    type: { name: 'string', required: true },
-  },
-  options: {
-    name: 'options',
-    description:
-      'Les options sont représentées par un tableau d‘objet contenant les propriétés ``value`` et ``label``. ``value`` doit être de type ``String`` pour être conforme au traitement des input value.',
-    type: { name: 'array', required: false },
-  },
-  onChange: {
-    name: 'onChange',
-    description: "Une fonction permettant d'effectuer une action à chaque sélection",
-    type: { required: true },
-  },
-  values: {
-    name: 'values',
-    description: 'Une pré-sélection peut être donnée au composant',
-    type: { name: 'array', required: false },
-  },
-  isSearchable: {
-    name: 'isSearchable',
-    description: 'Permet de rajouter une saisie utilisateur pour faciliter la recherche',
-    type: { name: 'boolean', required: false },
-    table: { defaultValue: { summary: false } },
-  },
-  strictSearch: {
-    name: 'strictSearch',
-    description:
-      'Permet de rendre sensible à la casse et au diacritiques lorsque ``isSearchable`` à ``true``',
-    type: { name: 'boolean', required: false },
-    table: { defaultValue: { summary: false } },
-  },
-  className: {
-    name: 'className',
-    description: 'Cette classe css permet de surcharger le css par défaut du composant.',
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-};

package/app/stories/{pix-pagination.stories.mdx → pix-pagination.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-pagination.stories.js';
+import * as ComponentStories from './pix-pagination.stories';
 
-<Meta title="Basics/Pagination" component="PixPagination" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # PixPagination
 
@@ -26,27 +26,19 @@ Sur mobile, le select qui permet de choisir le nombre d'élément à afficher su
 
 ## En français avec paramètres par défaut
 
-<Canvas>
-  <Story name="French" story={stories.French} height={110} />
-</Canvas>
+<Story of={ComponentStories.French} height={110} />
 
 ## En anglais avec le paramètre `pageOptions` custom
 
-<Canvas>
-  <Story name="English" story={stories.English} height={110} />
-</Canvas>
+<Story of={ComponentStories.English} height={110} />
 
 ## Avec une seule page
 
-<Canvas>
-  <Story name="OnePage" story={stories.OnePage} height={110} />
-</Canvas>
+<Story of={ComponentStories.OnePage} height={110} />
 
 ## Version condensée
 
-<Canvas>
-  <Story name="Condensed" story={stories.Condensed} height={140} />
-</Canvas>
+<Story of={ComponentStories.Condensed} height={110} />
 
 ## Usage
 
@@ -61,4 +53,4 @@ Sur mobile, le select qui permet de choisir le nombre d'élément à afficher su
 
 ## Arguments
 
-<ArgsTable story="French" />
+<ArgTypes />

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

@@ -1,7 +1,8 @@
 import { hbs } from 'ember-cli-htmlbars';
 
-export const Template = (args) => {
-  return {
+export default {
+  title: 'Basics/Pagination',
+  render: (args) => ({
     template: hbs`<PixPagination
   @pagination={{this.pagination}}
   @locale={{this.locale}}
@@ -9,97 +10,21 @@ export const Template = (args) => {
   @isCondensed={{this.isCondensed}}
 />`,
     context: args,
-  };
-};
-
-export const French = Template.bind({});
-French.args = {
-  pagination: {
-    page: 1,
-    pageSize: 5,
-    rowCount: 12,
-    pageCount: 3,
-  },
-  locale: 'fr',
-};
-
-export const English = Template.bind({});
-English.args = {
-  pagination: {
-    page: 2,
-    pageSize: 10,
-    rowCount: 12,
-    pageCount: 2,
-  },
-  pageOptions: [
-    { label: '10', value: 10 },
-    { label: '20', value: 20 },
-    { label: '50', value: 50 },
-    { label: '100', value: 100 },
-  ],
-  locale: 'en',
-};
-
-export const OnePage = Template.bind({});
-OnePage.args = {
-  pagination: {
-    page: 1,
-    pageSize: 10,
-    rowCount: 2,
-    pageCount: 1,
-  },
-  locale: 'fr',
-};
-
-export const Condensed = Template.bind({});
-Condensed.args = {
-  pagination: {
-    page: 1,
-    pageSize: 10,
-    rowCount: 2,
-    pageCount: 1,
-  },
-  locale: 'fr',
-  isCondensed: true,
-};
-
-// select attribute data type from https://storybook.js.org/docs/react/essentials/controls
-export const argTypes = {
-  pagination: {
-    name: 'pagination',
-    description:
-      "Un objet de pagination tel que l'on en trouve au retour de `knex-utils.fetchPage`",
-    type: { name: 'object', required: true },
-  },
-  pageOptions: {
-    name: 'pageOptions',
-    description: "Un tableau d'objet `options` pour configurer le select",
-    type: { name: 'array', required: false },
-    control: {
-      type: 'array',
-      value: [
-        {
-          label: '10',
-          value: 10,
-        },
-        {
-          label: '25',
-          value: 25,
-        },
-        {
-          label: '50',
-          value: 50,
-        },
-        {
-          label: '100',
-          value: 100,
-        },
-      ],
+  }),
+  argTypes: {
+    pagination: {
+      name: 'pagination',
+      description:
+        "Un objet de pagination tel que l'on en trouve au retour de `knex-utils.fetchPage`",
+      type: { name: 'object', required: true },
     },
-    table: {
-      type: { summary: 'array' },
-      defaultValue: {
-        summary: JSON.stringify([
+    pageOptions: {
+      name: 'pageOptions',
+      description: "Un tableau d'objet `options` pour configurer le select",
+      type: { name: 'array', required: false },
+      control: {
+        type: 'array',
+        value: [
           {
             label: '10',
             value: 10,
@@ -116,30 +41,108 @@ export const argTypes = {
             label: '100',
             value: 100,
           },
-        ]),
+        ],
       },
+      table: {
+        type: { summary: 'array' },
+        defaultValue: {
+          summary: JSON.stringify([
+            {
+              label: '10',
+              value: 10,
+            },
+            {
+              label: '25',
+              value: 25,
+            },
+            {
+              label: '50',
+              value: 50,
+            },
+            {
+              label: '100',
+              value: 100,
+            },
+          ]),
+        },
+      },
+    },
+    locale: {
+      name: 'locale',
+      description: "La langue de l'utilisateur",
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: ['fr', 'en'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'fr' },
+      },
+    },
+    isCondensed: {
+      name: 'isCondensed',
+      description:
+        "En desktop, retire le contrôle du nombre d'élèments par page pour simplifier l'usage",
+      type: { name: 'boolean', required: false },
+      control: { type: 'boolean' },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+};
+
+export const French = {
+  args: {
+    pagination: {
+      page: 1,
+      pageSize: 5,
+      rowCount: 12,
+      pageCount: 3,
     },
+    locale: 'fr',
   },
-  locale: {
-    name: 'locale',
-    description: "La langue de l'utilisateur",
-    type: { name: 'string', required: false },
-    control: { type: 'select' },
-    options: ['fr', 'en'],
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: 'fr' },
+};
+
+export const English = {
+  args: {
+    pagination: {
+      page: 2,
+      pageSize: 10,
+      rowCount: 12,
+      pageCount: 2,
     },
+    pageOptions: [
+      { label: '10', value: 10 },
+      { label: '20', value: 20 },
+      { label: '50', value: 50 },
+      { label: '100', value: 100 },
+    ],
+    locale: 'en',
   },
-  isCondensed: {
-    name: 'isCondensed',
-    description:
-      "En desktop, retire le contrôle du nombre d'élèments par page pour simplifier l'usage",
-    type: { name: 'boolean', required: false },
-    control: { type: 'boolean' },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: 'false' },
+};
+
+export const OnePage = {
+  args: {
+    pagination: {
+      page: 1,
+      pageSize: 10,
+      rowCount: 2,
+      pageCount: 1,
+    },
+    locale: 'fr',
+  },
+};
+
+export const Condensed = {
+  args: {
+    pagination: {
+      page: 1,
+      pageSize: 10,
+      rowCount: 2,
+      pageCount: 1,
     },
+    locale: 'fr',
+    isCondensed: true,
   },
 };

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' } },
-  },
-};