Skip to content

Commit 1451643

Browse files
Jeffrey Lauwersclaude
Jeffrey Lauwers
and
claude
committed
docs: synchroniseer documentatie voor Image, Heading en fixes (v5.12.0)
- 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>
1 parent 148a65f commit 1451643

3 files changed

Lines changed: 162 additions & 4 deletions

File tree

‎README.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ pnpm --filter @dsn/design-tokens watch
6565
# Start Storybook in development mode
6666
pnpm dev
6767

68-
# Run tests (1057 tests across 52 test suites)
68+
# Run tests (1082 tests across 53 test suites)
6969
pnpm test
7070

7171
# Run tests in watch mode
@@ -172,14 +172,15 @@ All components are fully typed with TypeScript and include comprehensive JSDoc d
172172
| **GridItem** | Yes | Yes | — |
173173
| **Stack** | Yes | Yes | — |
174174

175-
**Content Components (9)**
175+
**Content Components (10)**
176176

177177
| Component | HTML/CSS | React | Web Component |
178178
| ----------------- | -------- | ----- | ------------- |
179179
| **Button** | Yes | Yes | Yes |
180180
| **ButtonLink** | Yes | Yes | — |
181181
| **Heading** | Yes | Yes | Yes |
182182
| **Icon** | Yes | Yes | Yes |
183+
| **Image** | Yes | Yes | — |
183184
| **Link** | Yes | Yes | Yes |
184185
| **LinkButton** | Yes | Yes | — |
185186
| **OrderedList** | Yes | Yes | Yes |
@@ -370,7 +371,7 @@ Comprehensive documentation is available in the `/docs` folder:
370371

371372
- **Pre-commit hooks** via Husky + lint-staged (ESLint + Prettier)
372373
- **Type checking** across all packages (`pnpm type-check`)
373-
- **1043 tests** covering React components, Web Components, and utilities
374+
- **1082 tests** covering React components, Web Components, and utilities
374375
- **CI/CD** via GitHub Actions (lint, type-check, test, build)
375376

376377
## Tech Stack

‎docs/03-components.md‎

Lines changed: 119 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Components
22

3-
**Last Updated:** March 20, 2026
3+
**Last Updated:** March 21, 2026
44

55
Complete component specifications and guidelines for the Design System Starter Kit.
66

@@ -505,6 +505,7 @@ Brengt consistente verticale ruimte aan tussen directe child-elementen via `flex
505505
- Heading component tokens with full set per level (font-family, font-weight, color, font-size, line-height, margin-block-end)
506506
- Token namespace `dsn.heading.level-{1-6}.*` — avoids collision with core `dsn.heading.*` tokens
507507
- Font-size scale shifted one level down: heading-1 = 3xl, heading-2 = 2xl, ... heading-6 = sm
508+
- `text-wrap: balance` op de heading-basis-klasse — verdeelt regeleinden evenwichtig voor meerdere korte regels
508509

509510
**Tests:** React (13 tests), Web Component (24 tests)
510511

@@ -639,6 +640,123 @@ Brengt consistente verticale ruimte aan tussen directe child-elementen via `flex
639640

640641
**Tests:** React (20 tests)
641642

643+
### Image Component
644+
645+
**Status:** Complete (HTML/CSS, React)
646+
647+
**Location:** `packages/components-{html|react}/src/image/` / `packages/components-react/src/Image/`
648+
649+
**Component Tokens:** `tokens/components/image.json`
650+
651+
**Features:**
652+
653+
- Semantische `<figure>` + `<img>` structuur — altijd correct HTML
654+
- Verplichte `width` en `height` props — browser reserveert ruimte vooraf, voorkomt CLS
655+
- `loading="lazy"` + `decoding="async"` standaard — laadt afbeeldingen buiten de viewport pas wanneer nodig
656+
- `priority` prop — `loading="eager"` + `fetchpriority="high"` voor de primaire LCP-afbeelding (max. één per pagina)
657+
- `ratio` prop — CSS `aspect-ratio` met drie opties: `16:9`, `4:3`, `1:1`
658+
- `objectFit` prop — `cover` (default, bijsnijden) of `contain` (volledig zichtbaar)
659+
- `caption` prop — optioneel `<figcaption>` bijschrift
660+
- `srcSet` / `sizes` pass-through — voor responsive afbeeldingen
661+
- `alt=""` activeert automatisch `aria-hidden="true"` op de `<figure>` voor decoratieve afbeeldingen
662+
663+
**CSS klassen:**
664+
665+
| Klasse | Beschrijving |
666+
| ------------------------------- | ------------------------------------ |
667+
| `dsn-image` | Root `<figure>` container |
668+
| `dsn-image__img` | Native `<img>` element |
669+
| `dsn-image__caption` | `<figcaption>` bijschrift |
670+
| `dsn-image--ratio-16-9` | Beeldverhouding 16:9 |
671+
| `dsn-image--ratio-4-3` | Beeldverhouding 4:3 |
672+
| `dsn-image--ratio-1-1` | Beeldverhouding 1:1 (vierkant) |
673+
| `dsn-image--object-fit-contain` | Volledig zichtbaar zonder bijsnijden |
674+
675+
**HTML/CSS:**
676+
677+
```html
678+
<!-- Basis -->
679+
<figure class="dsn-image">
680+
<img
681+
class="dsn-image__img"
682+
src="foto.jpg"
683+
alt="Beschrijving"
684+
width="800"
685+
height="600"
686+
loading="lazy"
687+
decoding="async"
688+
/>
689+
</figure>
690+
691+
<!-- Met vaste beeldverhouding -->
692+
<figure class="dsn-image dsn-image--ratio-16-9">
693+
<img
694+
class="dsn-image__img"
695+
src="hero.jpg"
696+
alt="Hero"
697+
width="1600"
698+
height="900"
699+
loading="lazy"
700+
decoding="async"
701+
/>
702+
</figure>
703+
704+
<!-- LCP-afbeelding -->
705+
<figure class="dsn-image dsn-image--ratio-16-9">
706+
<img
707+
class="dsn-image__img"
708+
src="hero.jpg"
709+
alt="Pagina hero"
710+
width="1600"
711+
height="900"
712+
loading="eager"
713+
fetchpriority="high"
714+
decoding="async"
715+
/>
716+
</figure>
717+
718+
<!-- Met bijschrift -->
719+
<figure class="dsn-image">
720+
<img
721+
class="dsn-image__img"
722+
src="foto.jpg"
723+
alt="Beschrijving"
724+
width="800"
725+
height="600"
726+
loading="lazy"
727+
decoding="async"
728+
/>
729+
<figcaption class="dsn-image__caption">
730+
Bijschrift bij de afbeelding
731+
</figcaption>
732+
</figure>
733+
734+
<!-- Decoratief -->
735+
<figure class="dsn-image" aria-hidden="true">
736+
<img
737+
class="dsn-image__img"
738+
src="decoratief.jpg"
739+
alt=""
740+
width="800"
741+
height="600"
742+
loading="lazy"
743+
decoding="async"
744+
/>
745+
</figure>
746+
```
747+
748+
**React:**
749+
750+
```tsx
751+
<Image src="foto.jpg" alt="Beschrijving" width={800} height={600} />
752+
<Image src="hero.jpg" alt="Hero" width={1600} height={900} ratio="16:9" />
753+
<Image src="hero.jpg" alt="Pagina hero" width={1600} height={900} ratio="16:9" priority />
754+
<Image src="foto.jpg" alt="Beschrijving" width={800} height={600} caption="Bijschrift" />
755+
<Image src="decoratief.jpg" alt="" width={800} height={600} />
756+
```
757+
758+
**Tests:** React (27 tests)
759+
642760
---
643761

644762
## Display & Feedback Components

‎docs/changelog.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,45 @@ All notable changes to this project are documented in this file.
66

77
---
88

9+
## Version 5.12.0 (March 21, 2026)
10+
11+
### Image component (issue #96)
12+
13+
#### Added
14+
15+
- **Image** component — performante, toegankelijke wrapper rond het native `<img>` element (PR #105)
16+
- `<figure class="dsn-image">` + `<img class="dsn-image__img">` + optionele `<figcaption class="dsn-image__caption">`
17+
- Verplichte `width` en `height` props — browser reserveert ruimte vooraf en voorkomt CLS (Cumulative Layout Shift)
18+
- Standaard `loading="lazy"` + `decoding="async"` — afbeeldingen buiten de viewport laden pas wanneer nodig
19+
- `priority` prop — `loading="eager"` + `fetchpriority="high"` voor de primaire LCP-afbeelding; gebruik maximaal één keer per pagina
20+
- `ratio` prop — vaste beeldverhoudingen via CSS `aspect-ratio`: `16:9`, `4:3`, `1:1`
21+
- `objectFit` prop — `cover` (default, bijsnijden) of `contain` (volledig zichtbaar)
22+
- `caption` prop — optioneel bijschrift als `<figcaption>`
23+
- `srcSet` / `sizes` pass-through — voor responsive afbeeldingen met meerdere resoluties
24+
- `alt=""` activeert automatisch `aria-hidden="true"` op de `<figure>` voor decoratieve afbeeldingen
25+
- Componenttokens: `--dsn-image-border-radius`, `--dsn-image-caption-color`, `--dsn-image-caption-font-size`, `--dsn-image-caption-line-height`, `--dsn-image-caption-margin-block-start`
26+
- 27 nieuwe React tests
27+
28+
---
29+
30+
## Version 5.11.1 (March 21, 2026)
31+
32+
### Heading, Radio en FormField — verbeteringen en fixes
33+
34+
#### Changed
35+
36+
- **Heading text-wrap: balance** — `text-wrap: balance` toegevoegd aan de Heading-basisklasse, waardoor regeleinden bij meerdere korte regels evenwichtiger worden verdeeld (PR #103)
37+
38+
#### Fixed
39+
40+
- **Radio inner circle bij checked + focus** — visueel ontbrekende inner circle toegevoegd aan de Radio-component bij de gecombineerde `checked` + `focus-visible` toestand (PR #101)
41+
42+
#### Removed
43+
44+
- **FormField "With CheckboxGroup" story** — verwijderd uit Storybook; de story representeerde een niet-aanbevolen compositie-patroon (PR #102)
45+
46+
---
47+
948
## Version 5.11.0 (March 20, 2026)
1049

1150
### DotBadge component (issue #39)

0 commit comments

Comments
 (0)