ActivityList

Implemented

Activity feed section — labelled card with heading, optional caption and rows rendered by the ActivityItem molecule (kind → semantic tone + label). Empty state is visible muted text; no aria-live is set by the component.

Categoryorganisms

Sourcecomponents/organisms/activitylist/ActivityList.tsx

AI HintUse for a dashboard activity-feed section. Maps each ActivityKind to a row tone (ticket-sold/venue-checkin→success, refund-issued/scanner-error→error, promo-applied→warning, email-sent→info) and renders rows via the ActivityItem molecule. Kind labels, default heading and empty state are bilingual inline literals selected by the locale prop ('fr' by default, Wave-3 W4 / VenueAccessMap precedent); pass an explicit heading to override the title. First real dashboard adoption: storefront/components/dashboard/RecentActivity.tsx (S6; empty-state stub, full item adoption awaits the activity-feed endpoint).

Flux d'activité récente pour les tableaux de bord producteur (ventes de billets, remboursements, arrivées, codes promo, erreurs de scanner, envois courriel). FR-CA : « 2 billets vendus — Festival Jazz Montréal · Caisse 4 · Marie Tremblay ».

ActivityList

Family 6 — Content & Layout Molecules

Liste verticale d'événements horodatés avec un point coloré sémantique par type. Rend un role="list" avec un titre accessible (FR-CA : « Activité récente »). Les items sans `meta` affichent uniquement le résumé et le type. Compose la molécule ActivityItem (une rangée <li> par item, séparées par des filets divide-y) — le composant ne définit aucun aria-live ; le consommateur possède la région live (WCAG 4.1.3).

Activité récente

7 derniers jours · 28 événements

2 billets vendus — Festival Jazz Montréal Caisse 4 · Marie TremblayVente - il y a 2 min
12 arrivées — Place des Festivals (porte 2) Concert quartet Jazz MTLArrivée - il y a 7 min
Remboursement de 48,00 $ — Lionel Paquin Annulation Maison symphoniqueRemboursement - il y a 18 min
Code LAISSEZ20 utilisé 4 fois Saison OSM 2025-26Code promo - il y a 35 min
Confirmation envoyée à 87 acheteurs Billetterie Lion d'OrCourriel envoyé - il y a 1 h
QR invalide — porte 4 Salle Wilfrid-PelletierErreur scanner - il y a 1 h

This component supports light and dark mode.

Props

Prop

Type

Default

Description

items*

ActivityListItem[]

—

Liste d'événements à afficher ({ id, kind, summary, meta?, when }) — peut être vide (état vide visible).

heading

string

'Activité récente' (fr) / 'Recent activity' (en)

Titre de la section (h3 relié par aria-labelledby). Par défaut suit la prop locale ; un heading explicite a priorité.

caption

string

—

Sous-titre optionnel (ex. : « 7 derniers jours »).

locale

"fr" | "en"

'fr'

Locale des étiquettes de type, du titre par défaut et de l'état vide (littéraux bilingues inline — précédent VenueAccessMap).

className

string

—

Classes additionnelles fusionnées sur le <section>.

Composes

Chaque rangée est rendue par la molécule ActivityItem : summary → emplacement actor (gras), meta → action, et l'étiquette de type + when → emplacement time muet. Le point de tonalité est décoratif ; le texte de l'étiquette de type porte l'information (WCAG 1.4.1).

Accessibility

<section aria-labelledby="activitylist-heading"> relié au <h3 id="activitylist-heading"> (WCAG 1.3.1 / 4.1.2).
Rangées dans un <ul role="list"> (sémantique Safari/VoiceOver).
État vide : paragraphe muet visible (« Aucune activité à afficher. » / « No activity to display. »).
Aucun aria-live n'est défini par ce composant — le consommateur possède la région live pour les flux diffusés (WCAG 4.1.3).

Props

Preview

ActivityList

Prop

Type

Required

Default

Description

items

ActivityListItem[]

Required

—

Rows of { id, kind, summary, meta?, when } — summary maps to the actor slot, meta to the action slot.

heading

string

Optional

'Activité récente' (fr) / 'Recent activity' (en)

Section heading text. Default follows the locale prop.

caption

string

Optional

—

Muted caption beside the heading (Caption atom).

locale

"fr" | "en"

Optional

'fr'

Locale for the kind labels, default heading and empty state (VenueAccessMap precedent).

className

string

Optional

—

Class appended to the card section.

Quick use:<ActivityList />

Accessibility

ARIA rolelist

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<ActivityList items={events} heading="Activité récente" caption="Dernières 24h" />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources