@1024pix/pix-ui 38.0.0 → 38.2.0

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

@@ -1,7 +1,120 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
-export const Template = (args) => {
+export default {
+  title: 'Form/Dropdown',
+  argTypes: {
+    options: {
+      name: 'options',
+      description:
+        'Les options sont représentées par un tableau d‘objet contenant les propriétés ``value`` et ``label``.',
+      type: { name: 'array', required: true },
+    },
+    selectedOption: {
+      name: 'selectedOption',
+      description: 'Option sélectionnée',
+      options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+      control: { type: 'select' },
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    onSelect: {
+      name: 'onSelect',
+      description: 'Fonction à appeler quand une option est sélectionnée.',
+      type: { required: true },
+      control: { disable: true },
+    },
+    isSearchable: {
+      name: 'isSearchable',
+      description:
+        "Rend le champ cherchable, le paramètre @searchPlaceholder devient requis pour l'accessibilité.",
+      control: { type: 'boolean' },
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    searchPlaceholder: {
+      name: 'searchPlaceholder',
+      description: 'Placeholder du champ de recherche. Requis si le menu est cherchable.',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    placeholder: {
+      name: 'placeholder',
+      description: "Un texte donnant une indication a l'utilisateur sur le choix des options.",
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    label: {
+      name: 'label',
+      description:
+        'Label du menu déroulant, le paramètre @id devient obligatoire avec ce paramètre.',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    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' },
+      },
+    },
+    id: {
+      name: 'id',
+      description: "L'id du label",
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    pageSize: {
+      name: 'pageSize',
+      description: "Le nombre d'élément à afficher dans la liste.",
+      type: { name: 'number', required: false },
+      table: {
+        type: { summary: 'number' },
+      },
+    },
+    clearLabel: {
+      name: 'clearLabel',
+      description: "Label de l'icône pour éliminer la sélection. Requis pour l'accessibilité.",
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    expandLabel: {
+      name: 'expandLabel',
+      description: "Label de l'icône pour ouvrir le menu déroulant. Requis pour l'accessibilité.",
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    collapseLabel: {
+      name: 'collapseLabel',
+      description: "Label de l'icône pour réduire le menu déroulant. Requis pour l'accessibilité.",
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+};
+
+const Template = (args) => {
   return {
     template: hbs`<div style='width: 300px;'>
   <PixDropdown
@@ -78,112 +191,3 @@ paginatedDropdown.args = {
     label: `${index}abc`,
   })),
 };
-
-export const argTypes = {
-  options: {
-    name: 'options',
-    description:
-      'Les options sont représentées par un tableau d‘objet contenant les propriétés ``value`` et ``label``.',
-    type: { name: 'array', required: true },
-  },
-  selectedOption: {
-    name: 'selectedOption',
-    description: 'Option sélectionnée',
-    options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
-    control: { type: 'select' },
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  onSelect: {
-    name: 'onSelect',
-    description: 'Fonction à appeler quand une option est sélectionnée.',
-    type: { required: true },
-    control: { disable: true },
-  },
-  isSearchable: {
-    name: 'isSearchable',
-    description:
-      "Rend le champ cherchable, le paramètre @searchPlaceholder devient requis pour l'accessibilité.",
-    control: { type: 'boolean' },
-    type: { name: 'boolean', required: false },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-  searchPlaceholder: {
-    name: 'searchPlaceholder',
-    description: 'Placeholder du champ de recherche. Requis si le menu est cherchable.',
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  placeholder: {
-    name: 'placeholder',
-    description: "Un texte donnant une indication a l'utilisateur sur le choix des options.",
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  label: {
-    name: 'label',
-    description: 'Label du menu déroulant, le paramètre @id devient obligatoire avec ce paramètre.',
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  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' },
-    },
-  },
-  id: {
-    name: 'id',
-    description: "L'id du label",
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  pageSize: {
-    name: 'pageSize',
-    description: "Le nombre d'élément à afficher dans la liste.",
-    type: { name: 'number', required: false },
-    table: {
-      type: { summary: 'number' },
-    },
-  },
-  clearLabel: {
-    name: 'clearLabel',
-    description: "Label de l'icône pour éliminer la sélection. Requis pour l'accessibilité.",
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  expandLabel: {
-    name: 'expandLabel',
-    description: "Label de l'icône pour ouvrir le menu déroulant. Requis pour l'accessibilité.",
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  collapseLabel: {
-    name: 'collapseLabel',
-    description: "Label de l'icône pour réduire le menu déroulant. Requis pour l'accessibilité.",
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-};

package/app/stories/{pix-filter-banner.stories.mdx → pix-filter-banner.mdx}

@@ -1,7 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import * as stories from './pix-filter-banner.stories.js';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-filter-banner.stories.js';
 
-<Meta title="Form/Filter banner" component="PixFilterBanner" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # Pix Filter Banner
 
@@ -9,9 +9,7 @@ Une `FilterBanner` permet de wrapper les éléments de filtres (`Select`, `Multi
 
 > Il est possible de surcharger le style d'une `<PixFilterBanner>` via l'attribut `class` ainsi que de passer n'importe quel attribut sur sa `div` wrapper (par exemple, un `aria-label`)
 
-<Canvas>
-  <Story name="Filter banner" story={stories.filterBanner} height={80} />
-</Canvas>
+<Story of={ComponentStories.filterBanner} height={80} />
 
 ## Usage
 
@@ -25,4 +23,4 @@ Une `FilterBanner` permet de wrapper les éléments de filtres (`Select`, `Multi
 
 ## Arguments
 
-<ArgsTable story="Filter banner" />
+<ArgTypes of={ComponentStories} />

package/app/stories/pix-filter-banner.stories.js

@@ -1,6 +1,42 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
+export default {
+  title: 'Form/Filter banner',
+  argTypes: {
+    title: {
+      name: 'title',
+      description: 'Titre du filtre',
+      type: { name: 'string', required: false },
+    },
+    details: {
+      name: 'details',
+      description: 'Détails du filtre',
+      type: { name: 'string', required: false },
+    },
+    clearFiltersLabel: {
+      name: 'clearFiltersLabel',
+      description: 'libellé du bouton',
+      type: { name: 'string', required: false },
+    },
+    onClearFilters: {
+      name: 'onClearFilters',
+      description: 'fonction à appeler pour déclencher l’action de suppression des filtres',
+      type: { required: false },
+    },
+    isClearFilterButtonDisabled: {
+      name: 'isClearFilterButtonDisabled',
+      description: 'Désactiver le button de la suppresion des filtres',
+      type: { name: 'boolean', required: true },
+      control: { type: 'boolean' },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+  },
+};
+
 export const filterBanner = (args) => {
   return {
     template: hbs`<PixFilterBanner
@@ -28,36 +64,3 @@ filterBanner.args = {
   onChange: action('select-onchange'),
   onClearFilters: action('onClearFilters'),
 };
-
-export const argTypes = {
-  title: {
-    name: 'title',
-    description: 'Titre du filtre',
-    type: { name: 'string', required: false },
-  },
-  details: {
-    name: 'details',
-    description: 'Détails du filtre',
-    type: { name: 'string', required: false },
-  },
-  clearFiltersLabel: {
-    name: 'clearFiltersLabel',
-    description: 'libellé du bouton',
-    type: { name: 'string', required: false },
-  },
-  onClearFilters: {
-    name: 'onClearFilters',
-    description: 'fonction à appeler pour déclencher l’action de suppression des filtres',
-    type: { required: false },
-  },
-  isClearFilterButtonDisabled: {
-    name: 'isClearFilterButtonDisabled',
-    description: 'Désactiver le button de la suppresion des filtres',
-    type: { name: 'boolean', required: true },
-    control: { type: 'boolean' },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-};

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

@@ -1,11 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import * as stories from './pix-filterable-and-searchable-select.stories.js';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-filterable-and-searchable-select.stories.js';
 
-<Meta
-  title="Form/Filterable and searchable select"
-  component="PixFilterableAndSearchableSelect"
-  argTypes={stories.argTypes}
-/>
+<Meta of={ComponentStories} />
 
 # Pix Filterable and searchable select
 
@@ -23,21 +19,15 @@ Les options sont représentées par un tableau d'objet contenant les propriété
 
 ## Default
 
-<Canvas>
-  <Story name="Default" story={stories.Default} />
-</Canvas>
+<Story of={ComponentStories.Default} height={400}/>
 
 ## Searchable
 
-<Canvas>
-  <Story name="Searchable" story={stories.Searchable} />
-</Canvas>
+<Story of={ComponentStories.Searchable} height={400}/>
 
 ## With labels only for screenReaders
 
-<Canvas>
-  <Story name="WithLabelsOnlyForScreenReaders" story={stories.WithLabelsOnlyForScreenReaders} />
-</Canvas>
+<Story of={ComponentStories.WithLabelsOnlyForScreenReaders} height={400}/>
 
 ## Usage
 
@@ -68,4 +58,4 @@ Les options sont représentées par un tableau d'objet contenant les propriété
 
 ## Arguments
 
-<ArgsTable story="Default" />
+<ArgTypes of={ComponentStories} />

package/app/stories/pix-filterable-and-searchable-select.stories.js

@@ -1,6 +1,142 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
+export default {
+  title: 'Form/Filterable and searchable select',
+  argTypes: {
+    label: {
+      name: 'label',
+      description: 'Label du composant global.',
+      type: { name: 'string', required: true },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    subLabel: {
+      name: 'subLabel',
+      description: 'Sous Label du composant global qui donne une description.',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    options: {
+      name: 'options',
+      description:
+        'Les options sont représentées par un tableau d‘objet contenant les propriétés ``value``, ``label`` et ``category``. Ce dernier étant optionnel.',
+      type: { name: 'array', required: true },
+    },
+    value: {
+      name: 'value',
+      description: 'Option sélectionnée',
+      options: ['1', '2', '3', '4', '5', '6'],
+      control: { type: 'select' },
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    onChange: {
+      name: 'onChange',
+      description: 'Fonction à appeler quand une option est sélectionnée.',
+      type: { required: true },
+      control: { disable: true },
+    },
+    isSearchable: {
+      name: 'isSearchable',
+      description: 'Rend le champ du select cherchable',
+      control: { type: 'boolean' },
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    screenReaderOnly: {
+      name: 'screenReaderOnly',
+      description: "Permet de rendre le label lisible uniquement par les lecteurs d'écran",
+      control: { type: 'boolean' },
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    placeholder: {
+      name: 'placeholder',
+      description: "Placeholder du select. Il sert aussi de label pour l'option par défaut",
+      type: { name: 'string', required: true },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    hideDefaultOption: {
+      name: 'hideDefaultOption',
+      description: "Cache l'option par défaut du select",
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    searchLabel: {
+      name: 'searchLabel',
+      description:
+        'Label de la recherche dans le menu déroulant du select. **⚠️ Obligatoire uniquement si le `isSearchable` est à true. ⚠️**',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    searchPlaceholder: {
+      name: 'searchPlaceholder',
+      description:
+        'Placeholder de la recherche dans le menu déroulant du select.  **⚠️ Obligatoire uniquement si le `isSearchable` est à true. ⚠️**',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    emptySearchMessage: {
+      name: 'emptySearchMessage',
+      description:
+        "Message affiché si la recherche dans le select ne retourne pas d'options.  **⚠️ Obligatoire uniquement si le `isSearchable` est à true. ⚠️**",
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    requiredText: {
+      name: 'requiredText',
+      description: "Affiche l'astérisque au label et ajoute sa signification",
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    errorMessage: {
+      name: 'errorMessage',
+      description: 'Message affiché si une erreur survient',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    categoriesPlaceholder: {
+      name: 'categoriesPlaceholder',
+      description:
+        'Pour le filtre de categories, cela rempli le contenu interne du composant, `categoriesPlaceholder` pour `isSearchable` `true`, sinon rawContent du `button`',
+      type: { name: 'string', required: true },
+    },
+    categoriesLabel: {
+      name: 'categoriesLabel',
+      description:
+        "Pour le composant de filtre sur les catégories, cela donne un label au champ qui sera celui vocalisé par le lecteur d'écran",
+      type: { name: 'string', required: true },
+    },
+  },
+};
+
 const Template = (args) => {
   return {
     template: hbs`
@@ -53,136 +189,3 @@ WithLabelsOnlyForScreenReaders.args = {
   screenReaderOnly: true,
   isSearchable: true,
 };
-
-export const argTypes = {
-  label: {
-    name: 'label',
-    description: 'Label du composant global.',
-    type: { name: 'string', required: true },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  subLabel: {
-    name: 'subLabel',
-    description: 'Sous Label du composant global qui donne une description.',
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  options: {
-    name: 'options',
-    description:
-      'Les options sont représentées par un tableau d‘objet contenant les propriétés ``value``, ``label`` et ``category``. Ce dernier étant optionnel.',
-    type: { name: 'array', required: true },
-  },
-  value: {
-    name: 'value',
-    description: 'Option sélectionnée',
-    options: ['1', '2', '3', '4', '5', '6'],
-    control: { type: 'select' },
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  onChange: {
-    name: 'onChange',
-    description: 'Fonction à appeler quand une option est sélectionnée.',
-    type: { required: true },
-    control: { disable: true },
-  },
-  isSearchable: {
-    name: 'isSearchable',
-    description: 'Rend le champ du select cherchable',
-    control: { type: 'boolean' },
-    type: { name: 'boolean', required: false },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-  screenReaderOnly: {
-    name: 'screenReaderOnly',
-    description: "Permet de rendre le label lisible uniquement par les lecteurs d'écran",
-    control: { type: 'boolean' },
-    type: { name: 'boolean', required: false },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-  placeholder: {
-    name: 'placeholder',
-    description: "Placeholder du select. Il sert aussi de label pour l'option par défaut",
-    type: { name: 'string', required: true },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  hideDefaultOption: {
-    name: 'hideDefaultOption',
-    description: "Cache l'option par défaut du select",
-    type: { name: 'boolean', required: false },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-  searchLabel: {
-    name: 'searchLabel',
-    description:
-      'Label de la recherche dans le menu déroulant du select. **⚠️ Obligatoire uniquement si le `isSearchable` est à true. ⚠️**',
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  searchPlaceholder: {
-    name: 'searchPlaceholder',
-    description:
-      'Placeholder de la recherche dans le menu déroulant du select.  **⚠️ Obligatoire uniquement si le `isSearchable` est à true. ⚠️**',
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  emptySearchMessage: {
-    name: 'emptySearchMessage',
-    description:
-      "Message affiché si la recherche dans le select ne retourne pas d'options.  **⚠️ Obligatoire uniquement si le `isSearchable` est à true. ⚠️**",
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  requiredText: {
-    name: 'requiredText',
-    description: "Affiche l'astérisque au label et ajoute sa signification",
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  errorMessage: {
-    name: 'errorMessage',
-    description: 'Message affiché si une erreur survient',
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  categoriesPlaceholder: {
-    name: 'categoriesPlaceholder',
-    description:
-      'Pour le filtre de categories, cela rempli le contenu interne du composant, `categoriesPlaceholder` pour `isSearchable` `true`, sinon rawContent du `button`',
-    type: { name: 'string', required: true },
-  },
-  categoriesLabel: {
-    name: 'categoriesLabel',
-    description:
-      "Pour le composant de filtre sur les catégories, cela donne un label au champ qui sera celui vocalisé par le lecteur d'écran",
-    type: { name: 'string', required: true },
-  },
-};