Guide d'utilisation

Bien utiliser la documentation du Design System de l'Autonomie

🔍 Rechercher un composant ou une information

🌐 Bouton de recherche

Utilisez le bouton de recherche en haut à droite de la page pour trouver rapidement un composant ou une notion précise (ex : “Input“, “Interrupteur”, “dsa-select“, “maxOptionsVisible”…).

📋 Menu latéral

Sur la gauche de l’écran vous pouvez trouver la liste des composants et groupes de composants sous la forme {{Nom en anglais}} - {{Nom en français}}, triés par ordre alphabétique.

➡️ Astuce : Les composants suivent le même ordre que dans notre Storybook pour une navigation plus intuitive.

📕 Liste des principaux composants

Vous pouvez retrouver la liste des principaux composant en suivant ce lien.

 

✨ Structure de la documentation

Pour chaque composant, notre documentation est organisée en plusieurs sections pour vous aider à trouver rapidement l'information dont vous avez besoin :

  • 💡 Usage : Quand utiliser le composant, exemple d’usages corrects et incorrects.
  • 🎨 Style : Anatomie du composant, et différentes variantes.
  • 🌍 Web : Utilisation du custom element
    • Exemple de code prêt à l’emploi
    • API : attributs/propriétés, méthodes, slots, événements (plus d’information sur l’utilisation des web-components ici)
  • 🎯 Accessibilité : Pour comprendre comment l’utilisation de ce composant peut impacter l’accessibilité de vos utilisateurs
    • Rôle et attributs du composants ayant un impact sur l’accessibilité
    • Navigation au clavier, gestion du focus
    • Bonnes pratiques, et pièges à éviter
    • Liens vers des ressources externes
  • 📸 Exemples : Différents états et cas d’utilisation du composant, tirés de notre Storybook.