CartDrawer

organisms

Slide-in cart drawer from right. List of CartItems + OrderSummary + Checkout CTA. Empty state with browse-events link. Open/close animation.

ARIA Role: dialog

Demo

Cart

VIP Pass

Qty 2

$240.00

General Admission

Qty 1

$45.00

Props

Prop	Type	Required	Default	Description
`open`	`boolean`	Yes	`—`
`onClose`	`() => void`	Yes	`—`
`items`	`CartItemConfig[]`	Yes	`—`	0-20 items
`onCheckout`	`() => void`	Yes	`—`

TypeScript Interface

interface CartDrawerProps {
  open: boolean;
  onClose: () => void;
  items: CartItemConfig[];
  onItemRemove: (itemId: string) => void;
  onQuantityChange: (itemId: string, qty: number) => void;
  onCheckout: () => void;
  totals: { subtotal: number; fees: number; total: number; currency: string };
}

Assertions (NASA Rule 5)

[type]open, onClose, items, onCheckout all required(NASA Rule 5)
[aria]role='dialog' aria-modal='true'; focus trap; restore focus on close(WAI-ARIA Dialog Pattern)

Usage

Import

import { Cartdrawer } from '@epasslive/design-system'

Basic

<Cartdrawer />

With Variants

<Cartdrawer variant="primary" size="md" />