@1024pix/pix-ui 20.2.3 → 22.0.0

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

@@ -1,90 +1,193 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
-const Template = (args) => ({
-  template: hbs`
-      <PixSelect
-        @id={{id}}
-        @options={{options}}
-        @onChange={{onChange}}
-        @selectedOption={{selectedOption}}
-        @emptyOptionLabel={{emptyOptionLabel}}
-        @emptyOptionNotSelectable={{emptyOptionNotSelectable}}
-        @isSearchable={{isSearchable}}
-        @isValidationActive={{isValidationActive}}
-        @label={{label}}
-      />
+export const Template = (args) => {
+  return {
+    template: hbs`
+      <style>
+        .custom {
+          border: 0;
+        }
+        .custom:hover {
+          border: 0;
+        }
+      </style>
+        {{#if this.id}}
+          <div>
+            <label for={{this.id}}>Un label en dehors du composant</label>
+          </div>
+        {{/if}}
+        <PixSelect
+          @id={{this.id}}
+          @className={{this.className}}
+          @options={{this.options}}
+          @isSearchable={{this.isSearchable}}
+          @onChange={{this.onChange}}
+          @label={{this.label}}
+          @placeholder={{this.placeholder}}
+          @hideDefaultOption={{this.hideDefaultOption}}
+          @subLabel={{this.subLabel}}
+          @searchLabel={{this.searchLabel}}
+          @value={{this.value}}
+          @searchPlaceholder={{this.searchPlaceholder}}
+          @screenReaderOnly={{this.screenReaderOnly}}
+          @emptySearchMessage={{this.emptySearchMessage}}
+          @requiredText={{this.requiredText}}
+          @errorMessage={{this.errorMessage}}
+        />
     `,
-  context: args,
-});
+    context: args,
+  };
+};
+
+export const WithId = Template.bind({});
+WithId.args = {
+  id: 'custom',
+  options: [
+    { value: '1', label: 'Figues' },
+    { value: '3', label: 'Fraises' },
+    { value: '2', label: 'Bananes' },
+    { value: '4', label: 'Mangues' },
+    { value: '5', label: 'Kaki' },
+    {
+      value: '6',
+      label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)',
+    },
+  ],
+  placeholder: 'Mon innerText',
+  isSearchable: false,
+  onChange: action('onChange'),
+};
+
+export const WithCustomClass = Template.bind({});
+WithCustomClass.args = {
+  className: 'custom',
+  options: [
+    { value: '1', label: 'Figues' },
+    { value: '3', label: 'Fraises' },
+    { value: '2', label: 'Bananes' },
+    { value: '4', label: 'Mangues' },
+    { value: '5', label: 'Kaki' },
+    {
+      value: '6',
+      label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)',
+    },
+  ],
+  label: 'Mon label',
+  placeholder: 'Mon innerText',
+  subLabel: 'Mon sous label',
+  isSearchable: false,
+  onChange: action('onChange'),
+};
 
 export const Default = Template.bind({});
 Default.args = {
   options: [
     { value: '1', label: 'Figues' },
+    { value: '3', label: 'Fraises' },
     { value: '2', label: 'Bananes' },
-    { value: '3', label: 'Noix' },
-    { value: '4', label: 'Papayes' },
-    { value: '5', label: 'Fèves de chocolat' },
-    { value: '6', label: 'Dattes' },
-    { value: '7', label: 'Mangues' },
-    { value: '8', label: 'Jujube' },
-    { value: '9', label: 'Avocat' },
-    { value: '10', label: 'Fraises' },
-    { value: '11', label: 'Kaki' },
-    { value: '12', label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)' },
+    { value: '4', label: 'Mangues' },
+    { value: '5', label: 'Kaki' },
+    {
+      value: '6',
+      label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)',
+    },
+  ],
+  label: 'Mon label',
+  placeholder: 'Mon innerText',
+  subLabel: 'Mon sous label',
+  isSearchable: false,
+  onChange: action('onChange'),
+};
+
+export const WithCategories = Template.bind({});
+WithCategories.args = {
+  options: [
+    { value: '1', label: 'Figues', category: 'Fruit Rouge' },
+    { value: '3', label: 'Fraises', category: 'Fruit Rouge' },
+    { value: '3', label: 'Noix', category: 'Autres' },
+    { value: '4', label: 'Papayes', category: 'Autres' },
+    {
+      value: '6',
+      label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)',
+      category: 'Autres',
+    },
   ],
+  label: 'Mon label',
+  placeholder: 'Mon innerText',
+  subLabel: 'Mon sous label',
+  isSearchable: false,
   onChange: action('onChange'),
 };
 
-export const withLabel = Template.bind({});
-withLabel.args = {
-  ...Default.args,
-  id: 'pix-select-with-label',
-  label: 'Ton fruit préféré: ',
+export const WithSearch = Template.bind({});
+WithSearch.args = {
+  options: [
+    { value: '1', label: 'Figues' },
+    { value: '3', label: 'Fraises' },
+    { value: '2', label: 'Bananes' },
+    { value: '4', label: 'Mangues' },
+    { value: '5', label: 'Kaki' },
+    {
+      value: '6',
+      label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)',
+    },
+  ],
+  label: 'Mon label',
+  placeholder: 'Mon innerText',
+  subLabel: 'Mon sous label',
+  searchLabel: 'Mon label',
+  searchPlaceholder: 'Mon innerText',
+  isSearchable: true,
+  emptySearchMessage: 'Aucune option',
+  onChange: action('onChange'),
 };
 
-export const searchableSelect = Template.bind({});
-searchableSelect.args = {
-  ...Default.args,
-  emptyOptionNotSelectable: false,
+export const WithCategoriesAndSearch = Template.bind({});
+WithCategoriesAndSearch.args = {
+  options: [
+    { value: '1', label: 'Figues', category: 'Fruit Rouge' },
+    { value: '2', label: 'Fraises', category: 'Fruit Rouge' },
+    { value: '3', label: 'Fèves de chocolat', category: 'Autres' },
+    { value: '5', label: 'Dattes', category: 'Autres' },
+    {
+      value: '4',
+      label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)',
+      category: 'Autres',
+    },
+  ],
+  label: 'Mon label',
+  placeholder: 'Mon innerText',
+  subLabel: 'Mon sous label',
+  searchLabel: 'Mon label',
+  searchPlaceholder: 'Mon innerText',
   isSearchable: true,
-  isValidationActive: true,
-  placeholder: 'Fraises, Mangues...',
+  emptySearchMessage: 'Aucune option',
+  onChange: action('onChange'),
 };
 
 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``. ``value`` doit être de type ``String`` pour être que le champ puisse être cherchable',
-    type: { name: 'object', required: true },
+      '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 },
   },
-  onChange: {
-    name: 'onChange',
-    description: 'Fonction à appeler si une option est sélectionnée',
-    type: { required: true },
-    control: { disable: true },
-  },
-  selectedOption: {
-    name: 'selectedOption',
+  value: {
+    name: 'value',
     description: 'Option sélectionnée',
-    options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+    options: ['1', '2', '3', '4', '5', '6'],
     control: { type: 'select' },
     type: { name: 'string', required: false },
     table: {
       type: { summary: 'string' },
-      defaultValue: { summary: null },
     },
   },
-  emptyOptionLabel: {
-    name: 'emptyOptionLabel',
-    description: 'Texte à afficher si aucune option n‘est sélectionnée',
-    type: { name: 'string', required: false },
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: null },
-    },
+  onChange: {
+    name: 'onChange',
+    description: 'Fonction à appeler quand une option est sélectionnée.',
+    type: { required: true },
+    control: { disable: true },
   },
   isSearchable: {
     name: 'isSearchable',
@@ -96,10 +199,9 @@ export const argTypes = {
       defaultValue: { summary: false },
     },
   },
-  isValidationActive: {
-    name: 'isValidationActive',
-    description:
-      "Rend la bordure du champ vert au focus si la valeur de recherche match une option (c'est à dire si l'utilisateur a selectionné une option valable",
+  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: {
@@ -107,34 +209,93 @@ export const argTypes = {
       defaultValue: { summary: false },
     },
   },
-  emptyOptionNotSelectable: {
-    name: 'emptyOptionNotSelectable',
-    description: 'Rend le premier champ qui est vide non visible une fois sélectionné',
-    control: { type: 'boolean' },
+  id: {
+    name: 'id',
+    description: 'Un identifiant unique placé sur le composant',
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  label: {
+    name: 'label',
+    description: 'Label du menu déroulant',
+    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 },
     },
   },
-  size: {
-    name: 'size',
-    description:
-      '⚠️ **Propriété dépréciée** ⚠️ , désormais tous les éléments de formulaires feront 36px de hauteur.',
-    options: ['big', 'small'],
+  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' },
-      defaultValue: { summary: 'small' },
     },
   },
-  label: {
-    name: 'label',
-    description: 'Donne un label au champ, le paramètre @id devient obligatoire avec ce paramètre.',
+  searchLabel: {
+    name: 'searchLabel',
+    description: 'Label de la recherche dans le menu déroulant',
+    type: { name: 'string', required: true },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  searchPlaceholder: {
+    name: 'searchPlaceholder',
+    description: 'Placeholder de la recherche dans le menu déroulant',
+    type: { name: 'string', required: true },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  emptySearchMessage: {
+    name: 'emptySearchMessage',
+    description: "Message affiché si la recherche ne retourne pas d'options",
+    type: { name: 'string', required: true },
+    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' },
-      defaultValue: { summary: null },
     },
   },
 };

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

@@ -5,53 +5,79 @@ import * as stories from './pix-select.stories.js';
 <Meta
   title='Form/Select'
   component='PixSelect'
-  decorators={[centered]}
   argTypes={stories.argTypes}
 />
 
 # Pix Select
 
-Affiche un champ Select avec la liste des options fournie.
+Affiche un menu déroulant avec la liste des options fournies.
 
 Les options sont représentées par un tableau d'objet contenant les propriétés value et label.
 
-> **⚠️** __N'oubliez pas de rajouter un id et un label rattaché à l'input pour le rendre accessible !
-A défaut d'avoir un label, vous pouvez rajouter l'attribut `aria-label` à l'input.__
+> **⚠️** __Il est nécessaire d'avoir au moins un label ou un placeholder !__
 
-> Pour aider l'utilisateur avec le PixSelect cherchable, rajoutez un placeholder cohérent !
+> **⚠️** __N'oubliez pas de rajouter un searchLabel dans le cas ou le menu déroulant est cherchable pour le rendre accessible !__
+
+> Pour aider l'utilisateur, rajoutez un placeholder cohérent !
 
 ## Default
 
 <Canvas>
-  <Story name="Select" story={stories.Default} height={100} />
+  <Story name='Default' story={stories.Default} height={200} />
+</Canvas>
+
+## WithId
+
+<Canvas>
+  <Story name='WithId' story={stories.WithId} height={200} />
 </Canvas>
 
-## With label
+## WithCustomClass
 
 <Canvas>
-  <Story story={stories.withLabel} height={100} />
+  <Story name='WithCustomClass' story={stories.WithCustomClass} height={200} />
 </Canvas>
 
-## Searchable
+## WithCategories
 
 <Canvas>
-  <Story name="SearchableSelect" story={stories.searchableSelect} height={110} />
+  <Story name='Select with categories' story={stories.WithCategories} height={200} />
+</Canvas>
+
+## WithSearch
+
+<Canvas>
+  <Story name='Select with search' story={stories.WithSearch} height={200} />
+</Canvas>
+
+
+## WithCategoriesAndSearch
+
+<Canvas>
+  <Story name='WithCategoriesAndSearch' story={stories.WithCategoriesAndSearch} height={200} />
 </Canvas>
 
 ## Usage
 
 ```html
-<PixSelect
-  @options={{options}}
-  @onChange={{onChange}}
-  @selectedOption="1"
-  @emptyOptionLabel="Empty option"
-  @isSearchable={{false}}
-  @isValidationActive={{false}}
-  @emptyOptionNotSelectable={{false}}
-/>
+  <PixSelect
+    @className={{className}}
+    @label={{label}}
+    @subLabel={{subLabel}}
+    @placeholder={{placeholder}}
+    @options={{options}}
+    @onChange={{onChange}}
+    @value={{value}}
+    @isSearchable={{isSearchable}}
+    @searchLabel={{searchLabel}}
+    @searchPlaceholder={{searchPlaceholder}}
+    @emptySearchMessage={{emptySearchMessage}}
+    @screenReaderOnly={{screenReaderOnly}}
+    @requiredText={{requiredText}}
+    @errorMessage={{errorMessage}}
+  />
 ```
 
 ## Arguments
 
-<ArgsTable story="Select" />
+<ArgsTable story="Default" />

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

@@ -2,56 +2,25 @@ import { hbs } from 'ember-cli-htmlbars';
 
 export const selectableTagDefault = (args) => {
   return {
-    template: hbs`
-      <PixSelectableTag  
-        @label="non sélectionné"
-        @id="123"
-        @onChange={{onChange}}
-        @checked={{false}}
-      />
-    `,
+    template: hbs`<PixSelectableTag @label='non sélectionné' @id='123' @onChange={{onChange}} @checked={{false}} />`,
     context: args,
   };
 };
 
 export const selectableTagSelected = (args) => {
   return {
-    template: hbs`
-      <PixSelectableTag  
-        @label="Sélectionné"
-        @id="456"
-        @onChange={{onChange}}
-        @checked={{true}}
-      />
-    `,
+    template: hbs`<PixSelectableTag @label='Sélectionné' @id='456' @onChange={{onChange}} @checked={{true}} />`,
     context: args,
   };
 };
 
 export const selectableTagMultiple = (args) => {
   return {
-    template: hbs`
-      <div style="display:flex;justify-content:space-around;width:400px;height:100%;padding:10px">
-        <PixSelectableTag
-          @label="Lorem ipsum"
-          @id="1"
-          @onChange={{onChange}}
-          @checked={{false}}
-        />
-        <PixSelectableTag
-          @label="Lorem ipsum"
-          @id="2"
-          @onChange={{onChange}}
-          @checked={{false}}
-        />
-        <PixSelectableTag
-          @label="Lorem ipsum"
-          @id="3"
-          @onChange={{onChange}}
-          @checked={{false}}
-        />
-      </div>
-    `,
+    template: hbs`<div style='display:flex;justify-content:space-around;width:400px;height:100%;padding:10px'>
+  <PixSelectableTag @label='Lorem ipsum' @id='1' @onChange={{onChange}} @checked={{false}} />
+  <PixSelectableTag @label='Lorem ipsum' @id='2' @onChange={{onChange}} @checked={{false}} />
+  <PixSelectableTag @label='Lorem ipsum' @id='3' @onChange={{onChange}} @checked={{false}} />
+</div>`,
     context: args,
   };
 };

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

@@ -2,25 +2,32 @@ import { hbs } from 'ember-cli-htmlbars';
 
 export const Template = (args) => {
   return {
-    template: hbs`
-      <PixSidebar @showSidebar={{showSidebar}} @title={{title}} @onClose={{fn (mut showSidebar) (not showSidebar)}}>
-        <:content>
-          <p>
-            Une sidebar est, dans une interface graphique, une fenêtre qui prend le contrôle total du clavier et
-            de l'écran. Elle est en général associée à du paramétrage d'écran.
-          </p>
-        </:content>
-        <:footer>
-        <div style="display: flex; gap: 8px">
-          <PixButton @backgroundColor="transparent-light" @isBorderVisible="true" @triggerAction={{fn (mut showSidebar) (not showSidebar)}}>Annuler</PixButton>
-          <PixButton @triggerAction={{fn (mut showSidebar) (not showSidebar)}}>Valider</PixButton>
-          </div>
-        </:footer>
-      </PixSidebar>
-      <div style="display:flex; justify-content:center; align-items:center; height:105vh;">
-        <PixButton @triggerAction={{fn (mut showSidebar) (not showSidebar)}} style="height:45px">Ouvrir la sidebar</PixButton>
-      </div>
-    `,
+    template: hbs`<PixSidebar
+  @showSidebar={{showSidebar}}
+  @title={{title}}
+  @onClose={{fn (mut showSidebar) (not showSidebar)}}
+>
+  <:content>
+    <p>
+      Une sidebar est, dans une interface graphique, une fenêtre qui prend le contrôle total du
+      clavier et de l'écran. Elle est en général associée à du paramétrage d'écran.
+    </p>
+  </:content>
+  <:footer>
+    <div style='display: flex; gap: 8px'>
+      <PixButton
+        @backgroundColor='transparent-light'
+        @isBorderVisible='true'
+        @triggerAction={{fn (mut showSidebar) (not showSidebar)}}
+      >Annuler</PixButton>
+      <PixButton @triggerAction={{fn (mut showSidebar) (not showSidebar)}}>Valider</PixButton>
+    </div>
+  </:footer>
+</PixSidebar>
+<div style='display:flex; justify-content:center; align-items:center; height:105vh;'>
+  <PixButton @triggerAction={{fn (mut showSidebar) (not showSidebar)}} style='height:45px'>Ouvrir la
+    sidebar</PixButton>
+</div>`,
     context: args,
   };
 };

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

@@ -2,14 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 
 export const stars = (args) => {
   return {
-    template: hbs`
-      <PixStars
-        @count={{count}}
-        @total={{total}}
-        @alt={{alt}}
-        @color={{color}}
-      />
-    `,
+    template: hbs`<PixStars @count={{count}} @total={{total}} @alt={{alt}} @color={{color}} />`,
     context: args,
   };
 };

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

@@ -2,22 +2,18 @@ import { hbs } from 'ember-cli-htmlbars';
 
 export const tag = (args) => {
   return {
-    template: hbs`
-      <PixTag @color={{color}} @compact={{compact}}>
-        Contenu du tag
-      </PixTag>
-    `,
+    template: hbs`<PixTag @color={{color}} @compact={{compact}}>
+  Contenu du tag
+</PixTag>`,
     context: args,
   };
 };
 
 export const compactTag = (args) => {
   return {
-    template: hbs`
-      <PixTag @color={{color}} @compact={{compact}}>
-        Contenu du tag
-      </PixTag>
-    `,
+    template: hbs`<PixTag @color={{color}} @compact={{compact}}>
+  Contenu du tag
+</PixTag>`,
     context: args,
   };
 };

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

@@ -2,15 +2,13 @@ import { hbs } from 'ember-cli-htmlbars';
 
 export const textarea = (args) => {
   return {
-    template: hbs`
-      <PixTextarea 
-        @id={{id}}
-        @value={{value}}
-        @maxlength={{maxlength}}
-        @label={{label}}
-        @errorMessage={{errorMessage}}
-      />
-    `,
+    template: hbs`<PixTextarea
+  @id={{id}}
+  @value={{value}}
+  @maxlength={{maxlength}}
+  @label={{label}}
+  @errorMessage={{errorMessage}}
+/>`,
     context: args,
   };
 };