@1024pix/pix-ui 38.0.0 → 38.2.0

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

@@ -1,6 +1,177 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
+export default {
+  title: 'Form/Select',
+  argTypes: {
+    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 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 },
+      },
+    },
+    id: {
+      name: 'id',
+      description:
+        "Un identifiant unique placé sur le composant. **⚠️ L'`id` est obligatoire que si le `label` n'est pas donné. ⚠️**",
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    label: {
+      name: 'label',
+      description:
+        "Label du menu déroulant. ** ⚠️ Le `label` est obligatoire que si l'`id` n'est pas donné. ⚠️ **",
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    subLabel: {
+      name: 'subLabel',
+      description: 'Sous Label explicatif du menu déroulant',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    placeholder: {
+      name: 'placeholder',
+      description: "Placeholder du menu déroulant. 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",
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        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' },
+      },
+    },
+    searchLabel: {
+      name: 'searchLabel',
+      description:
+        'Label de la recherche dans le menu déroulant. **⚠️ Le `searchLabel` est obligatoire que si le `isSearchable` à `true`. ⚠️**',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    searchPlaceholder: {
+      name: 'searchPlaceholder',
+      description:
+        'Placeholder de la recherche dans le menu déroulant. **⚠️ Le `searchPlaceholder` est obligatoire que si le `isSearchable` à `true`. ⚠️**',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    emptySearchMessage: {
+      name: 'emptySearchMessage',
+      description:
+        "Message affiché si la recherche ne retourne pas d'options. **⚠️ Le `emptySearchMessage` est obligatoire que si le `isSearchable` à `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' },
+      },
+    },
+    isDisabled: {
+      name: 'isDisabled',
+      description: "Permet de désactiver l'affichage des options possible",
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: false },
+      },
+    },
+    placement: {
+      name: 'placement',
+      description:
+        "Permet de placer la dropdown du select par rapport à son bouton. Par défaut, cela s'adapte tout seul.",
+      type: { name: 'string', required: false },
+      options: ['bottom', 'top', 'left', 'right'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: null },
+      },
+    },
+    icon: {
+      name: 'icon',
+      description:
+        "Permet l'affichage d'une icône FontAwesome avant le placeholder ou le label de l'option sélectionnée.",
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: null },
+      },
+    },
+  },
+};
+
 export const Template = (args) => {
   return {
     template: hbs`
@@ -231,171 +402,3 @@ WithIcon.args = {
   ],
   value: 'fr',
 };
-
-export const argTypes = {
-  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 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 },
-    },
-  },
-  id: {
-    name: 'id',
-    description:
-      "Un identifiant unique placé sur le composant. **⚠️ L'`id` est obligatoire que si le `label` n'est pas donné. ⚠️**",
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  label: {
-    name: 'label',
-    description:
-      "Label du menu déroulant. ** ⚠️ Le `label` est obligatoire que si l'`id` n'est pas donné. ⚠️ **",
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  subLabel: {
-    name: 'subLabel',
-    description: 'Sous Label explicatif du menu déroulant',
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  placeholder: {
-    name: 'placeholder',
-    description: "Placeholder du menu déroulant. 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",
-    type: { name: 'boolean', required: false },
-    table: {
-      type: { summary: 'boolean' },
-      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' },
-    },
-  },
-  searchLabel: {
-    name: 'searchLabel',
-    description:
-      'Label de la recherche dans le menu déroulant. **⚠️ Le `searchLabel` est obligatoire que si le `isSearchable` à `true`. ⚠️**',
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  searchPlaceholder: {
-    name: 'searchPlaceholder',
-    description:
-      'Placeholder de la recherche dans le menu déroulant. **⚠️ Le `searchPlaceholder` est obligatoire que si le `isSearchable` à `true`. ⚠️**',
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  emptySearchMessage: {
-    name: 'emptySearchMessage',
-    description:
-      "Message affiché si la recherche ne retourne pas d'options. **⚠️ Le `emptySearchMessage` est obligatoire que si le `isSearchable` à `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' },
-    },
-  },
-  isDisabled: {
-    name: 'isDisabled',
-    description: "Permet de désactiver l'affichage des options possible",
-    type: { name: 'boolean', required: false },
-    table: {
-      type: { summary: false },
-    },
-  },
-  placement: {
-    name: 'placement',
-    description:
-      "Permet de placer la dropdown du select par rapport à son bouton. Par défaut, cela s'adapte tout seul.",
-    type: { name: 'string', required: false },
-    options: ['bottom', 'top', 'left', 'right'],
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: null },
-    },
-  },
-  icon: {
-    name: 'icon',
-    description:
-      "Permet l'affichage d'une icône FontAwesome avant le placeholder ou le label de l'option sélectionnée.",
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: null },
-    },
-  },
-};

package/app/stories/pix-selectable-tag.mdx

@@ -0,0 +1,37 @@
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+
+import * as ComponentStories from './pix-selectable-tag.stories.js';
+
+<Meta of={ComponentStories} />
+
+# Pix Selectable Tag
+
+Un tag permettant de sélectionner ou non la valeur.
+
+## Default
+
+<Story of={ComponentStories.selectableTagDefault} height={60} />
+
+## Selected
+
+<Story of={ComponentStories.selectableTagSelected} height={60} />
+
+## Multiple tags
+
+<Story of={ComponentStories.selectableTagMultiple} height={60} />
+
+## Usage
+
+```html
+Par défaut :
+<PixSelectableTag> @label={{label}} @id={{id}} @onChange={{onChange}} </PixSelectableTag>
+
+Tag Sélectionné :
+<PixSelectableTag>
+  @label={{label}} @id={{id}} @onChange={{onChange}} @checked={{true}}
+</PixSelectableTag>
+```
+
+## Arguments
+
+<ArgTypes of={ComponentStories} />

package/app/stories/pix-selectable-tag.stories.js

@@ -1,5 +1,42 @@
 import { hbs } from 'ember-cli-htmlbars';
 
+export default {
+  title: 'basics/Tag/Selectable Tag',
+  argTypes: {
+    label: {
+      name: 'label',
+      description: 'Le label du tag sélectionnable',
+      type: { name: 'string', required: true },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    id: {
+      name: 'id',
+      description: "L'id du tag sélectionnable",
+      type: { name: 'string', required: true },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    onChange: {
+      name: 'onChange',
+      description: 'Fonction à appeler si le tag est sélectionné',
+      type: { required: true },
+      control: { disable: true },
+    },
+    checked: {
+      name: 'checked',
+      description: 'Indiquez si le tag doit être coché',
+      type: { name: 'boolean', required: true },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+  },
+};
+
 export const selectableTagDefault = (args) => {
   return {
     template: hbs`<PixSelectableTag @label='non sélectionné' @id='123' @onChange={{this.onChange}} @checked={{false}} />`,
@@ -24,37 +61,3 @@ export const selectableTagMultiple = (args) => {
     context: args,
   };
 };
-
-export const argTypes = {
-  label: {
-    name: 'label',
-    description: 'Le label du tag sélectionnable',
-    type: { name: 'string', required: true },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  id: {
-    name: 'id',
-    description: "L'id du tag sélectionnable",
-    type: { name: 'string', required: true },
-    table: {
-      type: { summary: 'string' },
-    },
-  },
-  onChange: {
-    name: 'onChange',
-    description: 'Fonction à appeler si le tag est sélectionné',
-    type: { required: true },
-    control: { disable: true },
-  },
-  checked: {
-    name: 'checked',
-    description: 'Indiquez si le tag doit être coché',
-    type: { name: 'boolean', required: true },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-};

package/app/stories/{pix-sidebar.stories.mdx → pix-sidebar.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-sidebar.stories.js';
+import * as ComponentStories from './pix-sidebar.stories.js';
 
-<Meta title="Basics/Sidebar" component="PixSidebar" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # PixSidebar
 
@@ -15,9 +15,7 @@ Ce composant possède deux `yield` :
 - `:footer` peut également accueillir tout type de contenu HTML, mais est destiné aux boutons permettant d'interagir
   avec la sidebar, ce qui permettra de les positionner correctement dans tous les cas de figure.
 
-<Canvas>
-  <Story name="Default" story={stories.Default} height={500} />
-</Canvas>
+  <Story of={ComponentStories.Default} height={500} />
 
 ## Usage
 
@@ -48,4 +46,4 @@ Ce composant possède deux `yield` :
 
 ## Arguments
 
-<ArgsTable story="Default" />
+<ArgTypes of={ComponentStories} />

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

@@ -1,5 +1,33 @@
 import { hbs } from 'ember-cli-htmlbars';
 
+export default {
+  title: 'Basics/Sidebar',
+  argTypes: {
+    showSidebar: {
+      name: 'showSidebar',
+      description: 'Visibilité de la sidebar',
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    title: {
+      name: 'title',
+      description: 'Titre de la sidebar',
+      type: { name: 'string', required: true },
+    },
+    onClose: {
+      name: 'onClose',
+      description: 'Fonction à exécuter à la fermeture de la sidebar',
+      type: { name: 'function', required: true },
+      table: {
+        type: { summary: 'function' },
+      },
+    },
+  },
+};
+
 export const Template = (args) => {
   return {
     template: hbs`<PixSidebar
@@ -38,28 +66,3 @@ Default.args = {
   title: 'Filtrer',
   onClose: () => {},
 };
-
-export const argTypes = {
-  showSidebar: {
-    name: 'showSidebar',
-    description: 'Visibilité de la sidebar',
-    type: { name: 'boolean', required: false },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-  title: {
-    name: 'title',
-    description: 'Titre de la sidebar',
-    type: { name: 'string', required: true },
-  },
-  onClose: {
-    name: 'onClose',
-    description: 'Fonction à exécuter à la fermeture de la sidebar',
-    type: { name: 'function', required: true },
-    table: {
-      type: { summary: 'function' },
-    },
-  },
-};

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

@@ -1,7 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import * as stories from './pix-stars.stories.js';
+import { Meta, Story, ArgTypes } from '@storybook/addon-docs';
+import * as ComponentStories from './pix-stars.stories.js';
 
-<Meta title="Others/PixStars" component="PixStars" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # Pix Stars
 
@@ -9,9 +9,7 @@ Affiche une série d'étoiles en fonction des paramètres donnés.
 Un texte alternatif peut être renseigné et différents styles sont pré-définis.
 Pour ne pas afficher les étoiles vides, il suffit de ne pas donner le total d'étoiles.
 
-<Canvas>
-  <Story name="PixStars" story={stories.stars} height={70} />
-</Canvas>
+<Story of={ComponentStories.stars} height={70} />
 
 ## Usage
 
@@ -21,4 +19,4 @@ Pour ne pas afficher les étoiles vides, il suffit de ne pas donner le total d'
 
 ## Arguments
 
-<ArgsTable story="PixStars" />
+<ArgTypes of={ComponentStories} />

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

@@ -1,5 +1,34 @@
 import { hbs } from 'ember-cli-htmlbars';
 
+export default {
+  title: 'Others/PixStars',
+  argTypes: {
+    count: {
+      name: 'count',
+      description: 'Nombre total d’étoiles actives',
+      type: { name: 'number', required: false },
+    },
+    total: {
+      name: 'total',
+      description: 'Nombre total d’étoiles',
+      type: { name: 'number', required: false },
+    },
+    alt: {
+      name: 'alt',
+      description: 'Message alternatif pour les étoiles',
+      type: { name: 'string', required: true },
+    },
+    color: {
+      name: 'color',
+      description: 'Couleur des étoiles',
+      type: { name: 'string', required: false },
+      table: { defaultValue: { summary: undefined } },
+      control: { type: 'radio' },
+      options: [undefined, 'blue', 'grey'],
+    },
+  },
+};
+
 const Template = (args) => {
   return {
     template: hbs`<PixStars @count={{this.count}} @total={{this.total}} @alt={{this.alt}} @color={{this.color}} />`,
@@ -14,29 +43,3 @@ stars.args = {
   alt: 'message alternatif',
   color: undefined,
 };
-
-export const argTypes = {
-  count: {
-    name: 'count',
-    description: 'Nombre total d’étoiles actives',
-    type: { name: 'number', required: false },
-  },
-  total: {
-    name: 'total',
-    description: 'Nombre total d’étoiles',
-    type: { name: 'number', required: false },
-  },
-  alt: {
-    name: 'alt',
-    description: 'Message alternatif pour les étoiles',
-    type: { name: 'string', required: true },
-  },
-  color: {
-    name: 'color',
-    description: 'Couleur des étoiles',
-    type: { name: 'string', required: false },
-    table: { defaultValue: { summary: undefined } },
-    control: { type: 'radio' },
-    options: [undefined, 'blue', 'grey'],
-  },
-};

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

@@ -1,7 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import * as stories from './pix-tag.stories.js';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-tag.stories';
 
-<Meta title="Basics/Tag" component="PixTag" argTypes={stories.argTypes} />
+<Meta of={ComponentStories} />
 
 # Pix Tag
 
@@ -9,12 +9,11 @@ Un `Tag` est un type de `Chips` qui permet de mettre en avant une information ou
 
 > Il est possible de surcharger le style d'un `<PixTag>` via l'attribut `class` ainsi que de passer n'importe quel attribut sur sa `div` wrapper (par exemple, un `aria-label`)
 
-<Canvas isColumn>
-  Tag
-  <Story name="Tag" story={stories.tag} height={60} />
-  Tag compact
-  <Story name="Compact Tag" story={stories.compactTag} height={60} />
-</Canvas>
+Tag
+<Story of={ComponentStories.tag} height={60} />
+
+Tag compact
+<Story of={ComponentStories.compactTag} height={60} />
 
 ## Usage
 
@@ -31,4 +30,4 @@ Tag Compact
 
 ## Arguments
 
-<ArgsTable story="Tag" />
+<ArgTypes />