feat: add bulk triage view component and related stories
- Exported BulkTriageViewComponent and its related types from findings module. - Created a new accessibility test suite for score components using axe-core. - Introduced design tokens for score components to standardize styling. - Enhanced score breakdown popover for mobile responsiveness with drag handle. - Added date range selector functionality to score history chart component. - Implemented unit tests for date range selector in score history chart. - Created Storybook stories for bulk triage view and score history chart with date range selector.
This commit is contained in:
113
docs/ui/components/README.md
Normal file
113
docs/ui/components/README.md
Normal file
@@ -0,0 +1,113 @@
|
||||
# UI Components
|
||||
|
||||
This directory contains documentation for the StellaOps Angular UI components.
|
||||
|
||||
## Evidence-Weighted Score (EWS) Components
|
||||
|
||||
The EWS component suite provides visual representations of vulnerability scores based on evidence-weighted analysis.
|
||||
|
||||
### Core Components
|
||||
|
||||
| Component | Purpose | Location |
|
||||
|-----------|---------|----------|
|
||||
| [ScorePill](./score-pill.md) | Compact score display with bucket coloring | `shared/components/score/` |
|
||||
| [ScoreBreakdownPopover](./score-breakdown-popover.md) | Detailed score breakdown with dimensions | `shared/components/score/` |
|
||||
| [ScoreBadge](./score-badge.md) | Evidence flag badges (live-signal, proven-path, etc.) | `shared/components/score/` |
|
||||
| [ScoreHistoryChart](./score-history-chart.md) | Timeline visualization of score changes | `shared/components/score/` |
|
||||
|
||||
### Feature Components
|
||||
|
||||
| Component | Purpose | Location |
|
||||
|-----------|---------|----------|
|
||||
| [FindingsList](./findings-list.md) | Findings table with EWS integration | `features/findings/` |
|
||||
| [BulkTriageView](./bulk-triage-view.md) | Bulk triage interface with bucket summaries | `features/findings/` |
|
||||
|
||||
## Score Buckets
|
||||
|
||||
All EWS components use a consistent bucket system:
|
||||
|
||||
| Bucket | Score Range | Color | Priority |
|
||||
|--------|-------------|-------|----------|
|
||||
| Act Now | 90-100 | Red (`#DC2626`) | Critical - Immediate action required |
|
||||
| Schedule Next | 70-89 | Amber (`#D97706`) | High - Schedule for next sprint |
|
||||
| Investigate | 40-69 | Blue (`#2563EB`) | Medium - Investigate when possible |
|
||||
| Watchlist | 0-39 | Gray (`#6B7280`) | Low - Monitor for changes |
|
||||
|
||||
## Evidence Flags
|
||||
|
||||
Findings can have special flags indicating evidence quality:
|
||||
|
||||
| Flag | Icon | Color | Description |
|
||||
|------|------|-------|-------------|
|
||||
| `live-signal` | Signal wave | Green | Active runtime signals detected |
|
||||
| `proven-path` | Checkmark | Blue | Verified reachability path confirmed |
|
||||
| `vendor-na` | Strikethrough | Gray | Vendor marked as not affected |
|
||||
| `speculative` | Question mark | Orange | Evidence is speculative/unconfirmed |
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Import Components
|
||||
|
||||
```typescript
|
||||
// Score components
|
||||
import {
|
||||
ScorePillComponent,
|
||||
ScoreBreakdownPopoverComponent,
|
||||
ScoreBadgeComponent,
|
||||
ScoreHistoryChartComponent,
|
||||
} from '@app/shared/components/score';
|
||||
|
||||
// Findings components
|
||||
import {
|
||||
FindingsListComponent,
|
||||
BulkTriageViewComponent,
|
||||
} from '@app/features/findings';
|
||||
```
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<!-- Display a score pill -->
|
||||
<stella-score-pill [score]="78" size="md" />
|
||||
|
||||
<!-- Display score badges -->
|
||||
<stella-score-badge type="live-signal" />
|
||||
<stella-score-badge type="proven-path" />
|
||||
|
||||
<!-- Full findings list with scoring -->
|
||||
<app-findings-list
|
||||
[findings]="findings"
|
||||
[autoLoadScores]="true"
|
||||
(findingSelect)="onFindingSelect($event)"
|
||||
/>
|
||||
```
|
||||
|
||||
## Storybook
|
||||
|
||||
Interactive examples and documentation are available in Storybook:
|
||||
|
||||
```bash
|
||||
cd src/Web/StellaOps.Web
|
||||
npm run storybook
|
||||
```
|
||||
|
||||
Navigate to:
|
||||
- `Score/ScorePill` - Score pill variants
|
||||
- `Score/ScoreBreakdownPopover` - Breakdown popover examples
|
||||
- `Score/ScoreBadge` - Evidence flag badges
|
||||
- `Score/ScoreHistoryChart` - History chart variants
|
||||
- `Findings/FindingsList` - Findings list with scoring
|
||||
- `Findings/BulkTriageView` - Bulk triage interface
|
||||
|
||||
## Design Tokens
|
||||
|
||||
Score colors are defined as CSS custom properties. See [design-tokens.md](./design-tokens.md) for the full token reference.
|
||||
|
||||
## Accessibility
|
||||
|
||||
All components follow WCAG 2.1 AA guidelines:
|
||||
- Proper ARIA labels and roles
|
||||
- Keyboard navigation support
|
||||
- Focus management
|
||||
- Color contrast ratios meet AA standards
|
||||
- Screen reader announcements for dynamic content
|
||||
Reference in New Issue
Block a user