@1024pix/pix-ui 11.1.1 → 13.1.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Pix-UI Changelog
 
+## v13.1.0 (16/02/2022)
+
+
+### :building_construction: Tech
+- [#194](https://github.com/1024pix/pix-ui/pull/194) [TECH] Mise a jour du package-lock.
+- [#192](https://github.com/1024pix/pix-ui/pull/192) [TECH] Améliorer le blueprint pour auto-générer les nouveaux composants.
+
+### :coffee: Various
+- [#198](https://github.com/1024pix/pix-ui/pull/198) [FEAT] Permettre à la tooltip de ne pas s'afficher (PIX-4375)
+- [#196](https://github.com/1024pix/pix-ui/pull/196) [FIX] Corriger les tests qui bloquent la pipeline.
+- [#183](https://github.com/1024pix/pix-ui/pull/183) [DOC] Utiliser les champs de saisie natifs HTML plutôt que ceux d'Ember.
+
+## v13.0.0 (27/01/2022)
+
+
+### :coffee: Various
+- [#188](https://github.com/1024pix/pix-ui/pull/188) [BREAKING_CHANGES] Input / InputPassword missing event on onChange (PIX-4243)
+
+## v12.0.0 (24/01/2022)
+
+
+### :rocket: Enhancement
+- [#94](https://github.com/1024pix/pix-ui/pull/94) [FEATURE] Ajout du composant PixModal
+
+### :bug: Bug fix
+- [#186](https://github.com/1024pix/pix-ui/pull/186) [BREAKING_CHANGES] Désactiver l'autocomplete sur le composant Pix Select (PIX-4158)
+- [#187](https://github.com/1024pix/pix-ui/pull/187) [BUGFIX] Rendre tout le tag sélectionnable (PIX-4179)
+
+## v11.2.0 (14/01/2022)
+
+
+### :coffee: Various
+- [#185](https://github.com/1024pix/pix-ui/pull/185) [A11Y] Ajouter une nouvelle couleur dans la palette de PixTag (PIX-4109)
+
 ## v11.1.1 (17/12/2021)
 
 
@@ -10,7 +44,7 @@
 
 
 ### :building_construction: Tech
-- [#175](https://github.com/1024pix/pix-ui/pull/175) [TECH] Faire en sorte que le message d'erreur soit situé à l'intérieur de l'élément qui le compose (PIX-3829)
+- [#175](https://github.com/1024pix/pix-ui/pull/175) [BREAKING_CHANGES] Faire en sorte que le message d'erreur soit situé à l'intérieur de l'élément qui le compose (PIX-3829)
 
 ## v11.0.1 (08/12/2021)
 
@@ -28,12 +62,12 @@
 - [#177](https://github.com/1024pix/pix-ui/pull/177) [FEATURE] Création du composant Tag sélectionnable  dans Pix UI (PIX-3757)
 
 ### :building_construction: Tech
-- [#180](https://github.com/1024pix/pix-ui/pull/180) [TECH] Ajouter la possibilité d'utiliser des composants Ember à l'intérieur de la tooltip (Pix-3925)
+- [#180](https://github.com/1024pix/pix-ui/pull/180) [BREAKING_CHANGES] Ajouter la possibilité d'utiliser des composants Ember à l'intérieur de la tooltip (Pix-3925)
 - [#179](https://github.com/1024pix/pix-ui/pull/179) [TECH] Mise à jour du template de pull request pour faire apparaître plus clairement les BREAKING_CHANGES
 - [#148](https://github.com/1024pix/pix-ui/pull/148) [TECH] Formatter les fichiers avec prettier (PIX-3469)
 
 ### :bug: Bug fix
-- [#147](https://github.com/1024pix/pix-ui/pull/147) [BUGFIX] Ajout de l'évènement onChange afin de supprimer le message d'erreur lorsque l'utilisateur modifie sa saisie (PIX-3476)
+- [#147](https://github.com/1024pix/pix-ui/pull/147) [BREAKING_CHANGES] Ajout de l'évènement onChange afin de supprimer le message d'erreur lorsque l'utilisateur modifie sa saisie (PIX-3476)
 
 ### :coffee: Various
 - [#178](https://github.com/1024pix/pix-ui/pull/178) [DOC] Améliorer l'information sur les breaking changes dans Pix UI

package/addon/components/pix-block.hbs

@@ -1,4 +1,4 @@
-<div class="pix-block {{concat "pix-block--shadow-" this.getShadowWeight}}" ...attributes>
+<div class="pix-block {{concat 'pix-block--shadow-' this.getShadowWeight}}" ...attributes>
 
   {{yield}}
 

package/addon/components/pix-collapsible.hbs

@@ -1,9 +1,9 @@
-<div class="pix-collapsible {{if this.isUnCollapsed "pix-collapsible--uncollapsed"}}">
+<div class="pix-collapsible {{if this.isUnCollapsed 'pix-collapsible--uncollapsed'}}">
 
   <button
     type="button"
     {{on "click" this.toggleCollapsible}}
-    class="pix-collapsible__title {{if this.isUnCollapsed "pix-collapsible__title--uncollapsed"}}"
+    class="pix-collapsible__title {{if this.isUnCollapsed 'pix-collapsible__title--uncollapsed'}}"
     aria-controls={{this.contentId}}
     aria-expanded={{if this.isUnCollapsed "true" "false"}}
     ...attributes
@@ -15,14 +15,14 @@
       {{this.title}}
     </span>
 
-    <FaIcon @icon="{{if this.isCollapsed "plus" "minus"}}" class="pix-collapsible-title__icon" />
+    <FaIcon @icon="{{if this.isCollapsed 'plus' 'minus'}}" class="pix-collapsible-title__icon" />
   </button>
 
   <div
     id={{this.contentId}}
     aria-hidden={{if this.isCollapsed "true" "false"}}
     class="pix-collapsible__content
-      {{if this.isUnCollapsed " pix-collapsible__content--uncollapse"}}"
+      {{if this.isUnCollapsed ' pix-collapsible__content--uncollapse'}}"
   >
     {{yield}}
   </div>

package/addon/components/pix-icon-button.hbs

@@ -3,7 +3,7 @@
   aria-label={{this.ariaLabel}}
   class="pix-icon-button pix-icon-button--{{this.size}}
     pix-icon-button--{{this.color}}
-    {{if @withBackground " pix-icon-button--background"}}"
+    {{if @withBackground ' pix-icon-button--background'}}"
   {{on "click" this.triggerAction}}
   ...attributes
 >

package/addon/components/pix-input-password.hbs

@@ -7,8 +7,8 @@
   {{/if}}
   <div
     class="pix-input-password__container
-      {{if @errorMessage "pix-input-password__error-container"}}
-      {{if @prefix "pix-input-password__with-prefix"}}"
+      {{if @errorMessage 'pix-input-password__error-container'}}
+      {{if @prefix 'pix-input-password__with-prefix'}}"
   >
 
     {{#if @prefix}}
@@ -20,12 +20,11 @@
       type={{if this.isPasswordVisible "text" "password"}}
       value={{@value}}
       aria-label={{this.ariaLabel}}
-      {{on "change" this.onChange}}
       ...attributes
     />
 
     <PixIconButton
-      class="pix-input-password__button {{if @errorMessage " pix-input-password__error-button"}}"
+      class="pix-input-password__button {{if @errorMessage ' pix-input-password__error-button'}}"
       @icon={{if this.isPasswordVisible "eye" "eye-slash"}}
       @ariaLabel={{if this.isPasswordVisible "Masquer le mot de passe" "Afficher le mot de passe"}}
       @triggerAction={{this.togglePasswordVisibility}}

package/addon/components/pix-input-password.js

@@ -26,9 +26,4 @@ export default class PixInputPassword extends PixInput {
   togglePasswordVisibility() {
     this.isPasswordVisible = !this.isPasswordVisible;
   }
-
-  @action
-  onChange() {
-    if (typeof this.args.onChange === 'function') this.args.onChange();
-  }
 }

package/addon/components/pix-input.hbs

@@ -7,20 +7,14 @@
   {{/if}}
 
   <div class="pix-input__container">
-    <input
-      id={{this.id}}
-      class={{this.className}}
-      value={{@value}}
-      {{on "change" this.onChange}}
-      ...attributes
-    />
+    <input id={{this.id}} class={{this.className}} value={{@value}} ...attributes />
 
     {{#if @errorMessage}}
       <FaIcon @icon="times" class="pix-input__error-icon" />
     {{/if}}
 
     {{#if @icon}}
-      <FaIcon @icon={{@icon}} class="pix-input__icon {{if @isIconLeft "pix-input__icon--left"}}" />
+      <FaIcon @icon={{@icon}} class="pix-input__icon {{if @isIconLeft 'pix-input__icon--left'}}" />
     {{/if}}
   </div>
 

package/addon/components/pix-input.js

@@ -1,9 +1,6 @@
 import Component from '@glimmer/component';
 
-import { action } from '@ember/object';
 export default class PixInput extends Component {
-  text = 'pix-input';
-
   get id() {
     if (!this.args.id || !this.args.id.toString().trim()) {
       throw new Error('ERROR in PixInput component, @id param is not provided');
@@ -18,9 +15,4 @@ export default class PixInput extends Component {
     this.args.isIconLeft && classNames.push('pix-input__input--icon-left');
     return classNames.join(' ');
   }
-
-  @action
-  onChange() {
-    if (typeof this.args.onChange === 'function') this.args.onChange();
-  }
 }

package/addon/components/pix-message.hbs

@@ -1,4 +1,4 @@
-<p class="pix-message {{concat "pix-message--" this.type}}" ...attributes>
+<p class="pix-message {{concat 'pix-message--' this.type}}" ...attributes>
   {{#if @withIcon}}
     <FaIcon @icon={{this.iconClass}} />
   {{/if}}

package/addon/components/pix-modal.hbs

@@ -0,0 +1,28 @@
+<div class="pix-modal__overlay">
+  <div
+    class="pix-modal"
+    role="dialog"
+    aria-labelledby="modal-title"
+    aria-describedby="modal-content"
+    aria-modal="true"
+    ...attributes
+  >
+    <header class="pix-modal__header">
+      <h1 id="modal-title" class="pix-modal__title">{{@title}}</h1>
+      <PixIconButton
+        @icon="times"
+        @triggerAction={{@onCloseButtonClick}}
+        @ariaLabel="Fermer"
+        @size="small"
+        @withBackground={{true}}
+        class="pix-modal__close-button"
+      />
+    </header>
+    <main id="modal-content" class="pix-modal__content">
+      {{yield to="content"}}
+    </main>
+    <footer class="pix-modal__footer">
+      {{yield to="footer"}}
+    </footer>
+  </div>
+</div>

package/addon/components/pix-modal.js

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+
+export default class PixModal extends Component {
+  constructor(...args) {
+    super(...args);
+
+    if (!this.args.title) {
+      throw new Error('ERROR in PixModal component: @title argument is required.');
+    }
+  }
+}

package/addon/components/pix-multi-select.hbs

@@ -5,7 +5,7 @@
   {{/if}}
 
   {{#if @isSearchable}}
-    <label class="pix-multi-select-header {{if this.isBig "pix-multi-select-header--big"}}">
+    <label class="pix-multi-select-header {{if this.isBig 'pix-multi-select-header--big'}}">
 
       <span class="pix-multi-select-header__title">{{@title}}</span>
       <FaIcon @icon="search" class="pix-multi-select-header__search-icon" />
@@ -26,25 +26,25 @@
     <button
       id={{@id}}
       type="button"
-      class="pix-multi-select-header {{if this.isBig "pix-multi-select-header--big"}}"
+      class="pix-multi-select-header {{if this.isBig 'pix-multi-select-header--big'}}"
       {{on "click" this.toggleDropDown}}
     >
       {{@title}}
       <FaIcon
         class="pix-multi-select-header__dropdown-icon
-          {{if this.isExpanded " pix-multi-select-header__dropdown-icon--expand"}}"
+          {{if this.isExpanded ' pix-multi-select-header__dropdown-icon--expand'}}"
         @icon={{if this.isExpanded "chevron-up" "chevron-down"}}
       />
     </button>
   {{/if}}
 
-  <ul class="pix-multi-select-list {{unless this.isExpanded "pix-multi-select-list--hidden"}}">
+  <ul class="pix-multi-select-list {{unless this.isExpanded 'pix-multi-select-list--hidden'}}">
     {{#if (gt this.results.length 0)}}
       {{#each this.results as |option|}}
         <li class="pix-multi-select-list__item">
           <input
             class="pix-multi-select-list__checkbox
-              {{if @isSearchable " pix-multi-select-list__checkbox--searchable"}}"
+              {{if @isSearchable ' pix-multi-select-list__checkbox--searchable'}}"
             type="checkbox"
             checked={{option.checked}}
             id={{concat @id "-" option.value}}

package/addon/components/pix-progress-gauge.hbs

@@ -1,7 +1,7 @@
 <div
   class="progress-gauge
     {{this.progressGaugeClass}}
-    {{if @isArrowLeft "progress-gauge--tooltip-left"}}"
+    {{if @isArrowLeft 'progress-gauge--tooltip-left'}}"
   ...attributes
 >
   <div class="progress-gauge__referrer"></div>

package/addon/components/pix-radio-button.hbs

@@ -1,5 +1,5 @@
 <div class="pix-radio-button">
-  <label class="{{if @isDisabled " pix-radio-button--disabled"}}">
+  <label class="{{if @isDisabled ' pix-radio-button--disabled'}}">
     <input
       disabled={{@isDisabled}}
       aria-disabled="{{@isDisabled}}"

package/addon/components/pix-select.hbs

@@ -10,8 +10,9 @@
       id={{@id}}
       list="{{this.datalistId}}"
       {{on "input" this.onChange}}
-      class="{{if this.isValid "pix-select--is-valid"}} {{if this.isBig "pix-select--big"}}"
+      class="{{if this.isValid 'pix-select--is-valid'}} {{if this.isBig 'pix-select--big'}}"
       ...attributes
+      autocomplete="off"
     />
 
     <datalist id={{this.datalistId}}>
@@ -24,7 +25,7 @@
 
     <select
       id={{@id}}
-      class="{{if this.isBig "pix-select--big"}}"
+      class="{{if this.isBig 'pix-select--big'}}"
       {{on "change" this.onChange}}
       ...attributes
     >

package/addon/components/pix-selectable-tag.hbs

@@ -1,4 +1,4 @@
-<div class="pix-selectable-tag {{if this.isChecked " pix-selectable-tag--checked"}}">
+<div class="pix-selectable-tag {{if this.isChecked ' pix-selectable-tag--checked'}}">
   <input
     type="checkbox"
     id={{@id}}

package/addon/components/pix-textarea.hbs

@@ -8,7 +8,7 @@
     id={{@id}}
     @value={{@value}}
     maxlength={{if @maxlength @maxlength}}
-    class="{{if @errorMessage "pix-textarea--error"}}"
+    class="{{if @errorMessage 'pix-textarea--error'}}"
     ...attributes
   />
   {{#if @maxlength}}

package/addon/components/pix-tooltip-deprecated.hbs

@@ -7,9 +7,9 @@
       id={{@id}}
       role="tooltip"
       class="pix-tooltip__content pix-tooltip__content--{{this.position}}
-        {{if @isInline "pix-tooltip__content--inline"}}
-        {{if @isLight "pix-tooltip__content--light"}}
-        {{if @isWide "pix-tooltip__content--wide"}}"
+        {{if @isInline 'pix-tooltip__content--inline'}}
+        {{if @isLight 'pix-tooltip__content--light'}}
+        {{if @isWide 'pix-tooltip__content--wide'}}"
     >
       {{this.text}}
     </span>

package/addon/components/pix-tooltip.hbs

@@ -4,15 +4,17 @@
   {{/if}}
 
   {{#if (has-block "tooltip")}}
-    <span
-      id={{@id}}
-      role="tooltip"
-      class="pix-tooltip__content pix-tooltip__content--{{this.position}}
-        {{if @isInline "pix-tooltip__content--inline"}}
-        {{if @isLight "pix-tooltip__content--light"}}
-        {{if @isWide "pix-tooltip__content--wide"}}"
-    >
-      {{yield to="tooltip"}}
-    </span>
+    {{#if this.display}}
+      <span
+        id={{@id}}
+        role="tooltip"
+        class="pix-tooltip__content pix-tooltip__content--{{this.position}}
+          {{if @isInline 'pix-tooltip__content--inline'}}
+          {{if @isLight 'pix-tooltip__content--light'}}
+          {{if @isWide 'pix-tooltip__content--wide'}}"
+      >
+        {{yield to="tooltip"}}
+      </span>
+    {{/if}}
   {{/if}}
 </span>

package/addon/components/pix-tooltip.js

@@ -14,4 +14,8 @@ export default class PixTooltip extends Component {
     ];
     return correctsPosition.includes(this.args.position) ? this.args.position : 'top';
   }
+
+  get display() {
+    return typeof this.args.hide === 'undefined' || !this.args.hide;
+  }
 }

package/addon/styles/_colors.scss

@@ -3,6 +3,7 @@
 // primary
 $blue: #3D68FF;
 $yellow: #FFBE00;
+$orange: #DA7601;
 $red: #D63F00;
 $blue-zodiac: #505F79;
 $black: #07142E;

package/addon/styles/_pix-input.scss

@@ -59,10 +59,8 @@
   }
 
   input {
-    display: flex;
+    width: 100%;
     height: 36px;
-    flex-direction: column;
-    justify-content: center;
     border: 1px solid $grey-40;
 
     @include input();

package/addon/styles/_pix-modal.scss

@@ -0,0 +1,95 @@
+.pix-modal__overlay {
+  background-color: rgba(52, 69, 99, .7);
+  bottom: 0;
+  left: 0;
+  overflow-y: scroll;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+$modal-padding: 24px;
+$mobile-close-button-size: 32px;
+$tablet-close-button-size: 40px;
+$space-between-title-and-close-button: 8px;
+$button-margin: 16px;
+
+.pix-modal {
+  @import "reset-css";
+  box-shadow: 1px 1px 5px rgba(0,0,0,.1);
+  margin: 20vw auto;
+  max-width: 512px;
+  width: calc(100% - 24px);
+
+  &__header {
+    background: $white;
+    border-bottom: 1px solid $grey-20;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    padding: $modal-padding;
+    position: relative;
+  }
+
+  &__close-button {
+    flex-shrink: 0;
+    right: $modal-padding;
+    position: absolute;
+    top: $modal-padding;
+
+    @include device-is('tablet') {
+      height: $tablet-close-button-size;
+      width: $tablet-close-button-size;
+    }
+  }
+
+  &__title {
+    margin-bottom: 0;
+    font-family: $font-open-sans;
+    color: $grey-90;
+    font-size: 1.25rem;
+    line-height: 1.875rem;
+    font-weight: $font-normal;
+    padding-right: $mobile-close-button-size + $space-between-title-and-close-button;
+
+    @include device-is('tablet') {
+      padding-right: $tablet-close-button-size + $space-between-title-and-close-button;
+    }
+  }
+
+  &__content {
+    background-color: $grey-10;
+    padding: $modal-padding;
+    font-size: 0.875rem;
+    color: $grey-90;
+    line-height: 1.375rem;
+    font-family: $font-roboto;
+    font-weight: $font-normal;
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__footer {
+    background-color: $grey-10;
+    padding: 0 $modal-padding $modal-padding - $button-margin;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+
+    @include device-is('tablet') {
+      display: flex;
+      justify-content: flex-end;
+      flex-wrap: wrap;
+    }
+
+    .pix-button {
+      margin-bottom: $button-margin;
+      width: 100%;
+
+      @include device-is('tablet') {
+        margin: 0 0 $button-margin $button-margin;
+        width: auto;
+      }
+    }
+  }
+}

package/addon/styles/_pix-selectable-tag.scss

@@ -37,6 +37,10 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
     position: absolute;
     opacity: 0;
     cursor: pointer;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
   }
 
   label {

package/addon/styles/_pix-tag.scss

@@ -50,6 +50,15 @@
     background-color: lighten($yellow, 35%);
   }
 
+  &--orange {
+    background-color: $orange;
+  }
+
+  &--orange-light {
+    color: darken($orange, 25%);
+    background-color: lighten($orange, 35%);
+  }
+
   &--grey {
     color: $grey-15;
     background-color: $grey-60;

package/addon/styles/addon.scss

@@ -25,6 +25,7 @@
 @import 'pix-input';
 @import 'pix-input-password';
 @import 'pix-radio-button';
+@import 'pix-modal';
 @import 'pix-input-code';
 @import 'pix-selectable-tag';
 

package/app/components/pix-modal-content.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-modal-content';

package/app/components/pix-modal-footer.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-modal-footer';

package/app/components/pix-modal.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-modal';

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": "11.1.1",
+  "version": "13.1.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"