MessageCard

Une carte compacte affichant un message contextualisé par un niveau de sévérité (info, warning, error, success), avec une icône et un texte ou un contenu personnalisé.

Import

import { MessageCard } from "@/components/MessageCard";

Utilisation basique

<MessageCard icon={<InfoIcon />} text="Le capteur fonctionne normalement." />

Sévérité

Le prop severity détermine la couleur de fond et du texte du composant. La couleur de fond est calculée avec une opacité de 20 % (33 en hexadécimal) par rapport à la couleur pleine.

successinfowarningerror

<MessageCard
    icon={<CheckCircleIcon />}
    severity="success"
    text="Opération réussie."
/>

<MessageCard
    icon={<InfoIcon />}
    severity="info"
    text="Information générale."
/>

<MessageCard
    icon={<WarningIcon />}
    severity="warning"
    text="Attention requise."
/>

<MessageCard
    icon={<ErrorIcon />}
    severity="error"
    text="Une erreur est survenue."
/>

Prérequis sur les couleurs

Cette implémentation suppose que les couleurs de COLORS sont au format hexadécimal (#RRGGBB). Toute autre notation (rgb, hsl, nommée) cassera le calcul d'opacité par concaténation.

Valeur	Couleur associée	Hexa
`info`	`COLORS.blue.feelbat` (défaut)	`#2468C1`
`warning`	`COLORS.orange.fieryCoral`	`#EE5C25`
`error`	`COLORS.red.main`	`#EA605D`
`success`	`COLORS.green.main`	`#33B3A0`

Calcul de la couleur de fond

La couleur de fond est générée en concaténant la valeur hexadécimale avec le suffixe 33, ce qui correspond à une opacité alpha d'environ 20 % (33 en hexadécimal = 51/255).

Exemple pour info :

const backgroundColor = `${COLORS.blue.feelbat}33`; // '#2468C133'

Contenu personnalisé

Si text n'est pas fourni, le composant utilise children à la place. Dans ce cas, tous les éléments enfants héritent automatiquement de la couleur de sévérité via un sélecteur CSS global (& *).

<MessageCard icon={<WarningIcon />} severity="warning">
  <Typography variant="body2">
    Seuil dépassé : <strong>42°C</strong>
  </Typography>
</MessageCard>

Priorité du contenu

Si text est défini, children est ignoré : le composant privilégie toujours text en priorité.

Personnalisation du texte

Le prop textProps permet de surcharger n'importe quelle prop du composant Typography interne utilisé lorsque text est fourni.

<MessageCard
  icon={<InfoIcon />}
  text="Texte plus grand et en gras"
  textProps={{ fontSize: 14, fontWeight: 700 }}
/>

API

Props

Prop	Type	Défaut	Description
`icon`	`ReactNode`	—	Requis. Icône affichée à gauche du contenu.
`severity`	`info` \| `warning` \| `error` \| `success`	`'info'`	Détermine la couleur de fond (à 20 % d'opacité) et de texte de la carte.
`text`	`ReactNode`	—	Contenu textuel affiché via un `Typography` interne. Prioritaire sur `children`.
`textProps`	`React.ComponentProps<typeof Typography>`	—	Props transmises au `Typography` interne (ignoré si `text` n'est pas fourni).
`children`	`ReactNode`	—	Contenu affiché uniquement si `text` est absent.

Détails d'implémentation

Le layout est un Box en flex (alignItems="center", gap={1}, p={1}).
Le borderRadius est égal à la moitié du borderRadius du thème (theme.shape.borderRadius / 2).
L'icône est placée dans un conteneur flexShrink={0} pour éviter qu'elle ne se compresse si le texte est long.
La couleur de fond est générée en concaténant la couleur de sévérité avec le suffixe hexadécimal 33 (≈ 20 % d'opacité).

Accessibilité

Bonnes pratiques

Fournissez une icône porteuse de sens (ou un aria-label sur l'icône elle-même) : la couleur seule ne doit pas être le seul vecteur d'information de sévérité.
Vérifiez le contraste texte/fond induit par l'opacité 33, en particulier selon le thème clair/sombre utilisé.