tech(pix-return-to): update icon

1024pix · Oct 11, 2024 · 139f322 · 139f322
1 parent bcc3999
commit 139f322
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/addon/components/pix-return-to.hbs b/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>
diff --git a/addon/styles/_pix-return-to.scss b/addon/styles/_pix-return-to.scss
@@ -9,8 +9,9 @@
 
   &__icon {
     position: relative;
+    width: 2.3rem;
+    height: 2.3rem;
     padding: var(--pix-spacing-1x) var(--pix-spacing-2x);
-    font-size: 1rem;
   }
 
   &:focus,
@@ -29,11 +30,11 @@
     &:hover,
     &:active {
       .pix-return-to__icon {
-        color: $arrowHoverColor;
         background-color: $arrowBgColor;
         border-radius: 50%;
         outline: 1px solid var(--pix-neutral-0);
         outline-offset: -3px;
+        fill: $arrowHoverColor;
       }
     }
   }

diff --git a/app/stories/pix-return-to.stories.js b/app/stories/pix-return-to.stories.js
@@ -3,7 +3,11 @@ import { hbs } from 'ember-cli-htmlbars';
 export default {
   title: 'Basics/Return To',
   render: (args) => ({
-    template: hbs`<PixReturnTo @route='profile' @shade={{this.shade}}>{{this.content}}</PixReturnTo>`,
+    template: hbs`<PixReturnTo
+  @route='profile'
+  @arrowLabel={{this.arrowLabel}}
+  @shade={{this.shade}}
+>{{this.content}}</PixReturnTo>`,
     context: args,
   }),
   argTypes: {
@@ -12,6 +16,11 @@ export default {
       description: 'Route de redirection',
       type: { name: 'string', required: true },
     },
+    arrowLabel: {
+      name: 'arrowLabel',
+      description: 'Texte du bouton de retour',
+      type: { required: false },
+    },
     model: {
       name: 'model',
       description: 'Model Ember',