[FEATURE] Utiliser PixIcon dans Pix App - Partie 1 (PIX-14775).

#10632
1024pix · Dec 2, 2024 · 48c39fd · 48c39fd
2 parents f525a20 + bd8485a
commit 48c39fd
Show file tree

Hide file tree

Showing 59 changed files with 297 additions and 262 deletions.
diff --git a/high-level-tests/e2e/cypress/support/step_definitions/assessment.js b/high-level-tests/e2e/cypress/support/step_definitions/assessment.js
@@ -35,20 +35,17 @@ Then(`je vois la page de résultats`, () => {
 Then(`j'ai passé à {string}`, (challenge) => {
   cy.contains(".result-item", challenge)
     .find(".result-item__icon svg")
-    .should("have.class", "fa-circle-xmark")
-    .and("have.class", "result-item__icon--grey");
+    .should("have.class", "result-item__icon--grey");
 });
 
 Then(`j'ai mal répondu à {string}`, (challenge) => {
   cy.contains(".result-item", challenge)
     .find(".result-item__icon svg")
-    .should("have.class", "fa-circle-xmark")
-    .and("have.class", "result-item__icon--red");
+    .should("have.class", "result-item__icon--red");
 });
 
 Then(`j'ai bien répondu à {string}`, (challenge) => {
   cy.contains(".result-item", challenge)
     .find(".result-item__icon svg")
-    .should("have.class", "fa-circle-check")
-    .and("have.class", "result-item__icon--green");
+    .should("have.class", "result-item__icon--green");
 });
diff --git a/mon-pix/app/components/account-recovery/student-information-form.hbs b/mon-pix/app/components/account-recovery/student-information-form.hbs
@@ -25,7 +25,7 @@
           aria-label={{t "pages.account-recovery.find-sco-record.student-information.form.tooltip" htmlSafe=true}}
         >
           <:triggerElement>
-            <FaIcon @icon="circle-question" tabindex="0" />
+            <PixIcon @name="help" @plainIcon={{true}} @ariaHidden={{true}} tabindex="0" />
           </:triggerElement>
           <:tooltip>
             {{t "pages.account-recovery.find-sco-record.student-information.form.tooltip" htmlSafe=true}}

diff --git a/mon-pix/app/components/assessment-banner.hbs b/mon-pix/app/components/assessment-banner.hbs
@@ -24,7 +24,7 @@
       {{#if @displayHomeLink}}
         <button type="button" class="assessment-banner__home-link" onclick={{this.toggleClosingModal}}>
           {{t "common.actions.quit"}}
-          <FaIcon @icon="right-from-bracket" />
+          <PixIcon @name="logout" @ariaHidden={{true}} />
         </button>
         <PixModal
           class="assessment-banner__closing-modal"

diff --git a/mon-pix/app/components/authentication/new-password-input/password-rule.gjs b/mon-pix/app/components/authentication/new-password-input/password-rule.gjs
@@ -1,13 +1,13 @@
-import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
 import Component from '@glimmer/component';
 
 const RULE_STYLES = {
   VALID: {
-    iconClass: 'circle-check',
+    iconClass: 'checkCircle',
     listItemClass: 'password-rule',
   },
   INVALID: {
-    iconClass: 'circle-xmark',
+    iconClass: 'cancel',
     listItemClass: 'password-rule password-rule--error',
   },
 };
@@ -19,7 +19,7 @@ export default class PasswordRule extends Component {
 
   <template>
     <li class="{{this.classes.listItemClass}}" aria-label="{{@description}}.">
-      <FaIcon @icon="{{this.classes.iconClass}}" />
+      <PixIcon @name={{this.classes.iconClass}} @plainIcon={{true}} @ariaHidden={{true}} />
       <p aria-live="polite"> {{@description}} </p>
     </li>
   </template>

diff --git a/mon-pix/app/components/authentication/new-password-input/password-rule.scss b/mon-pix/app/components/authentication/new-password-input/password-rule.scss
@@ -3,15 +3,19 @@
   gap: var(--pix-spacing-2x);
   align-items: center;
 
-  path {
-    fill: var(--pix-success-500);
+  svg {
+    width: 1rem;
+    height: 1rem;
+    color: var(--pix-success-500);
   }
 
   &--error {
     font-weight: var(--pix-font-bold);
 
-    path {
-      fill: var(--pix-error-500);
+    svg {
+      width: 1rem;
+      height: 1rem;
+      color: var(--pix-error-500);
     }
   }
 }
diff --git a/mon-pix/app/components/certification-banners/congratulations-certification-banner.hbs b/mon-pix/app/components/certification-banners/congratulations-certification-banner.hbs
@@ -1,12 +1,11 @@
 <div class="congratulations-banner">
-  <button
-    aria-label={{t "common.actions.close"}}
+  <PixIconButton
+    @iconName="close"
+    @ariaLabel={{t "common.actions.close"}}
+    @triggerAction={{@closeBanner}}
+    @withBackground={{true}}
     class="icon-button congratulations-banner__icon"
-    {{on "click" @closeBanner}}
-    type="button"
-  >
-    <FaIcon @icon="xmark" />
-  </button>
+  />
   <p class="congratulations-banner__message">
     {{t "pages.certification-joiner.congratulation-banner.message" fullName=@fullName htmlSafe=true}}
   </p>
@@ -19,12 +18,12 @@
       rel="noopener noreferrer"
     >
       {{t "pages.certification-joiner.congratulation-banner.link.text"}}
-      <FaIcon @icon="up-right-from-square" class="congratulations-banner-links__link--icon" />
+      <PixIcon @name="openNew" @plainIcon={{true}} @title={{t "navigation.external-link-title"}} />
     </a>
     <LinkTo @route="authenticated.user-certifications" class="congratulations-banner-links__link">{{t
         "pages.certification-start.link-to-user-certification"
       }}
-      <FaIcon @icon="eye" class="congratulations-banner-links__link--icon" />
+      <PixIcon @name="eye" @plainIcon={{true}} @ariaHidden={{true}} />
     </LinkTo>
   </div>
 </div>
diff --git a/mon-pix/app/components/certification-joiner.hbs b/mon-pix/app/components/certification-joiner.hbs
@@ -86,13 +86,11 @@
             </ul>
           {{/if}}
           {{#if this.errorMessageLink}}
-            <a
-              rel="noopener noreferrer"
-              target="_blank"
-              href={{this.errorMessageLink.url}}
-            >{{this.errorMessageLink.label}}
+            <a rel="noopener noreferrer" target="_blank" href={{this.errorMessageLink.url}}>
+              {{this.errorMessageLink.label}}
+              <PixIcon @name="openNew" @title={{t "navigation.external-link-title"}} />
             </a>
-            <FaIcon @icon="up-right-from-square" />
+
           {{/if}}
         </PixMessage>
       </div>

diff --git a/mon-pix/app/components/certification-starter.hbs b/mon-pix/app/components/certification-starter.hbs
@@ -12,16 +12,20 @@
 
             {{#if (gt @certificationCandidateSubscription.eligibleSubscriptions.length 0)}}
               <span class="certification-starter-subscriptions-container-items__eligible-item">
-                <FaIcon
-                  @icon="circle-check"
+                <PixIcon
+                  @name="checkCircle"
+                  @plainIcon={{true}}
+                  @ariaHidden={{true}}
                   class="certification-starter-subscriptions-container-items__eligible-icon"
                 />
                 {{this.complementarySubscriptionLabel}}
               </span>
             {{else}}
               <span class="certification-starter-subscriptions-container-items__non-eligible-item">
-                <FaIcon
-                  @icon="circle-check"
+                <PixIcon
+                  @name="checkCircle"
+                  @plainIcon={{true}}
+                  @ariaHidden={{true}}
                   class="certification-starter-subscriptions-container-items__non-eligible-icon"
                 />
                 {{@certificationCandidateSubscription.nonEligibleSubscription.label}}
@@ -31,7 +35,12 @@
         </div>
         {{#if @certificationCandidateSubscription.nonEligibleSubscription}}
           <div class="certification-starter-subscriptions-container__non-eligible">
-            <FaIcon @icon="circle-exclamation" class="certification-starter-subscriptions-container__info-icon" />
+            <PixIcon
+              @name="error"
+              @plainIcon={{true}}
+              @ariaHidden={{true}}
+              class="certification-starter-subscriptions-container__info-icon"
+            />
             <span>
               {{t
                 "pages.certification-start.non-eligible-subscription"

diff --git a/mon-pix/app/components/certifications/certification-ender.hbs b/mon-pix/app/components/certifications/certification-ender.hbs
@@ -5,10 +5,10 @@
   <div class="certification-ender__finished-test">
     <img src="/images/illustrations/certification-ender/test-completed.svg" alt="" class="certification-ender__image" />
     <div class="certification-ender__candidate">
-      <div class="certification-ender__candidate-name">
-        <span><FaIcon @icon="circle-user" /></span>
+      <p class="certification-ender__candidate-name">
+        <PixIcon @name="userCircle" @plainIcon={{true}} @ariaHidden={{true}} />
         {{this.currentUser.user.fullName}}
-      </div>
+      </p>
       <h1 class="certification-ender__candidate-title">{{t "pages.certification-ender.candidate.title"}}</h1>
       {{#if @isEndedBySupervisor}}
         <div class="certification-ender__candidate-message">

diff --git a/mon-pix/app/components/challenge-actions.hbs b/mon-pix/app/components/challenge-actions.hbs
@@ -19,7 +19,7 @@
 
   {{else if @hasChallengeTimedOut}}
     <div class="challenge-actions__alert-message" role="alert" aria-live="assertive">
-      <FaIcon @icon="circle-info" class="challenge-actions-alert-message__icon" />
+      <PixIcon @name="info" @plainIcon={{true}} @ariaHidden={{true}} class="challenge-actions-alert-message__icon" />
       {{t "pages.challenge.timed.cannot-answer"}}
     </div>
     <PixButton
@@ -41,7 +41,7 @@
         role="alert"
         aria-live="assertive"
       >
-        <FaIcon @icon="circle-info" class="challenge-actions-alert-message__icon" />
+        <PixIcon @name="info" @plainIcon={{true}} @ariaHidden={{true}} class="challenge-actions-alert-message__icon" />
         {{#if this.isNotCertification}}
           <span data-test="default-focused-out-error-message">{{t
               "pages.challenge.has-focused-out-of-window.default"

diff --git a/mon-pix/app/components/challenge-embed-simulator.hbs b/mon-pix/app/components/challenge-embed-simulator.hbs
@@ -2,7 +2,7 @@
 <div class="challenge-embed-simulator">
   {{#if this.isLoadingEmbed}}
     <div class="embed placeholder blurred" aria-label="{{t 'pages.challenge.embed-simulator.placeholder'}}">
-      <FaIcon @icon="image" />
+      <PixIcon @name="image" />
     </div>
   {{/if}}
 
@@ -41,7 +41,7 @@
           aria-label={{t "pages.challenge.embed-simulator.actions.reset-label"}}
           {{on "click" this.rebootSimulator}}
         >
-          <FaIcon @icon="rotate-right" class="embed-reboot-content__icon" />
+          <PixIcon @name="refresh" @ariaHidden={{true}} class="embed-reboot-content__icon" />
           {{t "pages.challenge.embed-simulator.actions.reset"}}
         </button>
       </div>

diff --git a/mon-pix/app/components/challenge-illustration.hbs b/mon-pix/app/components/challenge-illustration.hbs
@@ -1,7 +1,7 @@
 <div data-test-id="challenge-illustration">
   {{#if this.displayPlaceholder}}
     <div class="challenge-illustration__placeholder" aria-label="{{t 'pages.challenge.illustration.placeholder'}}">
-      <FaIcon @icon="image" />
+      <PixIcon @name="image" />
     </div>
   {{/if}}
 

diff --git a/mon-pix/app/components/challenge-item/challenge-item-qcm.hbs b/mon-pix/app/components/challenge-item/challenge-item-qcm.hbs
@@ -17,7 +17,7 @@
 
     {{#if @answer}}
       <div class="challenge-response__locked-overlay">
-        <FaIcon @icon="lock" class="challenge-response-locked__icon" />
+        <PixIcon @name="lock" @plainIcon={{true}} @ariaHidden={{true}} class="challenge-response-locked__icon" />
       </div>
     {{/if}}
 

diff --git a/mon-pix/app/components/challenge-item/challenge-item-qcu.hbs b/mon-pix/app/components/challenge-item/challenge-item-qcu.hbs
@@ -17,7 +17,7 @@
 
     {{#if @answer}}
       <div class="challenge-response__locked-overlay">
-        <FaIcon @icon="lock" class="challenge-response-locked__icon" />
+        <PixIcon @name="lock" @plainIcon={{true}} @ariaHidden={{true}} class="challenge-response-locked__icon" />
       </div>
     {{/if}}
 

diff --git a/mon-pix/app/components/challenge-item/challenge-item-qroc.hbs b/mon-pix/app/components/challenge-item/challenge-item-qroc.hbs
@@ -99,7 +99,7 @@
 
       {{#if @answer}}
         <div class="challenge-response__locked-overlay">
-          <FaIcon @icon="lock" class="challenge-response-locked__icon" />
+          <PixIcon @name="lock" @plainIcon={{true}} @ariaHidden={{true}} class="challenge-response-locked__icon" />
         </div>
       {{/if}}
 

diff --git a/mon-pix/app/components/challenge-item/challenge-item-qrocm.hbs b/mon-pix/app/components/challenge-item/challenge-item-qrocm.hbs
@@ -16,7 +16,7 @@
 
     {{#if @answer}}
       <div class="challenge-response__locked-overlay">
-        <FaIcon @icon="lock" class="challenge-response-locked__icon" />
+        <PixIcon @name="lock" @plainIcon={{true}} @ariaHidden={{true}} class="challenge-response-locked__icon" />
       </div>
     {{/if}}
 

diff --git a/mon-pix/app/components/challenge-statement.hbs b/mon-pix/app/components/challenge-statement.hbs
@@ -65,7 +65,7 @@
               "pages.challenge.statement.file-download.actions.choose-type"
             }}</span>
           <div class="challenge-statement__help-icon">
-            <FaIcon @icon="circle-info" />
+            <PixIcon @name="info" @plainIcon={{true}} @ariaHidden={{true}} />
             <div class="challenge-statement__help-tooltip">
               <span class="challenge-statement__help-text">{{t
                   "pages.challenge.statement.file-download.description"

diff --git a/mon-pix/app/components/feedback-panel-v3.hbs b/mon-pix/app/components/feedback-panel-v3.hbs
@@ -11,7 +11,8 @@
       aria-expanded={{this.isAriaExpanded}}
       type="button"
     >
-      <FaIcon @icon="flag" />{{t "pages.challenge.feedback-panel-v3.actions.open-close"}}
+      <PixIcon @name="flag" @plainIcon={{true}} @ariaHidden={{true}} />
+      {{t "pages.challenge.feedback-panel-v3.actions.open-close"}}
     </button>
 
     {{#if this.shouldBeExpanded}}

diff --git a/mon-pix/app/components/feedback-panel.hbs b/mon-pix/app/components/feedback-panel.hbs
@@ -10,7 +10,7 @@
       aria-controls={{this.feedbackPanelId}}
       type="button"
     >
-      <FaIcon @icon="flag" />
+      <PixIcon @name="flag" @plainIcon={{true}} @ariaHidden={{true}} />
       {{t "pages.challenge.feedback-panel.actions.open-close"}}
     </button>
   </div>
@@ -56,7 +56,7 @@
                   {{/if}}
                   {{#if this.quickHelpInstructions}}
                     <div class="feedback-panel__quick-help">
-                      <FaIcon @icon="circle-exclamation" class="tuto-icon__warning" />
+                      <PixIcon @name="error" @plainIcon={{true}} @ariaHidden={{true}} class="tuto-icon__warning" />
                       <p>{{t this.quickHelpInstructions htmlSafe=true}}</p>
                     </div>
                   {{/if}}
@@ -65,7 +65,7 @@
               {{#if this.displayTextBox}}
                 {{#if this.displayAddCommentButton}}
                   <button type="button" class="feedback-panel__comment" onClick={{this.addComment}}>
-                    <FaIcon @icon="pen" class="feedback-panel-comment__icon" />
+                    <PixIcon @name="edit" @ariaHidden={{true}} class="feedback-panel-comment__icon" />
                     {{t "pages.challenge.feedback-panel.form.fields.detail-selection.add-comment"}}
                   </button>
                 {{else}}

diff --git a/mon-pix/app/components/hexagon-score.hbs b/mon-pix/app/components/hexagon-score.hbs
@@ -12,7 +12,12 @@
             class="hexagon-score-content-pix-total__icon"
             aria-describedby="hexagon-score-tooltip"
           >
-            <FaIcon @icon="circle-info" aria-label={{t "pages.profile.total-score-helper.icon"}} />
+            <PixIcon
+              @name="info"
+              @plainIcon={{true}}
+              @ariaHidden={{true}}
+              @title={{t "pages.profile.total-score-helper.icon"}}
+            />
           </button>
         </:triggerElement>
         <:tooltip>

diff --git a/mon-pix/app/components/inaccessible-campaign.hbs b/mon-pix/app/components/inaccessible-campaign.hbs
@@ -17,9 +17,9 @@
     </div>
     <div class="campaign-landing-page-error">
       <h1 class="campaign-landing-page-error__title">{{yield}}</h1>
-      <LinkTo @route="authenticated" class="button button--extra-big button--link campaign-landing-page__error-button">
+      <PixButtonLink @route="authenticated" class="campaign-landing-page__error-button">
         {{t "navigation.back-to-profile"}}
-      </LinkTo>
+      </PixButtonLink>
     </div>
   </div>
 </div>
diff --git a/mon-pix/app/components/module/_recap.scss b/mon-pix/app/components/module/_recap.scss
@@ -42,6 +42,8 @@
 
 .module-recap-header {
   &__icon {
+    width: 3rem;
+    height: 3rem;
     color: var(--pix-primary-300);
   }
 }

diff --git a/mon-pix/app/components/module/element/_download.scss b/mon-pix/app/components/module/element/_download.scss
@@ -27,6 +27,11 @@
 
     display: block;
     color: var(--pix-info-700);
+
+    svg {
+      width: 1rem;
+      height: 1rem;
+    }
   }
 }
 

diff --git a/mon-pix/app/components/module/element/download.gjs b/mon-pix/app/components/module/element/download.gjs
@@ -1,8 +1,8 @@
 import PixButtonLink from '@1024pix/pix-ui/components/pix-button-link';
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
-import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
 import { t } from 'ember-intl';
 import ResponsiveListWideWrap from 'mon-pix/components/common/responsive-ul-wide-wrap';
 
@@ -47,7 +47,7 @@ export default class ModulixDownload extends ModuleElement {
         target="_blank"
       >
         {{t "pages.modulix.download.documentationLinkLabel"}}
-        <FaIcon @icon="arrow-up-right-from-square" />
+        <PixIcon @name="openNew" @title={{t "navigation.external-link-title"}} />
       </a>
     </div>
   </template>