@1024pix/pix-ui 46.15.2 → 47.0.0

package/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}}
         />

package/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 {

package/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}}

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

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

package/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;
   }
 

package/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}}" />

package/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',

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

package/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}`;
   }
 }

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

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

package/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"}}

package/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}}

package/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];
   }

package/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"

package/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}}

package/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"

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

package/addon/components/pix-search-input.hbs

@@ -11,7 +11,7 @@
   </PixLabel>
 
   <div class="pix-search-input__input-container">
-    <FaIcon @icon="magnifying-glass" />
+    <PixIcon @name="search" />
     <input
       id={{this.id}}
       class="pix-search-input__input"

package/addon/components/pix-select.hbs

@@ -32,15 +32,15 @@
         aria-controls={{this.listId}}
         aria-disabled={{@isDisabled}}
       >
-        {{#if @icon}}
-          <FaIcon @icon={{@icon}} />
+        {{#if @iconName}}
+          <PixIcon @name={{@iconName}} @plainIcon={{@plainIcon}} class="pix-select-button__icon" />
         {{/if}}
 
         <span class="pix-select-button__text">{{this.placeholder}}</span>
 
-        <FaIcon
+        <PixIcon
           class="pix-select-button__dropdown-icon"
-          @icon={{if this.isExpanded "chevron-up" "chevron-down"}}
+          @name={{if this.isExpanded "chevronTop" "chevronBottom"}}
         />
       </button>
       <div
@@ -50,7 +50,7 @@
       >
         {{#if @isSearchable}}
           <div class="pix-select__search">
-            <FaIcon class="pix-select-search__icon" @icon="magnifying-glass" />
+            <PixIcon class="pix-select-search__icon" @name="search" />
             <label class="screen-reader-only" for={{this.searchId}}>{{@searchLabel}}</label>
             <input
               class="pix-select-search__input"
@@ -116,7 +116,7 @@
                       {{option.label}}
 
                       {{#if (eq option.value @value)}}
-                        <FaIcon @icon="check" role="presentation" />
+                        <PixIcon @name="check" role="presentation" />
                       {{/if}}
                     </li>
                   {{/each}}
@@ -139,7 +139,7 @@
                   {{option.label}}
 
                   {{#if (eq option.value @value)}}
-                    <FaIcon @icon="check" role="presentation" />
+                    <PixIcon @name="check" role="presentation" />
                   {{/if}}
                 </li>
               {{/each}}

package/addon/components/pix-sidebar.hbs

@@ -15,7 +15,7 @@
     <div class="pix-sidebar__header">
       <h1 id="sidebar-title--{{this.id}}" class="pix-sidebar__title">{{@title}}</h1>
       <PixIconButton
-        @icon="xmark"
+        @iconName="close"
         @triggerAction={{@onClose}}
         @ariaLabel="Fermer"
         @size="small"

package/addon/components/pix-toggle.hbs

@@ -7,25 +7,17 @@
     @inlineLabel={{@inlineLabel}}
   >{{yield to="label"}}</PixLabel>
   <button
-    class="pix-toggle__button"
+    class="pix-toggle__button{{if @useIcons ' pix-toggle__button--icon'}}"
     id={{this.id}}
     aria-pressed={{if @toggled "true" "false"}}
     type="button"
     {{on "click" this.onToggle}}
   >
-    <span class="pix-toggle__on">
-      {{#if @onLabel}}
-        {{@onLabel}}
-      {{else}}
-        {{yield to="on"}}
-      {{/if}}
+    <span class="pix-toggle__on{{if @useIcons ' pix-toggle__with-icon'}}">
+      {{yield to="on"}}
     </span>
-    <span class="pix-toggle__off">
-      {{#if @offLabel}}
-        {{@offLabel}}
-      {{else}}
-        {{yield to="off"}}
-      {{/if}}
+    <span class="pix-toggle__off{{if @useIcons ' pix-toggle__with-icon'}}">
+      {{yield to="off"}}
     </span>
   </button>
 </div>

package/addon/components/pix-tooltip.hbs

@@ -8,7 +8,7 @@
   ...attributes
 >
   {{#if (has-block "triggerElement")}}
-    <span class="pix-tooltip__trigger-element">
+    <span class="pix-tooltip__trigger-element" tabindex="0">
       {{yield to="triggerElement"}}
     </span>
   {{/if}}

package/addon/helpers/icons.js

@@ -15,17 +15,16 @@ export const ICONS = {
   cancel: { default: 'cancel', plainIcon: 'cancel_plainIcon' },
   check: { default: 'check' },
   checkCircle: { default: 'check_circle', plainIcon: 'check_circle_plainIcon' },
-  chevronBottom: { default: 'arrow_drop_down' },
+  chevronBottom: { default: 'keyboard_arrow_down' },
   chevronLeft: { default: 'chevron_left' },
   chevronRight: { default: 'chevron_right' },
-  chevronTop: { default: 'arrow_drop_up' },
+  chevronTop: { default: 'keyboard_arrow_up' },
   clock: { default: 'schedule', plainIcon: 'schedule_plainIcon' },
   close: { default: 'close' },
   cloudUpload: { default: 'cloud_upload', plainIcon: 'cloud_upload_plainIcon' },
   conversionPath: { default: 'conversion_path' },
   copy: { default: 'content_copy', plainIcon: 'content_copy_plainIcon' },
   delete: { default: 'delete', plainIcon: 'delete_plainIcon' },
-  down: { default: 'keyboard_arrow_down' },
   download: { default: 'download' },
   edit: { default: 'edit_square', plainIcon: 'edit_square_plainIcon' },
   error: { default: 'error', plainIcon: 'error_plainIcon' },
@@ -71,7 +70,6 @@ export const ICONS = {
   tablet: { default: 'tablet_android', plainIcon: 'tablet_android_plainIcon' },
   thumbUp: { default: 'thumb_up', plainIcon: 'thumb_up_plainIcon' },
   tools: { default: 'construction' },
-  up: { default: 'keyboard_arrow_up' },
   upload: { default: 'upload' },
   uploadFile: { default: 'upload_file', plainIcon: 'upload_file_plainIcon' },
   userCircle: { default: 'account_circle', plainIcon: 'account_circle_plainIcon' },

package/addon/styles/_pix-banner.scss

@@ -7,13 +7,20 @@
   border: 1px solid currentcolor;
   border-radius: var(--pix-spacing-2x);
 
+  &__icon {
+    flex-shrink: 0;
+  }
+
   &__action {
+    display: inline-flex;
+    align-items: center;
     color: inherit;
     text-decoration: underline;
 
     .external-link {
+      width: 1rem;
+      height: 1rem;
       margin-left: var(--pix-spacing-1x);
-      font-size: 0.875rem;
     }
   }
 
@@ -22,16 +29,12 @@
     margin-left: auto;
   }
 
-  &__icon {
-    font-size: 1.125rem;
-  }
-
   &--information {
     color: var(--pix-info-700);
     background-color: var(--pix-info-50);
+    fill: var(--pix-info-700);
 
     .pix-icon-button {
-      color: var(--pix-neutral-800);
       background-color: var(--pix-info-50);
 
       &:hover:enabled,
@@ -49,9 +52,9 @@
   &--warning {
     color: var(--pix-warning-700);
     background-color: var(--pix-warning-50);
+    fill: var(--pix-warning-700);
 
     .pix-icon-button {
-      color: var(--pix-neutral-800);
       background-color: var(--pix-warning-50);
 
       &:hover:enabled,
@@ -69,9 +72,9 @@
   &--error {
     color: var(--pix-error-700);
     background-color: var(--pix-error-50);
+    fill: var(--pix-error-700);
 
     .pix-icon-button {
-      color: var(--pix-neutral-800);
       background-color: var(--pix-error-50);
 
       &:hover:enabled,
@@ -89,15 +92,18 @@
   &--communication {
     color: var(--pix-neutral-0);
     background-color: var(--pix-primary-500);
+    fill: var(--pix-neutral-0);
 
     &-orga {
       color: var(--pix-neutral-0);
       background-color: var(--pix-orga-500);
+      fill: var(--pix-neutral-0);
     }
 
     &-certif {
       color: var(--pix-neutral-0);
       background-color: var(--pix-certif-500);
+      fill: var(--pix-neutral-0);
     }
   }
 }