✨ pix-ui: use content with pix icons component on PixButtonLink

1024pix · Jan 22, 2025 · 388290f · 388290f
1 parent 68e84ad
commit 388290f
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 9 deletions.
diff --git 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}}
diff --git 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
@@ -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
@@ -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,19 +129,30 @@ export const htmlLink = {
   }),
 };
 
-export const emberLink = (args) => {
+const Template = (args) => {
   return {
     template: hbs`<PixButtonLink
   @route=''
   @model=''
   @query={{this.query}}
-  @variant={{this.variant}}
+  @variant='primary'
   @size={{this.size}}
   @isBorderVisible={{this.isBorderVisible}}
+  @iconBefore={{this.iconBefore}}
+  @iconAfter={{this.iconAfter}}
   @isDisabled={{this.isDisabled}}
 >
   Lien route Ember (LinkTo)
 </PixButtonLink>`,
     context: args,
   };
 };
+
+export const emberLink = Template.bind({});
+
+export const icons = Template.bind({});
+icons.args = {
+  ...emberLink.args,
+  iconBefore: 'add',
+  iconAfter: 'minus',
+};