@1024pix/pix-ui 17.1.0 → 18.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Pix-UI Changelog
 
+## v18.0.0 (01/09/2022)
+
+
+### :bug: Correction
+- [#246](https://github.com/1024pix/pix-ui/pull/246) [BUGFIX] Mettre le focus sur le premier élement où est utiliser le `trap-focus`.
+
+## 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)
 
 

package/addon/components/pix-modal.hbs

@@ -1,7 +1,7 @@
 <div
-  class="pix-modal__overlay"
+  class="pix-modal__overlay {{unless @showModal ' pix-modal__overlay--hidden'}}"
   {{on "click" this.closeAction}}
-  {{trap-focus}}
+  {{trap-focus @showModal}}
   {{on-escape-action this.closeAction}}
 >
   <div

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 @showSidebar}}
+  {{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

@@ -32,9 +32,9 @@
     .pix-icon-button {
       background-color: $pix-primary-5;
       color: $pix-primary-70;
-      &:hover,
-      &:focus,
-      &:active {
+      &:hover:enabled,
+      &:focus:enabled,
+      &:active:enabled {
         background-color: $pix-primary-10;
         color: $pix-primary-70;
       }
@@ -47,9 +47,9 @@
     .pix-icon-button {
       background-color: $pix-warning-5;
       color: $pix-warning-70;
-      &:hover,
-      &:focus,
-      &:active {
+      &:hover:enabled,
+      &:focus:enabled,
+      &:active:enabled {
         background-color: $pix-warning-10;
         color: $pix-warning-70;
       }
@@ -62,9 +62,9 @@
     .pix-icon-button {
       background-color: $pix-error-5;
       color: $pix-error-70;
-      &:hover,
-      &:focus,
-      &:active {
+      &:hover:enabled,
+      &:focus:enabled,
+      &:active:enabled {
         background-color: $pix-error-10;
         color: $pix-error-70;
       }

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-modal.scss

@@ -7,6 +7,12 @@
   right: 0;
   top: 0;
   z-index: 1000;
+  transition: all .3s ease-in-out;
+
+  &--hidden {
+    visibility: hidden;
+    opacity: 0;
+  }
 }
 
 $modal-padding: 24px;

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/trap-focus.js

@@ -1,45 +1,25 @@
 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;
-    }
+let sourceActiveElement = null;
 
-    function handleBackwardTab() {
-      if (document.activeElement === firstFocusableElement) {
-        event.preventDefault();
-        lastFocusableElement.focus();
-      }
-    }
-
-    function handleForwardTab() {
-      if (document.activeElement === lastFocusableElement) {
-        event.preventDefault();
-        firstFocusableElement.focus();
-      }
-    }
+export default modifier(function trapFocus(element, [isOpen]) {
+  const [firstFocusableElement] = findFocusableElements(element);
 
-    if (event.shiftKey) {
-      handleBackwardTab();
-    } else {
-      handleForwardTab();
-    }
+  if (isOpen) {
+    sourceActiveElement = document.activeElement;
+    focusElement(firstFocusableElement, element);
+  } else {
+    focusElement(sourceActiveElement, element);
   }
 
-  element.addEventListener('keydown', handleKeyDown);
+  element.addEventListener('keydown', (event) => {
+    handleKeyDown(event, element);
+  });
 
   return () => {
-    element.removeEventListener('keydown', handleKeyDown);
+    element.removeEventListener('keydown', (event) => {
+      handleKeyDown(event, element);
+    });
   };
 });
 
@@ -50,3 +30,73 @@ function findFocusableElements(element) {
     ),
   ].filter((el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
 }
+
+function focusElement(elementToFocus, element) {
+  let focusOnce = false;
+
+  const handleTransitionEnd = () => {
+    if (!focusOnce) {
+      elementToFocus.focus();
+      focusOnce = true;
+    }
+  };
+
+  if (hasTransitionDuration(element)) {
+    element.addEventListener('transitionend', handleTransitionEnd);
+  } else if (hasAnimationDuration(element)) {
+    element.addEventListener('animationend', handleTransitionEnd);
+  } else {
+    elementToFocus.focus();
+  }
+
+  return () => {
+    if (hasTransitionDuration(element)) {
+      element.removeEventListener('transitionend', handleTransitionEnd);
+    } else if (hasAnimationDuration(element)) {
+      element.removeEventListener('animationend', handleTransitionEnd);
+    }
+  };
+}
+
+function hasTransitionDuration(element) {
+  return hasDurationByKey(element, 'transition-duration');
+}
+
+function hasAnimationDuration(element) {
+  return hasDurationByKey(element, 'animation-duration');
+}
+
+function hasDurationByKey(element, key) {
+  return !['', '0s'].includes(getComputedStyle(element, null).getPropertyValue(key));
+}
+
+function handleKeyDown(event, element) {
+  const TAB_KEY = 9;
+  const focusableElements = findFocusableElements(element);
+  const [firstFocusableElement] = focusableElements;
+  const lastFocusableElement = focusableElements[focusableElements.length - 1];
+
+  if (event.keyCode !== TAB_KEY) {
+    return;
+  }
+
+  const handleBackwardTab = () => {
+    if (document.activeElement === firstFocusableElement) {
+      event.preventDefault();
+      lastFocusableElement.focus();
+    }
+  };
+
+  const handleForwardTab = () => {
+    if (document.activeElement === lastFocusableElement) {
+      event.preventDefault();
+      firstFocusableElement.focus();
+    }
+  };
+
+  if (event.shiftKey) {
+    handleBackwardTab();
+  } else {
+    handleForwardTab();
+  }
+}

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

@@ -3,22 +3,23 @@ import { hbs } from 'ember-cli-htmlbars';
 export const Template = (args) => {
   return {
     template: hbs`
-      <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
-            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>
+    <PixModal @showModal={{showModal}} @title={{this.title}} @onCloseButtonClick={{fn (mut showModal) (not showModal)}} >
+      <: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={{fn (mut showModal) (not showModal)}}>Annuler</PixButton>
+        <PixButton @triggerAction={{fn (mut showModal) (not showModal)}}>Valider</PixButton>
+      </:footer>
+    </PixModal>
+    <PixButton @triggerAction={{fn (mut showModal) (not showModal)}}>Ouvrir la modale</PixButton>
     `,
     context: args,
   };
@@ -26,10 +27,9 @@ export const Template = (args) => {
 
 export const Default = Template.bind({});
 Default.args = {
+  showModal: true,
   title: "Qu'est-ce qu'une modale ?",
-  onCloseButtonClick: () => {
-    alert('Action : fermer modale');
-  },
+  onCloseButtonClick: () => {},
 };
 
 export const argTypes = {
@@ -45,4 +45,14 @@ export const argTypes = {
     type: { name: 'function', required: true },
     defaultValue: null,
   },
+  showModal: {
+    name: 'showModal',
+    description: "Gérer l'ouverture de la modale",
+    type: { name: 'boolean', required: false },
+    control: { type: 'boolean' },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
 };

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

@@ -57,4 +57,4 @@ Ce composant possède deux `yield` :
 
 ## Arguments
 
-<ArgsTable story="PixModal" />
+<ArgsTable story="Default" />

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

@@ -0,0 +1,61 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const Template = (args) => {
+  return {
+    template: hbs`
+      <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>
+      <PixButton @triggerAction={{fn (mut showSidebar) (not showSidebar)}}>Ouvrir la sidebar</PixButton>
+    `,
+    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.1.0",
+  "version": "18.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"