diff --git a/docs/memory/component-registry.md b/docs/memory/component-registry.md index 50084ab..9c1a561 100644 --- a/docs/memory/component-registry.md +++ b/docs/memory/component-registry.md @@ -44,8 +44,8 @@ duplicates) and MUST update it after completing one. | SearchBar | done | 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 | done | 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 | done | 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). | -| LineItem | review | Typography + Tooltip + InfoOutlinedIcon | Name + optional info tooltip + optional price. Supports allowance asterisk, total variant (bold + border). Used in PackageDetail, order summaries, invoices. | -| ProviderCardCompact | review | Card (outlined) + Typography | Horizontal compact provider card — image left, name + location + rating right. Used at top of Package Select page. Separate from vertical ProviderCard. | +| LineItem | done | Typography + Tooltip + InfoOutlinedIcon | Name + optional info tooltip + optional price. Supports allowance asterisk, total variant (bold + top border). Font weight 500 (D019), prices text.secondary for readability hierarchy. Audit: 19/20. | +| ProviderCardCompact | done | Card (outlined) + Typography | Horizontal compact provider card — image left, name + location + rating right. Used at top of Package Select page. Separate from vertical ProviderCard. | ## Organisms @@ -53,7 +53,7 @@ duplicates) and MUST update it after completing one. |-----------|--------|-------------|-------| | ServiceSelector | done | ServiceOption × n + Typography + Button | Single-select service panel for arrangement flow. Heading + subheading + ServiceOption list (radiogroup) + optional continue Button. Manages selection state via selectedId/onSelect. maxDescriptionLines pass-through. | | PricingTable | planned | PriceCard × n + Typography | Comparative pricing display | -| PackageDetail | review | LineItem × n + Typography + Button + Divider | Right-side package detail panel. Name/price header, Make Arrangement + Compare buttons, grouped LineItem sections (Essentials, Complimentary, Extras), total row, T&C footer. Maps to Figma Package Select (5405:181955) right column. | +| PackageDetail | done | LineItem × n + Typography + Button + Divider | Right-side package detail panel. Warm header band (surface.warm) with "Package" overline, name, price (brand colour), Make Arrangement + Compare (with loading) buttons. Sections (before total) + total + extras (after total, with subtext). T&C grey footer. Audit: 19/20. Maps to Figma Package Select (5405:181955). | | ArrangementForm | planned | StepIndicator + ServiceSelector + AddOnOption + Button + Typography | Multi-step arrangement wizard. Deferred — build remaining atoms/molecules first. | | Navigation | done | 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, grey surface bg (surface.subtle). Real FA logo from brandassets/. Maps to Figma Main Nav (14:108) + Mobile Header (2391:41508). | | Footer | done | Link × n + Typography + Divider + Container + Grid | Dark espresso (brand.950) site footer. Logo + tagline + contact (phone/email) + link group columns + legal bar. Semantic HTML (footer, nav, ul). Critique: 38/40 (Excellent). | diff --git a/docs/memory/session-log.md b/docs/memory/session-log.md index f192504..22ab1d6 100644 --- a/docs/memory/session-log.md +++ b/docs/memory/session-log.md @@ -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