@1024pix/pix-ui 38.0.0 → 38.2.0

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

@@ -1,5 +1,157 @@
 import { hbs } from 'ember-cli-htmlbars';
 
+export default {
+  title: 'Basics/Button',
+  argTypes: {
+    type: {
+      name: 'type',
+      description: 'type du bouton',
+      type: { required: false },
+      control: { disable: true },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'button' },
+      },
+    },
+    triggerAction: {
+      name: 'triggerAction',
+      description: 'fonction à appeler en cas de clic, optionnel si le bouton est de type submit',
+      type: { required: true },
+      control: { disable: true },
+    },
+    loadingColor: {
+      name: 'loadingColor',
+      description: 'couleur de chargement: `white`, `grey`',
+      type: { name: 'string', required: false },
+      options: ['white', 'grey'],
+      control: { type: 'select' },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'white' },
+      },
+    },
+    shape: {
+      name: 'shape',
+      description: 'forme: `rounded`,`squircle`',
+      type: { name: 'string', required: false },
+      options: ['rounded', 'squircle'],
+      control: { type: 'select' },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'squircle' },
+      },
+    },
+    backgroundColor: {
+      name: 'backgroundColor',
+      description:
+        'color: `blue`, `green`, `yellow`, `red`, `grey`, `transparent-light`, `transparent-dark`',
+      options: ['blue', 'green', 'yellow', 'red', 'grey', 'transparent-light', 'transparent-dark'],
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'blue' },
+      },
+    },
+    iconBefore: {
+      name: 'iconBefore',
+      description: `Nom de l'icône font-awesome à afficher **avant** le label`,
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: ['trash-can', 'heart', 'magnifying-glass', 'plus', 'xmark'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: null },
+      },
+    },
+    iconAfter: {
+      name: 'iconAfter',
+      description: `Nom de l'icône font-awesome à afficher **après** le label`,
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: ['trash-can', 'heart', 'magnifying-glass', 'plus', 'xmark'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: null },
+      },
+    },
+    prefixIconBefore: {
+      name: 'prefixIconBefore',
+      description: `Permet d'ajouter un préfix à l'icone devant le label pour appliquer un style particulier`,
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: ['fas', 'far'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: null },
+      },
+    },
+    prefixIconAfter: {
+      name: 'prefixIconAfter',
+      description: `Permet d'ajouter un préfix à l'icone derrière le label pour appliquer un style particulier`,
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: ['fas', 'far'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: null },
+      },
+    },
+    isDisabled: {
+      name: 'isDisabled',
+      type: { name: 'boolean', required: false },
+      control: { type: 'boolean' },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    isLoading: {
+      name: 'isLoading',
+      description:
+        'Affiche un loader. Si `@triggerAction` retourne une promesse alors le loading est géré automatiquement.',
+      type: { name: 'boolean', required: false },
+      control: { type: 'boolean' },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    size: {
+      name: 'size',
+      description: 'taille: `big`,`small`',
+      options: ['big', 'small'],
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'big' },
+      },
+    },
+    isBorderVisible: {
+      name: 'isBorderVisible',
+      description:
+        'Paramètre utilisé seulement quand le `backgroundColor` est `transparent-light` ou `transparent-dark`',
+      type: { name: 'boolean', required: false },
+      control: { type: 'boolean' },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    route: {
+      name: 'route',
+      description: 'Déprécié et remplacé par le composant PixButtonLink',
+      type: { name: 'string', required: false },
+    },
+    model: {
+      name: 'model',
+      description: 'Déprécié et remplacé par le composant PixButtonLink',
+      type: { required: false },
+    },
+  },
+};
+
 const Template = (args) => ({
   template: hbs`<section style={{this.style}}>
   <PixButton
@@ -159,152 +311,3 @@ size.args = {
   label: 'Bouton small',
   size: 'small',
 };
-
-export const argsTypes = {
-  type: {
-    name: 'type',
-    description: 'type du bouton',
-    type: { required: false },
-    control: { disable: true },
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: 'button' },
-    },
-  },
-  triggerAction: {
-    name: 'triggerAction',
-    description: 'fonction à appeler en cas de clic, optionnel si le bouton est de type submit',
-    type: { required: true },
-    control: { disable: true },
-  },
-  loadingColor: {
-    name: 'loadingColor',
-    description: 'couleur de chargement: `white`, `grey`',
-    type: { name: 'string', required: false },
-    options: ['white', 'grey'],
-    control: { type: 'select' },
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: 'white' },
-    },
-  },
-  shape: {
-    name: 'shape',
-    description: 'forme: `rounded`,`squircle`',
-    type: { name: 'string', required: false },
-    options: ['rounded', 'squircle'],
-    control: { type: 'select' },
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: 'squircle' },
-    },
-  },
-  backgroundColor: {
-    name: 'backgroundColor',
-    description:
-      'color: `blue`, `green`, `yellow`, `red`, `grey`, `transparent-light`, `transparent-dark`',
-    options: ['blue', 'green', 'yellow', 'red', 'grey', 'transparent-light', 'transparent-dark'],
-    type: { name: 'string', required: false },
-    control: { type: 'select' },
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: 'blue' },
-    },
-  },
-  iconBefore: {
-    name: 'iconBefore',
-    description: `Nom de l'icône font-awesome à afficher **avant** le label`,
-    type: { name: 'string', required: false },
-    control: { type: 'select' },
-    options: ['trash-can', 'heart', 'magnifying-glass', 'plus', 'xmark'],
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: null },
-    },
-  },
-  iconAfter: {
-    name: 'iconAfter',
-    description: `Nom de l'icône font-awesome à afficher **après** le label`,
-    type: { name: 'string', required: false },
-    control: { type: 'select' },
-    options: ['trash-can', 'heart', 'magnifying-glass', 'plus', 'xmark'],
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: null },
-    },
-  },
-  prefixIconBefore: {
-    name: 'prefixIconBefore',
-    description: `Permet d'ajouter un préfix à l'icone devant le label pour appliquer un style particulier`,
-    type: { name: 'string', required: false },
-    control: { type: 'select' },
-    options: ['fas', 'far'],
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: null },
-    },
-  },
-  prefixIconAfter: {
-    name: 'prefixIconAfter',
-    description: `Permet d'ajouter un préfix à l'icone derrière le label pour appliquer un style particulier`,
-    type: { name: 'string', required: false },
-    control: { type: 'select' },
-    options: ['fas', 'far'],
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: null },
-    },
-  },
-  isDisabled: {
-    name: 'isDisabled',
-    type: { name: 'boolean', required: false },
-    control: { type: 'boolean' },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: 'false' },
-    },
-  },
-  isLoading: {
-    name: 'isLoading',
-    description:
-      'Affiche un loader. Si `@triggerAction` retourne une promesse alors le loading est géré automatiquement.',
-    type: { name: 'boolean', required: false },
-    control: { type: 'boolean' },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: 'false' },
-    },
-  },
-  size: {
-    name: 'size',
-    description: 'taille: `big`,`small`',
-    options: ['big', 'small'],
-    type: { name: 'string', required: false },
-    control: { type: 'select' },
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: 'big' },
-    },
-  },
-  isBorderVisible: {
-    name: 'isBorderVisible',
-    description:
-      'Paramètre utilisé seulement quand le `backgroundColor` est `transparent-light` ou `transparent-dark`',
-    type: { name: 'boolean', required: false },
-    control: { type: 'boolean' },
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: 'false' },
-    },
-  },
-  route: {
-    name: 'route',
-    description: 'Déprécié et remplacé par le composant PixButtonLink',
-    type: { name: 'string', required: false },
-  },
-  model: {
-    name: 'model',
-    description: 'Déprécié et remplacé par le composant PixButtonLink',
-    type: { required: false },
-  },
-};

package/app/stories/pix-checkbox.mdx

@@ -0,0 +1,71 @@
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-checkbox.stories';
+
+<Meta of={ComponentStories} />
+
+# PixCheckbox
+
+La PixCheckbox permet de créer des checkbox basiques ou des checkbox mixées (checkbox servant d'indicateur lors d'une sélection multiple).
+
+
+ <Story of={ComponentStories.Default} height={60} />
+
+
+### Liste de checkboxes
+
+Il n'est pas rare d'avoir plusieurs champs checkbox qui se suivent.<br/>
+En ce sens, nous avons déjà prévu un espace vertical pour séparer 2 composants qui se suivent.
+
+
+  <Story of={ComponentStories.multiple} height={140} />
+
+
+## États de la Checkbox
+
+<br />
+
+### Checkbox interminée
+
+
+  <Story of={ComponentStories.indeterminateCheckbox} height={60} />
+
+
+### Checkbox désactivée
+
+  <Story of={ComponentStories.checkboxDisabled} height={60} />
+  <Story of={ComponentStories.checkboxCheckedDisabled} height={60} />
+  <Story of={ComponentStories.checkboxInterminateDisabled} height={60} />
+
+
+## Autres tailles de police du label
+
+<br />
+
+### Small
+
+
+  <Story of={ComponentStories.checkboxWithSmallLabel} height={60} />
+
+
+### Large
+
+
+  <Story of={ComponentStories.checkboxWithLargeLabel} height={60} />
+
+
+## Usage
+
+```html
+<PixCheckbox
+  @screenReaderOnly="{{false}}"
+  @isIndeterminate="{{false}}"
+  @labelSize="small"
+  disabled
+>
+  Recevoir la newsletter
+</PixCheckbox>
+```
+
+## Arguments
+
+<ArgTypes of={ComponentStories} />

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