@1024pix/pix-ui 17.0.0 → 17.1.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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)
 
 

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/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,
+      &:focus,
+      &:active {
+        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,
+      &:focus,
+      &:active {
+        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,
+      &:focus,
+      &:active {
+        background-color: $pix-error-10;
+        color: $pix-error-70;
+      }
+    }
   }
 
   &--communication {

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-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/package.json

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