Bernt
558303784a
- RFC-003: Canonical Select Component: - Cognitive Purpose: choose one from predefined list - When to Use/NOT Use: clear boundaries vs Radio Group, Autocomplete, Multi-Select - Interaction Contract: click, arrow keys, type-to-search, escape - Failure Behaviour: empty, required, disabled, async loading, load failure - Accessibility Contract: combobox role, aria-expanded, aria-selected, focus management - AI Contract: when to choose Select vs alternatives - Token Dependencies: 21 tokens (trigger + dropdown + options) - Layout: trigger + dropdown with sections - Sizes (sm/md/lg), Variants (default/ghost/filled), States (10 states) - Keyboard: full navigation (Tab, Arrows, Enter, Escape, Home, End, letter keys) - Touch: 44px option targets, native scroll - Motion: dropdown open/close, option hover/select, chevron rotate - Anti-Patterns: < 4 options, > 50 options, no placeholder, clipping - Related Components: Input, Radio Group, Checkbox Group, Multi-Select, Autocomplete - DDR References: DDR-001 through DDR-004 - RFC-004: Canonical Card Component: - Cognitive Purpose: group related information into bounded unit - When to Use/NOT Use: clear boundaries vs List Item, Modal, Page - Interaction Contract: click/hover/focus for actionable, none for static - Failure Behaviour: overflow, image load fail, action fail, loading, empty - Accessibility Contract: role, focus, label, keyboard activation - AI Contract: when to choose Card vs alternatives - Token Dependencies: 12 tokens (bg, border, radius, padding, shadows, text) - Layout: Header + Body + Footer with optional divider - Sizes (sm/md/lg/fluid), Variants (default/elevated/outlined/interactive) - States (7 states), Keyboard, Touch, Motion (with reduced motion) - Anti-Patterns: nested cards, excessive padding, no distinction, event collision - Related Components: Modal, Panel, List Item, Tile, KPI Card, Dataset Card - DDR References: DDR-001, DDR-002, DDR-003, DDR-005 - COMPLIANCE_MATRIX.md: Select and Card updated to 33% Rationale: Validate RFC-001 template works for selection and container component types. Three different component types (action, selection, container) now tested. Mallen håller.
102 lines
3.3 KiB
Markdown
102 lines
3.3 KiB
Markdown
# COMPLIANCE MATRIX
|
|
|
|
**Component Readiness Tracking**
|
|
|
|
| | |
|
|
|---|---|
|
|
| **Version** | 1.0 |
|
|
| **Status** | DRAFT — Updated as components are specified |
|
|
|
|
---
|
|
|
|
## Legend
|
|
|
|
| Symbol | Meaning |
|
|
|--------|---------|
|
|
| ✅ | Complete |
|
|
| 🟡 | Partial / In Progress |
|
|
| ⏳ | Not Started |
|
|
| ❌ | Not Applicable |
|
|
|
|
## Tier 1 — Canonical Components
|
|
|
|
| Component | Governance | Tokens | Motion | Accessibility | AI | QA | Overall |
|
|
|-----------|------------|--------|--------|---------------|-----|-----|---------|
|
|
| Button | ✅ | ✅ | ✅ | 🟡 | ✅ | ⏳ | 82% |
|
|
| Input | 🟡 | 🟡 | 🟡 | 🟡 | ✅ | ⏳ | 33% |
|
|
| Select | 🟡 | 🟡 | 🟡 | 🟡 | ✅ | ⏳ | 33% |
|
|
| Card | 🟡 | 🟡 | 🟡 | 🟡 | ✅ | ⏳ | 33% |
|
|
| Modal | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Navigation | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Table | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Data Grid | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Search | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Map Panel | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
|
|
## Tier 2 — Derived Components
|
|
|
|
| Component | Governance | Tokens | Motion | Accessibility | AI | QA | Overall |
|
|
|-----------|------------|--------|--------|---------------|-----|-----|---------|
|
|
| Badge | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Alert | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Toast | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Tooltip | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Accordion | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Tabs | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Breadcrumb | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Pagination | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Empty State | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Skeleton | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
|
|
## Tier 3 — Domain Components
|
|
|
|
| Component | Governance | Tokens | Motion | Accessibility | AI | QA | Overall |
|
|
|-----------|------------|--------|--------|---------------|-----|-----|---------|
|
|
| KPI Card | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Map Overlay Panel | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Layer Selector | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Mission Status | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Dataset Card | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Geospatial Inspector | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Asset Summary | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Coordinate Picker | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
| Timeline Panel | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
|
|
|
## Foundation Documents
|
|
|
|
| Document | Status | Completeness |
|
|
|----------|--------|--------------|
|
|
| Design Constitution | ✅ | 100% |
|
|
| Token Philosophy | ✅ | 100% |
|
|
| Design Specification | 🟡 | 70% |
|
|
| Component Template | ✅ | 100% |
|
|
| Component Decision Tree | ✅ | 100% |
|
|
| AI Design Principles | ✅ | 100% |
|
|
| Design Anti-Patterns | ✅ | 100% |
|
|
| Glossary | ✅ | 100% |
|
|
| Release Definition | 🟡 | 80% |
|
|
|
|
---
|
|
|
|
## How to Update
|
|
|
|
When a component is specified, update this matrix:
|
|
|
|
1. Mark completed sections as ✅
|
|
2. Calculate overall percentage
|
|
3. Update this file in same PR as component spec
|
|
|
|
---
|
|
|
|
## ÄNDRINGSHISTORIA
|
|
|
|
| Version | Datum | Beskrivning |
|
|
|---------|-------|-------------|
|
|
| 1.0 | 2026-07-02 | Initial compliance matrix with all components and foundation documents |
|
|
|
|
---
|
|
|
|
## STATUS
|
|
|
|
**DRAFT — Updated as work progresses**
|