Update memory — SearchBar, AddOnOption, StepIndicator, Navigation registered

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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

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