COMPONENT: Card / Surface Component

[nayan458]

Task: Card / Surface Component

Type: Component
Milestone: M0.5 — Shared Component Library
Estimate: S

Component Type

• Design system (no API calls, pure props)

Props Interface

interface CardProps {
  children:    ReactNode;
  header?:     ReactNode;       // top slot — title, badges
  footer?:     ReactNode;       // bottom slot — actions, pagination
  meta?:       ReactNode;       // sub-header slot — timestamps, reporter
  variant?:    'default' | 'danger' | 'warning' | 'success' | 'info';
  padding?:    'none' | 'sm' | 'md' | 'lg';
  isClickable?: boolean;
  isExpanded?:  boolean;        // stronger border + shadow when true
  onClick?:     (e: MouseEvent<HTMLDivElement>) => void;
  className?:   string;
  testId?:      string;
}

Variants / States

State	Description
Default	Neutral border, white/primary bg
Danger / Warning / Success / Info	Tinted bg + matching border
Expanded	--border-primary + --shadow-md — used by ReportCard when open
Clickable hover	--border-secondary on hover, pointer cursor
No header/footer	Slots simply don't render — no empty padding divs left behind
Padding variants	none / sm / md / lg — for different density contexts

Acceptance Criteria

• header, footer, meta slots render only when provided — no empty <div> ghost nodes
• footer slot always has a top divider separator
• isExpanded applies stronger border and shadow
• isClickable adds hover border and pointer cursor — only when true
• padding variants apply correctly to body, not header/footer (they have fixed px-4)
• All 5 variants render with correct theme-aware colors
• Composes correctly — ReportCard built on top of it must not need any layout overrides
• Zero hardcoded hex values
• Storybook stories: default, all variants, with/without header+footer, expanded, clickable

Notes

• ReportCard is built on top of this — validate the slot API against ReportCard's needs before finalising
• The footer slot is where ActionButtons renders — spacing and flex wrap must work for 2–4 buttons