Align props with figma

2026-02-04 16:52:03 -07:00
parent ee9784271f
commit af7e2d3e51
53 changed files with 1287 additions and 108 deletions
@@ -0,0 +1,152 @@
+# Figma Property Alignment Documentation
+
+This document tracks components that have been aligned with Figma design specifications and those that were skipped.
+
+## Alignment Strategy
+
+All components now support case-insensitive property values:
+- **Figma uses PascalCase** (e.g., "Standard", "Inverse", "Default")
+- **Codebase uses lowercase** (e.g., "standard", "inverse", "default")
+- **Both formats are accepted** and normalized internally
+
+## Components Aligned with Figma
+
+### Form Components ✅
+- **RadioButton, RadioGroup** - mode, state props (added `indicator` prop from Figma)
+- **Checkbox, CheckboxGroup** - mode, state props
+- **TextInput** - state props
+- **TextArea** - state, size, labelVariant props
+- **SelectInput** - state, size, labelVariant props
+- **SelectOption** - size prop
+- **Toggle** - state props
+- **ToggleGroup** - state, position props
+- **Switch** - state props
+
+### Core UI Components ✅
+- **Button** - variant, size props
+- **Alert** - status, type props
+- **Tooltip** - position prop
+- **Progress** - progress state (complex type, no normalization needed)
+- **Stepper** - numeric props (no normalization needed)
+- **ModalHeader, ModalFooter** - no enum props
+
+### Navigation & Layout ✅
+- **MenuBar** - size prop
+- **MenuBarItem** - variant, size props
+- **NavigationItem** - variant, size props
+- **Header, HomeHeader** - complex internal size types
+- **Footer** - no props
+- **HeaderTab** - no enum props
+- **ConditionalHeader** - no props
+
+### Content Components ✅
+- **ContentLockup** - variant, alignment props
+- **ContentContainer** - size prop
+- **ContentThumbnailTemplate** - variant prop
+- **SectionHeader** - variant prop
+- **ContentBanner** - no enum props
+- **SectionNumber** - no enum props
+- **HeroBanner, HeroDecor** - no enum props
+
+### Card & Display Components ✅
+- **NumberCard** - size prop (already PascalCase, now supports both)
+- **NumberedCards** - no enum props
+- **IconCard** - no enum props
+- **MiniCard** - no enum props
+- **RuleCard, RuleStack** - no enum props
+- **QuoteBlock** - variant prop
+- **QuoteDecor** - no props
+- **Logo** - complex size enum (internal use)
+- **LogoWall** - no enum props
+
+### Feature Components ✅
+- **FeatureGrid** - no enum props
+- **AskOrganizer** - variant prop
+- **RelatedArticles** - no enum props
+- **Create** - no enum props
+
+### Form Extensions ✅
+- **InputWithCounter** - no enum props
+- **SelectDropdown** - no enum props
+- **SelectOption** - size prop
+
+### Context & Menu Components ✅
+- **ContextMenu** - no enum props
+- **ContextMenuItem** - size prop
+- **ContextMenuDivider, ContextMenuSection** - no enum props
+- **LanguageSwitcher** - no enum props
+
+### Utility Components ✅
+- **Avatar** - size prop
+- **AvatarContainer** - size prop
+- **ImagePlaceholder** - color prop
+
+## Components Skipped (No Figma Design)
+
+The following components were skipped as they don't have corresponding Figma designs:
+
+- **ErrorBoundary** - Error handling utility component
+- **WebVitalsDashboard** - Development tool for performance monitoring
+- **Separator** - Simple visual divider component
+
+## Implementation Details
+
+### Normalization Functions
+
+All normalization functions are located in `lib/propNormalization.ts`:
+- `normalizeMode()` - Standard/Inverse modes
+- `normalizeState()` - Default/Hover/Focus/Selected states
+- `normalizeInputState()` - Default/Active/Hover/Focus for inputs
+- `normalizeVariant()` - Button variants
+- `normalizeSize()` - Button sizes
+- `normalizeAlertStatus()` - Alert statuses
+- `normalizeAlertType()` - Alert types
+- `normalizeTooltipPosition()` - Tooltip positions
+- `normalizeMenuBarSize()` - Menu bar sizes
+- `normalizeMenuBarItemVariant()` - Menu bar item variants
+- `normalizeNavigationItemVariant()` - Navigation item variants
+- `normalizeNavigationItemSize()` - Navigation item sizes
+- `normalizeContentLockupVariant()` - Content lockup variants
+- `normalizeAlignment()` - Text alignment
+- `normalizeContentContainerSize()` - Content container sizes
+- `normalizeContentThumbnailVariant()` - Content thumbnail variants
+- `normalizeSectionHeaderVariant()` - Section header variants
+- `normalizeQuoteBlockVariant()` - Quote block variants
+- `normalizeNumberCardSize()` - Number card sizes
+- `normalizeAskOrganizerVariant()` - Ask organizer variants
+- `normalizeContextMenuItemSize()` - Context menu item sizes
+- `normalizeImagePlaceholderColor()` - Image placeholder colors
+- `normalizeToggleGroupPosition()` - Toggle group positions
+- `normalizeLabelVariant()` - Label variants (default/horizontal)
+- `normalizeSmallMediumLargeSize()` - Small/medium/large sizes (for SelectInput, TextArea, etc.)
+
+### Usage Pattern
+
+All container components follow this pattern:
+
+```typescript
+const ComponentContainer = ({ 
+  variant: variantProp = "default",
+  // ... other props
+}) => {
+  // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+  const variant = normalizeVariant(variantProp);
+  
+  // Use normalized value in component logic
+  // ...
+};
+```
+
+## Backward Compatibility
+
+All changes maintain full backward compatibility:
+- Existing lowercase prop usage continues to work
+- New PascalCase props from Figma are accepted
+- TypeScript types accept both formats
+- No breaking changes to existing code
+
+## Testing
+
+Storybook stories have been updated to demonstrate both naming conventions:
+- Existing stories use lowercase (backward compatibility)
+- New stories added for PascalCase (Figma alignment)