CartDrawer

Implemented

Slide-in cart drawer from right, composing the Drawer molecule for dialog chrome (portal, scrim, Escape-to-close). Cart line list + totals footer + checkout CTA. Localized fr/en labels; appears instantly (no animation).

Categoryorganisms

Sourcecomponents/organisms/cartdrawer/CartDrawer.tsx

AI HintUse for complex UI sections. Compose molecules and atoms into page sections.

Tiroir latéral (slide-over) affichant le panier avec ses lignes, le sous-total, les frais de service et le total. FR-CA : « Votre panier · Sous-total · Frais de service · Total · Passer à la caisse ».

CartDrawer

Organism — Commerce family (Family 7)

Composant contrôlé : passer `open=true` pour afficher le tiroir. Compose le molecule Drawer (portail, scrim, role=dialog) — piège de focus et retour de focus hérités du molecule. Verrouille le défilement et ferme via Escape, bouton ou overlay. Les boutons « retirer » et « passer à la caisse » sont des no-op tant que `onRemove` et `onCheckout` ne sont pas fournis.

This component supports light and dark mode.

Props

Prop

Type

Default

Description

open*

boolean

—

Visibilité du tiroir.

onClose*

() => void

—

Fermeture (bouton, overlay ou Escape).

lines*

CartLine[]

—

Lignes du panier (id, eventTitle, ticketTier, quantity, unitPrice, lineTotal).

subtotal*

string

—

Sous-total formaté (ex. « 184,00 $ »).

fees*

string

—

Frais de service formatés (ex. « 9,20 $ »).

total*

string

—

Total formaté (ex. « 193,20 $ »).

locale

'fr' | 'en'

fr

Bascule des libellés intégrés.

className

string

—

Classes supplémentaires sur le wrapper de mise en page interne.

onRemove

(lineId: string) => void

—

Appelé au clic sur le bouton « retirer » d’une ligne. Reçoit l’identifiant de la ligne.

onCheckout

() => void

—

Appelé au clic sur le bouton « passer à la caisse ».

Props

Preview

CartDrawer

Prop

Type

Required

Default

Description

open

boolean

Required

—

Drawer open state. Renders nothing when false.

onClose

() => void

Required

—

Called on scrim click, Escape, and the header close button.

lines

CartLine[]

Required

—

Cart lines. Each: id, eventTitle, ticketTier, quantity, unitPrice, lineTotal (pre-formatted strings).

subtotal

string

Required

—

Pre-formatted subtotal (e.g. "184,00 $").

fees

string

Required

—

Pre-formatted service fees (e.g. "9,20 $").

total

string

Required

—

Pre-formatted grand total (e.g. "193,20 $").

locale

"fr" | "en"

Optional

'fr'

Switches built-in labels between French and English.

className

string

Optional

—

Extra CSS classes applied to the inner layout wrapper.

onRemove

(lineId: string) => void

Optional

—

Called when the user clicks the per-line remove button.

onCheckout

() => void

Optional

—

Called when the user clicks the checkout CTA.

Quick use:<CartDrawer />

Accessibility

ARIA roledialog

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<CartDrawer open onClose={fn} lines={[]} subtotal="" fees="" total="" />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources