Update registry + session log — all Package Select components done

- LineItem, ProviderCardCompact, PackageDetail promoted to done
- Session 2026-03-26a logged: reviews, nav fixes, 3 new components
- 25 components total: 11 atoms + 10 molecules + 4 organisms

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-26 08:52:42 +11:00
parent 92716c08e3
commit 83e3809752
2 changed files with 63 additions and 6 deletions

View File

@@ -840,7 +840,64 @@ Each entry follows this structure:
- **Planned (2 organisms):** PricingTable, ArrangementForm
**Next steps:**
- User to review Footer + ServiceSelector in Storybook
- Build ArrangementForm organism (StepIndicator + ServiceSelector + AddOnOption — multi-step flow)
- ~~User to review Footer + ServiceSelector~~ ✓ Approved
- ~~Build ArrangementForm~~ Removed — premature, need more building blocks
- ~~Build Package Select page components~~ ✓ Done
### Session 2026-03-26a — Reviews, Navigation fixes, Package Select page components
**Agent(s):** Claude Opus (via conversation)
**Work completed:**
- Completed review of all 10 "review" components — all approved to done
- Navigation fixes from user feedback:
- Added "Provider Portal" to nav items
- Integrated real FA logo SVGs from `brandassets/brandlogo/`
- Changed nav background from warm (brand.50) → grey (neutral.50 / surface.subtle)
- Removed `mobileTrailing` prop and MobilePriceTracker story (speculative)
- Added `staticDirs` to Storybook for brand asset serving
- Built Footer organism (critique 38/40):
- Dark espresso bg, logo + tagline + contact + link columns + legal bar
- P2 fixes: extracted overline sx, used overlineSm variant, bumped legal links to 12px
- Built ServiceSelector organism:
- Single-select panel with radiogroup, continue button auto-disables
- WithLineLimit story for description truncation
- Built and removed ArrangementForm organism (premature — user flagged)
- Analysed Package Select page from Figma (5405:181955):
- Identified gaps: LineItem, ProviderCardCompact, PackageDetail
- Recommended Chip filter bar for funeral type switching
- Built LineItem molecule (audit 19/20):
- Name + info tooltip + optional price, allowance asterisk, total variant
- Font weight 500 (D019), prices text.secondary for readability hierarchy
- aria-label on info icon for screen readers
- Built ProviderCardCompact molecule:
- Horizontal layout: image left, name + location + rating right
- Built PackageDetail organism (audit 19/20):
- Warm header band with "Package" overline, name, price in brand colour
- sections (before total) + total + extras (after total with subtext)
- compareLoading prop for Compare button spinner
- T&C grey footer, responsive button stacking
- Section headings h6 (16px/600) vs LineItem body2 (14px/500) for hierarchy
- Full PackageSelectPage story with filter chips, ServiceOption list, sticky detail
- Multiple audit + review iterations with user feedback applied
**Decisions made:**
- Navigation background is grey (surface.subtle), not warm — per user
- "Make Arrangement" is the FA term for selecting/committing to a package
- PackageDetail structure: sections → total → extras. Total separates included content from additional-cost items. Business-critical distinction.
- LineItem prices use text.secondary — name reads first, price supports. Total row stays prominent.
- Chip filter bar for funeral type switching — visible, discoverable, matches existing Chip component
- Always audit before presenting to user — saved as feedback memory
**Component status at end of session:**
- **Done (11 atoms):** Button, Typography, Input, Card, Badge, Chip, Switch, Radio, IconButton, Divider, Link
- **Done (10 molecules):** ProviderCard, VenueCard, ServiceOption, SearchBar, AddOnOption, StepIndicator, LineItem, ProviderCardCompact
- **Done (4 organisms):** Navigation, Footer, ServiceSelector, PackageDetail
- **Planned (3 atoms):** Icon, Avatar, ColourToggle, Slider
- **Planned (2 molecules):** MapCard, FormField
- **Planned (2 organisms):** PricingTable, ArrangementForm
**Next steps:**
- Review next key page from FA 1.0 Figma designs — identify further component gaps
- Consider FormField molecule if Input's built-in label/helperText proves insufficient
- P3 cleanup: inverse logo SVG, InfoOutlinedIcon sizing, image placeholder, accent bar 3px→4px
- P3 cleanup: inverse logo SVG, InfoOutlinedIcon sizing in ProviderCard, image placeholder, accent bar 3px→4px