@1024pix/pix-ui 12.0.0 → 13.3.0

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

@@ -0,0 +1,191 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+export const Template = (args) => {
+  return {
+    template: hbs`
+      <div style="width: 300px;">
+        <PixDropdown
+          @id={{id}}
+          @options={{options}}
+          @onSelect={{onSelect}}
+          @placeholder={{placeholder}}
+          @selectedOption={{selectedOption}}
+          @isSearchable={{isSearchable}}
+          @searchPlaceholder={{searchPlaceholder}}
+          @label={{label}}
+          @clearLabel={{clearLabel}}
+          @expandLabel={{expandLabel}}
+          @collapseLabel={{collapseLabel}}
+          @pageSize={{pageSize}}
+          @requiredLabel={{requiredLabel}}
+        />
+      </div>
+    `,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  options: [
+    { value: '1', label: 'Figues' },
+    { 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)' },
+  ],
+  placeholder: 'Choisissez une option',
+  onSelect: action('onSelect'),
+  id: 'default-dropdown',
+  clearLabel: 'Supprimer la sélection',
+  expandLabel: 'Ouvrir la liste',
+  collapseLabel: 'Réduire la liste',
+};
+
+export const withLabel = Template.bind({});
+withLabel.args = {
+  ...Default.args,
+  id: 'dropdown-with-label',
+  label: 'Ton fruit préféré: ',
+  requiredLabel: 'Champ requis',
+};
+
+export const searchableDropdown = Template.bind({});
+searchableDropdown.args = {
+  ...Default.args,
+  isSearchable: true,
+  id: 'searchable-dropdown',
+  placeholder: 'Fraises, Mangues...',
+  searchPlaceholder: 'Rechercher',
+};
+
+export const paginatedDropdown = Template.bind({});
+paginatedDropdown.args = {
+  ...Default.args,
+  id: 'paginated-dropdown',
+  placeholder: 'Quel est ton fruit préféré ?',
+  pageSize: 10,
+  isSearchable: true,
+  searchPlaceholder: 'Rechercher',
+  options: Array.from({ length: 100 }, (_, index) => ({
+    value: `${index}`,
+    label: `${index}abc`,
+  })),
+};
+
+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``.',
+    type: { name: 'array', required: true },
+  },
+  selectedOption: {
+    name: 'selectedOption',
+    description: 'Option sélectionnée',
+    options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+    control: { type: 'select' },
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  onSelect: {
+    name: 'onSelect',
+    description: 'Fonction à appeler quand une option est sélectionnée.',
+    type: { required: true },
+    control: { disable: true },
+  },
+  isSearchable: {
+    name: 'isSearchable',
+    description:
+      "Rend le champ cherchable, le paramètre @searchPlaceholder devient requis pour l'accessibilité.",
+    control: { type: 'boolean' },
+    type: { name: 'boolean', required: false },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  searchPlaceholder: {
+    name: 'searchPlaceholder',
+    description: 'Placeholder du champ de recherche. Requis si le menu est cherchable.',
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  placeholder: {
+    name: 'placeholder',
+    description: "Un texte donnant une indication a l'utilisateur sur le choix des options.",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  label: {
+    name: 'label',
+    description: 'Label du menu déroulant, le paramètre @id devient obligatoire avec ce paramètre.',
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  requiredLabel: {
+    name: 'requiredLabel',
+    description:
+      'Label indiquant que le champ est requis, le paramètre @label devient obligatoire avec ce paramètre.',
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  id: {
+    name: 'id',
+    description: "L'id du label",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  pageSize: {
+    name: 'pageSize',
+    description: "Le nombre d'élément à afficher dans la liste.",
+    type: { name: 'number', required: false },
+    table: {
+      type: { summary: 'number' },
+    },
+  },
+  clearLabel: {
+    name: 'clearLabel',
+    description: "Label de l'icône pour éliminer la sélection. Requis pour l'accessibilité.",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  expandLabel: {
+    name: 'expandLabel',
+    description: "Label de l'icône pour ouvrir le menu déroulant. Requis pour l'accessibilité.",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  collapseLabel: {
+    name: 'collapseLabel',
+    description: "Label de l'icône pour réduire le menu déroulant. Requis pour l'accessibilité.",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+};

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

@@ -0,0 +1,70 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+
+import * as stories from './pix-dropdown.stories.js';
+
+<Meta
+  title='Form/Dropdown'
+  component='PixDropdown'
+  argTypes={stories.argTypes}
+/>
+
+# Pix Dropdown
+
+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.
+
+> **⚠️** __Il est nécessaire d'avoir au moins un label ou un placeholder !__
+
+> **⚠️** __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='Dropdown' story={stories.Default} height={200} />
+</Canvas>
+
+## With label
+
+<Canvas>
+  <Story story={stories.withLabel} height={200} />
+</Canvas>
+
+## Searchable
+
+<Canvas>
+  <Story name="Searchable" story={stories.searchableDropdown} height={200} />
+</Canvas>
+
+## Infinite scroll
+
+<Canvas>
+  <Story name="Paginated" story={stories.paginatedDropdown} height={200} />
+</Canvas>
+
+## Usage
+
+```html
+<PixDropdown
+  @id={{id}}
+  @options={{options}}
+  @onSelect={{onSelect}}
+  @selectedOption="1"
+  @isSearchable={{false}}
+  @placeholder="Choisissez une option"
+  @searchPlaceholder="Rechercher"
+  @label="Mon menu déroulant"
+  @requiredLabel="Requis"
+  @clearLabel="Supprimer la sélection"
+  @expandLabel="Ouvrir le menu déroulant"
+  @collapseLabel="Réduire le menu déroulant"
+  @pageSize={{10}}
+/>
+```
+
+## Arguments
+
+<ArgsTable story="Dropdown" />

package/app/stories/pix-input-password.stories.mdx

@@ -60,7 +60,6 @@ Si vous utilisez le `PixInputPassword` sans label alors il faut renseigner le pa
   @value='{{value}}'
   @errorMessage='{{errorMessage}}'
   @prefix='{{prefix}}'
-  @onChange='{{onChange}}'
 />
 ```
 

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

@@ -48,8 +48,7 @@ Le PixInput permet de créer un champ de texte.
   @information='Complément du label'
   @errorMessage="Un message d'erreur"
   @icon="eye"
-  @isIconLeft={{false}}
-  @onChange={{onChange}} />
+  @isIconLeft={{false}} />
 ```
 
 ## Arguments

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

@@ -0,0 +1,40 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const modal = (args) => {
+  return {
+    template: hbs`
+      <PixModal @title={{this.title}}>
+        <:content>
+          <p>
+            Une fenêtre modale 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 à une question à laquelle il est impératif que l'utilisateur
+            réponde avant de poursuivre, ou de modifier quoi que ce soit. La fenêtre modale a pour propos : d'obtenir
+            des informations de l'utilisateur (ces informations sont nécessaires pour réaliser une opération) ; de
+            fournir une information à l'utilisateur (ce dernier doit en prendre connaissance avant de pouvoir continuer
+            à utiliser l'application).
+          </p>
+        </:content>
+        <:footer>
+          <PixButton @backgroundColor="transparent-light" @isBorderVisible="true">Annuler</PixButton>
+          <PixButton>Valider</PixButton>
+        </:footer>
+      </PixModal>
+    `,
+    context: args,
+  };
+};
+
+export const argTypes = {
+  title: {
+    name: 'title',
+    description: 'Titre de la modale',
+    type: { name: 'string', required: false },
+    defaultValue: "Qu'est-ce qu'une modale ?",
+  },
+  onCloseButtonClick: {
+    name: 'onCloseButtonClick',
+    description: 'Fonction à executer lors du clic sur le bouton de fermeture de la modale',
+    type: { name: 'function', required: true },
+    defaultValue: null,
+  },
+};

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

@@ -0,0 +1,59 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+
+import * as stories from './pix-modal.stories.js';
+
+<Meta
+  title='Basics/Modal'
+  component='PixModal'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# PixModal
+
+Une fenêtre modale responsive et scrollable avec un overlay.
+
+Ce composant possède deux `yield` :
+- `:content` est destiné à accueillir le contenu principal de la fenêtre modale. Il peut accueillir tout type de
+  contenu HTML (simple texte, image, formulaire, etc.)
+- `:footer` peut également accueillir tout type de contenu HTML, mais est destiné aux boutons permettant d'interagir
+  avec la modale, ce qui permettra de les positionner correctement dans tous les cas de figure.
+
+<Canvas>
+  <Story name='PixModal' story={stories.modal} height={500} />
+</Canvas>
+
+## Usage
+
+```html
+<PixModal
+  @title="Qu'est-ce qu'une modale ?"
+  @onCloseButtonClick={{this.closeModal}}
+>
+ <:content>
+  <p>
+    Une fenêtre modale 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 à une question à laquelle il est impératif que l'utilisateur
+    réponde avant de poursuivre, ou de modifier quoi que ce soit. La fenêtre modale a pour propos : d'obtenir
+    des informations de l'utilisateur (ces informations sont nécessaires pour réaliser une opération) ; de
+    fournir une information à l'utilisateur (ce dernier doit en prendre connaissance avant de pouvoir continuer
+    à utiliser l'application).
+  </p>
+ </:content>
+ <:footer>
+  <PixButton
+    @backgroundColor="transparent-light"
+    @isBorderVisible={{true}}
+    @triggerAction={{this.closeModal}}
+  >
+    Annuler
+  </PixButton>
+  <PixButton>Valider</PixButton>
+ </:footer>
+</PixModal>
+```
+
+## Arguments
+
+<ArgsTable story="PixModal" />

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

@@ -36,14 +36,16 @@ export const argTypes = {
       options: [
         'blue',
         'blue-light',
-        'purple',
-        'purple-light',
         'green',
         'green-light',
-        'yellow',
-        'yellow-light',
         'grey',
         'grey-light',
+        'purple',
+        'purple-light',
+        'orange',
+        'orange-light',
+        'yellow',
+        'yellow-light',
       ],
     },
   },

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

@@ -8,7 +8,8 @@ const Template = (args) => {
         @position={{this.position}}
         @isLight={{this.isLight}}
         @isInline={{this.isInline}}
-        @isWide={{this.isWide}}>
+        @isWide={{this.isWide}}
+        @hide={{this.hide}}>
         <:triggerElement>
           <PixButton aria-describedby={{this.id}}>
             {{this.label}}
@@ -100,6 +101,13 @@ bottom.args = {
   position: 'bottom',
 };
 
+export const hide = Template.bind({});
+hide.args = {
+  label: 'À survoler pour voir la tooltip',
+  text: "Ne devrait pas s'afficher",
+  hide: true,
+};
+
 export const WithHTML = TemplateWithHTMLElement.bind({});
 WithHTML.args = {
   label: 'À survoler pour voir la tooltip',
@@ -154,4 +162,10 @@ export const argTypes = {
     type: { name: 'boolean', required: false },
     table: { defaultValue: { summary: false } },
   },
+  hide: {
+    name: 'hide',
+    description: 'Masquer la tooltip',
+    type: { name: 'boolean', required: false },
+    table: { defaultValue: { summary: false } },
+  },
 };

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

@@ -61,6 +61,13 @@ Les tooltips doivent prendre un `@id` et être référencées par leur élément
 </PixTooltip>
 ```
 
+## Hide
+
+Cache la tooltip (par exemple si le contenu est vide).
+
+<Canvas>
+  <Story name="Hide" story={stories.hide} height={200} />
+</Canvas>
 
 ## Default
 
@@ -165,6 +172,18 @@ Infobulle contenant des éléments HTML
   </:tooltip>
 </PixTooltip>
 
+<PixTooltip
+  @hide={{true}}
+  >
+  <:triggerElement>
+    <button>Tooltip n'apparaissant pas</button>
+  </:triggerElement>
+
+  <:tooltip>
+    Hey
+  </:tooltip>
+</PixTooltip>
+
 <PixTooltip
   @isWide={{true}}
   >

package/docs/adr/0001-utiliser-les-balises-html-natives.md

@@ -0,0 +1,53 @@
+# 1. Eviter les balises HTML natives
+
+Date : 2022-01-04
+
+## État
+
+Accepté
+
+## Contexte
+
+Le framework Ember propose des composants helpers tels que `<Input>` ou `<Textarea>`.
+Cependant leurs comportements diffèrent pas mal des éléments HTML natifs `<input>` et `<textarea>`. 
+
+Nous aimerions choisir une seule solution pour :
+- simplifiier l'utilisation de Pix-UI;
+- ne plus avoir à modifier les composants (exemple sur [PixInput](https://github.com/1024pix/pix-ui/pull/147#discussion_r724312399)).
+
+Actuellement, tous les composants Pix-UI utilisent des balises HTML natives sauf le PixTextarea qui utilise le `<Textarea>` d'Ember.
+
+Historique des PRs qui ont mené à cette problématique :
+- https://github.com/1024pix/pix-ui/pull/149 a changé le PixInputPassword et PixInput pour utiliser `<Input>` plutôt que `<input>` (embarqué dans la version v8.4.0 de Pix-UI).
+- https://github.com/1024pix/pix-ui/pull/147/files a changé le PixInputPassword pour utiliser `<input>` plutôt que `<Input>` (embarqué dans la version v11.0.0 de Pix-UI).
+- https://github.com/1024pix/pix-ui/pull/175/files a changé le PixInput pour utiliser `<input>` plutôt que `<Input>` (embarqué dans la version v11.1.0 de Pix-UI).
+
+#### Solution 1
+Privilégier l'utilisation des composants helpers que propose Ember (`<Input>` / `<Textarea>`).
+
+Ce qui impliquerait : 
+- une solution plus "ember way"
+- une obligation d'utiliser le two-way-binding (les modifications de valeurs dans un composant enfant seront  automatiquement propagées au composant parent) qui va à l'encontre du principe Data Down Action Up (les données descendent vers les composants enfants et les enfants remontent les actions aux composants parents).
+- plus de magie et moins de contrôle, lorsqu'on passe l'attribut `@value` Ember met tout à jour tout seul (le changement est répercuté partout)
+- une obligation de copier le modèle pour ne pas le modifier
+- une difficulté pour la validation de formulaire, avec la librairie `ember-cp-validation` les erreurs s'affichent dans le formulaire au moindre changement (ce qui n'est pas souhaitable) mais de toute manière on est pas sûrs de vouloir continuer à utiliser cette librairie.
+
+
+#### Possibilité 2
+Privilégier l'utilisation des éléments HTML natifs (`<input>` / `<textarea>`).
+
+Ce qui impliquerait : 
+- de ne pas avoir le two-way-binding imposé
+- une obligation de déclarer un `onChange` sur les champs afin d'interargir avec changements du champ
+- une obligation de copier le modèle pour ne pas le modifier
+- une plus grande maîtrise de la balise et ce qu'il s'y passe en coulisse
+
+## Décision
+
+Nous privilégierons les éléments HTML natifs et éviterons autant que possible le two-way-binding.
+
+## Conséquences
+
+Il faut mettre à jour le PixTextarea pour qu'il utilise une balise `<textarea>`.
+
+⚠️ Pour ne pas casser le comportement existant. lors de la mise à jour des versions v11.0.0 / v11.1.0 de Pix-UI il faut mettre à jour tous les PixInput et PixInputPassword afin qu'il définissent un `onChange`.

package/docs/test-component-without-release.stories.mdx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Développement/Tester un composant en developpement dans une app" />
+
+# Tester un composant en developpement dans une app
+
+Il est possible de tester l'intégration d'un composant dans une application
+Ember sans nécessairement créer une nouvelle release.
+
+Pour cela, dans le repertoire de l'application Ember, installer Pix UI
+en utilisant l'adresse du dépôt Github et le nom de la branche.
+Par exemple :
+
+```shell
+npm install "git://github.com/1024pix/pix-ui#add-modal-component" --save-dev
+```
+
+Une fois l'application Ember redémarrée, il sera possible d'accéder aux
+composants Pix UI tels qu'ils sont dans la branche en cours de développement.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "12.0.0",
+  "version": "13.3.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -50,8 +50,9 @@
     "ember-truth-helpers": "^3.0.0"
   },
   "devDependencies": {
+    "@1024pix/ember-testing-library": "^0.5.0",
     "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^2.4.0",
+    "@ember/test-helpers": "^2.6.0",
     "@fortawesome/ember-fontawesome": "^0.2.3",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",