From 00a5dd0105b6c0bc1d0342d744e83ed9e9010cdb Mon Sep 17 00:00:00 2001 From: A Charlwood Date: Fri, 13 Feb 2026 17:17:02 +0000 Subject: [PATCH] Update progress: Task 8 completed (Card component) --- Ralph/IMPLEMENTATION_PLAN.md | 10 +++++----- Ralph/progress.txt | 21 +++++++++++++++++++++ 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/Ralph/IMPLEMENTATION_PLAN.md b/Ralph/IMPLEMENTATION_PLAN.md index 96fc336..910ec36 100644 --- a/Ralph/IMPLEMENTATION_PLAN.md +++ b/Ralph/IMPLEMENTATION_PLAN.md @@ -81,11 +81,11 @@ Replace the "CareerRecord PMR" sidebar-nav + view-switching interface with a til #### Task 8: Build reusable Card component > Detail: `Ralph/refs/ref-05-card-and-top-tiles.md` (Card section) -- [ ] Create `src/components/Card.tsx` -- [ ] Base card styling (white, border, radius 8px, shadow-sm, hover shadow-md) -- [ ] `full` variant (spans both grid columns) -- [ ] CardHeader sub-component (dot + title + optional right text) -- [ ] Run quality checks +- [x] Create `src/components/Card.tsx` +- [x] Base card styling (white, border, radius 8px, shadow-sm, hover shadow-md) +- [x] `full` variant (spans both grid columns) +- [x] CardHeader sub-component (dot + title + optional right text) +- [x] Run quality checks #### Task 9: Build PatientSummary tile > Detail: `Ralph/refs/ref-05-card-and-top-tiles.md` (PatientSummary section) diff --git a/Ralph/progress.txt b/Ralph/progress.txt index 36e302e..8ce22a9 100644 --- a/Ralph/progress.txt +++ b/Ralph/progress.txt @@ -210,3 +210,24 @@ **Quality checks:** typecheck ✓, lint ✓ (1 pre-existing warning), build ✓ **Visual review:** Skipped — browser tools unavailable. Dashboard layout structure verified via quality checks. Visual review will happen when tiles are added. +### Iteration 6 — Task 8: Build reusable Card component +**Status:** Complete +**Changes:** +- Created `src/components/Card.tsx` with two exports: + - `Card` component: Reusable base card with white background, 8px border-radius, shadow-sm + - `CardHeader` component: Colored dot (8px circle) + uppercase title + optional mono right text +- Card styling: Uses CSS custom properties (--surface, --border-light, --border, --radius, --shadow-sm/md) +- Hover interaction: Shadow deepens to shadow-md, border strengthens to --border (via useState + onMouseEnter/onMouseLeave) +- Full-width variant: `full` prop sets `gridColumn: '1 / -1'` to span both grid columns +- CardHeader dot colors: teal (#0D6E6E), amber (#D97706), green (#059669), alert (#DC2626), purple (#7C3AED) +- Header typography: title is 12px, 600 weight, uppercase, 0.06em letter-spacing, text-secondary +- Right text: 10px, 400 weight, text-tertiary, Geist Mono font, margin-left auto +- All styles use inline React.CSSProperties to precisely match the ref spec +**Learnings:** +- Card uses inline styles rather than Tailwind classes — ensures precise CSS custom property mapping +- Hover state managed with React state (not CSS :hover) to coordinate shadow + border color transitions +- CardHeader accepts dotColor as string literal union type ('teal' | 'amber' | etc.) — mapped to hex colors via object +- Component is ready to be used by all tile components (Tasks 9-15) +**Quality checks:** typecheck ✓, lint ✓ (1 pre-existing warning), build ✓ +**Visual review:** Not applicable — base component, will be visible once integrated into tiles +