27192dd69f
Frontend redesign in progress: updated styles, layout, and components across all pages to align with new design system. Includes Jira API compliance specs, property tests, and load test script.
37 lines
1.8 KiB
Markdown
37 lines
1.8 KiB
Markdown
# Compliance UI Kit
|
||
|
||
Visual vocabulary for the AEO Compliance view (`CompliancePage.js`).
|
||
|
||
## Files
|
||
- `index.html` — entry point.
|
||
- `CompPrimitives.jsx` — `CompPageHeader`, `CompButton`, `TeamTabs`, `MetricHealthCard`, `VariantPill`, `StatusRibbon`, `MetricBadge`, `SeenBadge`, `DeviceTable`/`DeviceRow`, `ChartCard`, `DefinitionTooltip`, `RollbackDialog`, `RollbackToast`, `CompIcon`.
|
||
- `CompliancePage.jsx` — full-page assembly.
|
||
- `KitDocs.jsx` — Overview · Tokens · Components · Assemblies · Reference.
|
||
|
||
## Identity
|
||
| Surface | Color | Hex |
|
||
|----------------------|--------|-----------|
|
||
| Page title + glow | teal | `#14B8A6` |
|
||
| Active team tab | teal | `#14B8A6` |
|
||
| Upload Report CTA | teal | `#14B8A6` |
|
||
| Selected device row | teal | `#14B8A6` |
|
||
|
||
## Status colors (target adherence)
|
||
| Status | Color | Hex |
|
||
|-------------------------|--------|-----------|
|
||
| Meets/Exceeds Target | green | `#10B981` |
|
||
| Within 15% of Target | amber | `#F59E0B` |
|
||
| Below 15% of Target | red | `#EF4444` |
|
||
|
||
## Category colors (badge tinting)
|
||
red · Vulnerability Management — amber · Access & MFA — purple · Logging & Monitoring — orange · End-of-Life OS / Endpoint Protection — sky · Application Security — slate · Asset Data Quality / Decommissioned
|
||
|
||
## Layout
|
||
Page header → team tabs → metric health row → 3×2 chart grid → device table.
|
||
|
||
## Page-level rules
|
||
1. Status colors are reserved for target adherence; never decorative.
|
||
2. A family's `worstStatus` (lowest-severity variant) drives card border + ribbon — one bad variant turns the whole family red.
|
||
3. Clicking a metric card filters the device table to its IDs; an "× clear filter" button is the only escape hatch shown inline in the section label.
|
||
4. SeenBadge escalates slate (1×) → amber (2–3×) → red (4×+).
|