PackageCard

organisms

Atomic package display card — package = single expandable card, NOT individual tickets. 'See the tickets included in this Package' expandable section. Must render as atomic unit.

ARIA Role: article

Demo

Card Title

Card description text goes here.

Props

Prop	Type	Required	Default	Description
`package`	`Package`	Yes	`—`	Package data with included tickets
`isExpanded`	`boolean`	Yes	`—`	Whether ticket list is expanded
`onToggle`	`() => void`	Yes	`—`	Toggle expand/collapse
`onAddToCart`	`(pkg: Package) => void`	Yes	`—`	Add package to cart

TypeScript Interface

interface PackageCardProps {
  package: Package;
  isExpanded: boolean;
  onToggle: () => void;
  onAddToCart: (pkg: Package) => void;
  currency?: string;
  locale?: 'en' | 'fr';
}

Assertions (NASA Rule 5)

[aria]Heading inside card must be in document heading order(WCAG 1.3.1)
[validation]Features list must not be empty when shown(NASA Rule 5)

Usage

Import

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

Basic

<Packagecard />

With Variants

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