Bernt
1e40d384ca
- Motion System v1 (chapter 5):
- Motion principles: when to animate, when NOT to animate
- Duration scale (instant to slower: 0ms to 500ms)
- Easing functions (linear, in, out, in-out, spring)
- Component-specific motion: Button, Modal, Drawer, Map, Skeleton,
Progress, Error/Success
- Reduced motion support (prefers-reduced-motion)
- Interruption rules (animations must be interruptible)
- Error/success animations (shake, checkmark, pulse)
- Button gold standard (chapter 8.3.1):
- Full specification: purpose, design goal, token dependencies,
layout, sizes, variants, states, keyboard, touch, accessibility,
anti-patterns, related components, DDR references
- Sets the bar for all future component specifications
- COMPONENT_TEMPLATE.md (v1.0, LOCKED):
- Standard template for all component specifications
- Sections: purpose, tokens, layout, sizes, variants, states,
keyboard, touch, accessibility, motion, acceptance criteria,
anti-patterns, related components, DDR references
- COMPONENT_DECISION_TREE.md (v1.0, LOCKED):
- Decision trees for: user actions, information display, user input,
feedback, navigation, Landvex-specific
- Quick reference table mapping needs to components
- Prevents invention of unnecessary components
Rationale: Motion before brand (affects every interaction). Button as
reference implementation. Template ensures consistency. Decision tree
guides AI agents and developers to correct component choice.
144 lines
2.4 KiB
Markdown
144 lines
2.4 KiB
Markdown
# COMPONENT TEMPLATE
|
|
|
|
**Template for All Component Specifications**
|
|
|
|
| | |
|
|
|---|---|
|
|
| **Version** | 1.0 |
|
|
| **Status** | LOCKED |
|
|
| **Scope** | All Landvex & quiXzoom components |
|
|
|
|
---
|
|
|
|
## Instructions
|
|
|
|
Copy this template for each new component. Remove sections that do not apply. Add sections that are component-specific.
|
|
|
|
---
|
|
|
|
## [Component Name]
|
|
|
|
**Purpose:** One sentence describing what this component does.
|
|
|
|
**Design Goal:** One sentence describing the ideal user experience.
|
|
|
|
**Tier:** [1 (Canonical) / 2 (Derived) / 3 (Domain)]
|
|
|
|
**Inherits From:** [Parent component, or "—" if canonical]
|
|
|
|
---
|
|
|
|
### Token Dependencies
|
|
|
|
| Token | Semantic Reference | Usage |
|
|
|-------|-------------------|-------|
|
|
| `component-token-1` | `semantic-token-1` | Description |
|
|
| `component-token-2` | `semantic-token-2` | Description |
|
|
|
|
---
|
|
|
|
### Layout
|
|
|
|
- Dimensions
|
|
- Padding
|
|
- Margins
|
|
- Border radius
|
|
- Internal structure
|
|
|
|
---
|
|
|
|
### Sizes
|
|
|
|
| Size | Dimensions | Usage |
|
|
|------|-----------|-------|
|
|
| Small | [dimensions] | [context] |
|
|
| Default | [dimensions] | [context] |
|
|
| Large | [dimensions] | [context] |
|
|
|
|
---
|
|
|
|
### Variants
|
|
|
|
| Variant | Visual | Usage |
|
|
|---------|--------|-------|
|
|
| Variant 1 | [description] | [context] |
|
|
| Variant 2 | [description] | [context] |
|
|
|
|
---
|
|
|
|
### States
|
|
|
|
| State | Visual | Motion |
|
|
|-------|--------|--------|
|
|
| Default | [description] | [animation] |
|
|
| Hover | [description] | [animation] |
|
|
| Focus | [description] | [animation] |
|
|
| Active | [description] | [animation] |
|
|
| Disabled | [description] | [animation] |
|
|
| Loading | [description] | [animation] |
|
|
| Error | [description] | [animation] |
|
|
|
|
---
|
|
|
|
### Keyboard
|
|
|
|
| Key | Action |
|
|
|-----|--------|
|
|
| `Tab` | [behavior] |
|
|
| `Enter` / `Space` | [behavior] |
|
|
| `Escape` | [behavior] |
|
|
| Arrow keys | [behavior] |
|
|
|
|
---
|
|
|
|
### Touch
|
|
|
|
- Touch target size
|
|
- Active state behavior
|
|
- Gesture support (if any)
|
|
|
|
---
|
|
|
|
### Accessibility
|
|
|
|
- ARIA roles
|
|
- ARIA states
|
|
- Screen reader behavior
|
|
- Focus management
|
|
|
|
---
|
|
|
|
### Motion
|
|
|
|
| Transition | Animation | Duration | Easing |
|
|
|-----------|-----------|----------|--------|
|
|
| [state change] | [description] | [duration] | [easing] |
|
|
|
|
---
|
|
|
|
### Acceptance Criteria
|
|
|
|
- [ ] Criterion 1
|
|
- [ ] Criterion 2
|
|
- [ ] Criterion 3
|
|
|
|
---
|
|
|
|
### Anti-Patterns
|
|
|
|
- ❌ [What not to do]
|
|
- ❌ [What not to do]
|
|
|
|
---
|
|
|
|
### Related Components
|
|
|
|
- [Component A] — [relationship]
|
|
- [Component B] — [relationship]
|
|
|
|
---
|
|
|
|
### DDR References
|
|
|
|
- DDR-XXX: [Decision rationale]
|