Extend stella-quick-links with aside layout + descriptions, standardize usage
Component extension: - Add 'description' field to StellaQuickLink interface - Add 'layout' input: 'inline' (default, horizontal dots) or 'aside' (vertical with descriptions, border-left accent on hover) - Aside layout shows label + description per link in a vertical list - Full CSS for aside variant: hover states, focus ring, icon transitions Dashboard page: - Quick Links moved to aside panel with elevated background and border - All 6 links now have descriptions (e.g., "Deployment timeline and run history") Evidence Overview page: - "Shortcuts" and "Related Domains" sections use layout="aside" - All 10 links now have descriptions AGENTS.md: - New "Quick Links Convention (MANDATORY)" rule: must use stella-quick-links with layout="aside", descriptions, and right-aligned aside placement Remaining pages (8+) to be updated in follow-up commit. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -141,6 +141,31 @@ The Promote button on release detail pages must follow a three-state model:
|
||||
Use `showPromote` (computed, boolean) for visibility and `canPromote` (computed, boolean) for the enabled/disabled state.
|
||||
Use `promoteDisabledReason` (computed, string | null) for the disabled tooltip.
|
||||
|
||||
## Quick Links Convention (MANDATORY)
|
||||
|
||||
All pages that include navigational quick links **must** follow these rules:
|
||||
|
||||
1. Use the `<stella-quick-links>` component — never raw `<nav>` with dot separators
|
||||
2. Pass `layout="aside"` for page-level quick links (use `inline` only for inline/contextual links)
|
||||
3. Include a `description` for every link explaining what the user will find there
|
||||
4. Place quick links in a right-aligned aside panel with a border and elevated background
|
||||
5. Include a `label` (e.g., "Related", "Quick Links", "Shortcuts")
|
||||
|
||||
**Pattern:**
|
||||
```html
|
||||
<aside class="page-aside">
|
||||
<stella-quick-links
|
||||
[links]="quickLinks"
|
||||
label="Quick Links"
|
||||
layout="aside" />
|
||||
</aside>
|
||||
```
|
||||
|
||||
Each link must have `label`, `route`, and `description`:
|
||||
```typescript
|
||||
{ label: 'Security Posture', route: '/security', description: 'Risk posture and advisory freshness' }
|
||||
```
|
||||
|
||||
## Metric / KPI Cards Convention (MANDATORY)
|
||||
|
||||
All metric badges, stat cards, KPI tiles, and summary indicators **must** use `<stella-metric-card>`.
|
||||
|
||||
Reference in New Issue
Block a user