feat(Card): voeg Card component toe met stretched-link en CardGroup#108
Merged
jeffreylauwers merged 11 commits intomainfrom Mar 23, 2026
Merged
feat(Card): voeg Card component toe met stretched-link en CardGroup#108jeffreylauwers merged 11 commits intomainfrom
jeffreylauwers merged 11 commits intomainfrom
Conversation
- Image component toegevoegd aan docs/03-components.md (Content Components) - Heading text-wrap: balance gedocumenteerd - Changelog entries toegevoegd voor v5.12.0 (Image) en v5.11.1 (Heading/Radio/FormField) - README.md: Content Components (9→10), Image rij toegevoegd, testcount bijgewerkt (1043→1082, 52→53 suites) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…issue #107) - Card, CardHeader, CardBody, CardHeading, CardFooter, CardGroup sub-componenten - Stretched-link techniek via ::before pseudo-element op dsn-card-heading__link - CardHeading ontvangt href automatisch via React context van parent Card - CardHeader toont automatisch placeholder bij geen children (aspect-ratio: 16/9) - CardGroup als <ul role="list"> of <div> via as prop, gelijke hoogte via flex auto-fill - Hover/focus-ring rondom gehele card via CSS :has() - 43 nieuwe tests, TypeScript schoon, lint schoon Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…-height dsn.text.xl.font-size → dsn.text.font-size.xl dsn.text.xl.line-height → dsn.text.line-height.xl Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- footer-padding-block-end: xl (16px) → 3xl (24px) voor ruimere onderkant - heading font-size: xl (24-31px) → lg (20-24px) voor compactere card-heading - heading line-height: xl → lg (consistent met font-size) - Card header image: border-radius alleen aan bovenkant (volgt card border-radius), onderkant recht via border-end-start/end-radius: 0 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…oogte - Corrigeer border-radius selector naar .dsn-image__img (radius zit op het img-element, niet op de figure) - Vervang hardcoded focus outline door --dsn-focus-* tokens (consistent met Button en Link) - Voeg display: flex toe aan .dsn-card-group > * zodat kaarten gelijke hoogte krijgen via flex: 1 op .dsn-card Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Definieer href als text control in argTypes/args - Render Default story via (args) zodat het href control werkt - htmlTemplate gebruikt ook args.href Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…w + transitie - background standaard → bg-document, bij hover → bg-elevated - box-shadow standaard → none, bij hover → dsn.box-shadow.sm - transitie op background-color en box-shadow (zelfde tokens als Button) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- showImage boolean arg schakelt CardHeader (afbeelding) aan/uit - htmlTemplate reageert ook op showImage - href wordt nu ook doorgegeven aan de footer Link Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- CardGroup: 2e card toont placeholder, 3e card zonder CardHeader - Nieuwe story 'Zonder afbeelding': card zonder CardHeader - Nieuwe story 'Met lange content': toont footer-uitlijning bij veel tekst Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- README.md: versie 5.13.0, datum 23 maart 2026, tests 1125/54, componenttelling - 03-components.md: Card hover/background/transition gedrag bijgewerkt - changelog.md: v5.13.0 uitgebreid met fixes (border-radius, focus, gelijke hoogte) - Card.docs.md: token tabel — background-hover toegevoegd, beschrijvingen gecorrigeerd Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Card,CardHeader,CardBody,CardHeading,CardFooter,CardGroup::beforepseudo-element opdsn-card-heading__linkdekt de volledige card; screenreaders lezen alleen de heading-tekst als linknaamCardHeadingontvangthrefautomatisch via React context van parentCardCardHeadertoont automatisch placeholder bij lege children (aspect-ratio: 16/9,aria-hidden="true")CardGroupals<ul role="list">of<div>viaasprop, gelijke hoogte viaflex: 1 1 var(--dsn-card-group-item-min-width):has(.dsn-card-heading__link:hover/focus-visible)Closes #107
Test plan
pnpm test— alle 1125 tests groen (54 suites)pnpm --filter storybook exec tsc --noEmit— 0 TypeScript-foutenpnpm lint— 0 lint-foutenaria-hidden+tabIndex={-1}: geen dubbele tabstop bij zelfde bestemming🤖 Generated with Claude Code