From 22af0378af266724549f9f362428bb8d64145ba6 Mon Sep 17 00:00:00 2001 From: Richie Date: Wed, 25 Mar 2026 21:04:37 +1100 Subject: [PATCH] =?UTF-8?q?Update=20memory=20=E2=80=94=20SearchBar,=20AddO?= =?UTF-8?q?nOption,=20StepIndicator,=20Navigation=20registered?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.6 (1M context) --- docs/memory/component-registry.md | 7 ++-- docs/memory/session-log.md | 66 +++++++++++++++++++++++++++++-- 2 files changed, 66 insertions(+), 7 deletions(-) diff --git a/docs/memory/component-registry.md b/docs/memory/component-registry.md index bdf5845..61d122f 100644 --- a/docs/memory/component-registry.md +++ b/docs/memory/component-registry.md @@ -41,8 +41,9 @@ duplicates) and MUST update it after completing one. | VenueCard | review | Card + Typography | Venue listing card. Always has photo + location + capacity ("X guests") + price ("From $X"). No verification tiers, no logo, no badges. 3 component tokens. Critique: 33/40. | | MapCard | planned | Card + Typography + Badge | Compact horizontal map popup card. Deferred until map integration. | | ServiceOption | review | Card (interactive, selected) + Typography | Selectable service option for arrangement flow. Heading + optional price (right-aligned) + optional description. role="radio" + aria-checked. Disabled state with opacity token. Maps to Figma ListItemPurchaseOption. | -| SearchBar | planned | Input + Icon + Button | Search with submit | -| StepIndicator | planned | Typography + Badge + Divider | Multi-step flow progress | +| SearchBar | review | Input + IconButton + Button | Search input with optional submit button. Enter-to-submit, progressive clear button, inline loading spinner. Guards empty submissions, refocuses after clear. role="search" landmark. Critique: 35/40. | +| AddOnOption | review | Card (interactive, selected) + Typography + Switch | Toggleable add-on for arrangement flow extras. Heading + optional price + description + Switch. Click-anywhere toggle. Maps to Figma ListItemAddItem (2350:40658). | +| StepIndicator | review | Typography + Box | Horizontal segmented progress bar. Brand gold for completed/current steps, grey for upcoming. Responsive bar height (10px/6px). Maps to Figma Progress Bar - Steps (2375:47468). | ## Organisms @@ -51,7 +52,7 @@ duplicates) and MUST update it after completing one. | ServiceSelector | planned | ServiceOption × n + Typography + Button | Full service selection panel | | PricingTable | planned | PriceCard × n + Typography | Comparative pricing display | | ArrangementForm | planned | FormField × n + StepIndicator + Button | Multi-step arrangement flow | -| Navigation | planned | Link × n + Button + Avatar | Site header navigation | +| Navigation | review | AppBar + Link + IconButton + Button + Divider + Drawer | Responsive site header. Desktop: logo left, links right, optional CTA. Mobile: hamburger + drawer with nav items, CTA, help footer. Sticky, warm surface bg. Maps to Figma Main Nav (14:108) + Mobile Header (2391:41508). | | Footer | planned | Link × n + Typography + Divider | Site footer | ## Future enhancements diff --git a/docs/memory/session-log.md b/docs/memory/session-log.md index 611ddee..128b9ad 100644 --- a/docs/memory/session-log.md +++ b/docs/memory/session-log.md @@ -699,8 +699,66 @@ Each entry follows this structure: - **Planned (5 organisms):** ServiceSelector, PricingTable, ArrangementForm, Navigation, Footer **Next steps:** -- User to review ServiceOption in Storybook -- Build Navigation organism (IconButton + Link + Divider are now available) -- Build SearchBar molecule (Input + IconButton) -- Consider AddOnOption molecule (Card + Switch) when arrangement form is needed +- ~~Build SearchBar molecule~~ ✓ Done +- ~~Build AddOnOption molecule~~ ✓ Done +- ~~Build StepIndicator molecule~~ ✓ Done +- ~~Build Navigation organism~~ ✓ Done + +### Session 2026-03-25o — SearchBar, AddOnOption, StepIndicator molecules + Navigation organism + +**Agent(s):** Claude Opus (via conversation) + +**Work completed:** +- Built SearchBar molecule (`src/components/molecules/SearchBar/`): + - Composes Input (with search icon) + optional Button for provider/venue search + - Enter-to-submit, progressive clear button (appears when text present), inline loading spinner + - Guards empty submissions (`value.trim()`), refocuses input after clear + - `role="search"` landmark, two sizes aligned with Input/Button + - Critique: 35/40 (Good). P2 fixes applied before commit. + - 8 stories: Default, WithButton, SmallSize, WithPreloadedValue, Loading, Disabled, ProviderSearch, VenueSearch +- Built AddOnOption molecule (`src/components/molecules/AddOnOption/`): + - Composes Card (interactive, selected) + Typography + Switch + - Maps to Figma ListItemAddItem (2350:40658) — toggle for optional extras + - Heading + optional price + description + Switch right-aligned + - Click anywhere on card toggles the switch (stopPropagation on switch itself) + - `aria-labelledby` connects switch to heading text + - 7 stories: Default, Checked, ServiceAddOns (interactive list with running total), WithoutPrice, WithoutDescription, Disabled, EdgeCases +- Built StepIndicator molecule (`src/components/molecules/StepIndicator/`): + - Maps to Figma Progress Bar - Steps (2375:47468) — horizontal segmented bar + - Brand gold for completed/current steps, grey (divider) for upcoming + - Responsive bar height (10px desktop, 6px mobile), responsive labels + - Current step label bolded, `role="navigation"` + `aria-current="step"` + - 7 stories: Default, AllStates, TwoSteps, ManySteps, Interactive (nav demo), Completed, NarrowContainer +- Built Navigation organism (`src/components/organisms/Navigation/`): + - First organism in the design system + - Maps to Figma Main Nav (14:108) + Mobile Header (2391:41508) + - Desktop: sticky AppBar, logo left, nav Link items right, optional CTA Button + - Mobile: hamburger IconButton + Drawer with nav list, CTA, Divider, help footer with phone + - Warm surface background (brand.50), border bottom + - Composes AppBar, Link, IconButton, Button, Divider, Drawer, Typography + - 6 stories: Default, WithCTA, WithPageContent (sticky scroll demo), Minimal, ExtendedNavigation, MobilePriceTracker +- All 4 components: TypeScript compiles, Storybook builds, committed and pushed + +**Decisions made:** +- SearchBar guards empty submissions and disables button when empty — prevents wasted requests +- AddOnOption uses click-anywhere-to-toggle pattern (stopPropagation on Switch to avoid double-toggle) +- StepIndicator uses `palette.divider` for incomplete steps — grey/sage from theme, not hardcoded +- Navigation uses `var(--fa-color-surface-warm)` background — matches Figma's warm grey #F4F3EF +- Navigation nav link colour uses brand.900 (#51301B) — matches Figma "Brown Two" token +- No new component tokens needed for any of the 4 components — all reuse existing tokens + +**Component status at end of session:** +- **Done (8):** Button, Typography, Input, Card, Badge, Chip, Switch, Radio +- **Review (3 atoms):** IconButton, Divider, Link +- **Review (6 molecules):** ProviderCard, VenueCard, ServiceOption, SearchBar, AddOnOption, StepIndicator +- **Review (1 organism):** Navigation +- **Planned (3 atoms):** Icon, Avatar, ColourToggle, Slider +- **Planned (2 molecules):** MapCard, FormField +- **Planned (4 organisms):** ServiceSelector, PricingTable, ArrangementForm, Footer + +**Next steps:** +- User to review all 4 new components in Storybook +- Build Footer organism (Link + Typography + Divider — dependencies ready) +- Build ServiceSelector organism (ServiceOption × n + Typography + Button) +- Consider FormField molecule if Input's built-in label/helperText proves insufficient - Remaining P3s: InfoOutlinedIcon sizing in ProviderCard, image loading placeholder, accent bar 3px→4px