Swimlane Row Header Components Test
Testing all new Blade components before integration
1. Icon Components
ThermometerIcon (Priority)
Critical (1):
High (2):
Medium (3):
Low (4):
Lowest (5):
With labels:
TShirtIcon (Effort)
UserAvatar (with consistent color generation)
Marcus Wells (SM):
Sarah Connor (MD):
Unassigned (MD):
Bob Johnson (LG):
Note: Each username gets a consistent color. Same user = same color every time.
TimeIndicator
Due Soon:
Overdue:
Stale:
Supporting Icons
Milestone 🎯:
Bug 🐛:
Feature ✨:
Sprint 🏃:
2. MicroProgressBar Component
Status Breakdown (50% New, 30% In Progress, 20% Done)
Different Distribution (70% New, 20% In Progress, 10% Done)
All Statuses
3. CountBadge Color Variations
Small Count (1-9) - Light Olive
Medium Count (10-99) - Medium Olive
Large Count (100+) - Dark Olive
4. Complete SwimLaneRowHeader Components (Matching Design)
EXPANDED vs COLLAPSED States
Expanded (shows progress bar)
Collapsed (minimal)
Collapsed (USER groupby)
Collapsed (EFFORT groupby)
GROUP BY: EFFORT
GROUP BY: MILESTONE
GROUP BY: SPRINT
💡 Design Notes:
Two states only:
Expanded (shows progress bar) and Collapsed (hides progress bar)
Label text always visible
in both states - only progress bar toggles
Count badge styling differs by state:
Expanded: Olive green background badge
Collapsed: Plain number (no background)
Chevron rotates: ▼ (expanded) → ► (collapsed)
Better spacing and alignment in both states
Time indicators (⏳⏰💤) inline with label row
Milestone dates show on hover only (not displayed on card)
Icons match design: 🎯 for milestones, 🏃 for sprints, 👕 for effort
Smooth transition animation between states (0.2s ease)
5. Design Tokens (CSS Variables)
Priority Colors
Critical
High
Medium
Low
Lowest