Header

[valentinbecquet]

Évolution HeaderBar avec intégration du SubHeader (transformation du nom si possible HeaderBar en Header)

Besoin
Proposer un header graphiquement proche du header d'ameli.fr mais adapté à la réalité d'un Design System.
Lien vers le header : [(https://www.ameli.fr/assure)]

Ce composant est à concevoir sous vue3 en accord avec v3.vuetify
La navigation doit pouvoir être adaptée aux besoins d'un produit.
Par exemple, en dessous de x pages favoriser la navbar tandis qu'au-delà utiliser le menu burger. x étant à définir par une règle d'usage à documenter par les designers.
Il doit être optimisé pour l'éco-conception et inclure le même niveau de permissivité que celui du Bridge (slots, personnalisation des labels, etc.).

Le découpage du composant et de ses sous-composants peut être différent entre la librairie développée (Synapse) et l'UI kit des designers selon les besoins du logiciel FIGMA. Néanmoins, en cas de différence, une documentation type mode d'emploi sur FIGMA doit être réalisé.

Le composant Header contient les composants (dépendances) suivants

• HeaderBar
• HeaderLoading
• SubHeader
• HeaderNavigationBar
• HeaderNavigationDrawer
• HeaderMenuBtn
  La complétude de cette issue implique la complétude de ces composants.

Critères d'acceptances pour la revue de la conception

• Le composant intègre sur FIGMA, en cas d'utilisation de composant vuetify, les propriétés vuetify utiles au design
• Le composant est maquetté sur FIGMA (tous les états + devices mobile, tablet et desktop)
• La documentation sur FIGMA type mode d'emploi est réalisée (optionnelle)
• La documentation des usages est réalisée et disponible pour les développeurs

Critères d'acceptances pour la revue du développement (destinée à la publication)

• Le composant est conforme aux maquettes (tokens)
• Le composant est fonctionnel
• Le composant est responsive (mobile, tablet et desktop)
• Le composant répond aux critères d'accessibilité (test Tanaguru + A11y linter)
• Le composant passe les tests du DS
• La documentation API et exemples est réalisée