@1024pix/pix-ui 37.0.0 → 38.1.0

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

@@ -1,5 +1,74 @@
 import { hbs } from 'ember-cli-htmlbars';
 
+export default {
+  title: 'Form/Checkbox',
+  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 de l'input",
+    },
+    class: {
+      name: 'class',
+      description: "Permet d'ajouter une classe au parent du composant.",
+      type: { name: 'string' },
+    },
+    screenReaderOnly: {
+      name: 'screenReaderOnly',
+      description:
+        "Permet de ne pas afficher le label à l'écran. Sert à garder un label qui sera lisible par les lecteurs d'écran.",
+      type: { name: 'boolean', required: true },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    isIndeterminate: {
+      name: 'isIndeterminate',
+      description:
+        "Rendre la checkbox indéterminée, état indiquant que la/les case(s) n'est/ne sont ni cochée(s) ni décochée(s) (exemple: une checkbox parente indiquant la sélection partielle de plusieurs checkbox enfants)",
+      type: { name: 'boolean', required: true },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    labelSize: {
+      name: 'labelSize',
+      description: 'Correspond à la taille de la police du label.',
+      type: { name: 'string', required: false },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+      control: { type: 'select' },
+      options: ['small', 'default', 'large'],
+    },
+    checked: {
+      name: 'checked',
+      description: 'Permet de cocher la checkbox',
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      name: 'disabled',
+      description: 'Permet de désactiver la checkbox',
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+  },
+};
+
 export const Template = (args) => {
   return {
     template: hbs`
@@ -105,69 +174,3 @@ export const multiple = MultipleTemplate.bind({});
 multiple.args = {
   label: 'Recevoir la newsletter',
 };
-
-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 de l'input",
-  },
-  class: {
-    name: 'class',
-    description: "Permet d'ajouter une classe au parent du composant.",
-    type: { name: 'string' },
-  },
-  screenReaderOnly: {
-    name: 'screenReaderOnly',
-    description:
-      "Permet de ne pas afficher le label à l'écran. Sert à garder un label qui sera lisible par les lecteurs d'écran.",
-    type: { name: 'boolean', required: true },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-  isIndeterminate: {
-    name: 'isIndeterminate',
-    description:
-      "Rendre la checkbox indéterminée, état indiquant que la/les case(s) n'est/ne sont ni cochée(s) ni décochée(s) (exemple: une checkbox parente indiquant la sélection partielle de plusieurs checkbox enfants)",
-    type: { name: 'boolean', required: true },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-  labelSize: {
-    name: 'labelSize',
-    description: 'Correspond à la taille de la police du label.',
-    type: { name: 'string', required: false },
-    table: {
-      defaultValue: { summary: 'default' },
-    },
-    control: { type: 'select' },
-    options: ['small', 'default', 'large'],
-  },
-  checked: {
-    name: 'checked',
-    description: 'Permet de cocher la checkbox',
-    type: { name: 'boolean', required: false },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-  disabled: {
-    name: 'disabled',
-    description: 'Permet de désactiver la checkbox',
-    type: { name: 'boolean', required: false },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-};

package/app/stories/pix-collapsible.mdx

@@ -0,0 +1,31 @@
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-collapsible.stories';
+
+<Meta of={ComponentStories} />
+
+# PixCollapsible
+
+Un `PixCollapsible` est un élément comprenant un libellé et un contenu.
+Par défaut le contenu est masqué et cliquer sur le libellé permet de montrer le contenu du `PixCollapsible`.
+
+> Il est possible de cumuler les `PixCollapsible` de sorte à former un accordéon, il suffit de les mettre dans une même div parente.
+
+
+<Story of={ComponentStories.collapsible} height={150} />
+
+<Story of={ComponentStories.collapsibleWithBlockTitle} height={150} />
+
+<Story of={ComponentStories.multipleCollapsible} height={260} />
+
+
+## Usage
+
+```html
+<PixCollapsible @title="Titre du contenu à dérouler en cliquant" @iconTitle="user">
+  <p>Contenu du PixCollapsible</p>
+</PixCollapsible>
+```
+
+## Arguments
+
+<ArgTypes of={ComponentStories} />

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

@@ -1,5 +1,21 @@
 import { hbs } from 'ember-cli-htmlbars';
 
+export default {
+  title: 'Others/Collapsible',
+  argTypes: {
+    title: {
+      name: 'title',
+      description: 'Intitulé du contenu du PixCollapsible',
+      type: { name: 'string', required: true },
+    },
+    titleIcon: {
+      name: 'titleIcon',
+      description: "Ajoute l'icône donnée en paramètre avant le titre du PixCollapsible",
+      type: { name: 'string', required: false },
+    },
+  },
+};
+
 const Template = (args) => {
   return {
     template: hbs`<PixCollapsible @title={{this.title}} @titleIcon={{this.titleIcon}}>
@@ -47,16 +63,3 @@ export const multipleCollapsible = (args) => {
     context: args,
   };
 };
-
-export const argTypes = {
-  title: {
-    name: 'title',
-    description: 'Intitulé du contenu du PixCollapsible',
-    type: { name: 'string', required: true },
-  },
-  titleIcon: {
-    name: 'titleIcon',
-    description: "Ajoute l'icône donnée en paramètre avant le titre du PixCollapsible",
-    type: { name: 'string', required: false },
-  },
-};

package/app/stories/{pix-dropdown.stories.mdx → pix-dropdown.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-dropdown.stories';
 
-import * as stories from './pix-dropdown.stories.js';
-
-<Meta title="Form/Dropdown" component="PixDropdown" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # Pix Dropdown
 
@@ -18,27 +17,20 @@ Les options sont représentées par un tableau d'objet contenant les propriété
 
 ## Default
 
-<Canvas>
-  <Story name="Dropdown" story={stories.Default} height={200} />
-</Canvas>
+<Story of={ComponentStories.Default} height={200} />
 
 ## With label
 
-<Canvas>
-  <Story story={stories.withLabel} height={200} />
-</Canvas>
+<Story of={ComponentStories.withLabel} height={200} />
 
 ## Searchable
 
-<Canvas>
-  <Story name="Searchable" story={stories.searchableDropdown} height={200} />
-</Canvas>
+<Story of={ComponentStories.searchableDropdown} height={200} />
+
 
 ## Infinite scroll
 
-<Canvas>
-  <Story name="Paginated" story={stories.paginatedDropdown} height={200} />
-</Canvas>
+<Story of={ComponentStories.paginatedDropdown} height={200} />
 
 ## Usage
 
@@ -62,4 +54,4 @@ Les options sont représentées par un tableau d'objet contenant les propriété
 
 ## Arguments
 
-<ArgsTable story="Dropdown" />
+<ArgTypes of={ComponentStories} />

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} />