feat(shared): add Card primitive — top/left/none accent variants, var(--c-accent) token (§7)
Refs #858 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
84
frontend/src/lib/shared/primitives/Card.svelte
Normal file
84
frontend/src/lib/shared/primitives/Card.svelte
Normal file
@@ -0,0 +1,84 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* Card — shared archival card primitive (Mappe redesign §7).
|
||||
*
|
||||
* Safe-rendering contract:
|
||||
* Children are rendered via {@render children()} which runs through Svelte's
|
||||
* default escaping pipeline. {@html} is NEVER used in this component. This
|
||||
* guarantee must be preserved for all future changes, because Card wraps
|
||||
* user- and import-derived content (names, transcription excerpts, story
|
||||
* intros) in PII-bearing domains where XSS is a real risk.
|
||||
*
|
||||
* Accent is decorative only (WCAG 1.4.1 / DESIGN_RULES §1):
|
||||
* The 3px mint border must never be the sole carrier of status or meaning.
|
||||
* Any status meaning must come from a StatusDot + label, not the border color.
|
||||
*
|
||||
* Dark-mode:
|
||||
* Accent is driven exclusively by var(--c-accent). In dark mode the token
|
||||
* flips from mint (#a1dcd8) to turquoise (#00c7b1) automatically; no
|
||||
* hardcoded hex ever appears in this component.
|
||||
*/
|
||||
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
type AccentVariant = 'top' | 'left' | 'none';
|
||||
type PaddingVariant = 'sm' | 'md';
|
||||
|
||||
const VALID_ACCENTS: AccentVariant[] = ['top', 'left', 'none'];
|
||||
|
||||
let {
|
||||
accent = 'top',
|
||||
padding = 'md',
|
||||
caption,
|
||||
children
|
||||
}: {
|
||||
accent?: AccentVariant;
|
||||
padding?: PaddingVariant;
|
||||
caption?: string;
|
||||
children?: Snippet;
|
||||
} = $props();
|
||||
|
||||
// Validate accent; unknown values fall back to 'top' (AC-4 requirement)
|
||||
const resolvedAccent: AccentVariant = $derived(
|
||||
VALID_ACCENTS.includes(accent as AccentVariant) ? (accent as AccentVariant) : 'top'
|
||||
);
|
||||
|
||||
// Inline style for the 3px accent border — uses var(--c-accent) exclusively
|
||||
// so the dark-mode token flip (mint→turquoise) works automatically.
|
||||
const accentStyle: string = $derived(
|
||||
resolvedAccent === 'top'
|
||||
? 'border-top: 3px solid var(--c-accent);'
|
||||
: resolvedAccent === 'left'
|
||||
? 'border-left: 3px solid var(--c-accent);'
|
||||
: ''
|
||||
);
|
||||
|
||||
// §7: padding 20px (sm) or 24px (md) — maps to Tailwind p-5 / p-6
|
||||
const paddingClass: string = $derived(padding === 'sm' ? 'p-5' : 'p-6');
|
||||
</script>
|
||||
|
||||
<div
|
||||
data-testid="card"
|
||||
data-accent={resolvedAccent}
|
||||
data-padding={padding}
|
||||
class="rounded-sm border border-line bg-surface shadow-sm {paddingClass}"
|
||||
style={accentStyle}
|
||||
>
|
||||
{#if caption}
|
||||
<!--
|
||||
Section-caption helper: Montserrat 12px / 700 / .12em / UPPERCASE / text-ink-3.
|
||||
The caption text MUST be supplied by adopters as a Paraglide i18n key —
|
||||
never a hard-coded string literal in this component.
|
||||
-->
|
||||
<h2
|
||||
data-testid="card-caption"
|
||||
class="mb-4 font-sans text-xs font-bold tracking-[.12em] text-ink-3 uppercase"
|
||||
>
|
||||
{caption}
|
||||
</h2>
|
||||
{/if}
|
||||
|
||||
{#if children}
|
||||
{@render children()}
|
||||
{/if}
|
||||
</div>
|
||||
199
frontend/src/lib/shared/primitives/Card.svelte.spec.ts
Normal file
199
frontend/src/lib/shared/primitives/Card.svelte.spec.ts
Normal file
@@ -0,0 +1,199 @@
|
||||
/**
|
||||
* Card.svelte.spec.ts
|
||||
*
|
||||
* RED-first: written before Card.svelte exists.
|
||||
* Tests all three accent variants, padding values, radius, section-caption helper,
|
||||
* fallback for invalid accent props, and dark-mode token correctness.
|
||||
*/
|
||||
import { afterEach, describe, expect, it } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { createRawSnippet } from 'svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import Card from './Card.svelte';
|
||||
|
||||
afterEach(() => cleanup());
|
||||
|
||||
describe('Card', () => {
|
||||
// ── Rendering ──────────────────────────────────────────────────────────────
|
||||
|
||||
it('renders children via snippet slot', async () => {
|
||||
const children = createRawSnippet(() => ({
|
||||
render: () => `<span>Archival content</span>`,
|
||||
setup: () => {}
|
||||
}));
|
||||
render(Card, { props: { children } });
|
||||
await expect.element(page.getByText('Archival content')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('has data-testid="card" on the root element', async () => {
|
||||
render(Card);
|
||||
await expect.element(page.getByTestId('card')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// ── Base classes ───────────────────────────────────────────────────────────
|
||||
|
||||
it('has bg-surface token class', async () => {
|
||||
render(Card);
|
||||
const el = document.querySelector('[data-testid="card"]');
|
||||
expect(el?.className).toContain('bg-surface');
|
||||
});
|
||||
|
||||
it('has border-line token class', async () => {
|
||||
render(Card);
|
||||
const el = document.querySelector('[data-testid="card"]');
|
||||
expect(el?.className).toContain('border-line');
|
||||
});
|
||||
|
||||
it('has shadow-sm class', async () => {
|
||||
render(Card);
|
||||
const el = document.querySelector('[data-testid="card"]');
|
||||
expect(el?.className).toContain('shadow-sm');
|
||||
});
|
||||
|
||||
it('has rounded-sm class (2px radius)', async () => {
|
||||
render(Card);
|
||||
const el = document.querySelector('[data-testid="card"]');
|
||||
expect(el?.className).toContain('rounded-sm');
|
||||
});
|
||||
|
||||
// ── Accent: top (default) ─────────────────────────────────────────────────
|
||||
|
||||
it('renders "top" accent variant by default', async () => {
|
||||
render(Card);
|
||||
const el = document.querySelector('[data-testid="card"]') as HTMLElement;
|
||||
expect(el?.dataset.accent).toBe('top');
|
||||
});
|
||||
|
||||
it('applies top accent border-top style via var(--c-accent)', async () => {
|
||||
render(Card, { props: { accent: 'top' } });
|
||||
const el = document.querySelector('[data-testid="card"]') as HTMLElement;
|
||||
const style = el?.getAttribute('style') ?? '';
|
||||
// The top accent is delivered as an inline style using var(--c-accent)
|
||||
expect(style).toContain('var(--c-accent)');
|
||||
expect(style).toContain('border-top');
|
||||
});
|
||||
|
||||
// ── Accent: left ──────────────────────────────────────────────────────────
|
||||
|
||||
it('renders "left" accent variant correctly', async () => {
|
||||
render(Card, { props: { accent: 'left' } });
|
||||
const el = document.querySelector('[data-testid="card"]') as HTMLElement;
|
||||
expect(el?.dataset.accent).toBe('left');
|
||||
});
|
||||
|
||||
it('applies left accent border-left style via var(--c-accent)', async () => {
|
||||
render(Card, { props: { accent: 'left' } });
|
||||
const el = document.querySelector('[data-testid="card"]') as HTMLElement;
|
||||
const style = el?.getAttribute('style') ?? '';
|
||||
expect(style).toContain('var(--c-accent)');
|
||||
expect(style).toContain('border-left');
|
||||
});
|
||||
|
||||
// ── Accent: none ──────────────────────────────────────────────────────────
|
||||
|
||||
it('renders "none" accent variant correctly', async () => {
|
||||
render(Card, { props: { accent: 'none' } });
|
||||
const el = document.querySelector('[data-testid="card"]') as HTMLElement;
|
||||
expect(el?.dataset.accent).toBe('none');
|
||||
});
|
||||
|
||||
it('does NOT apply accent inline style when accent="none"', async () => {
|
||||
render(Card, { props: { accent: 'none' } });
|
||||
const el = document.querySelector('[data-testid="card"]') as HTMLElement;
|
||||
const style = el?.getAttribute('style') ?? '';
|
||||
// No border-top or border-left with var(--c-accent) when accent is none
|
||||
expect(style).not.toContain('var(--c-accent)');
|
||||
});
|
||||
|
||||
// ── Fallback for invalid accent ────────────────────────────────────────────
|
||||
|
||||
it('falls back to "top" for an unknown accent value', async () => {
|
||||
// @ts-expect-error — intentionally passing invalid prop to test runtime fallback
|
||||
render(Card, { props: { accent: 'invalid-value' } });
|
||||
const el = document.querySelector('[data-testid="card"]') as HTMLElement;
|
||||
expect(el?.dataset.accent).toBe('top');
|
||||
});
|
||||
|
||||
// ── Padding ───────────────────────────────────────────────────────────────
|
||||
|
||||
it('defaults to padding="md" (24px)', async () => {
|
||||
render(Card);
|
||||
const el = document.querySelector('[data-testid="card"]') as HTMLElement;
|
||||
expect(el?.dataset.padding).toBe('md');
|
||||
});
|
||||
|
||||
it('applies p-6 (24px) class for padding="md"', async () => {
|
||||
render(Card, { props: { padding: 'md' } });
|
||||
const el = document.querySelector('[data-testid="card"]') as HTMLElement;
|
||||
expect(el?.className).toContain('p-6');
|
||||
});
|
||||
|
||||
it('applies p-5 (20px) class for padding="sm"', async () => {
|
||||
render(Card, { props: { padding: 'sm' } });
|
||||
const el = document.querySelector('[data-testid="card"]') as HTMLElement;
|
||||
expect(el?.className).toContain('p-5');
|
||||
});
|
||||
|
||||
// ── Section-caption helper ─────────────────────────────────────────────────
|
||||
|
||||
it('does NOT render a caption element when caption prop is absent', async () => {
|
||||
render(Card);
|
||||
const caption = document.querySelector('[data-testid="card-caption"]');
|
||||
expect(caption).toBeNull();
|
||||
});
|
||||
|
||||
it('renders the section-caption helper when caption text is provided', async () => {
|
||||
render(Card, { props: { caption: 'Briefkorrespondenz' } });
|
||||
await expect.element(page.getByTestId('card-caption')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('caption has font-sans Montserrat token class', async () => {
|
||||
render(Card, { props: { caption: 'Dokumente' } });
|
||||
const el = document.querySelector('[data-testid="card-caption"]') as HTMLElement;
|
||||
expect(el?.className).toContain('font-sans');
|
||||
});
|
||||
|
||||
it('caption has text-ink-3 token class', async () => {
|
||||
render(Card, { props: { caption: 'Personen' } });
|
||||
const el = document.querySelector('[data-testid="card-caption"]') as HTMLElement;
|
||||
expect(el?.className).toContain('text-ink-3');
|
||||
});
|
||||
|
||||
it('caption has uppercase class', async () => {
|
||||
render(Card, { props: { caption: 'Übersicht' } });
|
||||
const el = document.querySelector('[data-testid="card-caption"]') as HTMLElement;
|
||||
expect(el?.className).toContain('uppercase');
|
||||
});
|
||||
|
||||
it('caption has font-bold class (700 weight)', async () => {
|
||||
render(Card, { props: { caption: 'Briefwechsel' } });
|
||||
const el = document.querySelector('[data-testid="card-caption"]') as HTMLElement;
|
||||
expect(el?.className).toContain('font-bold');
|
||||
});
|
||||
|
||||
it('renders caption text content', async () => {
|
||||
render(Card, { props: { caption: 'Zeitstrahl' } });
|
||||
await expect.element(page.getByText('Zeitstrahl')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// ── Dark-mode token contract ───────────────────────────────────────────────
|
||||
|
||||
it('accent uses var(--c-accent) token — never raw hex — for dark-mode compatibility', async () => {
|
||||
render(Card, { props: { accent: 'top' } });
|
||||
const el = document.querySelector('[data-testid="card"]') as HTMLElement;
|
||||
const style = el?.getAttribute('style') ?? '';
|
||||
// Must use the CSS variable, not any hardcoded hex color
|
||||
expect(style).toContain('var(--c-accent)');
|
||||
expect(style).not.toMatch(/#[0-9a-fA-F]{3,6}/);
|
||||
});
|
||||
|
||||
it('no raw Tailwind color class (e.g. green-*, blue-*) on card element', async () => {
|
||||
render(Card, { props: { accent: 'top' } });
|
||||
const el = document.querySelector('[data-testid="card"]') as HTMLElement;
|
||||
const cls = el?.className ?? '';
|
||||
// Check for raw Tailwind palette colors (bg-green-*, border-blue-*, etc.)
|
||||
expect(cls).not.toMatch(
|
||||
/\b(bg|border|text)-(red|green|blue|yellow|purple|pink|indigo|gray|slate|zinc|stone|orange|amber|lime|emerald|teal|cyan|sky|violet|fuchsia|rose)-\d+/
|
||||
);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user