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:
116
docs/ui/components/score-pill.md
Normal file
116
docs/ui/components/score-pill.md
Normal 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
|
||||
Reference in New Issue
Block a user