AlertGroup

Implemented

Stacked alert list composing the Alert molecule per alert. Stateless render loop over the specs — dismissal is per-alert; no queue, auto-dismiss, or max-visible logic.

Categoryorganisms

Sourcecomponents/organisms/alertgroup/AlertGroup.tsx

AI HintEach row renders the Alert molecule (error→role='alert', others→role='status'). The cta string renders a link-styled button with no action wiring (onCta pending step 6). Region aria-label and dismiss labels are hardcoded French — localization props pending step 6.

Groupe d'alertes empilables (info, succès, avertissement, erreur) utilisé pour signaler des événements système : Nuvei en panne, RIB rejeté, scanner déconnecté. FR-CA : « Portes 2 et 4 fermées — Salle Wilfrid-Pelletier ».

AlertGroup

Organism — Admin family (Family 9)

Pile verticale d'alertes où chaque item est rendu par la molécule Alert. Le conteneur est une région nommée (role="region") ; chaque item error porte role="alert" / aria-live="assertive", les autres tons portent role="status" / aria-live="polite". La fermeture s'affiche par item lorsque AlertSpec.onDismiss est fourni ; le CTA optionnel s'affiche à droite du corps.

Ventes en hausse de 18 %

Comparé à la même période en 2024-2025.

Nouveaux billets disponibles

Concert OSM — Salle Wilfrid-Pelletier, 18 avril.

Stock faible sur Place des Festivals

Plus que 14 billets pour le concert du 5 juillet.

Échec du paiement Nuvei

3 transactions refusées dans les 5 dernières minutes — escalade nécessaire.

This component supports light and dark mode.

Props

Prop

Type

Default

Description

alerts*

AlertSpec[]

—

Liste des alertes à empiler — une entrée AlertSpec par alerte (voir la section AlertSpec ci-dessous). L'ordre du tableau est respecté tel quel (aucune file ni réordonnancement).

className

string

—

Classes CSS additionnelles sur le conteneur role="region".

AlertSpec

Chaque entrée du tableau alerts est une AlertSpec — le group est un rendu purement déclaratif : ni file d'attente, ni auto-dismiss, ni limite maxVisible (l'appelant contrôle la liste).

Prop

Type

Default

Description

id*

string

—

Identifiant React key de l'alerte.

tone*

AlertTone

—

Tonalité mappée 1:1 sur AlertVariant : "info" | "success" | "warning" | "error".

title*

string

—

Titre de l’alerte (rendu comme heading aria-labelledby par la molécule).

body

string

—

Corps optionnel, rendu sous le titre.

cta

string

—

Libellé optionnel d'un lien d'action sous le corps — décoratif pour l'instant (aucun onClick, voir CTA ci-dessous).

onDismiss

() => void

—

Fournir cette fonction pour rendre le bouton de fermeture sur cet item.

icon

React.ReactNode

—

Icône optionnelle qui remplace l’icône par défaut du ton (passer un atome DS, aria-hidden).

Accessibilité

Le conteneur est un role="region" nommé. Chaque item hérite du contrat de la molécule Alert : role="alert" / aria-live="assertive" pour le ton error, role="status" / aria-live="polite" pour les autres tons.

i18n — limitation connue

Le libellé de la région (« Alertes système ») et les libellés de fermeture par item (« Fermer l'alerte : … ») sont actuellement codés en dur en français, sans props de surcharge — contrairement à la molécule Alert dont le dismissLabel est surchargeable (défaut anglais). L'ajout de props regionLabel / dismissLabel est en attente d'une décision ADR ; en attendant, réservez cet organisme aux surfaces admin FR.

CTA — décoratif pour l'instant

Le champ AlertSpec.cta rend un bouton stylé lien sans onClick : il est purement décoratif tant qu'une prop d'action (onCta) n'est pas ajoutée. Ne vous appuyez pas sur lui pour la navigation.

Props

Preview

AlertGroup

Prop

Type

Required

Default

Description

alerts

AlertSpec[]

Required

—

Alert specs: id, tone ('info'|'success'|'warning'|'error'), title, body?, cta?, onDismiss?, icon?.

className

string

Optional

—

Additional CSS classes on the region container.

Quick use:<AlertGroup />

Accessibility

ARIA roleregion

Usage

Import

tsxSnippet

import { AlertGroup } from "@epasslive/design-system"

Example 1

tsxSnippet

<AlertGroup alerts={[{ id: 'sync', tone: 'error', title: 'Sync failed', body: 'Retry in a moment.', onDismiss: dismissSync }]} />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources