feat(canopee): MessageBar organism — Apollo & LF (#897)

[Debaerdm]

MessageBar — Apollo (Prospect) & LF (Client)

Ajoute l'organisme MessageBar pour Apollo (Theme=Prospect) et LF (Theme=Client), conforme à Figma node 18733:51839.

Composition

Le composant a son propre layout maison (header + body + action) géré en CSS Grid avec des grid-template-areas qui changent entre mobile et desktop. Aucun atome du design system n'est surchargé — le Icon (atome) est utilisé tel quel, et le bouton est passé via la prop button (slot libre que le consommateur remplit avec son Button DS).

À noter : sur Figma, la version mobile est dessinée avec une instance de Accordion_Contextual, mais sa version desktop est dessinée à plat (variante --without_accordion). Les deux structures n'ont rien en commun visuellement, donc plutôt qu'imposer un atome accordéon partout et le neutraliser en CSS sur desktop (anti-pattern qui force des overrides du DS), MessageBar gère lui-même son chevron de pliage mobile via un <button> + useState. C'est la même approche que les autres organismes du DS qui ont un comportement responsive distinct.

Conformité Figma

Aspect	Apollo / Prospect	LF / Client
Icône par défaut	account_balance-fill	account_balance_wallet-fill
Background blue	--blue-040 (#f5f5fb lavender)	identique
Background red	--red-040	identique
Bordure / radius	aucune	aucune
Padding desktop	var(--rem-24) var(--rem-120)	identique
Layout desktop	grid "icon title button" / "icon body button" (icon vertical-aligned au top, body indenté sous le title)	identique
Layout mobile	grid "icon title toggle" / "body" / "action" — body et action visibles uniquement quand --open	identique
Taille de police titre	responsive via --message-bar-title-font-size (16 mobile → 20 desktop) avec le pattern calc(... / --font-size-base * 1rem) repris de MessageCommon	identique
Taille de police description	responsive : 16 mobile → 18 desktop	identique
Bouton	passé via la prop button, c'est le Button DS du consommateur (pill --rounded-64 Prospect, rectangulaire --rounded-8 Client)	identique

API React

<MessageBar
  variant="blue"            // "blue" | "red"
  title="..."
  description="..."          // optionnel, déclenche l'accordion mobile
  showDescription={false}    // état initial déplié sur mobile (ignoré en desktop)
  icon={customIconSrc}       // override optionnel
  button={<Button .../>}     // optionnel, Button du DS
/>

Captures Storybook (story "All", desktop 1400px)

Apollo (port 6410)	LF (port 6210)

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud