[TECH] Montée de version de Pix UI sur Certif (PIX-15059).

#10424
1024pix · Oct 30, 2024 · 05245fc · 05245fc
2 parents 6cf5189 + 63a4154
commit 05245fc
Show file tree

Hide file tree

Showing 21 changed files with 112 additions and 145 deletions.
diff --git a/certif/app/components/dropdown/icon-trigger.hbs b/certif/app/components/dropdown/icon-trigger.hbs
@@ -1,7 +1,7 @@
 <div id="icon-trigger" class="dropdown" ...attributes>
   <PixIconButton
-    @icon={{@icon}}
-    aria-label="{{@ariaLabel}}"
+    @iconName={{@icon}}
+    @ariaLabel={{@ariaLabel}}
     class="{{@dropdownButtonClass}}"
     @triggerAction={{this.toggle}}
     @size="small"

diff --git a/certif/app/components/import/file-import-block.hbs b/certif/app/components/import/file-import-block.hbs
@@ -12,7 +12,8 @@
           {{@filename}}
           <PixIconButton
             @ariaLabel={{t "pages.sessions.import.step-one.actions.cancel.label"}}
-            @icon="circle-xmark"
+            @iconName="cancel"
+            @plainIcon={{true}}
             @triggerAction={{@removeImport}}
             class="import-page-filename__cancel"
           />

diff --git a/certif/app/components/import/step-two-section.hbs b/certif/app/components/import/step-two-section.hbs
@@ -34,31 +34,35 @@
       </span>
       <div>
         <PixCollapsible
-          @titleIcon="circle-exclamation"
-          @title={{t
-            "pages.sessions.import.step-two.blocking-errors.title"
-            blockingErrorReportsCount=this.blockingErrorReportsCount
-          }}
-          @iconTitle="plus"
+          @iconName="error"
+          @plainIcon={{true}}
           @tagContent={{t
             "pages.sessions.import.step-two.blocking-errors.tag-information"
             blockingErrorReportsCount=this.blockingErrorReportsCount
           }}
           @tagColor="error"
           class="collapsible-header collapsible-header--blocking"
         >
-          <ul class="collapsible-header__list">
-            {{#each this.translatedBlockingErrorReport as |report|}}
-              <li>
-                <PixMessage @type="error">
-                  {{t "pages.sessions.import.step-two.blocking-errors.line"}}
-                  {{report.line}}
-                  :
-                  {{report.message}}
-                </PixMessage>
-              </li>
-            {{/each}}
-          </ul>
+          <:title>
+            {{t
+              "pages.sessions.import.step-two.blocking-errors.title"
+              blockingErrorReportsCount=this.blockingErrorReportsCount
+            }}
+          </:title>
+          <:content>
+            <ul class="collapsible-header__list">
+              {{#each this.translatedBlockingErrorReport as |report|}}
+                <li>
+                  <PixMessage @type="error">
+                    {{t "pages.sessions.import.step-two.blocking-errors.line"}}
+                    {{report.line}}
+                    :
+                    {{report.message}}
+                  </PixMessage>
+                </li>
+              {{/each}}
+            </ul>
+          </:content>
         </PixCollapsible>
       </div>
     {{/if}}
@@ -71,31 +75,35 @@
       </span>
       <div>
         <PixCollapsible
-          @titleIcon="triangle-exclamation"
-          @title={{t
-            "pages.sessions.import.step-two.non-blocking-errors.title"
-            nonBlockingErrorReportsCount=this.nonBlockingErrorReportsCount
-          }}
-          @iconTitle="plus"
+          @iconName="warning"
+          @plainIcon={{true}}
           @tagContent={{t
             "pages.sessions.import.step-two.non-blocking-errors.tag-information"
             nonBlockingErrorReportsCount=this.nonBlockingErrorReportsCount
           }}
           @tagColor="secondary"
           class="collapsible-header collapsible-header--non-blocking"
         >
-          <ul class="collapsible-header__list">
-            {{#each this.translatedNonBlockingErrorReport as |report|}}
-              <li>
-                <PixMessage @type="warning">
-                  {{t "pages.sessions.import.step-two.non-blocking-errors.line"}}
-                  {{report.line}}
-                  :
-                  {{report.message}}
-                </PixMessage>
-              </li>
-            {{/each}}
-          </ul>
+          <:title>
+            {{t
+              "pages.sessions.import.step-two.non-blocking-errors.title"
+              nonBlockingErrorReportsCount=this.nonBlockingErrorReportsCount
+            }}
+          </:title>
+          <:content>
+            <ul class="collapsible-header__list">
+              {{#each this.translatedNonBlockingErrorReport as |report|}}
+                <li>
+                  <PixMessage @type="warning">
+                    {{t "pages.sessions.import.step-two.non-blocking-errors.line"}}
+                    {{report.line}}
+                    :
+                    {{report.message}}
+                  </PixMessage>
+                </li>
+              {{/each}}
+            </ul>
+          </:content>
         </PixCollapsible>
       </div>
     {{/if}}

diff --git a/certif/app/components/issue-report-modal/issue-reports-modal.hbs b/certif/app/components/issue-report-modal/issue-reports-modal.hbs
@@ -16,15 +16,17 @@
               {{#if (eq @version 3)}}
                 {{#unless issueReport.isInChallengeIssue}}
                   <PixIconButton
-                    @icon="trash-alt"
-                    aria-label={{t "pages.session-finalization.issue-reports-modal.actions.delete-reporting"}}
+                    @iconName="delete"
+                    @plainIcon={{true}}
+                    @ariaLabel={{t "pages.session-finalization.issue-reports-modal.actions.delete-reporting"}}
                     @triggerAction={{fn this.handleClickOnDeleteButton issueReport}}
                   />
                 {{/unless}}
               {{else}}
                 <PixIconButton
-                  @icon="trash-alt"
-                  aria-label={{t "pages.session-finalization.issue-reports-modal.actions.delete-reporting"}}
+                  @iconName="delete"
+                  @plainIcon={{true}}
+                  @ariaLabel={{t "pages.session-finalization.issue-reports-modal.actions.delete-reporting"}}
                   @triggerAction={{fn this.handleClickOnDeleteButton issueReport}}
                 />
               {{/if}}

diff --git a/certif/app/components/language-switcher.gjs b/certif/app/components/language-switcher.gjs
@@ -29,7 +29,7 @@ export default class LanguageSwitcher extends Component {
   <template>
     <PixSelect
       @id='language-switcher'
-      @icon='earth-europe'
+      @iconName='globe'
       @value={{@selectedLanguage}}
       @options={{this.alphabeticallySortedLanguages}}
       @onChange={{@onLanguageChange}}

diff --git a/certif/app/components/members-list-item.hbs b/certif/app/components/members-list-item.hbs
@@ -21,7 +21,7 @@
     <td>
       {{#if this.shouldDisplayMemberManageButton}}
         <Dropdown::IconTrigger
-          @icon="ellipsis-vertical"
+          @icon="moreVert"
           @dropdownButtonClass="zone-edit-role__dropdown-button"
           @dropdownContentClass="managing-member__dropdown-content"
           @ariaLabel={{t "pages.team.members.actions.manage"}}
@@ -52,9 +52,9 @@
             {{t "pages.team.members.actions.save"}}
           </PixButton>
           <PixIconButton
-            @icon="xmark"
+            @iconName="close"
             id="cancel-update-certification-center-role"
-            aria-label="{{t 'common.actions.cancel'}}"
+            @ariaLabel="{{t 'common.actions.cancel'}}"
             @triggerAction={{this.cancelUpdateRoleOfMember}}
             @withBackground={{false}}
           />

diff --git a/certif/app/components/session-supervising/candidate-in-list.hbs b/certif/app/components/session-supervising/candidate-in-list.hbs
@@ -57,7 +57,7 @@
         <p class="session-supervising-candidate-in-list-details-time">
           <div class="session-supervising-candidate-in-list-details-time__text">
             <PixIcon
-              @name="clock"
+              @name="time"
               @plainIcon={{true}}
               class="session-supervising-candidate-in-list-details-time__clock"
             />
@@ -99,8 +99,8 @@
       <PixIconButton
         @withBackground="{{true}}"
         @size="small"
-        @icon="ellipsis-v"
-        aria-label={{t "pages.session-supervising.candidate-in-list.display-candidate-options"}}
+        @iconName="moreVert"
+        @ariaLabel={{t "pages.session-supervising.candidate-in-list.display-candidate-options"}}
         @triggerAction={{this.toggleMenu}}
       />
       <Dropdown::Content

diff --git a/certif/app/components/session-supervising/candidate-list.hbs b/certif/app/components/session-supervising/candidate-list.hbs
@@ -19,7 +19,7 @@
         </PixInput>
         <PixIconButton
           @ariaLabel={{t "pages.session-supervising.candidate-list.clear-field"}}
-          @icon="times"
+          @iconName="close"
           @triggerAction={{this.emptySearchInput}}
           class="clear-button"
           @size={{true}}

diff --git a/certif/app/components/sessions/session-details/enrolled-candidates/index.gjs b/certif/app/components/sessions/session-details/enrolled-candidates/index.gjs
@@ -466,12 +466,13 @@ export default class EnrolledCandidates extends Component {
                             <PixTooltip @position='left' @isInline={{true}} @id='tooltip-edit-student-button'>
                               <:triggerElement>
                                 <PixIconButton
-                                  @icon='pen-to-square'
-                                  class='certification-candidates-actions__edit-button--disabled'
-                                  aria-label='{{t
+                                  @iconName='edit'
+                                  @plainIcon={{true}}
+                                  class='certification-candidates-actions__edit'
+                                  @ariaLabel='{{t
                                     "pages.sessions.detail.candidates.list.actions.edit.extra-information"
                                   }} {{candidate.firstName}} {{candidate.lastName}}'
-                                  aria-disabled='true'
+                                  disabled
                                   aria-describedby='tooltip-edit-student-button'
                                   @withBackground={{true}}
                                 />
@@ -480,9 +481,10 @@ export default class EnrolledCandidates extends Component {
                             </PixTooltip>
                           {{else}}
                             <PixIconButton
-                              @icon='pen-to-square'
+                              @iconName='edit'
+                              @plainIcon={{true}}
                               {{on 'click' (fn this.openEditCertificationCandidateDetailsModal candidate)}}
-                              aria-label='{{t
+                              @ariaLabel='{{t
                                 "pages.sessions.detail.candidates.list.actions.edit.extra-information"
                               }} {{candidate.firstName}} {{candidate.lastName}}'
                               class='certification-candidates-actions__edit-button'
@@ -496,12 +498,13 @@ export default class EnrolledCandidates extends Component {
                           <PixTooltip @position='left' @isInline={{true}} @id='tooltip-delete-student-button'>
                             <:triggerElement>
                               <PixIconButton
-                                @icon='trash-alt'
-                                class='certification-candidates-actions__delete-button--disabled'
-                                aria-label='{{t
+                                @iconName='delete'
+                                @plainIcon={{true}}
+                                class='certification-candidates-actions__delete'
+                                @ariaLabel='{{t
                                   "pages.sessions.detail.candidates.list.actions.delete.extra-information"
                                 }} {{candidate.firstName}} {{candidate.lastName}}'
-                                aria-disabled='true'
+                                disabled
                                 aria-describedby='tooltip-delete-student-button'
                                 @withBackground={{true}}
                               />
@@ -510,9 +513,10 @@ export default class EnrolledCandidates extends Component {
                           </PixTooltip>
                         {{else}}
                           <PixIconButton
-                            @icon='trash-alt'
+                            @iconName='delete'
+                            @plainIcon={{true}}
                             {{on 'click' (fn this.deleteCertificationCandidate candidate)}}
-                            aria-label='{{t
+                            @ariaLabel='{{t
                               "pages.sessions.detail.candidates.list.actions.delete.extra-information"
                             }} {{candidate.firstName}} {{candidate.lastName}}'
                             class='certification-candidates-actions__delete-button'

diff --git a/certif/app/components/sessions/session-list-row.gjs b/certif/app/components/sessions/session-list-row.gjs
@@ -50,8 +50,9 @@ export default class SessionListRow extends Component {
             <PixTooltip @position='left' @isInline={{true}} @id='tooltip-delete-session-button'>
               <:triggerElement>
                 <PixIconButton
-                  @icon='trash-alt'
-                  aria-label={{t
+                  @iconName='delete'
+                  @plainIcon={{true}}
+                  @ariaLabel={{t
                     'pages.sessions.list.actions.delete-session.label'
                     sessionSummaryId=@sessionSummary.id
                   }}
@@ -64,8 +65,9 @@ export default class SessionListRow extends Component {
             </PixTooltip>
           {{else}}
             <PixIconButton
-              @icon='trash-alt'
-              aria-label={{t 'pages.sessions.list.actions.delete-session.label' sessionSummaryId=@sessionSummary.id}}
+              @iconName='delete'
+              @plainIcon={{true}}
+              @ariaLabel={{t 'pages.sessions.list.actions.delete-session.label' sessionSummaryId=@sessionSummary.id}}
               disabled={{false}}
               @withBackground={{true}}
               @triggerAction={{fn

diff --git a/certif/app/components/team/invitations-list-item.hbs b/certif/app/components/team/invitations-list-item.hbs
@@ -9,7 +9,7 @@
         <:triggerElement>
           <PixIconButton
             @ariaLabel={{t "pages.team-invitations.actions.resend-invitation"}}
-            @icon="redo"
+            @iconName="refresh"
             @triggerAction={{fn @onResendInvitationButtonClicked @invitation}}
             @withBackground={{true}}
             disabled={{@invitation.isResendingInvitation}}
@@ -25,7 +25,8 @@
         <:triggerElement>
           <PixIconButton
             @ariaLabel={{t "pages.team-invitations.actions.cancel-invitation"}}
-            @icon="trash-alt"
+            @iconName="delete"
+            @plainIcon={{true}}
             @triggerAction={{fn @onCancelInvitationButtonClicked @invitation}}
             @withBackground={{true}}
           />

diff --git a/certif/app/components/user-logged-menu.hbs b/certif/app/components/user-logged-menu.hbs
@@ -12,9 +12,9 @@
   </span>
   <span class="screen-reader-only">{{t "navigation.user-logged-menu.button-extra-information"}}</span>
   {{#if this.isMenuOpen}}
-    <PixIcon @name="up" @ariaHidden={{true}} class="logged-user-summary__chevron" />
+    <PixIcon @name="chevronTop" @ariaHidden={{true}} class="logged-user-summary__chevron" />
   {{else}}
-    <PixIcon @name="down" @ariaHidden={{true}} class="logged-user-summary__chevron" />
+    <PixIcon @name="chevronBottom" @ariaHidden={{true}} class="logged-user-summary__chevron" />
   {{/if}}
 </button>
 

diff --git a/certif/app/styles/pages/authenticated/sessions/details/certification-candidates.scss b/certif/app/styles/pages/authenticated/sessions/details/certification-candidates.scss
@@ -194,16 +194,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-
-    &-button--disabled {
-      background-color: var(--pix-neutral-100);
-      color: var(--pix-neutral-0);
-      cursor: not-allowed;
-
-      &:hover, &:active, &:focus {
-        background-color: var(--pix-neutral-100);
-      }
-    }
   }
 }
 

diff --git a/certif/app/styles/pages/authenticated/sessions/import.scss b/certif/app/styles/pages/authenticated/sessions/import.scss
@@ -209,12 +209,12 @@
 
 .collapsible-header--blocking {
   .pix-collapsible-title__icon {
-    color: var(--pix-error-700);
+    fill: var(--pix-error-700);
   }
 }
 
 .collapsible-header--non-blocking {
   .pix-collapsible-title__icon {
-    color: var(--pix-warning-500);
+    fill: var(--pix-warning-500);
   }
 }
diff --git a/certif/app/templates/authenticated/sessions/details/parameters.hbs b/certif/app/templates/authenticated/sessions/details/parameters.hbs
@@ -14,7 +14,8 @@
             <:triggerElement>
               <PixIconButton
                 @ariaLabel={{t "pages.sessions.detail.parameters.session.copy-number"}}
-                @icon="copy"
+                @iconName="copy"
+                @plainIcon={{true}}
                 @triggerAction={{this.showSessionIdTooltip}}
                 class="session-details-content__clipboard-button"
               />
@@ -45,7 +46,8 @@
             <:triggerElement>
               <PixIconButton
                 @ariaLabel={{t "pages.sessions.detail.parameters.access-code.copy-code"}}
-                @icon="copy"
+                @iconName="copy"
+                @plainIcon={{true}}
                 @triggerAction={{this.showAccessCodeTooltip}}
               />
             </:triggerElement>
@@ -77,7 +79,8 @@
             <:triggerElement>
               <PixIconButton
                 @ariaLabel={{t "pages.sessions.detail.parameters.password.copy-password"}}
-                @icon="copy"
+                @iconName="copy"
+                @plainIcon={{true}}
                 @triggerAction={{this.showSupervisorPasswordTooltip}}
               />
             </:triggerElement>