@1024pix/pix-ui 37.0.0 → 38.1.0

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

package/app/stories/{pix-icon-button.stories.mdx → pix-icon-button.mdx}

@@ -1,7 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import * as stories from './pix-icon-button.stories.js';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-icon-button.stories.js';
 
-<Meta title="Basics/Icon button" component="PixIconButton" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # Pix Icon Button
 
@@ -11,33 +11,25 @@ Le PixIconButton permet de créer un bouton contenant une icône font-awesome.
 
 Le bouton en version big et sans fond grisé.
 
-<Canvas>
-  <Story name="Default" story={stories.Default} height={60} />
-</Canvas>
+<Story of={ComponentStories.Default} height={60} />
 
 ## Small
 
 Le bouton en version small.
 
-<Canvas>
-  <Story name="Small" story={stories.small} height={60} />
-</Canvas>
+<Story of={ComponentStories.small} height={60} />
 
 ## With Background
 
 Le bouton avec le fond grisé.
 
-<Canvas>
-  <Story name="With Background" story={stories.withBackground} height={60} />
-</Canvas>
+<Story of={ComponentStories.withBackground} height={60} />
 
 ## Disabled
 
 Exemple avec le bouton disabled
 
-<Canvas>
-  <Story name="Disabled" story={stories.disabled} height={60} />
-</Canvas>
+<Story of={ComponentStories.disabled} height={60} />
 
 ## Accessibilité / aria-label
 
@@ -89,4 +81,4 @@ Bouton d'action
 />
 ```
 
-<ArgsTable story="Default" />
+<ArgTypes of={ComponentStories} />

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

@@ -1,6 +1,66 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
+export default {
+  title: 'Basics/Icon button',
+  argTypes: {
+    ariaLabel: {
+      name: 'ariaLabel',
+      description: "l'action du bouton, pour l'accessibilité",
+      type: { name: 'string', required: true },
+    },
+    icon: {
+      name: 'icon',
+      description: 'Icône font-awesome',
+      type: { name: 'string', required: true },
+      table: { defaultValue: { summary: 'plus' } },
+    },
+    iconPrefix: {
+      name: 'iconPrefix',
+      description: "Prefix de l'icône font-awesome",
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: ['far', 'fas'],
+    },
+    triggerAction: {
+      name: 'triggerAction',
+      description: 'Fonction à appeler au clic du bouton',
+      type: { required: true },
+    },
+    withBackground: {
+      name: 'withBackground',
+      description: 'Affichage du fond grisé',
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    size: {
+      name: 'size',
+      description: 'Size: `small`, `big`',
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: ['big', 'small'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'big' },
+      },
+    },
+    color: {
+      name: 'color',
+      description: ' ⚠️ **Propriété dépréciée** ⚠️ Color: `light-grey`, `dark-grey`',
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: ['light-grey', 'dark-grey'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'light-grey' },
+      },
+    },
+  },
+};
+
 const Template = (args) => {
   return {
     template: hbs`<PixIconButton
@@ -46,60 +106,3 @@ disabled.args = {
   disabled: true,
   triggerAction,
 };
-
-export const argTypes = {
-  ariaLabel: {
-    name: 'ariaLabel',
-    description: "l'action du bouton, pour l'accessibilité",
-    type: { name: 'string', required: true },
-  },
-  icon: {
-    name: 'icon',
-    description: 'Icône font-awesome',
-    type: { name: 'string', required: true },
-    table: { defaultValue: { summary: 'plus' } },
-  },
-  iconPrefix: {
-    name: 'iconPrefix',
-    description: "Prefix de l'icône font-awesome",
-    type: { name: 'string', required: false },
-    control: { type: 'select' },
-    options: ['far', 'fas'],
-  },
-  triggerAction: {
-    name: 'triggerAction',
-    description: 'Fonction à appeler au clic du bouton',
-    type: { required: true },
-  },
-  withBackground: {
-    name: 'withBackground',
-    description: 'Affichage du fond grisé',
-    type: { name: 'boolean', required: false },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: 'false' },
-    },
-  },
-  size: {
-    name: 'size',
-    description: 'Size: `small`, `big`',
-    type: { name: 'string', required: false },
-    control: { type: 'select' },
-    options: ['big', 'small'],
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: 'big' },
-    },
-  },
-  color: {
-    name: 'color',
-    description: ' ⚠️ **Propriété dépréciée** ⚠️ Color: `light-grey`, `dark-grey`',
-    type: { name: 'string', required: false },
-    control: { type: 'select' },
-    options: ['light-grey', 'dark-grey'],
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: 'light-grey' },
-    },
-  },
-};

package/app/stories/{pix-indicator-card.stories.mdx → pix-indicator-card.mdx}

@@ -1,7 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import * as stories from './pix-indicator-card.stories.js';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-indicator-card.stories.js';
 
-<Meta title="Others/Indicator Card" component="PixIndicatorCard" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # Pix Indicator Card
 
@@ -13,15 +13,11 @@ Une carte est un bloc en 2 parties dont les bords sont arrondis et ayant une omb
 
 ## Default
 
-<Canvas>
-  <Story name="Default" story={stories.Default} height={200} />
-</Canvas>
+<Story of={ComponentStories.Default} height={200} />
 
 ## WithIconPrefix
 
-<Canvas>
-  <Story name="WithIconPrefix" story={stories.withIconPrefix} height={200} />
-</Canvas>
+<Story of={ComponentStories.withIconPrefix} height={200} />
 
 ## Usage
 
@@ -42,4 +38,4 @@ Une carte est un bloc en 2 parties dont les bords sont arrondis et ayant une omb
     </PixIndicatorCard>
 ```
 
-<ArgsTable story="Default" />
+<ArgTypes of={ComponentStories}/>

package/app/stories/pix-indicator-card.stories.js

@@ -1,5 +1,42 @@
 import { hbs } from 'ember-cli-htmlbars';
 
+export default {
+  title: 'Others/Indicator Card',
+  argTypes: {
+    title: {
+      name: 'Title',
+      description: 'Titre de la carte',
+    },
+    color: {
+      name: 'Color',
+      description: "Couleur de l'icone",
+      table: { defaultValue: { summary: 'grey' } },
+      control: { type: 'select' },
+      options: ['grey', 'blue', 'green', 'purple'],
+    },
+    icon: {
+      name: 'Icon',
+      description: "Icone dans l'encart",
+    },
+    iconPrefix: {
+      name: 'IconPrefix',
+      description:
+        "Préfixe pour l'icone dans l'encart - permet d'utiliser une variation de l'icone font awesome différente de celle par défaut.",
+      table: { defaultValue: { summary: 'fas' } },
+      control: { type: 'select' },
+      options: ['far', 'fas'],
+    },
+    value: {
+      name: 'Value',
+      description: 'Contenu principal',
+    },
+    info: {
+      name: 'Info',
+      description: "Contenu de la bulle d'info",
+    },
+  },
+};
+
 const Template = (args) => {
   return {
     template: hbs`
@@ -39,37 +76,3 @@ withIconPrefix.args = {
   ...Default.args,
   iconPrefix: 'far',
 };
-
-export const argTypes = {
-  title: {
-    name: 'Title',
-    description: 'Titre de la carte',
-  },
-  color: {
-    name: 'Color',
-    description: "Couleur de l'icone",
-    table: { defaultValue: { summary: 'grey' } },
-    control: { type: 'select' },
-    options: ['grey', 'blue', 'green', 'purple'],
-  },
-  icon: {
-    name: 'Icon',
-    description: "Icone dans l'encart",
-  },
-  iconPrefix: {
-    name: 'IconPrefix',
-    description:
-      "Préfixe pour l'icone dans l'encart - permet d'utiliser une variation de l'icone font awesome différente de celle par défaut.",
-    table: { defaultValue: { summary: 'fas' } },
-    control: { type: 'select' },
-    options: ['far', 'fas'],
-  },
-  value: {
-    name: 'Value',
-    description: 'Contenu principal',
-  },
-  info: {
-    name: 'Info',
-    description: "Contenu de la bulle d'info",
-  },
-};

package/app/stories/{pix-input-code.stories.mdx → pix-input-code.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-input-code.stories.js';
+import * as ComponentStories from './pix-input-code.stories.js';
 
-<Meta title="Form/Inputs/Code" component="PixInputCode" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # Pix Input Code
 
@@ -18,9 +18,7 @@ Le composant peut être numérique ou alphanumérique précisé avec la proprié
 
 ## Default
 
-<Canvas>
-  <Story name="Default" story={stories.Default} height={70} />
-</Canvas>
+<Story of={ComponentStories.Default} height={70} />
 
 ## Usage
 
@@ -32,4 +30,4 @@ email" @explanationOfUse="Détails d'utilisation du PixInputCode" @numInputs={{6
 
 ## Arguments
 
-<ArgsTable story="Default" />
+<ArgTypes story="Default" />