@1024pix/pix-ui 16.0.0 → 17.1.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Pix-UI Changelog
 
+## v17.1.0 (22/08/2022)
+
+
+### :rocket: Amélioration
+- [#243](https://github.com/1024pix/pix-ui/pull/243) [FEATURE] Ajout d'un icone pour fermer Pix-Banner (PIX-5379)
+- [#244](https://github.com/1024pix/pix-ui/pull/244) [FEATURE] PixModal : ajouter des modifiers trap-focus et action au echap (PIX-5157)
+
+## v17.0.0 (09/08/2022)
+
+
+### :coffee: Autre
+- [#239](https://github.com/1024pix/pix-ui/pull/239) [BREAKING_CHANGES][BUGFIX] Correction des couleurs du design system par rapport à Figma (PIX-5331).
+
+## v16.1.0 (03/08/2022)
+
+
+### :rocket: Amélioration
+- [#232](https://github.com/1024pix/pix-ui/pull/232) [FEATURE] Ajout du composant checkbox (PIX-3030)
+
 ## v16.0.0 (13/07/2022)
 
 

package/addon/components/pix-banner.hbs

@@ -1,16 +1,33 @@
-<div class="pix-banner pix-banner--{{this.type}}" ...attributes>
-  <FaIcon @icon={{this.icon}} class="pix-banner__icon" />
-  <div>
-    {{yield}}
-    {{#if this.displayAction}}
-      {{#if this.isExternalLink}}
-        <a class="pix-banner__action" href={{@actionUrl}} target="_blank" rel="noopener noreferrer">
-          {{@actionLabel}}
-          <FaIcon class="external-link" @icon="up-right-from-square" />
-        </a>
-      {{else}}
-        <LinkTo class="pix-banner__action" @route={{@actionUrl}}>{{@actionLabel}}</LinkTo>
+{{#if this.displayBanner}}
+  <div class="pix-banner pix-banner--{{this.type}}" role="alert" ...attributes>
+    <FaIcon @icon={{this.icon}} class="pix-banner__icon" />
+    <div>
+      {{yield}}
+      {{#if this.displayAction}}
+        {{#if this.isExternalLink}}
+          <a
+            class="pix-banner__action"
+            href={{@actionUrl}}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {{@actionLabel}}
+            <FaIcon class="external-link" @icon="up-right-from-square" />
+          </a>
+        {{else}}
+          <LinkTo class="pix-banner__action" @route={{@actionUrl}}>{{@actionLabel}}</LinkTo>
+        {{/if}}
       {{/if}}
+    </div>
+    {{#if this.canCloseBanner}}
+      <div class="pix-banner__close">
+        <PixIconButton
+          @ariaLabel="Fermer"
+          @icon="xmark"
+          @size="small"
+          @triggerAction={{this.closeBanner}}
+        />
+      </div>
     {{/if}}
   </div>
-</div>
+{{/if}}

package/addon/components/pix-banner.js

@@ -1,4 +1,6 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 const TYPE_INFO = 'information';
 const TYPE_ERROR = 'error';
 const TYPE_WARNING = 'warning';
@@ -25,6 +27,7 @@ const icons = {
 };
 
 export default class PixBanner extends Component {
+  @tracked isBannerVisible = true;
   get type() {
     return types.includes(this.args.type) ? this.args.type : TYPE_INFO;
   }
@@ -40,4 +43,17 @@ export default class PixBanner extends Component {
   get isExternalLink() {
     return this.args.actionUrl.includes('/');
   }
+
+  get canCloseBanner() {
+    return this.args.canCloseBanner;
+  }
+
+  get displayBanner() {
+    return this.isBannerVisible;
+  }
+
+  @action
+  closeBanner() {
+    this.isBannerVisible = false;
+  }
 }

package/addon/components/pix-checkbox.hbs

@@ -0,0 +1,14 @@
+<div class="pix-checkbox">
+  <label
+    class="pix-checkbox__label {{this.labelSizeClass}} {{if @screenReaderOnly 'sr-only'}}"
+    for={{this.id}}
+  >
+    {{this.label}}
+  </label>
+  <input
+    id={{this.id}}
+    type="checkbox"
+    class="pix-checkbox__input {{if @isIndeterminate ' pix-checkbox__input--indeterminate'}}"
+    ...attributes
+  />
+</div>

package/addon/components/pix-checkbox.js

@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/string';
+
+const labelSizeToClass = new Map([
+  ['small', 'pix-checkbox__label--small'],
+  ['default', 'pix-checkbox__label--default'],
+  ['large', 'pix-checkbox__label--large'],
+]);
+
+export default class PixCheckbox extends Component {
+  constructor() {
+    super(...arguments);
+
+    if (!this.args.label) {
+      throw new Error('ERROR in PixCheckbox component, you must provide @label params');
+    }
+    this.label = htmlSafe(this.args.label);
+  }
+
+  get id() {
+    if (!this.args.id || !this.args.id.toString().trim()) {
+      throw new Error('ERROR in PixCheckbox component, @id param is not provided');
+    }
+    return this.args.id;
+  }
+
+  get labelSizeClass() {
+    return labelSizeToClass.get(this.args.labelSize);
+  }
+}

package/addon/components/pix-modal.hbs

@@ -1,17 +1,23 @@
-<div class="pix-modal__overlay">
+<div
+  class="pix-modal__overlay"
+  {{on "click" this.closeAction}}
+  {{trap-focus}}
+  {{on-escape-action this.closeAction}}
+>
   <div
     class="pix-modal"
     role="dialog"
     aria-labelledby="modal-title"
     aria-describedby="modal-content"
     aria-modal="true"
+    {{on "click" this.stopPropagation}}
     ...attributes
   >
     <header class="pix-modal__header">
       <h1 id="modal-title" class="pix-modal__title">{{@title}}</h1>
       <PixIconButton
         @icon="xmark"
-        @triggerAction={{@onCloseButtonClick}}
+        @triggerAction={{this.closeAction}}
         @ariaLabel="Fermer"
         @size="small"
         @withBackground={{true}}

package/addon/components/pix-modal.js

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
 
 export default class PixModal extends Component {
   constructor(...args) {
@@ -8,4 +9,16 @@ export default class PixModal extends Component {
       throw new Error('ERROR in PixModal component: @title argument is required.');
     }
   }
+
+  @action
+  stopPropagation(event) {
+    event.stopPropagation();
+  }
+
+  @action
+  closeAction(params) {
+    if (this.args.onCloseButtonClick) {
+      this.args.onCloseButtonClick(params);
+    }
+  }
 }

package/addon/styles/_colors.scss

@@ -14,7 +14,7 @@ $pix-primary-80: #000e87;
 
 // Secondary
 $pix-secondary-5: #fff9e6;
-$pix-secondary-10: #ffeeb3;
+$pix-secondary-10: #fff1c5;
 $pix-secondary-20: #ffe381;
 $pix-secondary: #ffd235;
 $pix-secondary-40: #ffbe00;
@@ -75,7 +75,7 @@ $pix-warning-30: #ffd235;
 $pix-warning-40: #ffbe00;
 $pix-warning-50: #eaa600;
 $pix-warning-60: #ce8900;
-$pix-warning-70: #ac6a00;
+$pix-warning-70: #a95800;
 $pix-warning-80: #874d00;
 
 // Error
@@ -489,20 +489,20 @@ $yellow-alert-dark: #a95800;
 /**
  * @deprecated
  *-To style text or border : $pix-error-70
- *-To style background : $pix-error-10
+ *-To style background : $pix-error-5
  */
 $error: #ff4b00;
 
 /**
  * @deprecated
  *-To style text or border : $pix-success-70
- *-To style background : $pix-success-10
+ *-To style background : $pix-success-5
  */
 $success: #57c884;
 
 /**
  * @deprecated
- *-To style text or border : $pix-warning-60
- *-To style background : $pix-warning-10
+ *-To style text or border : $pix-warning-70
+ *-To style background : $pix-warning-5
  */
 $warning: #ffbe00;

package/addon/styles/_pix-banner.scss

@@ -2,52 +2,73 @@
   @import 'reset-css';
   font-family: $font-roboto;
   font-weight: $font-normal;
-  padding: 10px 16px;
+  padding: 16px 24px;
   display: flex;
   align-items: center;
-  font-size: 0.75rem;
-
-  @include device-is('tablet') {
-    padding: 20px 60px;
-    font-size: 0.875rem;
-  }
+  font-size: 0.875rem;
+  box-shadow: 0px 4px 8px rgba(7, 20, 46, 0.08);
 
   &__action {
     text-decoration: underline;
-    letter-spacing: 0.028rem;
     color: inherit;
     .external-link {
-      margin-left: 3px;
-      font-size: 0.75rem;
-
-      @include device-is('tablet') {
-        font-size: 0.875rem;
-      }
+      margin-left: 4px;
+      font-size: 0.875rem;
     }
   }
-
+  &__close {
+    display: flex;
+    margin-left: auto;
+    padding-left: 8px;
+  }
   &__icon {
-    font-size: 0.875rem;
+    font-size: 1.125rem;
     margin-right: $spacing-xs;
-
-    @include device-is('tablet') {
-      font-size: 1rem;
-    }
   }
 
   &--information {
-    background-color: $pix-primary-10;
+    background-color: $pix-primary-5;
     color: $pix-primary-70;
+    .pix-icon-button {
+      background-color: $pix-primary-5;
+      color: $pix-primary-70;
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: $pix-primary-10;
+        color: $pix-primary-70;
+      }
+    }
   }
 
   &--warning {
-    background-color: $pix-warning-10;
-    color: $pix-warning-60;
+    background-color: $pix-warning-5;
+    color: $pix-warning-70;
+    .pix-icon-button {
+      background-color: $pix-warning-5;
+      color: $pix-warning-70;
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: $pix-warning-10;
+        color: $pix-warning-70;
+      }
+    }
   }
 
   &--error {
-    background-color: $pix-error-10;
+    background-color: $pix-error-5;
     color: $pix-error-70;
+    .pix-icon-button {
+      background-color: $pix-error-5;
+      color: $pix-error-70;
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: $pix-error-10;
+        color: $pix-error-70;
+      }
+    }
   }
 
   &--communication {

package/addon/styles/_pix-checkbox.scss

@@ -0,0 +1,77 @@
+.pix-checkbox {
+  @import 'reset-css';
+  display: flex;
+  align-items: center;
+  display: flex;
+  flex-direction: row-reverse;
+
+  label, input {
+    cursor: pointer;
+  }
+
+  &__label {
+    color: $pix-neutral-70;
+    @include text;
+
+    &--small {
+      @include text-small;
+    }
+    &--default {
+      @include text;
+    }
+    &--large {
+      @include text-large;
+    }
+  }
+
+  &__input {
+    appearance: none;
+    margin: 0 10px;
+    min-width: 18px;
+    min-height: 18px;
+    border: 1.2px solid $pix-neutral-90;
+    border-radius: 2px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover, &:focus {
+      box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 6px $pix-neutral-15;
+    }
+
+    &:active {
+      box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 6px $pix-neutral-22;
+    }
+
+    &:checked {
+      background: $pix-primary border-box;
+      border-color: $pix-primary;
+
+      &::after {
+        content: '';
+        background-image: url("data:image/svg+xml,%3Csvg width='13' height='10' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 3L0 4.5L5 9.5L13 1.5L11.5 0L5 6.5L1.5 3Z' fill='white'/%3E%3C/svg%3E%0A");
+        background-repeat: no-repeat;
+        background-position: center;
+        width: 16px;
+        height: 16px;
+
+      }
+    }
+
+    &.pix-checkbox__input--indeterminate {
+      &:checked {
+        background: $pix-neutral-60 border-box;
+        border-color: $pix-neutral-60;
+
+        &::after {
+          content: '';
+          background-image: url("data:image/svg+xml,%3Csvg width='10' height='2' viewBox='0 0 10 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='2' fill='white'/%3E%3C/svg%3E%0A");
+          background-repeat: no-repeat;
+          background-position: center;
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+  }
+}

package/addon/styles/_pix-message.scss

@@ -10,23 +10,23 @@
 
   &.pix-message--info {
     color: $pix-primary-70;
-    background-color: $pix-primary-10;
+    background-color: $pix-primary-5;
   }
   &.pix-message--alert {
     color: $pix-error-70;
-    background-color: $pix-error-10;
+    background-color: $pix-error-5;
   }
   &.pix-message--error {
     color: $pix-error-70;
-    background-color: $pix-error-10;
+    background-color: $pix-error-5;
   }
   &.pix-message--success {
     color: $pix-success-70;
-    background-color: $pix-success-10;
+    background-color: $pix-success-5;
   }
   &.pix-message--warning {
-    color: $pix-warning-60;
-    background-color: $pix-warning-10;
+    color: $pix-warning-70;
+    background-color: $pix-warning-5;
   }
 
   svg {

package/addon/styles/addon.scss

@@ -26,6 +26,7 @@
 @import 'pix-selectable-tag';
 @import 'pix-dropdown';
 @import 'pix-pagination';
+@import 'pix-checkbox';
 
 html {
   font-size: 16px;

package/app/components/pix-checkbox.js

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

package/app/modifiers/on-escape-action.js

@@ -0,0 +1,19 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier((element, [callback]) => {
+  function handleKeyUp(event) {
+    const TAB_KEY = 'Escape';
+
+    if (event.key !== TAB_KEY) {
+      return;
+    }
+
+    callback(event);
+  }
+
+  element.addEventListener('keyup', handleKeyUp);
+
+  return () => {
+    element.removeEventListener('keyup', handleKeyUp);
+  };
+});

package/app/modifiers/trap-focus.js

@@ -0,0 +1,52 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier(function trapFocus(element) {
+  const [firstFocusableElement] = findFocusableElements(element);
+
+  firstFocusableElement.focus();
+
+  function handleKeyDown(event) {
+    const TAB_KEY = 9;
+    const focusableElements = findFocusableElements(element);
+    const [firstFocusableElement] = focusableElements;
+    const lastFocusableElement = focusableElements[focusableElements.length - 1];
+
+    if (event.keyCode !== TAB_KEY) {
+      return;
+    }
+
+    function handleBackwardTab() {
+      if (document.activeElement === firstFocusableElement) {
+        event.preventDefault();
+        lastFocusableElement.focus();
+      }
+    }
+
+    function handleForwardTab() {
+      if (document.activeElement === lastFocusableElement) {
+        event.preventDefault();
+        firstFocusableElement.focus();
+      }
+    }
+
+    if (event.shiftKey) {
+      handleBackwardTab();
+    } else {
+      handleForwardTab();
+    }
+  }
+
+  element.addEventListener('keydown', handleKeyDown);
+
+  return () => {
+    element.removeEventListener('keydown', handleKeyDown);
+  };
+});
+
+function findFocusableElements(element) {
+  return [
+    ...element.querySelectorAll(
+      'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
+    ),
+  ].filter((el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
+}

package/app/stories/form.stories.js

@@ -67,6 +67,10 @@ export const form = (args) => {
       />
       <br>
 
+      <PixCheckbox @id="spam-pub" @labelSize="small" @label="Acceptez-vous de vous faire spammer de PUB ?" />
+
+      <br><br>
+
       <div class="pix-form__actions">
         <PixButton @triggerAction={{cancel}} @backgroundColor="transparent-light" @isBorderVisible={{true}}>
           Annuler

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

@@ -7,6 +7,7 @@ const Template = (args) => {
         @type={{type}}
         @actionLabel={{actionLabel}}
         @actionUrl={{actionUrl}}
+        @canCloseBanner={{canCloseBanner}}
       >
         Parcours de rentrée 2020 : les codes sont disponibles dans l'onglet campagne. N’oubliez pas de les diffuser aux élèves avant la Toussaint.
       </PixBanner>
@@ -56,6 +57,12 @@ withInternalLink.args = {
   actionUrl: 'campaign.list',
 };
 
+export const withCloseIcon = Template.bind({});
+withCloseIcon.args = {
+  type: 'info',
+  canCloseBanner: true,
+};
+
 export const argsTypes = {
   actionLabel: {
     name: 'actionLabel',
@@ -86,4 +93,13 @@ export const argsTypes = {
       ],
     },
   },
+  canCloseBanner: {
+    name: 'canCloseBanner',
+    description: 'Afficher la croix pour fermer la bannière',
+    type: { name: 'boolean', required: false },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
 };

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

@@ -67,6 +67,14 @@ Bannière contenant un lien externe.
   <Story name="With external link" story={stories.withExternalLink} height={100} />
 </Canvas>
 
+## With Close Icon
+
+Bannière contenant un bouton qui permet de fermer la bannière.
+
+<Canvas>
+  <Story name="With close icon" story={stories.withCloseIcon} height={100} />
+</Canvas>
+
 ## Usage
 
 ```html
@@ -100,6 +108,13 @@ Bannière Info par défaut
   Bannière avec une route externe
 </PixBanner>
 
+<PixBanner
+  @type='warning'
+  @canCloseBanner=true
+>
+  Bannière posséndant un bouton de fermeture
+</PixBanner>
+
 ```
 
 ## Arguments

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

@@ -0,0 +1,88 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const Template = (args) => {
+  return {
+    template: hbs`
+      <PixCheckbox
+        @id={{id}}
+        @label={{label}}
+        @screenReaderOnly={{screenReaderOnly}}
+        @isIndeterminate={{isIndeterminate}}
+        @labelSize={{labelSize}}
+      />
+    `,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  id: 'acceptNewsletter',
+  label: 'Recevoir la newsletter',
+};
+
+export const indeterminateCheckbox = Template.bind({});
+indeterminateCheckbox.args = {
+  id: 'acceptNewsletter2',
+  label: 'Recevoir la newsletter',
+  isIndeterminate: true,
+};
+
+export const checkboxWithSmallLabel = Template.bind({});
+checkboxWithSmallLabel.args = {
+  id: 'acceptNewsletter2',
+  label: 'Recevoir la newsletter',
+  labelSize: 'small',
+};
+
+export const checkboxWithLargeLabel = Template.bind({});
+checkboxWithLargeLabel.args = {
+  id: 'acceptNewsletter2',
+  label: 'Recevoir la newsletter',
+  labelSize: 'large',
+};
+
+export const argTypes = {
+  id: {
+    name: 'id',
+    description: 'Identifiant du champ permettant de lui attacher un label',
+    type: { name: 'string', required: true },
+    defaultValue: null,
+  },
+  label: {
+    name: 'label',
+    description: "Le label de l'input",
+    type: { name: 'string', required: false },
+    defaultValue: null,
+  },
+  screenReaderOnly: {
+    name: 'screenReaderOnly',
+    description:
+      "Permet de ne pas afficher le label à l'écran. Sert à garder un label qui sera lisible par les lecteurs d'écran.",
+    type: { name: 'boolean', required: true },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  isIndeterminate: {
+    name: 'isIndeterminate',
+    description:
+      "Rendre la checkbox indéterminée, état indiquant que la/les case(s) n'est/ne sont ni cochée(s) ni décochée(s) (exemple: une checkbox parente indiquant la sélection partielle de plusieurs checkbox enfants)",
+    type: { name: 'boolean', required: true },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  labelSize: {
+    name: 'labelSize',
+    description: 'Correspond à la taille de la police du label.',
+    type: { name: 'string', required: false },
+    defaultValue: { summary: 'default' },
+    control: {
+      type: 'select',
+      options: ['small', 'default', 'large'],
+    },
+  },
+};

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

@@ -0,0 +1,50 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+
+import * as stories from './pix-checkbox.stories.js';
+
+<Meta
+  title='Form/Checkbox'
+  component='PixCheckbox'
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# PixCheckbox
+
+La PixCheckbox permet de créer des checkbox basiques ou des checkbox mixées (checkbox servant d'indicateur lors d'une sélection multiple).
+
+<Canvas>
+  <Story name='Default' story={stories.Default} height={60} />
+</Canvas>
+
+## Checkbox indéterminée
+<Canvas>
+  <Story name='Indeterminate' story={stories.indeterminateCheckbox} height={60} />
+</Canvas>
+
+## Checkbox avec un petit label
+<Canvas>
+  <Story name='SmallLabel' story={stories.checkboxWithSmallLabel} height={60} />
+</Canvas>
+
+## Checkbox avec un grand label
+<Canvas>
+  <Story name='LargeLabel' story={stories.checkboxWithLargeLabel} height={60} />
+</Canvas>
+
+## Usage
+
+```html
+<PixCheckbox
+  @id="superId"
+  @label="Recevoir la newsletter"
+  @screenReaderOnly={{false}}
+  @isIndeterminate={{false}}
+  @labelSize="small"
+/>
+```
+
+## Arguments
+
+<ArgsTable story="Default" />

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

@@ -1,9 +1,9 @@
 import { hbs } from 'ember-cli-htmlbars';
 
-export const modal = (args) => {
+export const Template = (args) => {
   return {
     template: hbs`
-      <PixModal @title={{this.title}}>
+      <PixModal @title={{this.title}} @onCloseButtonClick={{onCloseButtonClick}}>
         <:content>
           <p>
             Une fenêtre modale est, dans une interface graphique, une fenêtre qui prend le contrôle total du clavier et
@@ -24,16 +24,24 @@ export const modal = (args) => {
   };
 };
 
+export const Default = Template.bind({});
+Default.args = {
+  title: "Qu'est-ce qu'une modale ?",
+  onCloseButtonClick: () => {
+    alert('Action : fermer modale');
+  },
+};
+
 export const argTypes = {
   title: {
     name: 'title',
     description: 'Titre de la modale',
-    type: { name: 'string', required: false },
-    defaultValue: "Qu'est-ce qu'une modale ?",
+    type: { name: 'string', required: true },
+    defaultValue: null,
   },
   onCloseButtonClick: {
     name: 'onCloseButtonClick',
-    description: 'Fonction à executer lors du clic sur le bouton de fermeture de la modale',
+    description: 'Fonction à exécuter à la fermeture de la modale',
     type: { name: 'function', required: true },
     defaultValue: null,
   },

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

@@ -4,8 +4,8 @@ import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-modal.stories.js';
 
 <Meta
-  title='Basics/Modal'
-  component='PixModal'
+  title="Basics/Modal"
+  component="PixModal"
   decorators={[centered]}
   argTypes={stories.argTypes}
 />
@@ -15,13 +15,14 @@ import * as stories from './pix-modal.stories.js';
 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} />
+  <Story name="Default" story={stories.Default} height={500} />
 </Canvas>
 
 ## Usage

package/docs/colors-palette.stories.mdx

@@ -33,7 +33,7 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
     title="Pix Secondary"
     subtitle="$pix-secondary-"
     colors={{ 5: '#fff9e6',
-             10: '#ffeeb3',
+             10: '#fff1c5',
              20: '#ffe381',
              Secondary: '#ffd235',
              40: '#ffbe00',
@@ -104,7 +104,7 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
             40: '#ffbe00',
             50: '#eaa600',
             60: '#ce8900',
-            70: '#ac6a00',
+            70: '#a95800',
             80: '#874d00'}}
   />
   <ColorItem

package/docs/design-tokens.stories.mdx

@@ -38,23 +38,23 @@ Les couleurs pour définir un état d'une alerte ont été attribuées pour unif
 ### Success
 ```
 Texte ou bordure : $pix-success-70
-Background : $pix-success-10
+Background : $pix-success-5
 ```
 
 ### Warning
 ```
-Texte ou bordure : $pix-warning-60
-Background : $pix-warning-10
+Texte ou bordure : $pix-warning-70
+Background : $pix-warning-5
 ```
 
 ### Error
 ```
 Texte ou bordure : $pix-error-70
-Background : $pix-error-10
+Background : $pix-error-5
 ```
 
 ### Information
 ```
 Texte ou bordure : $pix-primary-70
-Background : $pix-primary-10
+Background : $pix-primary-5
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "16.0.0",
+  "version": "17.1.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"