Vulnerability

Import from @workspace/ui-bridge/vulnerability/*.

The input lives on the VulnerabilitySelect page.

VulnerabilityDisplay

A vulnerability as its translated label (default), its four-seat icon, or both. The ink follows the status: green when nobody is vulnerable, red otherwise, muted when unset; tone="inherit" takes the surrounding text color instead. On the icon, the vulnerable seats take the ink and the others stay muted. notation="short" shows the short form; an ancestor carrying data-vulnerability-notation="short" forces it on every label below. undefined reads as UNSET.

import { VulnerabilityDisplay } from '@workspace/ui-bridge/vulnerability/vulnerability-display';

<VulnerabilityDisplay vulnerability="NS" />
<VulnerabilityDisplay vulnerability="ALL" variant="icon" />
<VulnerabilityDisplay vulnerability="NONE" variant="icon+label" notation="short" />
<VulnerabilityDisplay vulnerability={deal.vulnerability} tone="inherit" />

Gallery

Props

VulnerabilityIcon

The bare four-seat svg, with explicit colors. VulnerabilityDisplay wraps it; the table Compass uses it directly on the felt.

import { VulnerabilityIcon } from '@workspace/ui-bridge/vulnerability/vulnerability-icon';

<VulnerabilityIcon vulnerability="EW" vulnerableColor="var(--color-rose-300)" nonVulnerableColor="var(--color-emerald-300)" />

Props