@1024pix/pix-ui 17.0.0 → 17.2.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Pix-UI Changelog
 
+## v17.2.1 (31/08/2022)
+
+
+### :rocket: Amélioration
+- [#247](https://github.com/1024pix/pix-ui/pull/247) [FEATURE] Amélioration couleurs `PixIconButton`
+
+## v17.2.0 (24/08/2022)
+
+
+### :rocket: Amélioration
+- [#245](https://github.com/1024pix/pix-ui/pull/245) [FEATURE] Ajouter un composant Sidebar (PIX-4298)
+
+## 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)
 
 

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-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/components/pix-sidebar.hbs

@@ -0,0 +1,34 @@
+<div
+  class="pix-sidebar__overlay {{unless @showSidebar ' pix-sidebar__overlay--hidden'}}"
+  {{on "click" this.closeAction}}
+  {{trap-focus}}
+  {{on-escape-action this.closeAction}}
+>
+  <div
+    class="pix-sidebar {{unless @showSidebar ' pix-sidebar--hidden'}}"
+    role="dialog"
+    aria-labelledby="sidebar-title"
+    aria-describedby="sidebar-content"
+    aria-modal="true"
+    {{on "click" this.stopPropagation}}
+    ...attributes
+  >
+    <header class="pix-sidebar__header">
+      <h1 id="sidebar-title" class="pix-sidebar__title">{{@title}}</h1>
+      <PixIconButton
+        @icon="xmark"
+        @triggerAction={{this.closeAction}}
+        @ariaLabel="Fermer"
+        @size="small"
+        @withBackground={{true}}
+        class="pix-sidebar__close-button"
+      />
+    </header>
+    <main id="sidebar-content" class="pix-sidebar__content">
+      {{yield to="content"}}
+    </main>
+    <footer class="pix-sidebar__footer">
+      {{yield to="footer"}}
+    </footer>
+  </div>
+</div>

package/addon/components/pix-sidebar.js

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class PixSidebar extends Component {
+  constructor(...args) {
+    super(...args);
+
+    if (!this.args.title) {
+      throw new Error('ERROR in PixSidebar component: @title argument is required.');
+    }
+  }
+
+  @action
+  stopPropagation(event) {
+    event.stopPropagation();
+  }
+
+  @action
+  closeAction(params) {
+    if (this.args.onClose) {
+      this.args.onClose(params);
+    }
+  }
+}

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-5;
     color: $pix-primary-70;
+    .pix-icon-button {
+      background-color: $pix-primary-5;
+      color: $pix-primary-70;
+      &:hover:enabled,
+      &:focus:enabled,
+      &:active:enabled {
+        background-color: $pix-primary-10;
+        color: $pix-primary-70;
+      }
+    }
   }
 
   &--warning {
     background-color: $pix-warning-5;
     color: $pix-warning-70;
+    .pix-icon-button {
+      background-color: $pix-warning-5;
+      color: $pix-warning-70;
+      &:hover:enabled,
+      &:focus:enabled,
+      &:active:enabled {
+        background-color: $pix-warning-10;
+        color: $pix-warning-70;
+      }
+    }
   }
 
   &--error {
     background-color: $pix-error-5;
     color: $pix-error-70;
+    .pix-icon-button {
+      background-color: $pix-error-5;
+      color: $pix-error-70;
+      &:hover:enabled,
+      &:focus:enabled,
+      &:active:enabled {
+        background-color: $pix-error-10;
+        color: $pix-error-70;
+      }
+    }
   }
 
   &--communication {

package/addon/styles/_pix-icon-button.scss

@@ -10,35 +10,36 @@
   align-items: center;
   justify-content: center;
   background-color: transparent;
+  color: $pix-neutral-60;
 
   &:disabled {
     opacity: 0.5;
-    cursor: default;
+    cursor: not-allowed;
   }
 
-  &:hover,
-  &:focus {
-    transition: background-color 0.2s ease;
-    background-color: $pix-neutral-15;
-    &:disabled {
-      background-color: transparent;
-    }
+  &:hover:enabled {
+    background-color: $pix-neutral-20;
+    box-shadow: none;
+    border: 0;
+    color: $pix-neutral-60;
   }
 
-  &:active {
-    transition: background-color 0.2s ease;
-    background-color: $pix-neutral-20;
+  &:focus:enabled {
+    background-color: $pix-neutral-60;
+    box-shadow: 0 0 0 2px $pix-neutral-60;
+    border: 2px solid $pix-neutral-0;
+    color: $pix-neutral-0;
+  }
+
+  &:active:enabled {
+    background-color: $pix-neutral-22;
+    box-shadow: none;
+    border: 0;
+    color: $pix-neutral-60;
   }
 
   &--background {
     background-color: $pix-neutral-10;
-    &:hover,
-    &:focus,
-    &:active {
-      &:disabled {
-        background-color: $pix-neutral-15;
-      }
-    }
   }
 
   &--small {
@@ -52,12 +53,4 @@
     height: 38px;
     font-size: 1.25rem;
   }
-
-  &--dark-grey {
-    color: $pix-neutral-60;
-  }
-
-  &--light-grey {
-    color: $pix-neutral-60;
-  }
 }

package/addon/styles/_pix-sidebar.scss

@@ -0,0 +1,80 @@
+.pix-sidebar__overlay {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow-y: scroll;
+  background-color: rgba(52, 69, 99, 0.7);
+  transition: all .3s ease-in-out;
+
+  &--hidden {
+    visibility: hidden;
+    opacity: 0;
+  }
+}
+
+$sidebar-padding: 16px;
+$mobile-close-button-size: 32px;
+$tablet-close-button-size: 40px;
+$space-between-title-and-close-button: 8px;
+$button-margin: 16px;
+
+.pix-sidebar {
+  @import 'reset-css';
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-width: 320px;
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
+  background: $pix-neutral-0;
+  transform: translate(0);
+  transition: transform .3s ease-in-out;
+
+  &--hidden {
+    transform: translate(-100%);
+  }
+
+  &__header {
+    border-bottom: 1px solid $pix-neutral-20;
+    padding: $sidebar-padding;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__close-button {
+    flex-shrink: 0;
+
+    @include device-is('tablet') {
+      height: $tablet-close-button-size;
+      width: $tablet-close-button-size;
+    }
+  }
+
+  &__content {
+    flex-grow: 1;
+    overflow: auto;
+  }
+
+  &__title {
+    @include h4;
+    margin-bottom: 0;
+    color: $pix-neutral-90;
+    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 {
+    padding: $sidebar-padding 0;
+  }
+
+  &__footer {
+    padding: $sidebar-padding;
+    border-top: 1px solid $pix-neutral-20;
+  }
+}

package/addon/styles/addon.scss

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

package/app/components/pix-sidebar.js

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

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/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-icon-button.stories.js

@@ -11,31 +11,42 @@ const Template = (args) => {
         @triggerAction={{triggerAction}}
         @withBackground={{withBackground}}
         @size={{size}}
+        disabled={{disabled}}
+        aria-disabled={{disabled}}
         />
     `,
     context: args,
   };
 };
 
+const triggerAction = () => Promise.resolve();
+
 export const Default = Template.bind({});
 Default.args = {
   ariaLabel: 'Action du bouton',
   icon: 'xmark',
-  triggerAction: () => {
-    return new Promise().resolves();
-  },
+  triggerAction,
 };
 
 export const small = Template.bind({});
 small.args = {
   ...Default.args,
   size: 'small',
+  triggerAction,
 };
 
 export const withBackground = Template.bind({});
 withBackground.args = {
   ...Default.args,
   withBackground: true,
+  triggerAction,
+};
+
+export const disabled = Template.bind({});
+disabled.args = {
+  ...Default.args,
+  disabled: true,
+  triggerAction,
 };
 
 export const argTypes = {

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

@@ -3,8 +3,8 @@ import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-icon-button.stories.js';
 
 <Meta
-  title='Basics/Icon button'
-  component='PixIconButton'
+  title="Basics/Icon button"
+  component="PixIconButton"
   decorators={[centered]}
   argTypes={stories.argTypes}
 />
@@ -37,6 +37,14 @@ Le bouton avec le fond grisé.
   <Story name="With Background" story={stories.withBackground} height={60} />
 </Canvas>
 
+## Disabled
+
+Exemple avec le bouton disabled
+
+<Canvas>
+  <Story name="Disabled" story={stories.disabled} height={60} />
+</Canvas>
+
 ## Accessibilité / aria-label
 
 L'attribut `aria-label` étant indispensable pour l'accessibilité de ce composant, la propriété `ariaLabel` a été ajouté.
@@ -48,42 +56,42 @@ L'attribut `aria-label` étant indispensable pour l'accessibilité de ce composa
 ## Usage
 
 Par défaut
+
 ```html
-<PixIconButton
-    @ariaLabel="L'action du bouton"
-    @icon="icon"
-    @triggerAction={{triggerAction}}
-/>
+<PixIconButton @ariaLabel="L'action du bouton" @icon="icon" @triggerAction="{{triggerAction}}" />
 ```
 
 Bouton de fermeture
+
 ```html
 <PixIconButton
-    @ariaLabel="L'action du bouton"
-    @icon="times"
-    @triggerAction={{triggerAction}}
-    @withBackground={{true}}
+  @ariaLabel="L'action du bouton"
+  @icon="times"
+  @triggerAction="{{triggerAction}}"
+  @withBackground="{{true}}"
 />
 ```
 
 Bouton d'action
+
 ```html
 <PixIconButton
-    @ariaLabel="L'action du bouton"
-    @icon="arrow-left"
-    @triggerAction={{triggerAction}}
-    @size="small"
-    @withBackground={{true}}
+  @ariaLabel="L'action du bouton"
+  @icon="arrow-left"
+  @triggerAction="{{triggerAction}}"
+  @size="small"
+  @withBackground="{{true}}"
 />
 ```
 
 État disabled
+
 ```html
 <PixIconButton
-    @ariaLabel="L'action du bouton"
-    @icon="xmark"
-    disabled={{true}}
-    aria-disabled={{true}}
+  @ariaLabel="L'action du bouton"
+  @icon="xmark"
+  disabled="{{true}}"
+  aria-disabled="{{true}}"
 />
 ```
 

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/app/stories/pix-sidebar.stories.js

@@ -0,0 +1,61 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const Template = (args) => {
+  return {
+    template: hbs`
+      <PixButton @triggerAction={{fn (mut showSidebar) (not showSidebar)}}>Ouvrir la sidebar</PixButton>
+      <PixSidebar @showSidebar={{showSidebar}} @title={{title}} @onClose={{fn (mut showSidebar) (not showSidebar)}}>
+        <:content>
+          <p>
+            Une sidebar 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 à du paramétrage d'écran.
+          </p>
+        </:content>
+        <:footer>
+        <div style="display: flex; gap: 8px">
+          <PixButton @backgroundColor="transparent-light" @isBorderVisible="true">Annuler</PixButton>
+          <PixButton>Valider</PixButton>
+          </div>
+        </:footer>
+      </PixSidebar>
+    `,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  showSidebar: true,
+  title: 'Filtrer',
+  onClose: () => {},
+};
+
+export const argTypes = {
+  showSidebar: {
+    name: 'showSidebar',
+    description: 'Visibilité de la sidebar',
+    type: { name: 'boolean', required: false },
+    control: { type: 'boolean' },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  title: {
+    name: 'title',
+    description: 'Titre de la sidebar',
+    type: { name: 'string', required: true },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: '' },
+    },
+  },
+  onClose: {
+    name: 'onClose',
+    description: 'Fonction à exécuter à la fermeture de la sidebar',
+    type: { name: 'function', required: true },
+    table: {
+      type: { summary: 'function' },
+    },
+  },
+};

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

@@ -0,0 +1,57 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+
+import * as stories from './pix-sidebar.stories.js';
+
+<Meta
+  title="Basics/Sidebar"
+  component="PixSidebar"
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# PixSidebar
+
+Une sidebar responsive et scrollable avec un overlay.
+
+Ce composant possède deux `yield` :
+
+- `:content` est destiné à accueillir le contenu principal de la fenêtre sidebar. 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 sidebar, ce qui permettra de les positionner correctement dans tous les cas de figure.
+
+<Canvas>
+  <Story name="Default" story={stories.Default} height={500} />
+</Canvas>
+
+## Usage
+
+```html
+<PixSidebar
+  @showSidebar={{true}}
+  @title="Filtrer"
+  @onClose={{this.closeSidebar}}
+>
+ <:content>
+  <p>
+    Une sidebar 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 à du paramétrage d'écran.
+  </p>
+ </:content>
+ <:footer>
+  <PixButton
+    @backgroundColor="transparent-light"
+    @isBorderVisible={{true}}
+    @triggerAction={{this.closeSidebar}}
+  >
+    Annuler
+  </PixButton>
+  <PixButton>Valider</PixButton>
+ </:footer>
+</PixSidebar>
+```
+
+## Arguments
+
+<ArgsTable story="Default" />

package/package.json

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