refactor(mon-pix): use PixIcon component for text-to-speech

1024pix · Nov 25, 2024 · 7877298 · 7877298
1 parent 03a80f8
commit 7877298
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 10 deletions.
diff --git a/mon-pix/app/components/assessment-banner.hbs b/mon-pix/app/components/assessment-banner.hbs
@@ -13,7 +13,7 @@
         <PixTooltip class="assessment-banner__text-to-speech-toggle" @position="left" @isInline={{true}}>
           <:triggerElement>
             <button type="button" aria-label={{this.textToSpeechTooltipText}} {{on "click" @toggleTextToSpeech}}>
-              <FaIcon @icon={{this.textToSpeechIcon}} />
+              <PixIcon @name={{if @isTextToSpeechActivated "volumeOn" "volumeOff"}} />
             </button>
           </:triggerElement>
           <:tooltip>

diff --git a/mon-pix/app/components/assessment-banner.js b/mon-pix/app/components/assessment-banner.js
@@ -9,10 +9,6 @@ export default class AssessmentBanner extends Component {
 
   @tracked showClosingModal = false;
 
-  get textToSpeechIcon() {
-    return this.args.isTextToSpeechActivated ? 'volume-high' : 'volume-xmark';
-  }
-
   get textToSpeechTooltipText() {
     return this.args.isTextToSpeechActivated
       ? this.intl.t('pages.challenge.statement.text-to-speech.deactivate')

diff --git a/mon-pix/app/components/challenge-statement.hbs b/mon-pix/app/components/challenge-statement.hbs
@@ -8,11 +8,11 @@
             <:triggerElement>
               <button
                 type="button"
+                class="challenge-statement__text-to-speech-trigger"
                 aria-label={{this.textToSpeechButtonTooltipText}}
                 {{on "click" this.toggleInstructionTextToSpeech}}
-                class="challenge-statement__text-to-speech-trigger"
               >
-                <FaIcon @icon={{this.textToSpeechButtonIcon}} />
+                <PixIcon @name={{if this.isSpeaking "stopCircle" "volumeOn"}} />
               </button>
             </:triggerElement>
             <:tooltip>

diff --git a/mon-pix/app/components/challenge-statement.js b/mon-pix/app/components/challenge-statement.js
@@ -18,7 +18,6 @@ export default class ChallengeStatement extends Component {
   @tracked displayAlternativeInstruction = false;
   @tracked isSpeaking = false;
   @tracked textToSpeechButtonTooltipText = this.intl.t('pages.challenge.statement.text-to-speech.play');
-  @tracked textToSpeechButtonIcon = 'volume-high';
 
   constructor() {
     super(...arguments);
@@ -78,7 +77,6 @@ export default class ChallengeStatement extends Component {
       speechSynthesis.cancel();
       this.isSpeaking = false;
       this.textToSpeechButtonTooltipText = this.intl.t('pages.challenge.statement.text-to-speech.play');
-      this.textToSpeechButtonIcon = 'volume-high';
     } else {
       const element = document.getElementsByClassName('challenge-statement-instruction__text')[0];
       const textToSpeech = new SpeechSynthesisUtterance(element.innerText);
@@ -88,7 +86,6 @@ export default class ChallengeStatement extends Component {
       textToSpeech.onend = () => {
         this.isSpeaking = false;
         this.textToSpeechButtonTooltipText = this.intl.t('pages.challenge.statement.text-to-speech.play');
-        this.textToSpeechButtonIcon = 'volume-high';
       };
       this.isSpeaking = true;
       this.textToSpeechButtonTooltipText = this.intl.t('pages.challenge.statement.text-to-speech.stop');

diff --git a/mon-pix/app/styles/components/_assessment-banner.scss b/mon-pix/app/styles/components/_assessment-banner.scss
@@ -90,4 +90,9 @@
 
 .assessment-banner__text-to-speech-toggle {
   z-index: 1;
+  line-height: 0;
+
+  button {
+    color: var(--pix-neutral-0);
+  }
 }