feat(calendar): CalendarCompact nutzt SectionHeader; fix IconButton-Typing
Deploy / verify (push) Successful in 1m27s
Deploy / deploy (push) Successful in 1m44s

CalendarCompactBlock: plain h3 → SectionHeader (title + 'Alle kommenden Termine'-
Action). IconButton props via HTMLButton/AnchorAttributes statt Index-Signatur
(brach Storybook-Typing).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Peter Meier
2026-07-12 11:18:02 +02:00
parent 6ca8ae6720
commit c8334dbd6c
2 changed files with 11 additions and 10 deletions
+3 -2
View File
@@ -6,6 +6,7 @@
*/ */
import Icon from "@iconify/svelte"; import Icon from "@iconify/svelte";
import "$lib/iconify-offline"; import "$lib/iconify-offline";
import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
type Size = "sm" | "md"; type Size = "sm" | "md";
type Variant = "surface" | "ghost"; type Variant = "surface" | "ghost";
@@ -29,8 +30,8 @@
variant?: Variant; variant?: Variant;
disabled?: boolean; disabled?: boolean;
class?: string; class?: string;
[key: string]: unknown; } & HTMLButtonAttributes &
} = $props(); HTMLAnchorAttributes = $props();
const sizeClass: Record<Size, string> = { sm: "size-7", md: "size-9" }; const sizeClass: Record<Size, string> = { sm: "size-7", md: "size-9" };
const iconClass: Record<Size, string> = { sm: "size-4", md: "size-5" }; const iconClass: Record<Size, string> = { sm: "size-4", md: "size-5" };
@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { getBlockLayoutClasses } from "$lib/block-layout"; import { getBlockLayoutClasses } from "$lib/block-layout";
import ArrowLink from "$lib/components/ArrowLink.svelte"; import SectionHeader from "$lib/components/SectionHeader.svelte";
import type { CalendarBlockData, CalendarItemData } from "$lib/block-types"; import type { CalendarBlockData, CalendarItemData } from "$lib/block-types";
import { t as tStatic, T } from "$lib/translations"; import { t as tStatic, T } from "$lib/translations";
import type { Translations } from "$lib/translations"; import type { Translations } from "$lib/translations";
@@ -81,13 +81,13 @@
data-block-variant="compact" data-block-variant="compact"
data-block-slug={block._slug} data-block-slug={block._slug}
> >
<div class="mb-2 flex items-baseline justify-between gap-4"> <div class="mb-4">
<h3 class="mb-0">{block.title ?? t(T.calendar_next_events)}</h3> <SectionHeader
{#if linkHref()} title={block.title ?? t(T.calendar_next_events)}
<div class="shrink-0"> tag="h3"
<ArrowLink href={linkHref() ?? "#"} label={t(T.calendar_all_upcoming)} tone="wald" size="sm" /> actionLabel={linkHref() ? t(T.calendar_all_upcoming) : undefined}
</div> actionHref={linkHref() ?? undefined}
{/if} />
</div> </div>
{#if upcoming.length === 0} {#if upcoming.length === 0}