refactor(dashboard): adopt Card primitive in DashboardFamilyPulse (§7)
All checks were successful
CI / Unit & Component Tests (pull_request) Successful in 5m38s
CI / OCR Service Tests (pull_request) Successful in 24s
CI / Backend Unit Tests (pull_request) Successful in 5m40s
CI / fail2ban Regex (pull_request) Successful in 47s
CI / Semgrep Security Scan (pull_request) Successful in 23s
CI / Compose Bucket Idempotency (pull_request) Successful in 1m7s
SDD Gate / RTM Check (pull_request) Successful in 18s
SDD Gate / Contract Validate (pull_request) Successful in 29s
SDD Gate / Constitution Impact (pull_request) Successful in 23s

Refs #858
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-16 19:15:44 +02:00
parent 42fde1c17d
commit 4ab50d124a
2 changed files with 15 additions and 9 deletions

View File

@@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import * as m from '$lib/paraglide/messages.js'; import * as m from '$lib/paraglide/messages.js';
import type { DashboardPulseDTO } from '$lib/generated/api'; import type { DashboardPulseDTO } from '$lib/generated/api';
import Card from '$lib/shared/primitives/Card.svelte';
interface Props { interface Props {
pulse: DashboardPulseDTO | null; pulse: DashboardPulseDTO | null;
@@ -10,11 +11,13 @@ const { pulse }: Props = $props();
</script> </script>
{#if pulse !== null} {#if pulse !== null}
<section class="rounded-sm border border-line bg-surface p-5"> <!--
<p class="font-sans text-[11px] font-bold tracking-[.12em] text-ink-3 uppercase"> Card adoption (issue #858): DashboardFamilyPulse is now rendered inside the
{m.pulse_eyebrow()} shared Card primitive so it inherits the 3px mint top accent, semantic tokens,
</p> and the section-caption helper. The caption text is the Paraglide key
m.pulse_eyebrow() — adopter responsibility per the safe-rendering contract.
-->
<Card padding="sm" accent="top" caption={m.pulse_eyebrow()}>
{#if pulse.pages > 0} {#if pulse.pages > 0}
<h2 class="mt-1 font-serif text-[1.375rem] leading-snug text-ink"> <h2 class="mt-1 font-serif text-[1.375rem] leading-snug text-ink">
{m.pulse_headline({ pages: pulse.pages })} {m.pulse_headline({ pages: pulse.pages })}
@@ -66,5 +69,5 @@ const { pulse }: Props = $props();
</span> </span>
</div> </div>
</div> </div>
</section> </Card>
{/if} {/if}

View File

@@ -20,7 +20,8 @@ describe('DashboardFamilyPulse', () => {
it('renders nothing when pulse is null', async () => { it('renders nothing when pulse is null', async () => {
render(DashboardFamilyPulse, { props: { pulse: null } }); render(DashboardFamilyPulse, { props: { pulse: null } });
expect(document.querySelector('section')).toBeNull(); // Component now renders via Card primitive (div, not section)
expect(document.querySelector('[data-testid="card"]')).toBeNull();
}); });
it('renders the eyebrow when pulse is not null', async () => { it('renders the eyebrow when pulse is not null', async () => {
@@ -29,10 +30,12 @@ describe('DashboardFamilyPulse', () => {
await expect.element(page.getByText('Diese Woche')).toBeVisible(); await expect.element(page.getByText('Diese Woche')).toBeVisible();
}); });
it('hides the headline when pages is 0', async () => { it('hides the pulse headline when pages is 0', async () => {
render(DashboardFamilyPulse, { props: { pulse: basePulse({ pages: 0 }) } }); render(DashboardFamilyPulse, { props: { pulse: basePulse({ pages: 0 }) } });
await expect.element(page.getByRole('heading')).not.toBeInTheDocument(); // The Card caption is always rendered as an h2; check the pulse headline (h2 inside Card children)
// specifically by its text content — it should not appear when pages is 0
await expect.element(page.getByText(/Seiten bearbeitet/)).not.toBeInTheDocument();
}); });
it('renders the headline when pages > 0', async () => { it('renders the headline when pages > 0', async () => {