fix(design): code-reviewer polish — dedupe tag-mitre recipe, drop dead boxShadow tokens, cover StatusBadge classes
F1: MitreTechniqueTag inline classes replaced with className="tag-mitre gap-xxs"
(index.css .tag-mitre is now the single source of truth for technique tags).
F2: boxShadow block removed from tailwind.config.ts — no component referenced
shadow-soft-lift / shadow-floating / *-dark; DESIGN.md §Don'ts prohibits shadows.
F4: StatusBadge.test.tsx gains 3 class assertions (bg-warn-soft / bg-primary-soft / bg-cloud)
mirroring SimulationStatusBadge.test.tsx pattern. Test count: 136 → 139.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -22,7 +22,7 @@ export function MitreTechniqueTag({
|
|||||||
<span
|
<span
|
||||||
data-testid="mitre-technique-tag"
|
data-testid="mitre-technique-tag"
|
||||||
title={`${technique.id} — ${technique.name}`}
|
title={`${technique.id} — ${technique.name}`}
|
||||||
className="inline-flex items-center gap-xxs bg-primary-soft text-primary-deep rounded-none border border-primary-soft px-sm py-xxs text-[13px] font-mono"
|
className="tag-mitre gap-xxs"
|
||||||
>
|
>
|
||||||
{technique.id}
|
{technique.id}
|
||||||
{!disabled && (
|
{!disabled && (
|
||||||
|
|||||||
@@ -98,13 +98,6 @@ const config: Config = {
|
|||||||
none: '0px',
|
none: '0px',
|
||||||
pill: '9999px',
|
pill: '9999px',
|
||||||
},
|
},
|
||||||
boxShadow: {
|
|
||||||
// Kept in config for backwards compat but no component should apply them
|
|
||||||
'soft-lift': '0 2px 8px rgba(26, 26, 26, 0.08)',
|
|
||||||
floating: '0 8px 24px rgba(26, 26, 26, 0.12)',
|
|
||||||
'soft-lift-dark': '0 2px 8px rgba(0, 0, 0, 0.32)',
|
|
||||||
'floating-dark': '0 8px 24px rgba(0, 0, 0, 0.48)',
|
|
||||||
},
|
|
||||||
maxWidth: {
|
maxWidth: {
|
||||||
page: '1366px',
|
page: '1366px',
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -9,4 +9,19 @@ describe('StatusBadge', () => {
|
|||||||
expect(badge).toHaveAttribute('data-status', status);
|
expect(badge).toHaveAttribute('data-status', status);
|
||||||
expect(badge.textContent?.toLowerCase()).toBe(status);
|
expect(badge.textContent?.toLowerCase()).toBe(status);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('applies warn-soft surface for planned', () => {
|
||||||
|
render(<StatusBadge status="planned" />);
|
||||||
|
expect(screen.getByTestId('status-badge').className).toContain('bg-warn-soft');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('applies primary-soft surface for active', () => {
|
||||||
|
render(<StatusBadge status="active" />);
|
||||||
|
expect(screen.getByTestId('status-badge').className).toContain('bg-primary-soft');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('applies cloud surface for closed', () => {
|
||||||
|
render(<StatusBadge status="closed" />);
|
||||||
|
expect(screen.getByTestId('status-badge').className).toContain('bg-cloud');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user