From d7b177b1e9bf9267f1549be8dd526d9b573b7174 Mon Sep 17 00:00:00 2001
From: AndreiaPena <andreia.pena@pix.fr>
Date: Wed, 22 Jan 2025 11:22:10 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20pix-ui:=20use=20content=20with=20pi?=
 =?UTF-8?q?x=20icons=20component=20on=20PixButtonLink?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addon/components/pix-button-link.hbs   | 18 ++++++++--
 addon/components/pix-button-link.js    |  2 +-
 app/stories/pix-button-link.mdx        | 12 +++++--
 app/stories/pix-button-link.stories.js | 50 ++++++++++++++++++++++++--
 4 files changed, 74 insertions(+), 8 deletions(-)

diff --git a/addon/components/pix-button-link.hbs b/addon/components/pix-button-link.hbs
index 123633c5d..a95bf1ce7 100644
--- a/addon/components/pix-button-link.hbs
+++ b/addon/components/pix-button-link.hbs
@@ -7,10 +7,24 @@
     class={{this.className}}
     ...attributes
   >
-    {{yield}}
+    <ContentWithPixIcons
+      @iconBefore={{@iconBefore}}
+      @iconAfter={{@iconAfter}}
+      @plainIconAfter={{@plainIconAfter}}
+      @plainIconBefore={{@plainIconBefore}}
+    >
+      {{yield}}
+    </ContentWithPixIcons>
   </LinkTo>
 {{else}}
   <a href={{@href}} class={{this.className}} ...attributes>
-    {{yield}}
+    <ContentWithPixIcons
+      @iconBefore={{@iconBefore}}
+      @iconAfter={{@iconAfter}}
+      @plainIconAfter={{@plainIconAfter}}
+      @plainIconBefore={{@plainIconBefore}}
+    >
+      {{yield}}
+    </ContentWithPixIcons>
   </a>
 {{/if}}
\ No newline at end of file
diff --git a/addon/components/pix-button-link.js b/addon/components/pix-button-link.js
index 7ef959c67..6c6a574a7 100644
--- a/addon/components/pix-button-link.js
+++ b/addon/components/pix-button-link.js
@@ -5,6 +5,6 @@ export default class PixButtonLink extends PixButtonBase {
   defaultParams = {};
 
   get className() {
-    return [...super.baseClassNames, 'pix-button-link'].join(' ');
+    return super.baseClassNames.join(' ');
   }
 }
diff --git a/app/stories/pix-button-link.mdx b/app/stories/pix-button-link.mdx
index 627a16c14..4c4fda393 100644
--- a/app/stories/pix-button-link.mdx
+++ b/app/stories/pix-button-link.mdx
@@ -6,7 +6,7 @@ import * as ComponentStories from './pix-button-link.stories';
 
 # ButtonLink
 
-Affiche un lien avec le style d'un bouton Pix. Il peut être de type HTML ou Route EmberJS.
+Affiche un lien avec le style d'un `PixButton`. Il peut être de type HTML ou Route EmberJS.
 
 Hérite des styles de base de `PixButton` (`variant`, `size`, `isBorderVisible`, `isDisabled`)
 
@@ -20,7 +20,7 @@ Redirige directement les attributs de la balise HTML `<a>` (eg. `target`...).
 <Story of={ComponentStories.htmlLink} />
 
 ```html
-<PixButtonLink @href="https://pix.fr" target="_blank"> Libellé du lien </PixButtonLink>
+<PixButtonLink @href="https://pix.fr" target="_blank" @variant="tertiary"> Libellé du lien </PixButtonLink>
 ```
 
 ## Route EmberJS
@@ -34,6 +34,14 @@ Un bouton de route EmberJS peut être désactivé via la propriété `@isDisable
 
 <Story of={ComponentStories.emberLink} />
 
+## Icons
+
+Le bouton avec des icônes `PixIcons` à afficher avant (`@iconBefore`) ou après (`@iconAfter`) le label.
+
+> ℹ️ Accessibilité : dans le cas où les icônes ont une valeur d'information (ex:&nbsp;un bouton `⬅️ Précédent`), il est important d'apporter un aria-label au bouton (ex:&nbsp;"Retour à la page précédente").
+
+<Story of={ComponentStories.icons} height={75} />
+
 ## Arguments
 
 <ArgTypes of={ComponentStories} />
diff --git a/app/stories/pix-button-link.stories.js b/app/stories/pix-button-link.stories.js
index eb5384f70..b5ff98741 100644
--- a/app/stories/pix-button-link.stories.js
+++ b/app/stories/pix-button-link.stories.js
@@ -1,8 +1,9 @@
 import { hbs } from 'ember-cli-htmlbars';
 
+import { ICONS } from '../../addon/helpers/icons';
+
 export default {
   title: 'Actions/ButtonLink',
-
   argTypes: {
     href: {
       name: 'href',
@@ -46,6 +47,38 @@ export default {
         defaultValue: { summary: 'primary' },
       },
     },
+    iconBefore: {
+      name: 'iconBefore',
+      description: `Nom de l'icône à afficher **avant** le label`,
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: Object.keys(ICONS),
+    },
+    iconAfter: {
+      name: 'iconAfter',
+      description: `Nom de l'icône à afficher **après** le label`,
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: Object.keys(ICONS),
+    },
+    plainIconBefore: {
+      name: 'plainIconBefore',
+      description: `Change le type de l'icône **avant** le label en fill/plain`,
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    plainIconAfter: {
+      name: 'plainIconAfter',
+      description: `Change le type de l'icône **après** le label fill/plain`,
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
     size: {
       name: 'size',
       description: 'taille: `large`,`small`',
@@ -85,7 +118,7 @@ export const htmlLink = {
     template: hbs`<PixButtonLink
   @href='https://pix.fr'
   target='NEW'
-  @variant={{this.variant}}
+  @variant='tertiary'
   @size={{this.size}}
   @isBorderVisible={{this.isBorderVisible}}
   @isDisabled={{this.isDisabled}}
@@ -96,7 +129,7 @@ export const htmlLink = {
   }),
 };
 
-export const emberLink = (args) => {
+const Template = (args) => {
   return {
     template: hbs`<PixButtonLink
   @route=''
@@ -105,6 +138,8 @@ export const emberLink = (args) => {
   @variant={{this.variant}}
   @size={{this.size}}
   @isBorderVisible={{this.isBorderVisible}}
+  @iconBefore={{this.iconBefore}}
+  @iconAfter={{this.iconAfter}}
   @isDisabled={{this.isDisabled}}
 >
   Lien route Ember (LinkTo)
@@ -112,3 +147,12 @@ export const emberLink = (args) => {
     context: args,
   };
 };
+
+export const emberLink = Template.bind({});
+
+export const icons = Template.bind({});
+icons.args = {
+  ...emberLink.args,
+  iconBefore: 'add',
+  iconAfter: 'minus',
+};