.playground/pages/composant/buttonIcon.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Simple</h2>
+      <div class="flex gap-4">
+        <MalioButtonIcon
+          icon="mdi:arrow-left"
+          aria-label="Retour"
+        />
+        <MalioButtonIcon
+          icon="mdi:pencil-outline"
+          aria-label="Modifier"
+        />
+        <MalioButtonIcon
+          icon="mdi:close"
+          aria-label="Fermer"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Icônes variées</h2>
+      <div class="flex gap-4">
+        <MalioButtonIcon
+          icon="mdi:download"
+          aria-label="Télécharger"
+        />
+        <MalioButtonIcon
+          icon="mdi:bell-outline"
+          aria-label="Notifications"
+        />
+        <MalioButtonIcon
+          icon="mdi:cog-outline"
+          aria-label="Paramètres"
+        />
+        <MalioButtonIcon
+          icon="mdi:view-grid-outline"
+          aria-label="Grille"
+        />
+        <MalioButtonIcon
+          icon="mdi:format-list-bulleted"
+          aria-label="Liste"
+        />
+        <MalioButtonIcon
+          icon="mdi:folder-outline"
+          aria-label="Dossier"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+      <div class="flex gap-4">
+        <MalioButtonIcon
+          icon="mdi:arrow-left"
+          aria-label="Retour"
+          disabled
+        />
+        <MalioButtonIcon
+          icon="mdi:pencil-outline"
+          aria-label="Modifier"
+          disabled
+        />
+        <MalioButtonIcon
+          icon="mdi:close"
+          aria-label="Fermer"
+          disabled
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Taille personnalisée</h2>
+      <div class="flex items-center gap-4">
+        <MalioButtonIcon
+          icon="mdi:arrow-left"
+          aria-label="Petit"
+          :icon-size="16"
+        />
+        <MalioButtonIcon
+          icon="mdi:arrow-left"
+          aria-label="Normal"
+          :icon-size="24"
+        />
+        <MalioButtonIcon
+          icon="mdi:arrow-left"
+          aria-label="Grand"
+          :icon-size="32"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Ghost</h2>
+      <div class="flex gap-4">
+        <MalioButtonIcon
+          icon="mdi:arrow-left"
+          aria-label="Retour"
+          variant="ghost"
+        />
+        <MalioButtonIcon
+          icon="mdi:pencil-outline"
+          aria-label="Modifier"
+          variant="ghost"
+        />
+        <MalioButtonIcon
+          icon="mdi:cancel-bold"
+          aria-label="Fermer"
+          variant="ghost"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Ghost désactivé</h2>
+      <div class="flex gap-4">
+        <MalioButtonIcon
+          icon="mdi:arrow-left"
+          aria-label="Retour"
+          variant="ghost"
+          disabled
+        />
+        <MalioButtonIcon
+          icon="mdi:pencil-outline"
+          aria-label="Modifier"
+          variant="ghost"
+          disabled
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec événement click</h2>
+      <div class="flex items-center gap-4">
+        <MalioButtonIcon
+          icon="mdi:plus"
+          aria-label="Incrémenter"
+          @click="counter++"
+        />
+        <span class="text-lg font-semibold">{{ counter }}</span>
+        <MalioButtonIcon
+          icon="mdi:minus"
+          aria-label="Décrémenter"
+          @click="counter--"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const counter = ref(0)
+</script>

CHANGELOG.md

@@ -17,6 +17,7 @@ Liste des évolutions de la librairie Malio layer UI
 * Création d'un composant textarea
 * [#MUI-8] Création d'un composant mot de passe
 * [#MUI-9] Création d'un composant upload
+* [#MUI-14] Création d'un composant bouton icône
 
 ### Changed
 

app/assets/css/malio.css

@@ -15,5 +15,10 @@
 
     --m-error: 155 17 30;         /* rouge pour les erreurs */
     --m-success: 15 149 70;       /* vert pour les succès  */
+
+    --m-btn-default: 34 39 131;   /* #222783 - bouton par défaut */
+    --m-btn-hover: 18 28 219;     /* #121CDB - bouton hover */
+    --m-btn-active: 33 37 103;    /* #212567 - bouton active */
+    --m-btn-disabled: 204 204 223; /* #CCCCDF - bouton désactivé */
   }
 }

app/components/malio/ButtonIcon.test.ts

@@ -0,0 +1,151 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import {Icon as IconifyIcon} from '@iconify/vue'
+import ButtonIcon from './ButtonIcon.vue'
+
+type ButtonIconProps = {
+  id?: string
+  icon: string
+  ariaLabel: string
+  disabled?: boolean
+  buttonClass?: string
+  iconSize?: string | number
+  variant?: 'filled' | 'ghost'
+}
+
+const ButtonIconForTest = ButtonIcon as DefineComponent<ButtonIconProps>
+
+const mountComponent = (props: ButtonIconProps = {icon: 'mdi:arrow-left', ariaLabel: 'Retour'}) =>
+  mount(ButtonIconForTest, {
+    props,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
+  })
+
+describe('MalioButtonIcon', () => {
+  it('renders a button with the icon', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.find('button').exists()).toBe(true)
+    expect(wrapper.find('[data-test="icon"]').exists()).toBe(true)
+  })
+
+  it('uses provided id on button', () => {
+    const wrapper = mountComponent({id: 'custom-id', icon: 'mdi:arrow-left', ariaLabel: 'Retour'})
+
+    expect(wrapper.get('button').attributes('id')).toBe('custom-id')
+  })
+
+  it('generates an id when missing', () => {
+    const wrapper = mountComponent()
+
+    const buttonId = wrapper.get('button').attributes('id')
+    expect(buttonId?.startsWith('malio-button-icon-')).toBe(true)
+  })
+
+  it('sets aria-label on button', () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour'})
+
+    expect(wrapper.get('button').attributes('aria-label')).toBe('Retour')
+  })
+
+  it('sets type="button" on the button', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').attributes('type')).toBe('button')
+  })
+
+  it('passes icon name to icon component', () => {
+    const wrapper = mount(ButtonIconForTest, {
+      props: {icon: 'mdi:pencil-outline', ariaLabel: 'Modifier'},
+    })
+
+    const iconComponent = wrapper.findComponent(IconifyIcon)
+    expect(iconComponent.props('icon')).toBe('mdi:pencil-outline')
+  })
+
+  it('passes icon size to icon component', () => {
+    const wrapper = mount(ButtonIconForTest, {
+      props: {icon: 'mdi:arrow-left', ariaLabel: 'Retour', iconSize: 32},
+    })
+
+    const iconComponent = wrapper.findComponent(IconifyIcon)
+    expect(iconComponent.props('width')).toBe(32)
+    expect(iconComponent.props('height')).toBe(32)
+  })
+
+  it('emits click event when clicked', async () => {
+    const wrapper = mountComponent()
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.emitted('click')).toHaveLength(1)
+  })
+
+  it('does not emit click when disabled', async () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', disabled: true})
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.emitted('click')).toBeUndefined()
+  })
+
+  it('sets disabled attribute when disabled', () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', disabled: true})
+
+    expect(wrapper.get('button').attributes('disabled')).toBeDefined()
+  })
+
+  it('applies disabled styles when disabled', () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', disabled: true})
+
+    expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
+    expect(wrapper.get('button').classes()).toContain('bg-m-btn-disabled')
+  })
+
+  it('applies cursor-pointer when not disabled', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('cursor-pointer')
+  })
+
+  it('applies white text color for icon visibility', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('text-white')
+  })
+
+  it('applies default background color', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-btn-default')
+  })
+
+  it('applies buttonClass', () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', buttonClass: 'rounded-full'})
+
+    expect(wrapper.get('button').classes()).toContain('rounded-full')
+  })
+
+  it('applies ghost variant with no background and colored icon', () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', variant: 'ghost'})
+
+    expect(wrapper.get('button').classes()).toContain('text-m-btn-default')
+    expect(wrapper.get('button').classes()).not.toContain('bg-m-btn-default')
+    expect(wrapper.get('button').classes()).not.toContain('text-white')
+  })
+
+  it('applies ghost disabled styles with no background', () => {
+    const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', variant: 'ghost', disabled: true})
+
+    expect(wrapper.get('button').classes()).toContain('text-m-btn-disabled')
+    expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
+    expect(wrapper.get('button').classes()).not.toContain('bg-m-btn-disabled')
+  })
+})

app/components/malio/ButtonIcon.vue

@@ -0,0 +1,76 @@
+<template>
+  <button
+    :id="buttonId"
+    :class="mergedButtonClass"
+    :disabled="disabled"
+    :aria-label="ariaLabel"
+    type="button"
+    v-bind="attrs"
+    @click="onClick"
+  >
+    <IconifyIcon
+      :icon="icon"
+      :width="iconSize"
+      :height="iconSize"
+      data-test="icon"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+import {computed, useAttrs, useId} from 'vue'
+import {Icon as IconifyIcon} from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
+
+defineOptions({name: 'MalioButtonIcon', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    icon: string
+    ariaLabel: string
+    disabled?: boolean
+    buttonClass?: string
+    iconSize?: string | number
+    variant?: 'filled' | 'ghost'
+  }>(),
+  {
+    id: '',
+    disabled: false,
+    buttonClass: '',
+    iconSize: 24,
+    variant: 'filled',
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+
+const buttonId = computed(() => props.id || `malio-button-icon-${generatedId}`)
+
+const isFilled = computed(() => props.variant === 'filled')
+
+const mergedButtonClass = computed(() =>
+  twMerge(
+    'inline-flex items-center justify-center rounded-md p-1 transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50',
+    isFilled.value
+      ? props.disabled
+        ? 'bg-m-btn-disabled text-white cursor-not-allowed'
+        : 'bg-m-btn-default hover:bg-m-btn-hover active:bg-m-btn-active text-white cursor-pointer'
+      : props.disabled
+        ? 'text-m-btn-disabled cursor-not-allowed'
+        : 'text-m-btn-default hover:text-m-btn-hover active:text-m-btn-active cursor-pointer',
+    props.buttonClass,
+  ),
+)
+
+const emit = defineEmits<{
+  (event: 'click', e: MouseEvent): void
+}>()
+
+function onClick(e: MouseEvent) {
+  if (!props.disabled) {
+    emit('click', e)
+  }
+}
+</script>

app/story/buttonIcon.story.vue

@@ -0,0 +1,242 @@
+<template>
+  <Story title="Button/Icon">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <div class="flex gap-4">
+          <MalioButtonIcon
+            icon="mdi:arrow-left"
+            aria-label="Retour"
+          />
+          <MalioButtonIcon
+            icon="mdi:pencil-outline"
+            aria-label="Modifier"
+          />
+          <MalioButtonIcon
+            icon="mdi:close"
+            aria-label="Fermer"
+          />
+          <MalioButtonIcon
+            icon="mdi:download"
+            aria-label="Télécharger"
+          />
+          <MalioButtonIcon
+            icon="mdi:bell-outline"
+            aria-label="Notifications"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Icônes variées</h2>
+        <div class="flex gap-4">
+          <MalioButtonIcon
+            icon="mdi:cog-outline"
+            aria-label="Paramètres"
+          />
+          <MalioButtonIcon
+            icon="mdi:format-list-bulleted"
+            aria-label="Liste"
+          />
+          <MalioButtonIcon
+            icon="mdi:view-grid-outline"
+            aria-label="Grille"
+          />
+          <MalioButtonIcon
+            icon="mdi:folder-outline"
+            aria-label="Dossier"
+          />
+          <MalioButtonIcon
+            icon="mdi:delete-outline"
+            aria-label="Supprimer"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <div class="flex gap-4">
+          <MalioButtonIcon
+            icon="mdi:arrow-left"
+            aria-label="Retour"
+            disabled
+          />
+          <MalioButtonIcon
+            icon="mdi:pencil-outline"
+            aria-label="Modifier"
+            disabled
+          />
+          <MalioButtonIcon
+            icon="mdi:close"
+            aria-label="Fermer"
+            disabled
+          />
+          <MalioButtonIcon
+            icon="mdi:download"
+            aria-label="Télécharger"
+            disabled
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Ghost</h2>
+        <div class="flex gap-4">
+          <MalioButtonIcon
+            icon="mdi:arrow-left"
+            aria-label="Retour"
+            variant="ghost"
+          />
+          <MalioButtonIcon
+            icon="mdi:pencil-outline"
+            aria-label="Modifier"
+            variant="ghost"
+          />
+          <MalioButtonIcon
+            icon="mdi:close"
+            aria-label="Fermer"
+            variant="ghost"
+          />
+          <MalioButtonIcon
+            icon="mdi:download"
+            aria-label="Télécharger"
+            variant="ghost"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Ghost désactivé</h2>
+        <div class="flex gap-4">
+          <MalioButtonIcon
+            icon="mdi:arrow-left"
+            aria-label="Retour"
+            variant="ghost"
+            disabled
+          />
+          <MalioButtonIcon
+            icon="mdi:pencil-outline"
+            aria-label="Modifier"
+            variant="ghost"
+            disabled
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Taille personnalisée</h2>
+        <div class="flex items-center gap-4">
+          <MalioButtonIcon
+            icon="mdi:arrow-left"
+            aria-label="Petit"
+            :icon-size="16"
+          />
+          <MalioButtonIcon
+            icon="mdi:arrow-left"
+            aria-label="Normal"
+            :icon-size="24"
+          />
+          <MalioButtonIcon
+            icon="mdi:arrow-left"
+            aria-label="Grand"
+            :icon-size="32"
+          />
+        </div>
+      </div>
+    </div>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioButtonIcon
+
+Bouton contenant uniquement une icône, sans texte. Utilisé pour des actions
+rapides et compactes (retour, modifier, supprimer, etc.).
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### id
+
+-   Type: string
+-   Description: Identifiant HTML du bouton.
+-   Comportement: Si non fourni, un id unique est généré automatiquement.
+
+### icon
+
+-   Type: string
+-   **Requis**
+-   Description: Nom de l'icône Iconify (ex: `mdi:arrow-left`).
+
+### ariaLabel
+
+-   Type: string
+-   **Requis**
+-   Description: Label d'accessibilité du bouton. Obligatoire car le bouton
+    n'a pas de texte visible.
+
+### iconSize
+
+-   Type: string | number
+-   Défaut: 24
+-   Description: Taille de l'icône en pixels.
+
+### buttonClass
+
+-   Type: string
+-   Description: Classes CSS additionnelles appliquées au bouton.
+
+### disabled
+
+-   Type: boolean
+-   Description: Désactive le bouton.
+
+### variant
+
+-   Type: `'filled' | 'ghost'`
+-   Défaut: `filled`
+-   Description: Variante visuelle du bouton.
+-   `filled` : fond coloré, icône blanche.
+-   `ghost` : sans fond, icône colorée.
+
+------------------------------------------------------------------------
+
+## Comportement visuel
+
+### Variante `filled` (défaut)
+
+-   **Default** : fond `#222783`, icône blanche
+-   **Hover** : fond `#121CDB`
+-   **Active** : fond `#212567`
+-   **Disabled** : fond `#CCCCDF`
+
+### Variante `ghost`
+
+-   **Default** : icône `#222783`, sans fond
+-   **Hover** : icône `#121CDB`
+-   **Active** : icône `#212567`
+-   **Disabled** : icône `#CCCCDF`
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+-   `aria-label` est requis pour décrire l'action du bouton.
+-   `type="button"` pour éviter les soumissions de formulaire accidentelles.
+
+------------------------------------------------------------------------
+
+## Events
+
+### click
+
+-   Émis au clic sur le bouton.
+-   Non émis si le bouton est `disabled`.
+-   Retourne l'événement `MouseEvent` natif.
+
+</docs>
+
+<script setup lang="ts">
+import MalioButtonIcon from '../components/malio/ButtonIcon.vue'
+</script>

tailwind.config.ts

@@ -23,6 +23,10 @@ export default {
           bg: 'rgb(var(--m-bg) / <alpha-value>)',
           error: 'rgb(var(--m-error) / <alpha-value>)',
           success: 'rgb(var(--m-success) / <alpha-value>)',
+          'btn-default': 'rgb(var(--m-btn-default) / <alpha-value>)',
+          'btn-hover': 'rgb(var(--m-btn-hover) / <alpha-value>)',
+          'btn-active': 'rgb(var(--m-btn-active) / <alpha-value>)',
+          'btn-disabled': 'rgb(var(--m-btn-disabled) / <alpha-value>)',
         },
       },
       fontFamily: {