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	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	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	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	review	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	review	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	review	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	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
ProviderCard	review	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	planned	Card + Typography + Badge	Venue listing card. Always has photo, location, capacity, price. Simpler than ProviderCard.
MapCard	planned	Card + Typography + Badge	Compact horizontal map popup card. Deferred until map integration.
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