GSBanner
Bandeau d'annonce pleine largeur : message système, incident, quota ou CTA qui concerne toute l'application. Contenu centré (icône + titre + actions), bouton de fermeture optionnel. Quatre variant (subtle, soft, outline, solid) avec un texte foncé lisible par défaut — pas de blanc sur fond clair. Avec un id, la fermeture est mémorisée (localStorage) et le bandeau ne réapparaît plus. Pour le placer au-dessus du header d'une page, utilisez le slot #banner de GSSpaceContent.
1 — Défaut
Sans variant, le bandeau est en subtle : fond teinté léger, liseré discret et texte foncé lisible.
2 — Variantes
Quatre styles. Les variantes douces (subtle, soft, outline) utilisent un texte foncé sur fond clair. En solid, le texte reste foncé sur les fonds clairs (warning, success) pour préserver le contraste — jamais de blanc illisible.
3 — Couleurs
Les 7 couleurs sémantiques en variante par défaut (subtle) : icône colorée comme accent, titre foncé lisible quelle que soit la teinte.
4 — Avec action (CTA)
Le tableau actions rend des boutons à droite du titre (props GSButton).
5 — Fermable
close ajoute la croix. Sans id, la fermeture n'est valable que pour la session courante (le bandeau réapparaît au rechargement).
6 — Fermeture persistante (id)
Avec un id, la fermeture est mémorisée en localStorage : une fois fermé, le bandeau ne réapparaît plus (même après rechargement). À réserver aux annonces ponctuelles qu'on ne veut pas réafficher. Pour réinitialiser : vider la clé banner-promo-ia.
7 — Bandeau cliquable (lien)
to rend tout le bandeau cliquable. À utiliser sans action concurrente pour éviter l'ambiguïté de la cible.
8 — En contexte (slot #banner)
Placé dans le slot #banner de GSSpaceContent, le bandeau s'affiche pleine largeur de la carte (full-bleed), au-dessus du header. Faites défiler : le bandeau et le header restent en tête.
Avis
Avis #1
Contenu qui défile sous le bandeau et le header restés en tête.
Avis #2
Contenu qui défile sous le bandeau et le header restés en tête.
Avis #3
Contenu qui défile sous le bandeau et le header restés en tête.
Avis #4
Contenu qui défile sous le bandeau et le header restés en tête.
Avis #5
Contenu qui défile sous le bandeau et le header restés en tête.
Avis #6
Contenu qui défile sous le bandeau et le header restés en tête.
API — GSBanner
titlestring? — texte du bandeauiconstring? — icône à gauche du titrecolorSemanticColor? — couleur du bandeau (défaut primary)variant'subtle' | 'soft' | 'outline' | 'solid'? — style du bandeau (défaut subtle) ; texte foncé lisible, contraste WCAG AA garantiactionsButtonProps[]? — boutons (CTA) à droite du titrecloseboolean | object? — affiche la croix de fermetureidstring? — mémorise la fermeture en localStorage (ne réapparaît plus)tostring? — rend tout le bandeau cliquable (lien)closeIconstring? — icône personnalisée pour la croix