feat: Ajout de composant (#23)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [x] Pas de régression
- [x] TU/TI/TF rédigée
- [x] TU/TI/TF OK
- [x] CHANGELOG modifié

Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr>
Reviewed-on: #23
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

app/components/malio/button/Button.test.ts

@@ -0,0 +1,218 @@
+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 Button from './Button.vue'
+
+type ButtonProps = {
+  id?: string
+  label?: string
+  disabled?: boolean
+  buttonClass?: string
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
+  iconName?: string
+  iconPosition?: 'left' | 'right'
+  iconSize?: string | number
+}
+
+const ButtonForTest = Button as DefineComponent<ButtonProps>
+
+const mountComponent = (props: ButtonProps = {}, slots?: Record<string, string>) =>
+  mount(ButtonForTest, {
+    props,
+    slots,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
+  })
+
+describe('MalioButton', () => {
+  it('renders a button with label', () => {
+    const wrapper = mountComponent({ label: 'Valider' })
+
+    expect(wrapper.find('button').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Valider')
+  })
+
+  it('renders slot content over label prop', () => {
+    const wrapper = mountComponent({ label: 'Prop' }, { default: 'Slot content' })
+
+    expect(wrapper.text()).toContain('Slot content')
+    expect(wrapper.text()).not.toContain('Prop')
+  })
+
+  it('uses provided id on button', () => {
+    const wrapper = mountComponent({ id: 'custom-id' })
+
+    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-')).toBe(true)
+  })
+
+  it('sets type="button" on the button', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').attributes('type')).toBe('button')
+  })
+
+  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({ disabled: true })
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.emitted('click')).toBeUndefined()
+  })
+
+  it('sets disabled attribute when disabled', () => {
+    const wrapper = mountComponent({ disabled: true })
+
+    expect(wrapper.get('button').attributes('disabled')).toBeDefined()
+  })
+
+  // --- Variant: Primary (default) ---
+
+  it('applies primary variant by default', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-btn-primary')
+    expect(wrapper.get('button').classes()).toContain('text-white')
+    expect(wrapper.get('button').classes()).toContain('cursor-pointer')
+  })
+
+  it('applies primary disabled styles', () => {
+    const wrapper = mountComponent({ disabled: true })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('text-white')
+    expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
+  })
+
+  // --- Variant: Secondary ---
+
+  it('applies secondary variant', () => {
+    const wrapper = mountComponent({ variant: 'secondary' })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-btn-secondary')
+    expect(wrapper.get('button').classes()).toContain('text-white')
+  })
+
+  it('applies secondary disabled styles', () => {
+    const wrapper = mountComponent({ variant: 'secondary', disabled: true })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
+  })
+
+  // --- Variant: Tertiary ---
+
+  it('applies tertiary variant with border and no background', () => {
+    const wrapper = mountComponent({ variant: 'tertiary' })
+
+    expect(wrapper.get('button').classes()).toContain('border')
+    expect(wrapper.get('button').classes()).toContain('border-m-btn-primary')
+    expect(wrapper.get('button').classes()).toContain('text-m-btn-primary')
+    expect(wrapper.get('button').classes()).toContain('bg-transparent')
+    expect(wrapper.get('button').classes()).not.toContain('text-white')
+  })
+
+  it('applies tertiary disabled styles with border', () => {
+    const wrapper = mountComponent({ variant: 'tertiary', disabled: true })
+
+    expect(wrapper.get('button').classes()).toContain('border')
+    expect(wrapper.get('button').classes()).toContain('border-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('text-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('bg-transparent')
+  })
+
+  // --- Variant: Danger ---
+
+  it('applies danger variant', () => {
+    const wrapper = mountComponent({ variant: 'danger' })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-btn-danger')
+    expect(wrapper.get('button').classes()).toContain('text-white')
+  })
+
+  it('applies danger disabled styles', () => {
+    const wrapper = mountComponent({ variant: 'danger', disabled: true })
+
+    expect(wrapper.get('button').classes()).toContain('bg-m-disabled')
+    expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
+  })
+
+  // --- Sizing ---
+
+  it('applies correct dimensions', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('w-[240px]')
+    expect(wrapper.get('button').classes()).toContain('h-[40px]')
+  })
+
+  it('applies font styles', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.get('button').classes()).toContain('text-base')
+    expect(wrapper.get('button').classes()).toContain('font-bold')
+  })
+
+  // --- buttonClass override ---
+
+  it('applies buttonClass', () => {
+    const wrapper = mountComponent({ buttonClass: 'w-full rounded-full' })
+
+    expect(wrapper.get('button').classes()).toContain('w-full')
+    expect(wrapper.get('button').classes()).toContain('rounded-full')
+  })
+
+  // --- Icon ---
+
+  it('renders icon on the right by default', () => {
+    const wrapper = mountComponent({ iconName: 'mdi:arrow-right' })
+
+    expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(false)
+  })
+
+  it('renders icon on the left when specified', () => {
+    const wrapper = mountComponent({ iconName: 'mdi:arrow-left', iconPosition: 'left' })
+
+    expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(false)
+  })
+
+  it('does not render icon when iconName is empty', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(false)
+    expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(false)
+  })
+
+  it('passes icon name and size to icon component', () => {
+    const wrapper = mount(ButtonForTest, {
+      props: { iconName: 'mdi:check', iconSize: 18 },
+    })
+
+    const iconComponent = wrapper.findComponent(IconifyIcon)
+    expect(iconComponent.props('icon')).toBe('mdi:check')
+    expect(iconComponent.props('width')).toBe(18)
+    expect(iconComponent.props('height')).toBe(18)
+  })
+})

app/components/malio/button/Button.vue

@@ -0,0 +1,102 @@
+<template>
+  <button
+    :id="buttonId"
+    :class="mergedButtonClass"
+    :disabled="disabled"
+    type="button"
+    v-bind="attrs"
+    @click="onClick"
+  >
+    <IconifyIcon
+      v-if="iconName && iconPosition === 'left'"
+      :icon="iconName"
+      :width="iconSize"
+      :height="iconSize"
+      data-test="icon-left"
+    />
+
+    <span><slot>{{ label }}</slot></span>
+
+    <IconifyIcon
+      v-if="iconName && iconPosition === 'right'"
+      :icon="iconName"
+      :width="iconSize"
+      :height="iconSize"
+      data-test="icon-right"
+    />
+  </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: 'MalioButton', inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    disabled?: boolean
+    buttonClass?: string
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
+    iconName?: string
+    iconPosition?: 'left' | 'right'
+    iconSize?: string | number
+  }>(),
+  {
+    id: '',
+    label: '',
+    disabled: false,
+    buttonClass: '',
+    variant: 'primary',
+    iconName: '',
+    iconPosition: 'right',
+    iconSize: 16,
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+
+const buttonId = computed(() => props.id || `malio-button-${generatedId}`)
+
+const variantClasses = computed(() => {
+  if (props.disabled) {
+    if (props.variant === 'tertiary') {
+      return 'border border-m-disabled text-m-disabled bg-transparent cursor-not-allowed'
+    }
+    return 'bg-m-disabled text-white cursor-not-allowed'
+  }
+
+  switch (props.variant) {
+    case 'secondary':
+      return 'bg-m-btn-secondary hover:bg-m-btn-secondary-hover active:bg-m-btn-secondary-active text-white cursor-pointer'
+    case 'tertiary':
+      return 'border border-m-btn-primary bg-transparent text-m-btn-primary hover:border-m-btn-primary-hover hover:text-m-btn-primary-hover active:border-m-btn-primary-active active:text-m-btn-primary-active cursor-pointer'
+    case 'danger':
+      return 'bg-m-btn-danger hover:bg-m-btn-danger-hover active:bg-m-btn-danger-active text-white cursor-pointer'
+    default:
+      return 'bg-m-btn-primary hover:bg-m-btn-primary-hover active:bg-m-btn-primary-active text-white cursor-pointer'
+  }
+})
+
+const mergedButtonClass = computed(() =>
+  twMerge(
+    'inline-flex w-[240px] h-[40px] items-center justify-center gap-1 p-[10px] rounded-md text-base font-bold leading-[150%] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50',
+    variantClasses.value,
+    props.buttonClass,
+  ),
+)
+
+const emit = defineEmits<{
+  (event: 'click', e: MouseEvent): void
+}>()
+
+function onClick(e: MouseEvent) {
+  if (!props.disabled) {
+    emit('click', e)
+  }
+}
+</script>

app/components/malio/button/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-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-primary')
+  })
+
+  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-primary')
+    expect(wrapper.get('button').classes()).not.toContain('bg-m-btn-primary')
+    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-disabled')
+    expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
+    expect(wrapper.get('button').classes()).not.toContain('bg-m-disabled')
+  })
+})

app/components/malio/button/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-disabled text-white cursor-not-allowed'
+        : 'bg-m-btn-primary hover:bg-m-btn-primary-hover active:bg-m-btn-primary-active text-white cursor-pointer'
+      : props.disabled
+        ? 'text-m-disabled cursor-not-allowed'
+        : 'text-m-btn-primary hover:text-m-btn-primary-hover active:text-m-btn-primary-active cursor-pointer',
+    props.buttonClass,
+  ),
+)
+
+const emit = defineEmits<{
+  (event: 'click', e: MouseEvent): void
+}>()
+
+function onClick(e: MouseEvent) {
+  if (!props.disabled) {
+    emit('click', e)
+  }
+}
+</script>