[BUMP] Update dependency @1024pix/pix-ui to v48.9 (junior)

 #10581

Author: pix-service-auto-merge

junior/app/components/oralization-button.gjs

@@ -1,4 +1,5 @@
 import PixButton from '@1024pix/pix-ui/components/pix-button';
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
@@ -10,9 +11,7 @@ export default class OralizationButton extends Component {
   @service intl;
 
   get oralizationIconName() {
-    const iconName = this.isSpeaking ? 'oralization-stop' : 'oralization-start';
-
-    return `/images/icons/${iconName}.svg`;
+    return this.isSpeaking ? 'stopCircle' : 'hearing';
   }
 
   get oralizationButtonLabel() {
@@ -71,7 +70,7 @@ export default class OralizationButton extends Component {
         @variant="tertiary"
         @triggerAction={{this.readText}}
       >
-        <img alt="" src={{this.oralizationIconName}} />
+        <PixIcon @name={{this.oralizationIconName}} />
       </PixButton>
       {{this.oralizationButtonLabel}}
     </div>

junior/app/styles/components/oralization-button.scss

@@ -5,10 +5,25 @@
   justify-content: center;
   width: 80px;
   color: var(--pix-primary-500);
-  line-height: 0.7;
+  font-weight: 700;
+  font-size: 1rem;
+  line-height: 0.9;
 
   button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 45px;
+    height: 45px;
     padding: 0;
+    background-color: var(--pix-primary-500);
+
+    svg {
+      width: auto;
+      height: 30px;
+      margin-left: 4px;
+      fill: var(--pix-neutral-0);
+    }
 
     &:focus {
       border: 2px solid var(--pix-primary-700);
@@ -17,6 +32,14 @@
 
   &--is-reading {
     color: var(--pix-primary-700);
+
+    button {
+      background-color: var(--pix-primary-700);
+
+      svg {
+        margin-left: unset;
+      }
+    }
   }
 }
 

junior/app/templates/organization-code.hbs

@@ -8,7 +8,6 @@
   <p class="school-code__instructions">{{t "pages.home.code-instruction"}}</p>
   <label for="organization-code" class="school-code__label">{{t "pages.home.code-label"}}</label>
   <PixInputCode
-    id="organization-code"
     @ariaLabel={{t "pages.home.field-description"}}
     @legend={{t "pages.home.code-description"}}
     @numInputs={{9}}

junior/package-lock.json

@@ -38,7 +38,7 @@
     "@1024pix/ember-matomo-tag-manager": "^2.4.3",
     "@1024pix/ember-testing-library": "^3.0.6",
     "@1024pix/eslint-config": "^1.3.8",
-    "@1024pix/pix-ui": "^46.15.2",
+    "@1024pix/pix-ui": "^48.9.0",
     "@1024pix/stylelint-config": "^5.1.22",
     "@1024pix/web-components": "^0.2.6",
     "@babel/eslint-parser": "^7.25.8",