docs: synchroniseer documentatie voor Body component (v5.7.0)

Jeffrey Lauwers · claude · Jeffrey Lauwers · commit 427669fc071d · 2026-03-13T12:29:03.000+01:00
- README.md: Layout Components 4→5 (Body toegevoegd), 1002→1008 tests - docs/README.md: versie 5.6.0→5.7.0, 42→43 componenten, 1002→1008 tests - docs/03-components.md: Body sectie toegevoegd onder Layout Components - docs/05-storybook-configuration.md: decorator beschrijving bijgewerkt (dsn-body) - docs/changelog.md: v5.7.0 entry toegevoegd (PR #84) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
diff --git a/README.md b/README.md
@@ -65,7 +65,7 @@ pnpm --filter @dsn/design-tokens watch
 # Start Storybook in development mode
 pnpm dev
 
-# Run tests (1002 tests across 48 test suites)
+# Run tests (1008 tests across 49 test suites)
 pnpm test
 
 # Run tests in watch mode
@@ -162,10 +162,11 @@ All components are fully typed with TypeScript and include comprehensive JSDoc d
 
 ### Current Components
 
-**Layout Components (4)**
+**Layout Components (5)**
 
 | Component     | HTML/CSS | React | Web Component |
 | ------------- | -------- | ----- | ------------- |
+| **Body**      | Yes      | Yes   | —             |
 | **Container** | Yes      | Yes   | —             |
 | **Grid**      | Yes      | Yes   | —             |
 | **GridItem**  | Yes      | Yes   | —             |
@@ -368,7 +369,7 @@ Comprehensive documentation is available in the `/docs` folder:
 
 - **Pre-commit hooks** via Husky + lint-staged (ESLint + Prettier)
 - **Type checking** across all packages (`pnpm type-check`)
-- **1002 tests** covering React components, Web Components, and utilities
+- **1008 tests** covering React components, Web Components, and utilities
 - **CI/CD** via GitHub Actions (lint, type-check, test, build)
 
 ## Tech Stack
diff --git a/docs/03-components.md b/docs/03-components.md
@@ -1,6 +1,6 @@
 # Components
 
-**Last Updated:** March 9, 2026
+**Last Updated:** March 13, 2026
 
 Complete component specifications and guidelines for the Design System Starter Kit.
 
@@ -155,7 +155,33 @@ Components are designed to compose together:
 
 ## Layout Components
 
-Layout components bieden structuur voor paginalayouts. Container heeft een visuele stijl; Grid en Stack zijn pure CSS-utilities.
+Layout components bieden structuur voor paginalayouts. Body stelt document-level cascade stijlen in; Container heeft een visuele stijl; Grid en Stack zijn pure CSS-utilities.
+
+### Body
+
+Stelt document-level CSS stijlen in zodat alle child-elementen via de CSS cascade automatisch de juiste typografie, kleur en achtergrond erven.
+
+**HTML/CSS:**
+
+```html
+<body class="dsn-body">
+  <!-- paginainhoud -->
+</body>
+```
+
+**React:**
+
+```tsx
+<Body>{/* paginainhoud */}</Body>
+```
+
+**Props:** Geen custom props — `Body` accepteert alle standaard `HTMLDivElement` attributen.
+
+**Gebruik:** Zet `dsn-body` op het `<body>` element in je HTML template, of gebruik de React `<Body>` component als root-wrapper. In Storybook is `dsn-body` via de global decorator automatisch op alle stories van toepassing.
+
+**Design tokens:** Geen component tokens — verwijst rechtstreeks naar globale tokens: `--dsn-color-neutral-bg-document`, `--dsn-color-neutral-color-document`, `--dsn-text-font-family-default`, `--dsn-text-font-size-md`, `--dsn-text-line-height-md`, `--dsn-text-font-weight-default`.
+
+---
 
 ### Container
 
diff --git a/docs/05-storybook-configuration.md b/docs/05-storybook-configuration.md
@@ -1,6 +1,6 @@
 # Storybook Configuration
 
-**Last Updated:** February 24, 2026
+**Last Updated:** March 13, 2026
 
 Documentation for the Storybook setup, runtime theme switching, UI components, and documentation structure.
 
@@ -109,7 +109,7 @@ export default config;
 **Key features:**
 
 - Toolbar controls for Theme, Mode, Density
-- Decorator for dynamic token loading
+- Decorator for dynamic token loading — also applies `dsn-body` to `document.body` so all story previews inherit document-level base styles
 - Story sorting
 
 ```ts
diff --git a/docs/README.md b/docs/README.md
@@ -1,7 +1,7 @@
 # Design System Documentation
 
-**Version:** 5.6.0
-**Last Updated:** March 12, 2026
+**Version:** 5.7.0
+**Last Updated:** March 13, 2026
 
 Complete documentation voor het Design System Starter Kit.
 
@@ -83,8 +83,8 @@ Complete documentation voor het Design System Starter Kit.
 
 - **Tokens per configuration:** ~1100 (400 semantic + 700 component)
 - **Configurations:** 8 (2 themes × 2 modes × 2 project types)
-- **Components:** 42 (4 layout + 9 content + 5 display/feedback + 25 form; HTML/CSS + React)
-- **Tests:** 1002 across 48 test suites
+- **Components:** 43 (5 layout + 9 content + 5 display/feedback + 25 form; HTML/CSS + React)
+- **Tests:** 1008 across 49 test suites
 - **Storybook stories:** 130+
 
 ---
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -6,6 +6,19 @@ All notable changes to this project are documented in this file.
 
 ---
 
+## Version 5.7.0 (March 13, 2026)
+
+### Body component: document-level cascade basisstijlen (PR #84, issue #83)
+
+- **Body component** (`dsn-body`) — stelt zes document-level CSS properties in via globale design tokens: `background-color`, `color`, `font-family`, `font-size`, `line-height`, `font-weight`
+- Geen component tokens — `dsn-body` verwijst rechtstreeks naar globale semantische tokens (`--dsn-color-neutral-bg-document`, `--dsn-color-neutral-color-document`, `--dsn-text-font-family-default`, `--dsn-text-font-size-md`, `--dsn-text-line-height-md`, `--dsn-text-font-weight-default`)
+- React `<Body>` component rendert als `<div class="dsn-body">` — zelfde patroon als alle andere componenten
+- Storybook global decorator: `dsn-body` toegevoegd aan `document.body.className` zodat alle story-previews en 'Voorbeeld'-secties automatisch de juiste omgevingsstijlen erven
+- Storybook story onder `Foundations/Body` met volledige documentatie (drie bestanden)
+- **6 nieuwe tests** — totaal 1008 tests, 49 test suites
+
+---
+
 ## Version 5.6.0 (March 12, 2026)
 
 ### Details component: uitvouwbare inhoudsaanwijzer (PR #82, issue #80)
