COMPONENT: ListCard Component

[nayan458]

Task: ListCard Component

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

Component Type

• Design system (no API calls, pure props)

Props Interface

interface ListCardProps {
  children:       ReactNode;        // expanded body content
  header:         ReactNode;        // always visible — title, badges, meta
  footer?:        ReactNode;        // action buttons — only shown when expanded
  isClickable?:   boolean;
  isExpanded?:    boolean;
  onToggle?:      () => void;
  className?:     string;
  testId?:        string;
}

Variants / States

State	Description
Collapsed	Only header slot renders. Body and footer hidden.
Expanded	Header + body (children) + footer all render. Border upgrades to --border-primary + --shadow-md.
Clickable hover	--border-secondary on hover, pointer cursor — only when isClickable is true
With footer	Footer slot rendered below a top divider, flex row, wraps on overflow
Without footer	No divider, no empty space at bottom

Acceptance Criteria

• Collapsed state renders only header — no empty body div left in DOM
• Expanded state renders header + children + footer with correct dividers
• footer slot only renders when both provided AND isExpanded is true
• onToggle fires on click of the card root — not on clicks inside footer buttons (stopPropagation handled internally)
• Expanded border + shadow applied only when isExpanded is true
• Hover state only active when isClickable is true
• Composes Card base — does not duplicate any styling from it
• Zero hardcoded hex values
• Storybook stories: collapsed, expanded, expanded with footer, hover state, no toggle
• No TypeScript errors

Notes

• ReportCard and UserCard (M2) both compose this — validate slot API against ReportCard's needs before signing off
• stopPropagation on footer click must be handled here, not in every consumer — clicking "Ban author" must not toggle the card closed