Refonte au DSFR du header et du footer

[Olivier-Marcellin]

Contexte : pour les besoins de la refonte des pages au DSFR découper les pages en éléments est indispensable pour pouvoir débuter ce travail ambitieux

Le header comporte plusieurs variants selon les utilisateurs :

• avec ou sans champ de recherche • avec ou sans menu horizontal • mode clair et sombre

Proposition : concevoir les maquettes UI avec l'ensemble des cas d'usages et comportements attribués

[Olivier-Marcellin]

Évolution graphique du header (composant En tête-desktop) depuis la version 1.7 à intégrer à nouveau :

• filtre ombre plus léger que auparavant
• filet sur le bouton se connecter et fond de couleur lorsque cliqué
• un composant est en cours de conception (prochaine release dsfr V1.8) : bouton (maquette à jour suivant la conception en cours côté dsfr) et menu se connecter (non maquette en attente du composant, dans l'attente j'ai pris le composant menu déroulant)
• sélecteur de langue (intégrer avec le composant sélecteur de langue) à noter que il faudrait selon DSFR 3 langues mini pour que le comportement se fasse correctement car affiche une liste avec une seule langue)

Évolution graphique de la barre de navigation (composant Barre de navigation)

• depuis la v1.7 le filet entre la barre et le header disparaît
• pas d'ombre entre le header et la barre (au même plan) et pas d'ombre sous la barre et le corps de page note : affichage sans les ombres prévaut également pour le bandeau d'information
• je propose également (validé par équipe dsfr) que l'affichage de la barre de navigation soit sticky (lorsqu'on aura refondu les pages au dsfr)

Évolution des contenus du footer générique (affiché de la HP jusqu'à la page se connecter/création de compte) :

• changer le bloc marque avant = Premier ministre désormais = Gouvernement
• changer le logo d'accompagnement avant = Betagouv désormais = Direction interministérielle du numérique note : pas de filet bleu entre le footer et les liens au dessus sur la page d'accueil

Évolution graphique du footer spécifique (sur le parcours usager après s'être connecté/enregistré) : Important : ce footer n'est pas un composant dsfr (car on ne peut pas customiser un composant dsfr), c'est une maquette 'maison'

• j'ai modifié la force de corps (plus gros pour l'accessibilité) (corps 14 titre bold textes regular)
• wording du téléphone cohérent avec les guide ligne du dsfr = (+33) 1 22 33 44 55
• lien de téléchargement du formulaire pdf : j'ai repris le composant liens de téléchargement

Maquettes Figma à jour avec l'ensemble des ces ajustements prêtes pour intégration En haut du fichier le header et déclinaisons selon l'utilisateur En bas du fichier les deux footer https://www.figma.com/file/PjOCFA8nGSUihPmC54H1KR/Refonte-au-DSFR-du-header-et-du-footer?node-id=1%3A2