COMPONENT: MetricCard Component

[nayan458]

Task: Stat / MetricCard Component

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

Change Log

Updated: Now explicitly composes base Card component. Card (base) ticket must be completed before this one starts.

Component Type

• Design system (no API calls, pure props)

Props Interface

interface MetricCardProps {
  label:       string;
  value:       string | number;
  subLabel?:   string;
  valueColor?: 'default' | 'danger' | 'warning' | 'success';
  className?:  string;
}

Variants / States

State	Description
Default	Value in --text-primary
Danger	Value in --text-danger — Escalated count
Warning	Value in --text-warning — Pending count
Success	Value in --text-success — Auto-resolved count
With sub-label	Small secondary text below value
Without sub-label	Value sits flush at bottom, no gap

Acceptance Criteria

• Composes base Card with padding="md" — no duplicated border/bg/radius styling
• Value font-size 22px, label 10px uppercase tracking-wider, sub-label 10px secondary
• valueColor maps to correct CSS variable — no inline hex
• Sub-label optional — card height stays consistent without it
• Works correctly inside both grid-cols-4 (desktop) and grid-cols-2 (mobile) without overrides
• Zero hardcoded hex values
• Storybook stories: all 4 color variants, with and without sub-label, inside a 4-column grid
• No TypeScript errors

[nayan458]

complete 54#