@1024pix/pix-ui 17.2.0 → 18.0.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Pix-UI Changelog
 
+## v18.0.1 (02/09/2022)
+
+
+### :bug: Correction
+- [#249](https://github.com/1024pix/pix-ui/pull/249) [BUGFIX] Permettre le controle des checkboxs
+- [#248](https://github.com/1024pix/pix-ui/pull/248) [BUGFIX] Prévenir des erreurs à la première ouverture de la sidebar/modal
+
+## 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)
 
 

package/addon/components/pix-checkbox.hbs

@@ -9,6 +9,7 @@
     id={{this.id}}
     type="checkbox"
     class="pix-checkbox__input {{if @isIndeterminate ' pix-checkbox__input--indeterminate'}}"
+    checked={{@checked}}
     ...attributes
   />
 </div>

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

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

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/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 if (sourceActiveElement) {
+    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-checkbox.stories.js

@@ -9,6 +9,7 @@ export const Template = (args) => {
         @screenReaderOnly={{screenReaderOnly}}
         @isIndeterminate={{isIndeterminate}}
         @labelSize={{labelSize}}
+        @checked={{checked}}
       />
     `,
     context: args,
@@ -85,4 +86,13 @@ export const argTypes = {
       options: ['small', 'default', 'large'],
     },
   },
+  checked: {
+    name: 'checked',
+    description: 'Permet de cocher la checkbox',
+    type: { name: 'boolean', required: false },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
 };

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

@@ -3,7 +3,6 @@ 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>
@@ -18,6 +17,7 @@ export const Template = (args) => {
           </div>
         </:footer>
       </PixSidebar>
+      <PixButton @triggerAction={{fn (mut showSidebar) (not showSidebar)}}>Ouvrir la sidebar</PixButton>
     `,
     context: args,
   };

package/package.json

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