Update memory — SearchBar, AddOnOption, StepIndicator, Navigation registered

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

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