richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update registry + session log — all Package Select components done

Browse Source 
- 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:
Richie
2026-03-26 08:52:42 +11:00
parent 92716c08e3
commit 83e3809752
2 changed files with 63 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/memory/component-registry.md
View File

@@ -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. | | 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). | | 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). | | 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. | | 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 | 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. | | 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 ## 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. | | 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 | | 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. | | 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). | | 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). | | 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). |

63
docs/memory/session-log.md
View File

@@ -840,7 +840,64 @@ Each entry follows this structure:
- **Planned (2 organisms):** PricingTable, ArrangementForm - **Planned (2 organisms):** PricingTable, ArrangementForm
**Next steps:** **Next steps:**
- User to review Footer + ServiceSelector in Storybook - ~~User to review Footer + ServiceSelector~~ ✓ Approved
- Build ArrangementForm organism (StepIndicator + ServiceSelector + AddOnOption — multi-step flow) - ~~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 - 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