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.
2025-12-26 01:01:35 +02:00
parent ed3079543c
commit 17613acf57
45 changed files with 9418 additions and 64 deletions
--- a/docs/ui/components/score-breakdown-popover.md
+++ b/docs/ui/components/score-breakdown-popover.md
@@ -0,0 +1,172 @@
+# ScoreBreakdownPopoverComponent
+
+Detailed score breakdown popover showing all evidence dimensions, flags, and explanations.
+
+## Overview
+
+The `ScoreBreakdownPopoverComponent` displays a comprehensive breakdown of an evidence-weighted score, including dimension bars, active flags, guardrails, and human-readable explanations.
+
+## Selector
+
+```html
+<stella-score-breakdown-popover />
+```
+
+## Inputs
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `scoreResult` | `EvidenceWeightedScoreResult` | required | Full score result object |
+| `position` | `PopoverPosition` | `'bottom'` | Popover placement |
+
+## Position Options
+
+```typescript
+type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
+```
+
+## Score Result Structure
+
+```typescript
+interface EvidenceWeightedScoreResult {
+  findingId: string;
+  score: number;           // 0-100
+  bucket: ScoreBucket;     // 'ActNow' | 'ScheduleNext' | 'Investigate' | 'Watchlist'
+  inputs: {
+    rch: number;           // Reachability (0-1)
+    rts: number;           // Runtime signals (0-1)
+    bkp: number;           // Backport availability (0-1)
+    xpl: number;           // Exploitability (0-1)
+    src: number;           // Source trust (0-1)
+    mit: number;           // Mitigations (0-1)
+  };
+  weights: {
+    rch: number;
+    rts: number;
+    bkp: number;
+    xpl: number;
+    src: number;
+    mit: number;
+  };
+  flags: ScoreFlag[];
+  explanations: string[];
+  caps: {
+    speculativeCap: boolean;
+    notAffectedCap: boolean;
+    runtimeFloor: boolean;
+  };
+  policyDigest: string;
+  calculatedAt: string;    // ISO 8601
+}
+```
+
+## Dimension Labels
+
+| Key | Label | Description |
+|-----|-------|-------------|
+| `rch` | Reachability | Path to vulnerable code exists |
+| `rts` | Runtime Signals | Active usage detected in production |
+| `bkp` | Backport | Fix backported to current version |
+| `xpl` | Exploitability | EPSS probability, known exploits |
+| `src` | Source Trust | Advisory source reliability |
+| `mit` | Mitigations | Active mitigations reduce risk |
+
+## Usage Examples
+
+### Basic Usage
+
+```html
+<stella-score-breakdown-popover [scoreResult]="scoreResult" />
+```
+
+### With Position
+
+```html
+<stella-score-breakdown-popover
+  [scoreResult]="scoreResult"
+  position="right"
+/>
+```
+
+### Triggered from Score Pill
+
+```html
+<div class="score-container">
+  <stella-score-pill
+    [score]="score"
+    (scoreClick)="showPopover = true"
+  />
+
+  @if (showPopover) {
+    <stella-score-breakdown-popover
+      [scoreResult]="scoreResult"
+      (close)="showPopover = false"
+    />
+  }
+</div>
+```
+
+### In a Dialog
+
+```typescript
+@Component({
+  template: `
+    <div class="dialog-content">
+      <h2>Score Details</h2>
+      <stella-score-breakdown-popover
+        [scoreResult]="scoreResult"
+      />
+    </div>
+  `
+})
+export class ScoreDialogComponent {
+  scoreResult = input.required<EvidenceWeightedScoreResult>();
+}
+```
+
+## Popover Sections
+
+### 1. Header
+Displays the overall score with bucket label and color.
+
+### 2. Dimensions Chart
+Horizontal bar chart showing all six dimensions with their normalized values (0-100%).
+
+### 3. Flags Section
+Active flags displayed as badges. See [ScoreBadge](./score-badge.md) for flag types.
+
+### 4. Guardrails Section
+Applied caps and floors:
+- **Speculative Cap**: Score limited due to unconfirmed evidence
+- **Not Affected Cap**: Score reduced due to vendor VEX
+- **Runtime Floor**: Score elevated due to active runtime signals
+
+### 5. Explanations
+Human-readable explanations of factors affecting the score.
+
+### 6. Footer
+- Policy digest (truncated SHA-256)
+- Calculation timestamp
+
+## Accessibility
+
+- Uses `role="dialog"` with `aria-labelledby`
+- Focus trapped within popover when open
+- Escape key closes popover
+- Click outside closes popover
+- Screen reader announces dimension values
+
+## Styling
+
+```css
+stella-score-breakdown-popover {
+  --popover-max-width: 360px;
+  --popover-background: white;
+  --popover-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+}
+```
+
+## Related Components
+
+- [ScorePill](./score-pill.md) - Compact score display
+- [ScoreBadge](./score-badge.md) - Evidence flag badges