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
2025-12-26 01:01:35 +02:00
parent ed3079543c
commit 17613acf57
45 changed files with 9418 additions and 64 deletions

View File

@@ -0,0 +1,116 @@
# ScorePillComponent
Compact score display component with bucket-based color coding.
## Overview
The `ScorePillComponent` displays a 0-100 evidence-weighted score with automatic color coding based on priority bucket thresholds.
## Selector
```html
<stella-score-pill />
```
## Inputs
| Input | Type | Default | Description |
|-------|------|---------|-------------|
| `score` | `number` | `0` | Evidence-weighted score (0-100) |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size variant |
| `showTooltip` | `boolean` | `true` | Show bucket tooltip on hover |
| `interactive` | `boolean` | `true` | Enable hover/click interactions |
## Outputs
| Output | Type | Description |
|--------|------|-------------|
| `scoreClick` | `EventEmitter<number>` | Emits when the pill is clicked |
## Size Variants
| Size | Dimensions | Font Size | Use Case |
|------|------------|-----------|----------|
| `sm` | 24x20px | 12px | Tables, compact lists |
| `md` | 32x24px | 14px | Standard UI elements |
| `lg` | 40x28px | 16px | Dashboard emphasis |
## Color Mapping
The pill automatically applies colors based on score:
```typescript
// Score -> Bucket -> Color
score >= 90 // ActNow -> #DC2626 (red)
score >= 70 // ScheduleNext -> #D97706 (amber)
score >= 40 // Investigate -> #2563EB (blue)
score < 40 // Watchlist -> #6B7280 (gray)
```
## Usage Examples
### Basic Usage
```html
<stella-score-pill [score]="78" />
```
### In a Table
```html
<td>
<stella-score-pill [score]="finding.score" size="sm" />
</td>
```
### All Sizes
```html
<stella-score-pill [score]="78" size="sm" />
<stella-score-pill [score]="78" size="md" />
<stella-score-pill [score]="78" size="lg" />
```
### Non-Interactive
```html
<stella-score-pill [score]="78" [interactive]="false" />
```
### With Click Handler
```html
<stella-score-pill
[score]="78"
(scoreClick)="openScoreDetails($event)"
/>
```
```typescript
openScoreDetails(score: number): void {
// Handle click - typically opens breakdown popover
}
```
## Accessibility
- Uses `role="status"` for screen reader announcements
- `aria-label` includes bucket name: "Score 78: Schedule Next"
- Focusable when interactive
- Supports keyboard activation (Enter/Space)
## Styling
The component uses Shadow DOM encapsulation. Override styles using CSS custom properties:
```css
stella-score-pill {
--score-pill-border-radius: 4px;
--score-pill-font-weight: 600;
}
```
## Related Components
- [ScoreBreakdownPopover](./score-breakdown-popover.md) - Detailed breakdown on click
- [ScoreBadge](./score-badge.md) - Evidence flag badges