[BREAKING] Utiliser les composants MS au lieu de FontAwesome (PIX-14433)

addon/components/pix-banner.hbs

@@ -1,6 +1,6 @@
 {{#if this.displayBanner}}
   <div class="pix-banner pix-banner--{{this.type}}" role="alert" ...attributes>
-    <FaIcon @icon={{this.icon}} class="pix-banner__icon" />
+    <PixIcon @name={{this.icon}} @plainIcon={{true}} @ariaHidden="true" class="pix-banner__icon" />
     <div>
       {{yield}}
       {{#if this.displayAction}}
@@ -12,7 +12,7 @@
             rel="noopener noreferrer"
           >
             {{@actionLabel}}
-            <FaIcon class="external-link" @icon="up-right-from-square" />
+            <PixIcon @name="openNew" class="external-link" />
           </a>
         {{else}}
           <LinkTo class="pix-banner__action" @route={{@actionUrl}}>{{@actionLabel}}</LinkTo>
@@ -23,7 +23,7 @@
       <div class="pix-banner__close">
         <PixIconButton
           @ariaLabel="Fermer"
-          @icon="xmark"
+          @iconName="close"
           @size="small"
           @triggerAction={{this.closeBanner}}
         />

addon/components/pix-banner.js

@@ -18,12 +18,12 @@ const types = [
 ];
 
 const icons = {
-  [TYPE_INFO]: 'circle-info',
-  [TYPE_ERROR]: 'triangle-exclamation',
-  [TYPE_WARNING]: 'circle-exclamation',
-  [TYPE_COMMUNICATION]: 'bullhorn',
-  [TYPE_COMMUNICATION_ORGA]: 'bullhorn',
-  [TYPE_COMMUNICATION_CERTIF]: 'bullhorn',
+  [TYPE_INFO]: 'info',
+  [TYPE_ERROR]: 'error',
+  [TYPE_WARNING]: 'warning',
+  [TYPE_COMMUNICATION]: 'campaign',
+  [TYPE_COMMUNICATION_ORGA]: 'campaign',
+  [TYPE_COMMUNICATION_CERTIF]: 'campaign',
 };
 
 export default class PixBanner extends Component {

addon/components/pix-button.hbs

@@ -15,18 +15,18 @@
     <span class="loader__not-visible-text">{{yield}}</span>
   {{else}}
     {{#if @iconBefore}}
-      <FaIcon
+      <PixIcon
         class="pix-button__icon pix-button__icon--before"
-        @icon={{@iconBefore}}
-        @prefix={{@prefixIconBefore}}
+        @name={{@iconBefore}}
+        @plainIcon={{@plainIconBefore}}
       />
     {{/if}}
     {{yield}}
     {{#if @iconAfter}}
-      <FaIcon
+      <PixIcon
         class="pix-button__icon pix-button__icon--after"
-        @icon={{@iconAfter}}
-        @prefix={{@prefixIconAfter}}
+        @name={{@iconAfter}}
+        @plainIcon={{@plainIconAfter}}
       />
     {{/if}}
   {{/if}}

addon/components/pix-collapsible.hbs

@@ -8,16 +8,17 @@
     aria-expanded={{if this.isUnCollapsed "true" "false"}}
     ...attributes
   >
-    <span>
-      {{#if @titleIcon}}
-        <FaIcon class="pix-collapsible-title__icon" @icon={{@titleIcon}} />
-      {{/if}}
+    {{#if @iconName}}
+      <PixIcon
+        class="pix-collapsible-title__icon"
+        @name={{@iconName}}
+        @plainIcon={{@plainIcon}}
+        @ariaHidden={{true}}
+      />
+    {{/if}}
 
-      {{#if (has-block "title")}}
-        {{yield to="title"}}
-      {{else}}
-        {{this.title}}
-      {{/if}}
+    <span>
+      {{yield to="title"}}
     </span>
 
     <span class="pix-collapsible-title__container">
@@ -26,9 +27,9 @@
           {{@tagContent}}
         </PixTag>
       {{/if}}
-      <FaIcon
+      <PixIcon
         class="pix-collapsible-title-container__toggle-icon"
-        @icon="{{if this.isCollapsed 'chevron-down' 'chevron-up'}}"
+        @name="{{if this.isCollapsed 'chevronBottom' 'chevronTop'}}"
       />
     </span>
   </button>

addon/components/pix-icon-button.hbs

@@ -1,11 +1,15 @@
 <button
   type="button"
-  aria-label={{this.ariaLabel}}
   class="pix-icon-button pix-icon-button--{{this.size}}
-    pix-icon-button--{{this.color}}
     {{if @withBackground ' pix-icon-button--background'}}"
   {{on "click" this.triggerAction}}
   ...attributes
 >
-  <FaIcon @icon={{this.icon}} @prefix={{@iconPrefix}} />
+  <span class="screen-reader-only">{{this.ariaLabel}}</span>
+  <PixIcon
+    class="pix-icon-button__icon pix-icon-button__icon--{{this.size}}"
+    @ariaHidden={{true}}
+    @name={{@iconName}}
+    @plainIcon={{@plainIcon}}
+  />
 </button>

addon/components/pix-icon-button.js

@@ -1,14 +1,10 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { warn } from '@ember/debug';
 
 export default class PixIconButton extends Component {
   text = 'pix-icon-button';
 
-  get icon() {
-    const defaultIcon = 'plus';
-    return this.args.icon ? this.args.icon : defaultIcon;
-  }
-
   get size() {
     return this.args.size || 'big';
   }
@@ -18,9 +14,14 @@ export default class PixIconButton extends Component {
   }
 
   get ariaLabel() {
-    if (!this.args.ariaLabel || !this.args.ariaLabel.trim()) {
-      throw new Error('ERROR in PixIconButton component, @ariaLabel param is not provided.');
-    }
+    warn(
+      'PixIconButton: @label attribute should be a string.',
+      !['', null, undefined].includes(this.args.ariaLabel),
+      {
+        id: 'pix-ui.icon-button.close-button-label.not-string',
+      },
+    );
+
     return this.args.ariaLabel;
   }
 

addon/components/pix-icon.hbs

@@ -2,6 +2,8 @@
   xmlns="http://www.w3.org/2000/svg"
   alt={{this.alternativeText}}
   aria-hidden={{this.ariaHidden}}
+  role="img"
+  class="pix-icon"
   ...attributes
 >
   <use href="/@1024pix/pix-ui/svg/pix-sprite.svg#{{this.iconName}}" />

addon/components/pix-icon.js

@@ -20,7 +20,7 @@ export default class PixIcon extends Component {
 
   get iconName() {
     warn(
-      `PixIcon: @name must be one of these : ${Object.keys(ICONS).join(' | ')}`,
+      `PixIcon: @name "${this.args.name}" is not one of these : ${Object.keys(ICONS).join(' | ')}`,
       Object.keys(ICONS).includes(this.args.name),
       {
         id: 'pix-ui.icon.not-valid',

addon/components/pix-indicator-card.hbs

@@ -4,8 +4,13 @@
     <div class="indicator-card__icon" aria-hidden="true"></div>
     <div class="indicator-card__content" aria-hidden="true"></div>
   {{else}}
-    <div id={{this.iconId}} class="indicator-card__icon {{this.color}}" aria-hidden="true">
-      <FaIcon @icon={{@icon}} @prefix={{@iconPrefix}} />
+    <div id={{this.iconId}} class="indicator-card__icon-wrapper {{this.color}}">
+      <PixIcon
+        @name={{@iconName}}
+        @plainIcon={{@plainIcon}}
+        @ariaHidden={{true}}
+        class="indicator-card__icon"
+      />
     </div>
     <dl class="indicator-card__content">
       <div class="indicator-card__title">
@@ -18,10 +23,12 @@
             class="indicator-card__tooltip hide-on-mobile"
           >
             <:triggerElement>
-              <FaIcon
-                @icon="circle-question"
+              <PixIcon
+                @name="info"
+                @plainIcon={{true}}
                 class="indicator-card__tooltip-icon"
                 tabindex="0"
+                aria-label={{@infoLabel}}
                 aria-describedby={{this.tooltipId}}
               />
             </:triggerElement>

addon/components/pix-indicator-card.js

@@ -8,7 +8,7 @@ export default class PixIndicatorCard extends Component {
 
   get color() {
     const { color } = this.args;
-    if (!color) return `indicator-card__icon--grey`;
-    return `indicator-card__icon--${color}`;
+    if (!color) return `indicator-card__icon-wrapper--grey`;
+    return `indicator-card__icon-wrapper--${color}`;
   }
 }

addon/components/pix-input-password.hbs

@@ -32,7 +32,8 @@
 
       <PixIconButton
         class="pix-input-password__button"
-        @icon={{if this.isPasswordVisible "eye" "eye-slash"}}
+        @iconName={{if this.isPasswordVisible "eye" "eyeOff"}}
+        @plainIcon={{true}}
         @ariaLabel={{if
           this.isPasswordVisible
           "Masquer le mot de passe"
@@ -43,10 +44,10 @@
       />
 
       {{#if this.hasError}}
-        <FaIcon @icon="xmark" class="pix-input-password__icon pix-input-password__error-icon" />
+        <PixIcon @name="close" class="pix-input-password__icon pix-input-password__error-icon" />
       {{/if}}
       {{#if this.hasSuccess}}
-        <FaIcon @icon="check" class="pix-input-password__icon pix-input-password__success-icon" />
+        <PixIcon @name="check" class="pix-input-password__icon pix-input-password__success-icon" />
       {{/if}}
     </div>
 

addon/components/pix-input.hbs

@@ -24,10 +24,10 @@
       />
 
       {{#if this.hasError}}
-        <FaIcon @icon="xmark" class="pix-input__error-icon" />
+        <PixIcon @name="close" class="pix-input__error-icon" />
       {{/if}}
       {{#if this.hasSuccess}}
-        <FaIcon @icon="check" class="pix-input__success-icon" />
+        <PixIcon @name="check" class="pix-input__success-icon" />
       {{/if}}
     </div>
 

addon/components/pix-label-wrapped.hbs

@@ -1,9 +1,19 @@
 <label for={{@for}} class={{this.className}} ...attributes>
   {{#if this.hasError}}
-    <FaIcon @icon="circle-xmark" class="pix-label-wrapped__state-icon" />
+    <PixIcon
+      @name="cancel"
+      @plainIcon={{true}}
+      @ariaHidden={{true}}
+      class="pix-label-wrapped__state-icon"
+    />
   {{/if}}
   {{#if this.hasSuccess}}
-    <FaIcon @icon="circle-check" class="pix-label-wrapped__state-icon" />
+    <PixIcon
+      @name="checkCircle"
+      @plainIcon={{true}}
+      @ariaHidden={{true}}
+      class="pix-label-wrapped__state-icon"
+    />
   {{/if}}
 
   {{yield to="inputElement"}}

addon/components/pix-message.hbs

@@ -1,6 +1,11 @@
 <p class="pix-message {{concat 'pix-message--' this.type}}" ...attributes>
   {{#if @withIcon}}
-    <FaIcon @icon={{this.iconClass}} />
+    <PixIcon
+      @name={{this.iconName}}
+      @ariaHidden={{true}}
+      @plainIcon={{true}}
+      class="pix-message__icon"
+    />
   {{/if}}
   <span class="pix-message__content">
     {{yield}}

addon/components/pix-message.js

@@ -3,27 +3,21 @@ import Component from '@glimmer/component';
 const TYPE_INFO = 'info';
 const TYPE_SUCCESS = 'success';
 const TYPE_WARNING = 'warning';
-const TYPE_ALERT = 'alert';
 const TYPE_ERROR = 'error';
 
 export default class PixMessage extends Component {
   get type() {
-    const correctTypes = [TYPE_INFO, TYPE_SUCCESS, TYPE_WARNING, TYPE_ALERT, TYPE_ERROR];
-    if (this.args.type === 'alert') {
-      console.warn(
-        'ERROR in PixMessage component, "alert" type is deprecated. Use "error" type instead.',
-      );
-    }
+    const correctTypes = [TYPE_INFO, TYPE_SUCCESS, TYPE_WARNING, TYPE_ERROR];
+
     return correctTypes.includes(this.args.type) ? this.args.type : 'info';
   }
 
-  get iconClass() {
+  get iconName() {
     const classes = {
-      [TYPE_INFO]: 'circle-info',
-      [TYPE_SUCCESS]: 'circle-check',
-      [TYPE_WARNING]: 'circle-exclamation',
-      [TYPE_ALERT]: 'triangle-exclamation',
-      [TYPE_ERROR]: 'triangle-exclamation',
+      [TYPE_INFO]: 'info',
+      [TYPE_SUCCESS]: 'checkCircle',
+      [TYPE_WARNING]: 'warning',
+      [TYPE_ERROR]: 'error',
     };
     return classes[this.type];
   }

addon/components/pix-modal.hbs

@@ -15,7 +15,7 @@
     <div class="pix-modal__header">
       <h1 id="modal-title--{{this.id}}" class="pix-modal__title">{{@title}}</h1>
       <PixIconButton
-        @icon="xmark"
+        @iconName="close"
         @triggerAction={{@onCloseButtonClick}}
         @ariaLabel="Fermer"
         @size="small"

addon/components/pix-multi-select.hbs

@@ -20,7 +20,7 @@
 
     {{#if @isSearchable}}
       <span {{reference}} class={{this.headerClassName}}>
-        <FaIcon @icon="magnifying-glass" class="pix-multi-select-header__search-icon" />
+        <PixIcon @name="search" class="pix-multi-select-header__search-icon" />
 
         <input
           class="pix-multi-select-header__search-input"
@@ -52,10 +52,10 @@
         {{else if @placeholder}}
           {{this.placeholder}}
         {{/if}}
-        <FaIcon
+        <PixIcon
           class="pix-multi-select-header__dropdown-icon
             {{if this.isExpanded ' pix-multi-select-header__dropdown-icon--expand'}}"
-          @icon={{if this.isExpanded "chevron-up" "chevron-down"}}
+          @name={{if this.isExpanded "chevronTop" "chevronBottom"}}
         />
       </button>
     {{/if}}

addon/components/pix-pagination.hbs

@@ -24,8 +24,8 @@
     <div class="pix-pagination-navigation__action">
       <PixIconButton
         class="pix-pagination-navigation__action-button"
-        @icon="arrow-left"
-        aria-label={{this.previousPageLabel}}
+        @iconName="arrowLeft"
+        @ariaLabel={{this.previousPageLabel}}
         @triggerAction={{this.goToPreviousPage}}
         @withBackground={{false}}
         @size="big"
@@ -38,8 +38,8 @@
       </span>
       <PixIconButton
         class="pix-pagination-navigation__action-button"
-        @icon="arrow-right"
-        aria-label={{this.nextPageLabel}}
+        @iconName="arrowRight"
+        @ariaLabel={{this.nextPageLabel}}
         @triggerAction={{this.goToNextPage}}
         @withBackground={{false}}
         @size="big"

addon/components/pix-return-to.hbs

@@ -5,9 +5,9 @@
   ...attributes
 >
   {{#if (has-block)}}
-    <span aria-hidden="true" class="pix-return-to__icon"><FaIcon @icon="arrow-left" /></span>
+    <PixIcon @name="arrowLeft" @ariaHidden={{true}} class="pix-return-to__icon" />
     <span class="pix-return-to__text"> {{yield}} </span>
   {{else}}
-    <span title="Flèche de retour" class="pix-return-to__icon"><FaIcon @icon="arrow-left" /></span>
+    <PixIcon class="pix-return-to__icon" aria-label={{@arrowLabel}} @name="arrowLeft" />
   {{/if}}
 </LinkTo>