Parsons/docs/memory/component-registry.md

Component registry

Tracks the status, specification, and key details of every component in the design system. Agents MUST check this before building a component (to avoid duplicates) and MUST update it after completing one.

Status definitions

• planned: Component is identified but not yet started
• in-progress: Component is being built
• review: Component is built, awaiting human review
• done: Component is reviewed and approved
• needs-revision: Component needs changes based on review feedback

Atoms

Component	Status	Variants	Tokens used	Notes
Button	done	contained, soft, outlined, text × xs, small, medium, large × primary, secondary + loading, underline, fullWidth	button.height/paddingX/paddingY/fontSize/iconSize/iconGap/borderRadius, color.interactive.*, color.brand.100-300, color.neutral.200-700	Primary interactive element. Merges Text Button from Figma. Soft variant = Figma's Secondary/Brand & Secondary/Grey.
IconButton	done	default, primary, secondary, error × small, medium, large	Reuses button.height/iconSize tokens, color.interactive., color.neutral.	Icon-only button (close, menu, actions). Wraps MUI IconButton. Rounded rect, brand hover, focus ring.
Typography	done	displayHero, display1-3, displaySm, h1-h6, bodyLg, body1, body2, bodyXs, labelLg, label, labelSm, caption, captionSm, overline, overlineSm + maxLines, gutterBottom	typography.* (all semantic typography tokens), fontFamily.body, fontFamily.display	Text display system. Thin MUI wrapper with maxLines truncation.
Input	done	medium, small × default, hover, focus, error, success, disabled + startIcon, endIcon, required, multiline	input.height/paddingX/paddingY/fontSize/borderRadius/gap/iconSize, color.neutral.300-400, color.brand.500, color.feedback.error/success, color.text.secondary	External label pattern, branded focus ring, two sizes aligned with Button. Adds startIcon/endIcon and success state beyond Figma.
Badge	done	soft, filled × default, brand, success, warning, error, info × small, medium + icon	badge.height/paddingX/fontSize/iconSize/iconGap/borderRadius, color.feedback.*, color.brand.200/700	Status indicator pill. Soft (tonal) or filled (solid). 6 colours, 2 sizes, optional leading icon.
Icon	planned	various sizes		Icon wrapper component
Avatar	planned	image, initials, icon × small, medium, large		User/entity representation
Divider	done	horizontal, vertical × fullWidth, inset, middle + text, flexItem	color.border.default (via palette.divider)	Visual separator. Wraps MUI Divider. Supports text children and orientation.
Chip	done	filled, outlined × small, medium × clickable, deletable, selected × default, primary	chip.height/paddingX/fontSize/iconSize/deleteIconSize/iconGap/borderRadius, color.neutral.200-700, color.brand.200-700	Interactive tag. Wraps MUI Chip with FA tokens. Selected state promotes to brand colour. Filled uses soft tonal bg (like Badge).
Card	done	elevated, outlined × default, compact, none padding × interactive × selected	card.borderRadius/padding/shadow/border/background, color.surface.raised/subtle/warm, color.border.default/brand, shadow.md/lg	Content container. Elevated (shadow) or outlined (border). Interactive adds hover bg fill + shadow lift. Selected adds brand border + warm bg. Three padding presets.
Switch	done	bordered style × checked, unchecked, disabled	switch.track.width/height/borderRadius, switch.thumb.size, color.interactive.*, color.neutral.400	Toggle for add-ons/options. Wraps MUI Switch. Bordered pill, brand.500 fill when active. From Parsons 1.0 Figma Style One.
Radio	done	checked, unchecked, disabled	radio.size/dotSize, color.interactive.*, color.neutral.400	Single-select option. Wraps MUI Radio. Brand.500 fill when selected. From Parsons 1.0 Figma.
ColourToggle	planned	inactive, hover, active, locked × single, two-colour × desktop, mobile		Circular colour swatch picker for products. Custom component. Deferred until product detail organisms.
Slider	planned	single, range × desktop, mobile		Price range filter. Wraps MUI Slider. Deferred until search/filtering molecules.
Link	done	underline: hover/always/none × any MUI colour	color.text.brand (copper brand.600, 4.8:1), color.interactive.active	Navigation text link. Wraps MUI Link. Copper default, underline on hover, focus ring.

Molecules

Component	Status	Composed of	Notes
FormField	planned	Input + Typography (label) + Typography (helper)	Standard form field with label and validation
ProviderCard	done	Card + Typography + Badge + Tooltip	Provider listing card. Verified: image + logo (64px rounded rect) + "Verified" badge. Unverified: text-only with top accent bar. Capability badges with info icon + tooltip. Price split typography. No footer. 4 component tokens.
VenueCard	done	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	done	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	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	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

Component	Status	Composed of	Notes
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	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).
FuneralFinder	review	Typography + Button + Chip + Input + custom OptionCard	Hero search widget. Procedural stepped flow: Intent → Planning For (conditional) → Funeral Type (chips, dynamic) → Location → CTA. Brand checkmarks on completion, edit icon to revert, radiogroup semantics. Audit: 17/20 → fixes applied.
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).

Future enhancements

Deferred items that should be addressed when the relevant components or patterns are needed. Check this section before building new components — an item here may be relevant to your current work.

Item	Relates to	Trigger	Notes
Destructive button colours	Button	When building delete/cancel flows	color="error" already works via MUI palette. May need soft variant styling for error/warning/success colours.
Link-as-button	Button	When building Navigation or link-heavy pages	Use MUI's component="a" or href prop. May warrant a separate Link atom or a Button story showing the pattern.
IconButton atom	IconButton	Resolved	Built as atom. Rounded rect, 3 sizes, 4 colours, focus ring.
Google Fonts loading	Typography	Resolved	Added to .storybook/preview-head.html and index.html