@1024pix/pix-ui 11.1.0

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

@@ -0,0 +1,199 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+const DEFAULT_OPTIONS = [
+  { label: 'ANETH HERBE AROMATIQUE', value: '1' },
+  { label: 'ANIS VERT HERBE AROMATIQUE', value: '2' },
+  { label: 'BADIANE AROMATE', value: '3' },
+  { label: 'BAIES ROSES EPICES', value: '4' },
+  { label: 'BASILIC HERBE AROMATIQUE', value: '5' },
+  { label: 'BOURRACHE OFFICINALE HERBE AROMATIQUE', value: '6' },
+  { label: 'CANNELLE AROMATE', value: '7' },
+  { label: 'CAPRE CONDIMENT', value: '8' },
+  { label: 'CARDAMOME AROMATE', value: '9' },
+  { label: 'CARVI HERBE AROMATIQUE', value: '10' },
+  { label: 'CERFEUIL HERBE AROMATIQUE', value: '11' },
+];
+
+export const multiSelectWithChildComponent = (args) => {
+  return {
+    template: hbs`
+      <h4>⚠️ La sélection des éléments ne fonctionne pas dans Storybook.</h4>
+      <PixMultiSelect
+        @title={{titleStars}}
+        @id={{id}}
+        @onSelect={{onSelect}}
+        @emptyMessage={{emptyMessage}}
+        @label={{label}}
+        @options={{options}} as |star|
+      >
+        <PixStars
+          @count={{star.value}}
+          @total={{star.total}}
+        />
+      </PixMultiSelect>
+    `,
+    context: args,
+  };
+};
+
+multiSelectWithChildComponent.args = {
+  titleStars: 'Sélectionner le niveau souhaité',
+  options: [
+    { value: '1', total: 3 },
+    { value: '2', total: 3 },
+    { value: '3', total: 3 },
+  ],
+};
+
+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={{id}}
+        @title={{title}}
+        @placeholder={{placeholder}}
+        @isSearchable={{isSearchable}}
+        @showOptionsOnInput={{showOptionsOnInput}}
+        @strictSearch={{strictSearch}}
+        @onSelect={{doSomething}}
+        @emptyMessage={{emptyMessage}}
+        @size={{size}}
+        @selected={{selected}}
+        @options={{options}} as |option|
+      >
+        {{option.label}}
+      </PixMultiSelect>
+    `,
+    context: args,
+  };
+};
+
+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={{id}}
+        @title={{title}}
+        @placeholder={{placeholder}}
+        @isSearchable={{isSearchable}}
+        @showOptionsOnInput={{showOptionsOnInput}}
+        @strictSearch={{strictSearch}}
+        @onSelect={{doSomething}}
+        @emptyMessage={{emptyMessage}}
+        @size={{size}}
+        @selected={{selected}}
+        @onLoadOptions={{onLoadOptions}} as |option|
+      >
+        {{option.label}}
+      </PixMultiSelect>
+    `,
+    context: args,
+  };
+};
+
+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',
+  },
+  title: {
+    name: 'title',
+    description: 'Donne un titre à sa liste de choix multiple.',
+    type: { name: 'string', required: true },
+    defaultValue: 'Rechercher un condiment',
+  },
+  label: {
+    name: 'label',
+    description: 'Donne un label au champ, le paramètre @id devient obligatoire avec ce paramètre.',
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: null },
+    },
+  },
+  emptyMessage: {
+    name: 'emptyMessage',
+    description:
+      'Un intitulé de choix indisponible (dans le cas ou certains filtres seraient excluant)',
+    type: { name: 'string', required: true },
+    defaultValue: 'pas de résultat',
+  },
+  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...',
+  },
+  placeholder: {
+    name: 'placeholder',
+    description:
+      'Donner une liste d‘exemple pour la recherche utilisateur dans le cas ``isSearchable`` à ``true``',
+    type: { name: 'string', required: true },
+    defaultValue: 'Curcuma, Thym, ...',
+  },
+  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 conforme au traitement des input value.',
+    type: { name: 'array', required: true },
+    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 },
+  },
+  onSelect: {
+    name: 'onSelect',
+    description: "Une fonction permettant d'effectuer une action à chaque sélection",
+    type: { required: true },
+    defaultValue: action('onSelect'),
+  },
+  selected: {
+    name: 'selected',
+    description: 'Une pré-sélection peut être donnée au composant',
+    type: { name: 'array', required: false },
+    defaultValue: ['1', '4'],
+  },
+  showOptionsOnInput: {
+    name: 'showOptionsOnInput',
+    description:
+      'Afficher la liste au focus du champs de saisie lorsque ``isSearchable`` à ``true``',
+    type: { name: 'boolean', required: false },
+    defaultValue: true,
+  },
+  isSearchable: {
+    name: 'isSearchable',
+    description: 'Permet de rajouter une saisie utilisateur pour faciliter la recherche',
+    type: { name: 'boolean', required: false },
+    defaultValue: true,
+  },
+  strictSearch: {
+    name: 'strictSearch',
+    description:
+      'Permet de rendre sensible à la casse et au diacritiques lorsque ``isSearchable`` à ``true``',
+    type: { name: 'boolean', required: false },
+    defaultValue: 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'],
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: 'small' },
+    },
+  },
+};

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

@@ -0,0 +1,55 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+import * as stories from './pix-multi-select.stories.js';
+
+<Meta
+  title='Form/Multi Select'
+  component='Multi Select'
+  argTypes={stories.argTypes}
+/>
+
+# Pix Multi Select
+
+Un select custom permettant une gestion de la multiselection. Permet de passer soit du texte brut soit des composants à sa liste. (PixStars etc...)
+L'ajout de ``class`` et d'autres attributs comme ``aria-label`` sont possibles.
+
+> ⚠️ La démonstration de PixMultiSelect NE fonctionne PAS comme prévu dans storybook (mais fonctionne très bien sur les app fronts). Pour plus d'informations, voir https://github.com/1024pix/pix-ui/pull/76.
+
+## With child component
+<Canvas>
+  <Story name="With child component" story={stories.multiSelectWithChildComponent} height={310} />
+</Canvas>
+
+## Searchable
+<Canvas>
+  <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' }]`).
+
+Il est possible de donner un message via `loadingMessage` à afficher à la place des options pendant que celles-ci soient chargées.
+
+<Canvas>
+  <Story name="With async options" story={stories.multiSelectAsyncOptions} height={330}/>
+</Canvas>
+
+## Usage
+
+```html
+<PixMultiSelect
+  @title={{title}}
+  @emptyMessage={{emptyMessage}}
+  @id={{id}}
+  @onSelect={{doSomething}}
+  @selected={{selected}}
+  @options={{options}} as |option|>
+  {{option.label}}
+</PixMultiSelect>
+```
+
+## Arguments
+
+<ArgsTable story="Searchable" />

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

@@ -0,0 +1,78 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const Default = (args) => {
+  return {
+    template: hbs`
+      <PixProgressGauge
+        @value={{value}}
+        @color={{color}}
+        @isArrowLeft={{isArrowLeft}}
+        @subtitle={{subtitle}}
+        @tooltipText={{tooltipText}}
+      />
+    `,
+    context: args,
+  };
+};
+Default.args = {
+  tooltipText: '%',
+};
+
+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>
+    `,
+    context: args,
+  };
+};
+whiteProgressGauge.args = {
+  value: '50',
+  tooltipText: '50%',
+  color: 'white',
+  isArrowLeft: true,
+  subtitle: 'Avancement',
+};
+
+export const argTypes = {
+  value: {
+    name: 'value',
+    description: 'Valeur atteinte sur 100',
+    type: { name: 'number', required: false },
+    table: { defaultValue: { summary: null } },
+  },
+  color: {
+    name: 'color',
+    description:
+      'Modifie la couleur de la barre de progression. Peut prendre les valeurs `yellow` ou `white`',
+    type: { name: 'string', required: false },
+    table: { defaultValue: { summary: 'yellow' } },
+    control: { type: 'select', options: ['yellow', 'white'] },
+  },
+  isArrowLeft: {
+    name: 'isArrowLeft',
+    description: "Modifie la position de l'info bulle sur la gauche",
+    type: { name: 'boolean', required: false },
+    table: { defaultValue: { summary: false } },
+  },
+  subtitle: {
+    name: 'subtitle',
+    description: 'Afficher un sous-titre sous la barre de progression',
+    type: { name: 'string', required: false },
+    table: { defaultValue: { summary: 'null' } },
+  },
+  tooltipText: {
+    name: 'tooltipText',
+    description: "Afficher un label dans l'info bulle au dessus de la barre de progression",
+    type: { name: 'string', required: false },
+    table: { defaultValue: { summary: 'null' } },
+  },
+};

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

@@ -0,0 +1,43 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+import * as stories from './pix-progress-gauge.stories.js';
+
+<Meta
+  title='Others/Progress Gauge'
+  component='PixProgressGauge'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# Progress Gauge
+
+## Default
+
+Permet d'afficher un barre de progression sur un barème de 100%. Des paramètres existent pour changer la position de la tooltip ou la couleur du composant
+
+<Canvas>
+  <Story name='Default' story={stories.Default} height={60} />
+</Canvas>
+
+## White
+
+Démonstration d'une barre de progression blanche avec l'info bulle à gauche avec un sous titre
+
+<Canvas>
+  <Story name='White' story={stories.whiteProgressGauge} height={100} />
+</Canvas>
+
+## Usage
+
+```html
+<PixProgressGauge
+  @value="50"
+  @color="white"
+  @tooltipText="50%"
+  @isArrowLeft="true"
+  @subTitle="Un sous titre" />
+```
+
+## Arguments
+
+<ArgsTable story="Default" />

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

@@ -0,0 +1,71 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+const Template = (args) => {
+  return {
+    template: hbs`
+      <PixRadioButton
+        @label={{label}}
+        @value={{value}}
+        @isDisabled={{isDisabled}}
+      />
+    `,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Poivron',
+};
+
+export const isDisabled = Template.bind({});
+isDisabled.args = {
+  ...Default.args,
+  isDisabled: true,
+};
+
+const checked = (args) => {
+  return {
+    template: hbs`
+      <PixRadioButton
+        @label={{label}}
+        @isDisabled={{isDisabled}}
+        checked
+      />
+    `,
+    context: args,
+  };
+};
+
+export const disabledChecked = checked.bind({});
+disabledChecked.args = {
+  ...Default.args,
+  isDisabled: true,
+};
+
+export const defaultChecked = checked.bind({});
+defaultChecked.args = Default.args;
+
+export const argTypes = {
+  label: {
+    name: 'label',
+    description: 'Le label du bouton radio',
+    type: { name: 'string', required: true },
+    defaultValue: null,
+  },
+  value: {
+    name: 'value',
+    description: "Valeur permettant d'identifier l'option sélectionnée",
+    type: { name: 'string', required: false },
+    defaultValue: null,
+  },
+  isDisabled: {
+    name: 'isDisabled',
+    description: 'Pour désactiver/activer le bouton radio',
+    type: { name: 'boolean', required: false },
+    defaultValue: false,
+    table: {
+      defaultValue: { summary: 'false' },
+    },
+  },
+};

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

@@ -0,0 +1,49 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+
+import * as stories from './pix-radio-button.stories.js';
+
+<Meta
+  title='Form/Radio Button'
+  component='PixRadioButton'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# Pix Radio Button
+
+Un bouton radio permettant de sélectionner une seule option dans une liste.
+
+⚠️ Le bouton radio ne peut pas être utilisé seul : il faut au minimum **2 options**.
+Il est préférable de ne pas sélectionner d’option par défaut pour que le choix de l’utilisateur soit conscient (en particulier si le choix est obligatoire).
+
+## Default
+
+<Canvas isColumn>
+  <Story name= "Default" story={stories.Default} height={60} />
+  <Story name='Default checked' story={stories.defaultChecked} height={60} />
+</Canvas>
+
+## IsDisabled
+
+État inactif du bouton radio.
+
+<Canvas isColumn>
+  <Story name='Disabled' story={stories.isDisabled} height={60} />
+  <Story name='Disabled checked' story={stories.disabledChecked} height={60} />
+</Canvas>
+
+## Usage
+
+```html
+
+<PixRadioButton
+    @label={{label}}
+    @value={{value}}
+    @isDisabled={{isDisabled}}
+/>
+```
+
+## Arguments
+
+<ArgsTable story="Default" />

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

@@ -0,0 +1,45 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const returnTo = (args) => {
+  return {
+    template: hbs`
+      <PixReturnTo @route='profile' @shade={{shade}} />
+    `,
+    context: args,
+  };
+};
+returnTo.args = {
+  shade: 'blue',
+};
+
+export const returnToWithText = (args) => {
+  return {
+    template: hbs`
+      <PixReturnTo @route='profile' @shade={{shade}}>
+        Retour vers mon profil
+      </PixReturnTo>
+    `,
+    context: args,
+  };
+};
+
+export const argTypes = {
+  route: {
+    name: 'route',
+    description: 'Route de redirection',
+    type: { name: 'string', required: true },
+    defaultValue: null,
+  },
+  model: {
+    name: 'model',
+    description: 'Model Ember',
+    type: { required: false },
+  },
+  shade: {
+    name: 'shade',
+    description: 'Couleur du lien',
+    type: { name: 'string', required: false },
+    defaultValue: 'black',
+    control: { type: 'select', options: ['white', 'black', 'blue'] },
+  },
+};

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

@@ -0,0 +1,41 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+import * as stories from './pix-return-to.stories.js';
+
+<Meta
+  title='Basics/Return To'
+  component='PixReturnTo'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# Pix Return To
+
+Le `ReturnTo` est un lien de retour vers uneOpixRe page précédente.
+
+> Il est nécessaire de passer une @route au composant.
+
+> Il est possible d'afficher uniquement l'icone flèche en omettant de mettre du contenu enfant dans la balise.
+
+<Canvas isColumn>
+  Lien sans texte
+  <Story name="Return To" story={stories.returnTo} height={60} />
+  Lien avec texte
+  <Story name="Return To With Text" story={stories.returnToWithText} height={60} />
+</Canvas>
+
+## Usage
+
+```html
+Liens avec texte
+<PixReturnTo @route='profile'>
+  Un lien de retour
+</PixReturnTo>
+
+Liens sans texte
+<PixReturnTo @route='profile' />
+```
+
+## Arguments
+
+<ArgsTable story="Return To With Text" />