CartSummary

organisms

Cart summary bar with quantity, total, BUY button, and 10-minute reservation timer. Visual urgency states (green → yellow → red).

ARIA Role: complementary

Demo

Demo for CartSummary (organisms)

Cart summary bar with quantity, total, BUY button, and 10-minute reservation timer. Visual urgency states (green → yellow → red).

Props

PropTypeRequiredDefaultDescription
itemsCartItem[]Yes—Cart items
totalnumberYes—Total price including fees
reservationMinutesnumberYes—Minutes remaining in reservation
onCheckout() => voidYes—Proceed to checkout

TypeScript Interface

interface CartSummaryProps {
  items: CartItem[];
  total: number;
  reservationMinutes: number;
  onCheckout: () => void;
  currency?: string;
}

Assertions (NASA Rule 5)

  • [aria]Total amount announced via aria-live when changed(WCAG 4.1.3)
  • [validation]Subtotal + tax + fees = total (rounded to 2 decimals)(NASA Rule 5)

Usage

Import

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

Basic

<Cartsummary />

With Variants

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