Skip to content

Commit 2853fe1

Browse files
committed
feat(accordion): add summary slot for custom accordion headers
Adds support for a "summary" slot in Accordion component, allowing custom HTML/ components in accordion headers. Enables structured summaries with visual hierarchy (e.g., <span> elements with different font weights/colors). Also fixes spacing consistency in Statsbomb Dataspec Paradox section (mb-12 → mb-8).
1 parent 1e71234 commit 2853fe1

File tree

2 files changed

+10
-5
lines changed

2 files changed

+10
-5
lines changed

src/components/Accordion.astro

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -192,9 +192,12 @@ const {
192192
class: className,
193193
} = Astro.props;
194194
195-
// Validation: must provide either summary OR (name + role)
196-
if (!summaryText && !name) {
197-
throw new Error('Accordion requires either "summary" or "name" prop');
195+
// Check if summary slot is provided
196+
const hasSummarySlot = Astro.slots.has('summary');
197+
198+
// Validation: must provide either summary slot, summary prop, OR (name + role)
199+
if (!hasSummarySlot && !summaryText && !name) {
200+
throw new Error('Accordion requires either a "summary" slot, "summary" prop, or "name" prop');
198201
}
199202
200203
// NEW: Validation for grouped props
@@ -210,7 +213,9 @@ if (grouped && !position) {
210213
open={defaultOpen}
211214
>
212215
<summary class={cn(summary({ size, grouped }))}>
213-
{name ? (
216+
{hasSummarySlot ? (
217+
<slot name="summary" />
218+
) : name ? (
214219
<div class="flex flex-col md:flex-row md:items-baseline md:gap-2">
215220
<span class="font-semibold text-text">{name}</span>
216221
{role && <span class="text-sm text-text-lighter">{role}</span>}

src/pages/portfolio/statsbomb.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -337,7 +337,7 @@ The dataspec drove UI validation, DSL defined legal sequences, state machines co
337337
<SectionDivider spacing="major" />
338338

339339
{/* The Dataspec Paradox - NEW SECTION */}
340-
<section class="mb-12" id="dataspec-paradox">
340+
<section class="mb-8" id="dataspec-paradox">
341341
<Heading level={3} as="h2" class="mb-6 text-navy">The Dataspec Paradox: How Do You Change Rules Without Invalidating History?</Heading>
342342

343343
By 2020, we had two years of historical matches. Thousands of games, millions of events. Then we realized: "possession" in 2020 meant something different than "possession" in 2018. We'd learned more about the sport. The rules evolved.

0 commit comments

Comments
 (0)