Test Technique Alternance - Composant Button Vue 3

Bonjour ! Voici mon rendu pour le test technique d'intégration Front-end. L'objectif était de créer un composant Button réutilisable en Vue.js, en suivant les maquettes Figma fournies, et sans utiliser de framework CSS comme Bootstrap ou Tailwind.

Pour lancer le projet localement

1. Cloner le dépôt et se rendre dans le dossier :

git clone <URL_DU_REPO>
cd <NOM_DU_DOSSIER>

2. Installer les dépendances :

npm install

3. Lancer le serveur local :

npm run dev

Comment j'ai abordé l'exercice

J'ai choisi d'utiliser Vue 3 avec la Composition API (<script setup>). J'ai découpé mon travail en plusieurs étapes logiques pour construire le composant brique par brique :

1. Nettoyage et base de travail : J'ai initialisé le projet avec Vite et fait un grand nettoyage des composants par défaut pour partir d'une base saine avec un Reset CSS.
2. Mise en place du Design System : J'ai extrait les couleurs, la typographie et les espacements de la maquette Figma pour créer des variables CSS globales (styles.css). Cela permet de n'avoir aucun code couleur "en dur" dans le composant.
3. Création du composant de base (Button.vue) : J'ai mis en place la structure HTML (avec la balise <slot>) et les props principales (variant, size, badge) pour que le bouton puisse changer d'apparence facilement.
4. Stylisation en CSS pur : J'ai codé les différentes variantes (primary, danger, outline) en utilisant Flexbox pour garantir un bon alignement (notamment pour l'approche Mobile First).
5. Intégration des icônes : J'ai installé la librairie Phosphor Icons demandée. J'ai utilisé des "slots nommés" dans mon composant pour pouvoir injecter des icônes à gauche ou à droite du texte de manière très flexible.
6. Assemblage final : J'ai recréé la disposition exacte de la maquette dans App.vue, en gérant notamment le cas particulier du "Button Group" pour le bouton Supprimer.

Les petits "plus" (Cas d'usage anticipés & Accessibilité)

Pour rendre le composant vraiment robuste pour un usage en entreprise, j'ai ajouté quelques détails supplémentaires :

• L'état "Loading" : Une prop loading qui remplace l'icône par un spinner animé et désactive le clic.
• Accessibilité clavier : Gestion du focus (:focus-visible) avec l'anneau bleu/vert prévu dans le design system.
• Attributs HTML : Ajout du type="button" par défaut pour éviter les bugs de soumission de formulaire, et des aria-label sur les boutons sans texte (comme la corbeille).

Merci pour votre temps, hate de passser l'entretien à vos côtés !