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:
StellaOps Bot
166
docs/ui/components/score-badge.md
Normal file
166
docs/ui/components/score-badge.md
Normal file
@@ -0,0 +1,166 @@
|
||||
# ScoreBadgeComponent
|
||||
|
||||
Score badge component displaying evidence flags with icons and labels.
|
||||
|
||||
## Overview
|
||||
|
||||
The `ScoreBadgeComponent` displays evidence quality flags that provide context about score reliability and data sources.
|
||||
|
||||
## Selector
|
||||
|
||||
```html
|
||||
<stella-score-badge />
|
||||
```
|
||||
|
||||
## Inputs
|
||||
|
||||
| Input | Type | Default | Description |
|
||||
|-------|------|---------|-------------|
|
||||
| `type` | `ScoreFlag` | required | The flag type to display |
|
||||
| `size` | `'sm' \| 'md'` | `'md'` | Size variant |
|
||||
| `showTooltip` | `boolean` | `true` | Show description on hover |
|
||||
| `showLabel` | `boolean` | `true` | Show label text (false = icon only) |
|
||||
|
||||
## Flag Types
|
||||
|
||||
| Type | Icon | Color | Description |
|
||||
|------|------|-------|-------------|
|
||||
| `live-signal` | Signal wave | Green (`#16A34A`) | Active runtime signals detected from deployed environments |
|
||||
| `proven-path` | Checkmark | Blue (`#2563EB`) | Verified reachability path to vulnerable code |
|
||||
| `vendor-na` | Strikethrough | Gray (`#6B7280`) | Vendor has marked as not affected |
|
||||
| `speculative` | Question mark | Orange (`#D97706`) | Evidence is speculative or unconfirmed |
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<stella-score-badge type="live-signal" />
|
||||
```
|
||||
|
||||
### All Flag Types
|
||||
|
||||
```html
|
||||
<stella-score-badge type="live-signal" />
|
||||
<stella-score-badge type="proven-path" />
|
||||
<stella-score-badge type="vendor-na" />
|
||||
<stella-score-badge type="speculative" />
|
||||
```
|
||||
|
||||
### Size Variants
|
||||
|
||||
```html
|
||||
<stella-score-badge type="proven-path" size="sm" />
|
||||
<stella-score-badge type="proven-path" size="md" />
|
||||
```
|
||||
|
||||
### Icon-Only Mode
|
||||
|
||||
```html
|
||||
<stella-score-badge type="live-signal" [showLabel]="false" />
|
||||
```
|
||||
|
||||
### With Score Pill
|
||||
|
||||
```html
|
||||
<div class="score-display">
|
||||
<stella-score-pill [score]="92" />
|
||||
<div class="flags">
|
||||
<stella-score-badge type="live-signal" size="sm" />
|
||||
<stella-score-badge type="proven-path" size="sm" />
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Rendering from Flags Array
|
||||
|
||||
```html
|
||||
@for (flag of scoreResult.flags; track flag) {
|
||||
<stella-score-badge [type]="flag" size="sm" />
|
||||
}
|
||||
```
|
||||
|
||||
### In a Table
|
||||
|
||||
```html
|
||||
<td class="flags-column">
|
||||
@for (flag of finding.score?.flags; track flag) {
|
||||
<stella-score-badge
|
||||
[type]="flag"
|
||||
size="sm"
|
||||
[showLabel]="false"
|
||||
/>
|
||||
}
|
||||
</td>
|
||||
```
|
||||
|
||||
## Flag Significance
|
||||
|
||||
### live-signal (Green - High Confidence)
|
||||
Indicates the vulnerability affects code that is actively being executed in production. This is the highest confidence indicator and typically elevates priority.
|
||||
|
||||
**Sources:**
|
||||
- Runtime telemetry from deployed containers
|
||||
- Function call traces
|
||||
- Code coverage data from production
|
||||
|
||||
### proven-path (Blue - Confirmed)
|
||||
A verified call path from application entry points to the vulnerable function has been confirmed through static or dynamic analysis.
|
||||
|
||||
**Sources:**
|
||||
- Static reachability analysis
|
||||
- Dynamic call graph analysis
|
||||
- Fuzzing results
|
||||
|
||||
### vendor-na (Gray - Vendor Override)
|
||||
The software vendor has issued a VEX statement indicating this vulnerability does not affect their product configuration or version.
|
||||
|
||||
**Sources:**
|
||||
- Vendor VEX documents
|
||||
- CSAF advisories
|
||||
- Distro security teams
|
||||
|
||||
### speculative (Orange - Unconfirmed)
|
||||
The evidence for this vulnerability is speculative or based on incomplete analysis. Score caps are typically applied.
|
||||
|
||||
**Sources:**
|
||||
- Incomplete static analysis
|
||||
- Heuristic-based detection
|
||||
- Unverified reports
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Uses `role="img"` with descriptive `aria-label`
|
||||
- Tooltip shown on focus for keyboard users
|
||||
- Icon colors meet WCAG AA contrast requirements
|
||||
- Screen reader announces full flag description
|
||||
|
||||
## Styling
|
||||
|
||||
```css
|
||||
stella-score-badge {
|
||||
--badge-font-size: 12px;
|
||||
--badge-padding: 4px 8px;
|
||||
--badge-border-radius: 4px;
|
||||
}
|
||||
```
|
||||
|
||||
### Live Signal Animation
|
||||
|
||||
The live-signal badge features a subtle pulse animation to draw attention:
|
||||
|
||||
```css
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.live-signal-badge {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
```
|
||||
|
||||
## Related Components
|
||||
|
||||
- [ScorePill](./score-pill.md) - Compact score display
|
||||
- [ScoreBreakdownPopover](./score-breakdown-popover.md) - Full breakdown with flags section
|
||||
Reference in New Issue
Block a user