feat(settings): implement /settings hub page (E1) — Kachel-Ansicht #55

Merged
marcel merged 16 commits from feat/issue-49-settings-kachel-hub into master 2026-04-10 17:39:42 +02:00
2 changed files with 3 additions and 17 deletions
Showing only changes of commit 98c8aa9610 - Show all commits

View File

@@ -4,17 +4,14 @@
href: string;
cta: string;
meta?: string;
accent?: boolean;
}
let { title, href, cta, meta, accent = false }: Props = $props();
let { title, href, cta, meta }: Props = $props();
</script>
<a
{href}
data-accent={accent ? 'true' : undefined}
class="flex flex-col gap-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-[28px] no-underline text-[var(--color-text)] shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-raised)] hover:border-[#C0BFB8] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2"
style={accent ? 'border-left: 3px solid var(--green-dark);' : undefined}
>
<span class="font-[var(--font-sans)] text-[16px] font-medium text-[var(--color-text)]">
{title}

View File

@@ -9,9 +9,9 @@ describe('SettingsCard', () => {
});
it('renders as an anchor tag with the given href', () => {
render(SettingsCard, { props: { title: 'Vorräte', href: '/household/staples?ctx=settings', cta: 'Bearbeiten →' } });
render(SettingsCard, { props: { title: 'Vorräte', href: '/household/staples', cta: 'Bearbeiten →' } });
const link = screen.getByRole('link');
expect(link).toHaveAttribute('href', '/household/staples?ctx=settings');
expect(link).toHaveAttribute('href', '/household/staples');
});
it('renders the cta text', () => {
@@ -29,15 +29,4 @@ describe('SettingsCard', () => {
expect(screen.queryByTestId('card-meta')).not.toBeInTheDocument();
});
it('applies accent border style when accent=true', () => {
render(SettingsCard, { props: { title: 'Vorräte', href: '/household/staples', cta: 'Bearbeiten →', accent: true } });
const link = screen.getByRole('link');
expect(link).toHaveAttribute('data-accent', 'true');
});
it('does not apply accent when accent is not set', () => {
render(SettingsCard, { props: { title: 'Haushalt', href: '/members', cta: 'Anzeigen →' } });
const link = screen.getByRole('link');
expect(link).not.toHaveAttribute('data-accent', 'true');
});
});