feat(web): add StatusPill semantic-color status indicator

Single-prop component mapping LidarrRequestStatus to voice-rule labels and semantic tones (warning/info/success/error). Used by /requests and /admin/requests in subsequent tasks.
2026-04-29 22:08:09 -04:00
parent dcb49e9687
commit d27b381250
2 changed files with 79 additions and 0 deletions
@@ -0,0 +1,25 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import StatusPill from './StatusPill.svelte';
+
+// Voice-rule labels and semantic tones per spec §6 / project_design_system.md.
+// Each row is the contract: input status -> rendered label + data-tone attr.
+const CASES = [
+  { status: 'pending',   label: 'Awaiting review',         tone: 'warning' },
+  { status: 'approved',  label: 'Approved · downloading',  tone: 'info'    },
+  { status: 'completed', label: 'Kept',                    tone: 'success' },
+  { status: 'rejected',  label: 'Set aside',               tone: 'error'   },
+  { status: 'failed',    label: "Couldn't add",            tone: 'error'   },
+] as const;
+
+describe('StatusPill', () => {
+  for (const { status, label, tone } of CASES) {
+    test(`${status} renders "${label}" with tone=${tone}`, () => {
+      render(StatusPill, { props: { status } });
+      const pill = screen.getByText(label);
+      expect(pill).toBeInTheDocument();
+      expect(pill.getAttribute('data-tone')).toBe(tone);
+      expect(pill.getAttribute('data-status')).toBe(status);
+    });
+  }
+});