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	review	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	planned	contained, soft, outlined, text × small, medium, large	Reuses Button tokens	Icon-only button (close, menu, actions). Wrap MUI IconButton with FA theme. Build when Navigation/modals are needed.
Typography	review	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	review	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	review	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	planned	horizontal, vertical		Visual separator
Chip	planned	filled, outlined × deletable, clickable		Tags and filters
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.
Link	planned	default, subtle		Navigation text

Molecules

Component	Status	Composed of	Notes
FormField	planned	Input + Typography (label) + Typography (helper)	Standard form field with label and validation
PriceCard	planned	Card + Typography + Badge + Button	Service pricing display
ServiceOption	planned	Card + Typography + Chip + Icon	Selectable service item
SearchBar	planned	Input + Icon + Button	Search with submit
StepIndicator	planned	Typography + Badge + Divider	Multi-step flow progress

Organisms

Component	Status	Composed of	Notes
ServiceSelector	planned	ServiceOption × n + Typography + Button	Full service selection panel
PricingTable	planned	PriceCard × n + Typography	Comparative pricing display
ArrangementForm	planned	FormField × n + StepIndicator + Button	Multi-step arrangement flow
Navigation	planned	Link × n + Button + Avatar	Site header navigation
Footer	planned	Link × n + Typography + Divider	Site footer

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	When building Navigation, modals, toolbars	Wrap MUI IconButton with FA theme tokens. Registered as planned atom above.
Google Fonts loading	Typography	Resolved	Added to .storybook/preview-head.html and index.html