Skip to content

Commit 3eddbe2

Browse files
Jeffrey Lauwersclaude
Jeffrey Lauwers
and
claude
committed
docs: bijwerken voor sessie 5 — Note, Alert, Paragraph refactor
- README.md: Display & Feedback tabel (StatusBadge, Alert, Note), testcount 824 - docs/README.md: versie 4.7.0, datum 3 maart 2026, statistieken bijgewerkt - docs/03-components.md: Display & Feedback sectie toegevoegd (StatusBadge, Alert, Note) - docs/changelog.md: versie 4.6.0 (StatusBadge + Alert) en 4.7.0 (Note + polish) - Introduction.mdx: versie 4.7.0, datum 3 maart 2026 Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
1 parent b434629 commit 3eddbe2

5 files changed

Lines changed: 221 additions & 18 deletions

File tree

‎README.md‎

Lines changed: 12 additions & 4 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 (733 tests across 38 test suites)
68+
# Run tests (824 tests across 41 test suites)
6969
pnpm test
7070

7171
# Run tests in watch mode
@@ -162,7 +162,7 @@ All components are fully typed with TypeScript and include comprehensive JSDoc d
162162

163163
### Current Components
164164

165-
**Content Components**
165+
**Content Components (7)**
166166

167167
| Component | HTML/CSS | React | Web Component |
168168
| ----------------- | -------- | ----- | ------------- |
@@ -174,7 +174,15 @@ All components are fully typed with TypeScript and include comprehensive JSDoc d
174174
| **Paragraph** | Yes | Yes | Yes |
175175
| **UnorderedList** | Yes | Yes | Yes |
176176

177-
**Form Components (25 total)**
177+
**Display & Feedback Components (3)**
178+
179+
| Component | HTML/CSS | React | Web Component |
180+
| --------------- | -------- | ----- | ------------- |
181+
| **StatusBadge** | Yes | Yes | — |
182+
| **Alert** | Yes | Yes | — |
183+
| **Note** | Yes | Yes | — |
184+
185+
**Form Components (25)**
178186

179187
| Component | HTML/CSS | React | Web Component |
180188
| ------------------------- | -------- | ----- | ------------- |
@@ -326,7 +334,7 @@ Comprehensive documentation is available in the `/docs` folder:
326334

327335
- **Pre-commit hooks** via Husky + lint-staged (ESLint + Prettier)
328336
- **Type checking** across all packages (`pnpm type-check`)
329-
- **733 tests** covering React components, Web Components, and utilities
337+
- **824 tests** covering React components, Web Components, and utilities
330338
- **CI/CD** via GitHub Actions (lint, type-check, test, build)
331339

332340
## Tech Stack

‎docs/03-components.md‎

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

3-
**Last Updated:** February 19, 2025
3+
**Last Updated:** March 3, 2026
44

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

@@ -10,8 +10,9 @@ Complete component specifications and guidelines for the Design System Starter K
1010

1111
1. [Component Guidelines](#component-guidelines)
1212
2. [Content Components](#content-components)
13-
3. [Form Components](#form-components)
14-
4. [Web Components Registration](#web-components-registration)
13+
3. [Display & Feedback Components](#display--feedback-components)
14+
4. [Form Components](#form-components)
15+
5. [Web Components Registration](#web-components-registration)
1516

1617
---
1718

@@ -313,9 +314,140 @@ Components are designed to compose together:
313314

314315
---
315316

317+
## Display & Feedback Components
318+
319+
**Status:** Complete (HTML/CSS, React) — 3 components total
320+
321+
### StatusBadge
322+
323+
**Status:** Complete (HTML/CSS, React)
324+
325+
**Location:** `packages/components-{html|react}/src/StatusBadge/`
326+
327+
**Tokens:** `tokens/components/status-badge.json`
328+
329+
**Variants (5 total):** `neutral`, `info`, `positive`, `negative`, `warning`
330+
331+
**Props:** `variant`, `iconStart`, `children`
332+
333+
**Features:**
334+
335+
- Compact inline label met signaalkleur
336+
- Optioneel `iconStart` prop voor een icoon vóór het label
337+
- Geen eigen afmeting — schaalt mee met de omgevende typografie
338+
339+
**Tests:** React (10 tests)
340+
341+
### Alert
342+
343+
**Status:** Complete (HTML/CSS, React)
344+
345+
**Location:** `packages/components-{html|react}/src/Alert/`
346+
347+
**Tokens:** `tokens/components/alert.json`
348+
349+
**Variants (4 total):** `info` (default), `positive`, `negative`, `warning`
350+
351+
**Props:** `variant`, `heading`, `headingLevel`, `iconStart`, `children`
352+
353+
**Features:**
354+
355+
- `role="alert"` live region — schermlezer kondigt wijzigingen automatisch aan
356+
- CSS grid layout: icoon + heading naast elkaar (rij 1), body content eronder (rij 2)
357+
- `grid-template-columns: var(--dsn-icon-size-xl) 1fr`
358+
- Voorkeurspicoon per variant; overschrijfbaar via `iconStart` (`null` = geen icoon)
359+
- `heading` verplicht; `headingLevel` default `2` (visueel als `heading-3`)
360+
- Volledige border rondom (niet alleen inline-start)
361+
- Body content via `children` — gebruik `<Paragraph>` voor tekst, `<UnorderedList>` voor lijsten
362+
363+
**HTML/CSS:**
364+
365+
```html
366+
<div class="dsn-alert" role="alert">
367+
<span class="dsn-alert__icon" aria-hidden="true">
368+
<svg class="dsn-icon" aria-hidden="true"><!-- info-circle --></svg>
369+
</span>
370+
<h2 class="dsn-alert__heading dsn-heading dsn-heading--3">Heading</h2>
371+
<div class="dsn-alert__content">
372+
<p class="dsn-paragraph">Body content.</p>
373+
</div>
374+
</div>
375+
376+
<!-- Varianten: dsn-alert--positive / dsn-alert--negative / dsn-alert--warning -->
377+
<!-- Geen icoon: dsn-alert--no-icon (klasse op root, span weglaten) -->
378+
```
379+
380+
**Tests:** React (15 tests)
381+
382+
### Note
383+
384+
**Status:** Complete (HTML/CSS, React)
385+
386+
**Location:** `packages/components-{html|react}/src/Note/`
387+
388+
**Tokens:** `tokens/components/note.json`
389+
390+
**Variants (5 total):** `neutral` (default), `info`, `positive`, `negative`, `warning`
391+
392+
**Props:** `as`, `variant`, `heading`, `headingLevel`, `iconStart`, `children`
393+
394+
**Features:**
395+
396+
- Passieve tegenhanger van Alert — geen `role="alert"`, geen live region
397+
- Schermlezer leest Note alleen bij navigatie, niet spontaan
398+
- `border-inline-start` als visuele markering (niet rondom zoals Alert)
399+
- CSS grid layout identiek aan Alert
400+
- `dsn-note--no-heading` modifier: icoon overspant beide rijen (`grid-row: 1 / span 2`)
401+
- `as` prop: `div` (default), `aside`, `nav`, `section` — semantiek losgekoppeld van visuele stijl
402+
- Automatische `aria-labelledby` via `useId()` voor landmark-elementen met heading
403+
- `heading` optioneel (Alert: verplicht); `headingLevel` default `3`
404+
405+
**HTML/CSS:**
406+
407+
```html
408+
<div class="dsn-note">
409+
<span class="dsn-note__icon" aria-hidden="true">
410+
<svg class="dsn-icon" aria-hidden="true"><!-- info-circle --></svg>
411+
</span>
412+
<h3 class="dsn-heading dsn-heading--3 dsn-note__heading">Heading</h3>
413+
<div class="dsn-note__content">
414+
<p class="dsn-paragraph">Body content.</p>
415+
</div>
416+
</div>
417+
418+
<!-- Varianten: dsn-note--info / dsn-note--positive / dsn-note--negative / dsn-note--warning -->
419+
<!-- Zonder heading: dsn-note--no-heading -->
420+
<!-- Landmark: <aside>, <nav>, <section> i.p.v. <div> -->
421+
```
422+
423+
**React:**
424+
425+
```tsx
426+
// Standaard note met heading
427+
<Note heading="Let op" variant="warning">
428+
<Paragraph>Dit heeft gevolgen voor uw aanvraag.</Paragraph>
429+
</Note>
430+
431+
// Zonder heading — icoon overspant beide rijen
432+
<Note variant="info">
433+
<Paragraph>Extra context zonder titel.</Paragraph>
434+
</Note>
435+
436+
// Als inhoudsopgave (nav landmark)
437+
<Note as="nav" variant="neutral" heading="Op deze pagina" headingLevel={2}>
438+
<UnorderedList>
439+
<li><Link href="#sectie-1">Sectie 1</Link></li>
440+
</UnorderedList>
441+
</Note>
442+
```
443+
444+
**Tests:** React (18 tests)
445+
446+
---
447+
316448
## Form Components
317449

318-
**Status:** Complete (HTML/CSS, React) - 25 components total
450+
**Status:** Complete (HTML/CSS, React) — 25 components total
319451

320452
**Location:** `packages/components-{html|react}/src/`
321453

@@ -624,15 +756,15 @@ defineButton('my-custom-button');
624756

625757
## Component Statistics
626758

627-
**Total Components:** 32
759+
**Total Components:** 35
628760

629761
**Implementations:**
630762

631-
- **HTML/CSS:** 32 components
632-
- **React:** 32 components (733 tests total)
763+
- **HTML/CSS:** 35 components
764+
- **React:** 35 components (824 tests total)
633765
- **Web Component:** 7 components (Button, Heading, Icon, Link, OrderedList, Paragraph, UnorderedList)
634766

635-
**Test Coverage:** 733 tests across 38 test suites
767+
**Test Coverage:** 824 tests across 41 test suites
636768

637769
---
638770

‎docs/README.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Design System Documentation
22

3-
**Version:** 4.5.0
4-
**Last Updated:** February 24, 2026
3+
**Version:** 4.7.0
4+
**Last Updated:** March 3, 2026
55

66
Complete documentation voor het Design System Starter Kit.
77

@@ -83,9 +83,9 @@ Complete documentation voor het Design System Starter Kit.
8383

8484
- **Tokens per configuration:** ~1050 (400 semantic + 650 component)
8585
- **Configurations:** 8 (2 themes × 2 modes × 2 project types)
86-
- **Components:** 32 implemented (7 content + 25 form; HTML/CSS + React)
87-
- **Tests:** 733 across 38 test suites
88-
- **Storybook stories:** 100+
86+
- **Components:** 35 implemented (7 content + 3 display/feedback + 25 form; HTML/CSS + React)
87+
- **Tests:** 824 across 41 test suites
88+
- **Storybook stories:** 130+
8989

9090
---
9191

‎docs/changelog.md‎

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

77
---
88

9+
## Version 4.7.0 (March 3, 2026)
10+
11+
### Note component + Alert/Note polish
12+
13+
**Note component (PR #48)**
14+
15+
- **Note component** — Visueel uitgelicht bericht voor aanvullende of belangrijke informatie; passieve tegenhanger van Alert (geen `role="alert"`, geen live region)
16+
- 5 varianten: `neutral` (default), `info`, `positive`, `negative`, `warning` — elk met eigen signaalkleur en icoon
17+
- CSS grid layout identiek aan Alert: icoon + heading in rij 1, content in rij 2
18+
- `border-inline-start` (niet rondom zoals Alert) als visuele markering
19+
- `dsn-note--no-heading` modifier: icoon overspant beide rijen (`grid-row: 1 / span 2`)
20+
- `as` prop: `div` (default), `aside`, `nav`, `section` — semantiek losgekoppeld van stijl
21+
- Automatische `aria-labelledby` voor landmark-elementen (`nav`, `aside`, `section`) met heading via `useId()`
22+
- `iconStart` prop: `undefined` = voorkeurspicoon per variant, `null` = geen icoon, `ReactNode` = aangepast icoon
23+
- Storybook: Default, Info, Positive, Negative, Warning, All states, Without heading, With list, As nav, Long text, RTL, RTL long text
24+
25+
**Paragraph refactoring**
26+
27+
- `dsn-paragraph--default` alias volledig verwijderd — geen backward compatibility meer nodig
28+
- Default-stijlen zitten nu direct op `.dsn-paragraph` base class
29+
- `class="dsn-paragraph"` is voldoende; geen modifier class voor de standaard variant
30+
- React component: `dsn-paragraph--${variant}` alleen toegevoegd voor `lead` en `small-print`
31+
- Web Component: zelfde logica in `_updateClasses()`
32+
- Tests bijgewerkt in beide packages
33+
34+
**Alert & Note design polish**
35+
36+
- `padding-block` token: `space.block.lg` → `space.block.xl` (meer ademruimte)
37+
- `row-gap` token: `space.row.xs` → `space.row.md` (heading heeft geen margin-block-end meer)
38+
- `Icon size="xl"` toegevoegd — ontbrak bij handmatig opgegeven `iconStart` via argTypes mapping
39+
- `<Paragraph>` in alle stories — geen kale tekst-strings meer als `children`
40+
- `children` argType: `control: false` (React node, niet stuurbaar via tekstveld)
41+
- Semantische heading tags in HTML-templates: `<strong>` vervangen door `<h2>` (Alert) en `<h3>` (Note)
42+
- `htmlTemplate` dynamisch op `headingLevel` — HTML-tab past mee als Controls panel wijzigt
43+
44+
---
45+
46+
## Version 4.6.0 (March 2, 2026)
47+
48+
### StatusBadge & Alert components
49+
50+
**StatusBadge component (PR #46)**
51+
52+
- **StatusBadge component** — Compact label dat een status communiceert met een signaalkleur
53+
- 5 varianten: `neutral`, `info`, `positive`, `negative`, `warning`
54+
- Optioneel `iconStart` prop voor een icoon vóór het label
55+
- Storybook: Default, alle varianten, All states, With icon, RTL
56+
57+
**Alert component (PR #47)**
58+
59+
- **Alert component** — Belangrijk bericht dat de gebruiker informeert over de huidige activiteit of toestand
60+
- 4 varianten: `info` (default), `positive`, `negative`, `warning`
61+
- CSS grid layout: icoon + heading naast elkaar in rij 1, content in rij 2 (`grid-template-columns: icon-size 1fr`)
62+
- `role="alert"` voor live region — schermlezer kondigt wijzigingen automatisch aan
63+
- Voorkeurspicoon per variant; overschrijfbaar via `iconStart` prop (`null` = geen icoon)
64+
- `heading` (verplicht) + optionele `children` voor body content
65+
- `headingLevel` prop voor semantisch heading-niveau (default `h2`, visueel als `heading-3`)
66+
- Volledige border rondom (niet alleen inline-start)
67+
- `@import` fix: React CSS haalt stijlen op via `components-html`
68+
- Storybook: Default, Positive, Negative, Warning, All states, With list (validation), No icon, Long text, RTL, RTL long text
69+
70+
---
71+
972
## Version 4.5.0 (February 24, 2026)
1073

1174
### Storybook: Dynamic Code Tabs & PreviewFrame

‎packages/storybook/src/Introduction.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,4 +135,4 @@ MIT License — zie LICENSE bestand voor details.
135135

136136
---
137137

138-
**Versie:** 4.6.0 | **Laatste update:** 2 maart 2026 | **Auteur:** Jeffrey Lauwers
138+
**Versie:** 4.7.0 | **Laatste update:** 3 maart 2026 | **Auteur:** Jeffrey Lauwers

0 commit comments

Comments
 (0)