Cycles
Design · c22

Violations Table

archivedcreated 2026-09-11· last activity 2026-09-11

Why

PolicyCard's default slot (c19) was only ever used for a violations table — it wasn't a generic composition point. Promoting the table to a standalone component and switching to a prop-based API keeps the summary logic contained within PolicyCard while making the table reusable on the full security policy detail page.

Objective

Create SecurityViolationsTable as a standalone layer component and replace PolicyCard's default slot with a violationSamples prop.

Scope

  • Layer: New security/ViolationsTable.vue, modified security/PolicyCard.vue
  • Design site: Updated PolicyCard demo, new ViolationsTable demo, registry entries

Key Changes

  • SecurityViolationsTable — standalone sortable table (Source, Dataflow, Destination, Violation, Time) using UxTableList + SecurityDataFlow
  • SecurityPolicyCard — new violationSamples prop; when non-empty, renders ViolationsTable in adjacent panel with "Violation Samples X of Y" footer and Remediate button
  • Slot removed — prop is the API now
  • Backward compatible — no violationSamples = same card render as before

Outcome

ViolationsTable serves double duty: PolicyCard uses it internally for summary view, security policy detail page can use it directly for the full dataset.

Visual record

3 captures — heroes, page slices, and full-page renders. Click to view.

c22 hero
c22 slice
c22 full

In the archive

Qpoint Brand Style Guide