Files

StellaOps Bot 17613acf57 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

2.5 KiB

Raw Blame History

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

<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:

// 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

<stella-score-pill [score]="78" />

In a Table

<td>
  <stella-score-pill [score]="finding.score" size="sm" />
</td>

All Sizes

<stella-score-pill [score]="78" size="sm" />
<stella-score-pill [score]="78" size="md" />
<stella-score-pill [score]="78" size="lg" />

Non-Interactive

<stella-score-pill [score]="78" [interactive]="false" />

With Click Handler

<stella-score-pill
  [score]="78"
  (scoreClick)="openScoreDetails($event)"
/>

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:

stella-score-pill {
  --score-pill-border-radius: 4px;
  --score-pill-font-weight: 600;
}

ScoreBreakdownPopover - Detailed breakdown on click
ScoreBadge - Evidence flag badges

2.5 KiB Raw Blame History