@1024pix/pix-ui 20.2.3 → 22.0.0

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

@@ -1,6 +1,35 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
+const Template = (args) => ({
+  template: hbs`
+  <style>
+    .custom {
+      border : none;
+    }
+  </style>
+  <h4>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</h4>
+  {{#if this.id}}
+    <div>
+      <label for={{this.id}}>Un label en dehors du composant</label>
+    </div>
+  {{/if}}
+  <PixMultiSelect
+    @id={{this.id}}
+    @label={{this.label}}
+    @placeholder={{this.placeholder}}
+    @screenReaderOnly={{this.screenReaderOnly}}
+    @onChange={{this.onChange}}
+    @emptyMessage={{this.emptyMessage}}
+    @className={{this.className}}
+    @isSearchable={{this.isSearchable}}
+    @strictSearch={{this.strictSearch}}
+    @values={{this.values}}
+    @options={{this.options}} as |option|
+  >{{option.label}}</PixMultiSelect>
+ `,
+  context: args,
+});
 const DEFAULT_OPTIONS = [
   { label: 'ANETH HERBE AROMATIQUE', value: '1' },
   { label: 'ANIS VERT HERBE AROMATIQUE', value: '2' },
@@ -15,25 +44,30 @@ const DEFAULT_OPTIONS = [
   { label: 'CERFEUIL HERBE AROMATIQUE', value: '11' },
 ];
 
+export const Default = Template.bind({});
+Default.args = {
+  options: DEFAULT_OPTIONS,
+  onChange: action('onChange'),
+  placeholder: 'placeholder',
+};
+
 export const multiSelectWithChildComponent = (args) => {
   return {
     template: hbs`
       <h4>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</h4>
       <PixMultiSelect
-        @id={{this.id}}
         @label={{this.label}}
-        @innerText={{this.titleStars}}
+        @placeholder={{this.placeholder}}
         @screenReaderOnly={{this.screenReaderOnly}}
-        
-        @onSelect={{this.onSelect}}
+        @onChange={{this.onChange}}
         @emptyMessage={{this.emptyMessage}}
-        
-        @options={{this.options}} as |star|
+        @className={{this.className}}
+        @options={{this.options}} as |option|
       >
         <PixStars
-          @alt={{concat "Étoiles " star.value " sur " star.total}}
-          @count={{star.value}}
-          @total={{star.total}}
+          @alt={{concat "Étoiles " option.value " sur " option.total}}
+          @count={{option.value}}
+          @total={{option.total}}
         />
       </PixMultiSelect>
     `,
@@ -42,7 +76,7 @@ export const multiSelectWithChildComponent = (args) => {
 };
 
 multiSelectWithChildComponent.args = {
-  titleStars: 'Sélectionner le niveau souhaité',
+  placeholder: 'Sélectionner le niveau souhaité',
   label: 'Résultat évaluation',
   options: [
     { value: '0', total: 3 },
@@ -52,70 +86,65 @@ multiSelectWithChildComponent.args = {
   ],
 };
 
-export const multiSelectSearchable = (args) => {
-  return {
-    template: hbs`
-      <h4>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</h4>
-      <PixMultiSelect
-        style="width:350px"
-        @id={{this.id}}
-        @label={{this.label}}
-        @screenReaderOnly={{this.screenReaderOnly}}
-        @innerText={{this.innerText}}
-
-        @isSearchable={{this.isSearchable}}
-        @strictSearch={{this.strictSearch}}
-
-        @onSelect={{this.doSomething}}
-        @selected={{this.selected}}
-
-        @emptyMessage={{this.emptyMessage}}
-        @options={{this.options}} as |option|
-      >
-        {{option.label}}
-      </PixMultiSelect>
-    `,
-    context: args,
-  };
+export const multiSelectSearchable = Template.bind({});
+multiSelectSearchable.args = {
+  ...Default.args,
+  isSearchable: true,
+  strictSearch: true,
+  emptyMessage: 'Aucune option trouvée',
 };
 
-export const multiSelectAsyncOptions = (args) => {
-  args.onLoadOptions = () => Promise.resolve(DEFAULT_OPTIONS);
-  return {
-    template: hbs`
-      <h4>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</h4>
-      <PixMultiSelect
-        style="width:350px"
-        @id={{this.id}}
-        @label={{this.label}}
-        @screenReaderOnly={{this.screenReaderOnly}}
-        @innerText={{this.innerText}}
+export const multiSelectWithCustomClass = Template.bind({});
+multiSelectWithCustomClass.args = {
+  ...Default.args,
+  className: 'custom',
+  isSearchable: false,
+};
 
-        @isSearchable={{this.isSearchable}}
-        @strictSearch={{this.strictSearch}}
+export const multiSelectWithId = Template.bind({});
+multiSelectWithId.args = {
+  ...Default.args,
+  label: undefined,
+  id: 'custom',
+  isSearchable: false,
+};
 
-        @onSelect={{this.doSomething}}
-        @selected={{this.selected}}
+const TemplateWithYield = (args) => ({
+  template: hbs`
+  <PixMultiSelect
+    @id={{this.id}}
+    @label={{this.label}}
+    @screenReaderOnly={{this.screenReaderOnly}}
+    @onChange={{this.onChange}}
+    @emptyMessage={{this.emptyMessage}}
+    @className={{this.className}}
+    @isSearchable={{this.isSearchable}}
+    @strictSearch={{this.strictSearch}}
+    @values={{this.values}}
+    @options={{this.options}}
+  >
+    <:placeholder>filtres (2)</:placeholder>
+    <:default as |option|>{{option.label}}</:default>
+  </PixMultiSelect>
+ `,
+  context: args,
+});
 
-        @emptyMessage={{this.emptyMessage}}
-        @onLoadOptions={{this.onLoadOptions}} as |option|
-      >
-        {{option.label}}
-      </PixMultiSelect>
-    `,
-    context: args,
-  };
+export const multiSelectWithYield = TemplateWithYield.bind({});
+multiSelectWithYield.args = {
+  ...Default.args,
+  placeholder: undefined,
+  isSearchable: false,
 };
 
 export const argTypes = {
   id: {
     name: 'id',
     description: 'Permet l‘accessibilité du composant attribuant des ``for`` pour chaque entité',
-    type: { name: 'string', required: true },
-    defaultValue: 'aromate',
+    type: { name: 'string' },
   },
-  innerText: {
-    name: 'innerText',
+  placeholder: {
+    name: 'placeholder',
     description:
       'Rempli le contenu interne du composant, `placeholder` pour `isSearchable` `true`, sinon rawContent du `button`',
     type: { name: 'string', required: true },
@@ -124,7 +153,7 @@ export const argTypes = {
   label: {
     name: 'label',
     description: "Donne un label au champ qui sera celui vocalisé par le lecteur d'écran",
-    type: { name: 'string', required: true },
+    type: { name: 'string' },
     defaultValue: 'Label du champ',
   },
   screenReaderOnly: {
@@ -147,27 +176,14 @@ export const argTypes = {
     type: { name: 'array', required: false },
     defaultValue: DEFAULT_OPTIONS,
   },
-  onLoadOptions: {
-    name: 'onLoadOptions',
-    description:
-      'Charge de manière asynchrone les options. Doit renvoyer une promesse avec la liste des options. 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 conforme au traitement des input value.',
-    type: { required: false },
-  },
-  loadingMessage: {
-    name: 'loadingMessage',
-    description:
-      "Message qui apparaît dans les options quand celles-ci sont en train d'être chargées via onLoadOptions",
-    type: { name: 'string', required: false },
-    defaultValue: 'Chargement...',
-  },
-  onSelect: {
-    name: 'onSelect',
+  onChange: {
+    name: 'onChange',
     description: "Une fonction permettant d'effectuer une action à chaque sélection",
     type: { required: true },
-    defaultValue: action('onSelect'),
+    defaultValue: action('onChange'),
   },
-  selected: {
-    name: 'selected',
+  values: {
+    name: 'values',
     description: 'Une pré-sélection peut être donnée au composant',
     type: { name: 'array', required: false },
     defaultValue: ['1', '4'],
@@ -185,4 +201,12 @@ export const argTypes = {
     type: { name: 'boolean', required: false },
     defaultValue: 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' },
+    },
+  },
 };

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

@@ -25,15 +25,19 @@ L'ajout de ``class`` et d'autres attributs comme ``aria-label`` sont possibles.
   <Story name="Searchable" story={stories.multiSelectSearchable} height={330}/>
 </Canvas>
 
-## With async options
-
-Via la propriété `onLoadOptions`, le composant peut charger lui-même les options de manière asynchrone.
-Le callback `onLoadOptions` est une promesse renvoyant la liste des options. (eg. `[{ label: 'A', value: '1' }]`).
+## withCustomClass
+<Canvas>
+  <Story name="withCustomClass" story={stories.multiSelectWithCustomClass} height={330}/>
+</Canvas>
 
-Il est possible de donner un message via `loadingMessage` à afficher à la place des options pendant que celles-ci soient chargées.
+## withId
+<Canvas>
+  <Story name="withId" story={stories.multiSelectWithId} height={330}/>
+</Canvas>
 
+## withYield
 <Canvas>
-  <Story name="With async options" story={stories.multiSelectAsyncOptions} height={330}/>
+  <Story name="withYield" story={stories.multiSelectWithYield} height={330}/>
 </Canvas>
 
 ## Usage
@@ -43,11 +47,12 @@ Il est possible de donner un message via `loadingMessage` à afficher à la plac
   @id={{id}}
   @label={{label}}
   @screenReaderOnly={{screenReaderOnly}}
-  @innerText={{innerText}}
+  @placeholder={{placeholder}}
 
-  @onSelect={{doSomething}}
-  @selected={{selected}}
+  @onChange={{doSomething}}
+  @values={{values}}
   @emptyMessage={{emptyMessage}}
+  @className={{className}}
   @options={{options}} as |option|>
   {{option.label}}
 </PixMultiSelect>

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

@@ -2,14 +2,12 @@ import { hbs } from 'ember-cli-htmlbars';
 
 export const Template = (args) => {
   return {
-    template: hbs`
-      <PixPagination
-        @pagination={{pagination}}
-        @locale = {{locale}}
-        @pageOptions= {{pageOptions}}
-        @isCondensed= {{isCondensed}}
-            />
-    `,
+    template: hbs`<PixPagination
+  @pagination={{pagination}}
+  @locale={{locale}}
+  @pageOptions={{pageOptions}}
+  @isCondensed={{isCondensed}}
+/>`,
     context: args,
   };
 };

package/app/stories/pix-progress-gauge.stories.js

@@ -2,15 +2,13 @@ import { hbs } from 'ember-cli-htmlbars';
 
 export const Default = (args) => {
   return {
-    template: hbs`
-      <PixProgressGauge
-        @value={{value}}
-        @color={{color}}
-        @isArrowLeft={{isArrowLeft}}
-        @subtitle={{subtitle}}
-        @tooltipText={{tooltipText}}
-      />
-    `,
+    template: hbs`<PixProgressGauge
+  @value={{value}}
+  @color={{color}}
+  @isArrowLeft={{isArrowLeft}}
+  @subtitle={{subtitle}}
+  @tooltipText={{tooltipText}}
+/>`,
     context: args,
   };
 };
@@ -20,17 +18,15 @@ Default.args = {
 
 export const whiteProgressGauge = (args) => {
   return {
-    template: hbs`
-    <section style="width: 100%; padding: 35px 35px 5px;background-color: lightgray">
-      <PixProgressGauge
-        @value={{value}}
-        @color={{color}}
-        @isArrowLeft={{isArrowLeft}}
-        @subtitle={{subtitle}}
-        @tooltipText={{tooltipText}}
-      />
-    </section>
-    `,
+    template: hbs`<section style='width: 100%; padding: 35px 35px 5px;background-color: lightgray'>
+  <PixProgressGauge
+    @value={{value}}
+    @color={{color}}
+    @isArrowLeft={{isArrowLeft}}
+    @subtitle={{subtitle}}
+    @tooltipText={{tooltipText}}
+  />
+</section>`,
     context: args,
   };
 };

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

@@ -2,13 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 
 const Template = (args) => {
   return {
-    template: hbs`
-      <PixRadioButton
-        @label={{label}}
-        @value={{value}}
-        @isDisabled={{isDisabled}}
-      />
-    `,
+    template: hbs`<PixRadioButton @label={{label}} @value={{value}} @isDisabled={{isDisabled}} />`,
     context: args,
   };
 };
@@ -26,13 +20,7 @@ isDisabled.args = {
 
 const checked = (args) => {
   return {
-    template: hbs`
-      <PixRadioButton
-        @label={{label}}
-        @isDisabled={{isDisabled}}
-        checked
-      />
-    `,
+    template: hbs`<PixRadioButton @label={{label}} @isDisabled={{isDisabled}} checked />`,
     context: args,
   };
 };

package/app/stories/pix-return-to.stories.js

@@ -2,9 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 
 export const returnTo = (args) => {
   return {
-    template: hbs`
-      <PixReturnTo @route='profile' @shade={{shade}} />
-    `,
+    template: hbs`<PixReturnTo @route='profile' @shade={{shade}} />`,
     context: args,
   };
 };
@@ -14,11 +12,9 @@ returnTo.args = {
 
 export const returnToWithText = (args) => {
   return {
-    template: hbs`
-      <PixReturnTo @route='profile' @shade={{shade}}>
-        Retour vers mon profil
-      </PixReturnTo>
-    `,
+    template: hbs`<PixReturnTo @route='profile' @shade={{shade}}>
+  Retour vers mon profil
+</PixReturnTo>`,
     context: args,
   };
 };