Skip to content

Commit cc50245

Browse files
Jeffrey Lauwersclaude
Jeffrey Lauwers
and
claude
committed
docs: PageHeader compact layout en inverse kleurvariant documenteren (v5.23.0 + v5.24.0)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 44ae7b1 commit cc50245

4 files changed

Lines changed: 173 additions & 21 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
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 (1292 tests across 64 test suites)
68+
# Run tests (1305 tests across 64 test suites)
6969
pnpm test
7070

7171
# Run tests in watch mode

‎docs/03-components.md‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1908,14 +1908,16 @@ const [isOpen, setIsOpen] = React.useState(false);
19081908

19091909
**Tokens:** `tokens/components/page-header.json`
19101910

1911-
**Props:** `logoSlot`, `sticky` (`'none'` | `'sticky'` | `'auto-hide'`), `primaryNavigation`, `primaryNavigationLarge`, `secondaryNavigation`, `secondaryNavigationLarge`, `searchSlot`, `onMenuOpen`, `onMenuClose`, `onSearchOpen`, `onSearchClose`, `className`
1911+
**Props:** `logoSlot`, `sticky` (`'none'` | `'sticky'` | `'auto-hide'`), `layout` (`'default'` | `'compact'`), `colorScheme` (`'default'` | `'inverse'`), `initialSearchOpen`, `primaryNavigation`, `primaryNavigationLarge`, `secondaryNavigation`, `secondaryNavigationLarge`, `searchSlot`, `onMenuOpen`, `onMenuClose`, `onSearchOpen`, `onSearchClose`, `className`
19121912

19131913
**Features:**
19141914

19151915
- Mobile-first: hamburgerknop (inline-start) opent een `Drawer`, gecentreerd logo (CSS-grid `1fr auto 1fr`), zoekknop (inline-end) ontvouwt zoekpaneel direct onder de header
1916-
- Boven `64em` (~1024px): tweebandig large viewport layout via `display: none` switch
1916+
- Boven `64em` (~1024px): tweebandig large viewport layout via `display: none` switch (`layout="default"`, standaard)
19171917
- **Masthead** — neutrale achtergrond met logo (inline-start), servicemenu en inline zoekveld (inline-end)
19181918
- **Navigatiebalk** — accent-1 achtergrond met primaire navigatie; MenuLink-items krijgen `min-block-size: 4rem` en `padding-inline: var(--dsn-space-inline-xl)` via token-overschrijving op de container
1919+
- `layout="compact"` — één rij op large viewport: logo (inline-start) | primaire navigatie (gecentreerd, CSS-grid `1fr auto 1fr`) | servicemenu + icon-only zoekknop (inline-end)
1920+
- `colorScheme="inverse"` — accent-1-inverse achtergrond op navbar, compact balk en zoekpaneel; masthead blijft neutraal; logo en menu-items passen kleuren automatisch aan via CSS custom property overrides
19191921
- `primaryNavigationLarge` / `secondaryNavigationLarge` — aparte slots voor large viewport; valt terug op de mobile variant wanneer weggelaten
19201922
- `sticky='sticky'`: `position: sticky; inset-block-start: 0`
19211923
- `sticky='auto-hide'`: sticky + verbergt bij scroll-down via JS `scroll`-eventlistener (`data-hidden` attribuut), CSS-transitie animeert de beweging
@@ -1925,24 +1927,30 @@ const [isOpen, setIsOpen] = React.useState(false);
19251927

19261928
**CSS-klassen:**
19271929

1928-
| Klasse | Element | Beschrijving |
1929-
| --------------------------------- | ---------- | ----------------------------------------------------- |
1930-
| `dsn-page-header` | `<header>` | Basiscomponent |
1931-
| `dsn-page-header--sticky` | `<header>` | Sticky gedrag: `position: sticky` |
1932-
| `dsn-page-header--auto-hide` | `<header>` | Auto-hide sticky: CSS-transitie op `data-hidden` |
1933-
| `dsn-page-header__small-layout` | `<div>` | Zichtbaar op small viewport (`< 64em`) |
1934-
| `dsn-page-header__large-layout` | `<div>` | Zichtbaar op large viewport (`≥ 64em`) |
1935-
| `dsn-page-header__inner` | `<div>` | CSS-grid (`1fr auto 1fr`) voor gecentreerd logo |
1936-
| `dsn-page-header__start` | `<div>` | Inline-start slot (hamburgerknop) |
1937-
| `dsn-page-header__logo` | `<div>` | Logo-slot; `max-block-size` op directe child |
1938-
| `dsn-page-header__end` | `<div>` | Inline-end slot (zoekknop) |
1939-
| `dsn-page-header__search-panel` | `<div>` | Zoekpaneel (small viewport); verborgen via `[hidden]` |
1940-
| `dsn-page-header__search-inner` | `<div>` | Flex-container: zoekveld + zoekknop |
1941-
| `dsn-page-header__masthead` | `<div>` | Bovenste band large viewport (neutrale achtergrond) |
1942-
| `dsn-page-header__masthead-inner` | `<div>` | Flex-container: logo ↔ secondary-nav |
1943-
| `dsn-page-header__secondary-nav` | `<div>` | Servicemenu + zoekveld naast elkaar (inline-end) |
1944-
| `dsn-page-header__searchbox` | `<div>` | Inline zoekveld + zoekknop in masthead |
1945-
| `dsn-page-header__navbar` | `<div>` | Onderste band large viewport (accent-1 achtergrond) |
1930+
| Klasse | Element | Beschrijving |
1931+
| -------------------------------------- | ---------- | --------------------------------------------------------------- |
1932+
| `dsn-page-header` | `<header>` | Basiscomponent |
1933+
| `dsn-page-header--sticky` | `<header>` | Sticky gedrag: `position: sticky` |
1934+
| `dsn-page-header--auto-hide` | `<header>` | Auto-hide sticky: CSS-transitie op `data-hidden` |
1935+
| `dsn-page-header--compact` | `<header>` | Compact layout: één rij op large viewport |
1936+
| `dsn-page-header--inverse` | `<header>` | Inverse kleurvariant: accent-1-inverse achtergronden |
1937+
| `dsn-page-header__small-layout` | `<div>` | Zichtbaar op small viewport (`< 64em`) |
1938+
| `dsn-page-header__large-layout` | `<div>` | Zichtbaar op large viewport (`≥ 64em`, default layout) |
1939+
| `dsn-page-header__compact-layout` | `<div>` | Zichtbaar op large viewport (`≥ 64em`, compact layout) |
1940+
| `dsn-page-header__inner` | `<div>` | CSS-grid (`1fr auto 1fr`) voor gecentreerd logo |
1941+
| `dsn-page-header__start` | `<div>` | Inline-start slot (hamburgerknop) |
1942+
| `dsn-page-header__logo` | `<div>` | Logo-slot; `max-block-size` op directe child |
1943+
| `dsn-page-header__end` | `<div>` | Inline-end slot (zoekknop) |
1944+
| `dsn-page-header__search-panel` | `<div>` | Zoekpaneel (small + compact viewport); verborgen via `[hidden]` |
1945+
| `dsn-page-header__search-inner` | `<div>` | Flex-container: zoekveld + zoekknop |
1946+
| `dsn-page-header__masthead` | `<div>` | Bovenste band large viewport (neutrale achtergrond) |
1947+
| `dsn-page-header__masthead-inner` | `<div>` | Flex-container: logo ↔ secondary-nav |
1948+
| `dsn-page-header__secondary-nav` | `<div>` | Servicemenu + zoekveld naast elkaar (inline-end) |
1949+
| `dsn-page-header__searchbox` | `<div>` | Inline zoekveld + zoekknop in masthead |
1950+
| `dsn-page-header__navbar` | `<div>` | Onderste band large viewport (accent-1 achtergrond) |
1951+
| `dsn-page-header__compact-inner` | `<div>` | CSS-grid (`1fr auto 1fr`) compact balk |
1952+
| `dsn-page-header__compact-primary-nav` | `<div>` | Primaire nav gecentreerd in compact balk |
1953+
| `dsn-page-header__compact-secondary` | `<div>` | Servicemenu + zoekknop (inline-end) in compact balk |
19461954

19471955
**Design tokens:**
19481956

@@ -1964,6 +1972,9 @@ const [isOpen, setIsOpen] = React.useState(false);
19641972
| `--dsn-page-header-navbar-background-color` | `{dsn.color.accent-1.bg-default}` | Navigatiebalk achtergrond |
19651973
| `--dsn-page-header-navbar-padding-inline` | `{dsn.space.inline.xl}` | Horizontale padding navigatiebalk |
19661974
| `--dsn-page-header-secondary-nav-gap` | `{dsn.space.column.3xl}` | Gap servicemenu ↔ zoekveld in masthead |
1975+
| `--dsn-page-header-compact-background-color` | `{dsn.color.neutral.bg-document}` | Achtergrond compact balk (large viewport) |
1976+
| `--dsn-page-header-compact-padding-block` | `{dsn.space.block.xl}` | Verticale padding compact balk |
1977+
| `--dsn-page-header-compact-padding-inline` | `{dsn.space.inline.xl}` | Horizontale padding compact balk |
19671978

19681979
**Usage:**
19691980

‎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.24.0 (April 10, 2026)
10+
11+
### PageHeader: inverse kleurvariant (issue #151)
12+
13+
#### Added
14+
15+
- **`colorScheme` prop** op `PageHeader` — `'default'` (standaard) | `'inverse'` — activeert de `dsn-page-header--inverse` modifier
16+
- **Inverse kleurvariant** (`colorScheme="inverse"`): accent-1-inverse achtergronden op navbar en compact balk voor prominente branding
17+
- Navbar (large default layout): `accent-1-inverse.bg-default`
18+
- Compact balk (large compact layout): `accent-1-inverse.bg-default`
19+
- Zoekpaneel: `accent-1-inverse.bg-document` (iets donkerder voor visuele scheiding)
20+
- Small viewport header-balk: `accent-1-inverse.bg-default`
21+
- Masthead blijft ongewijzigd op `neutral.bg-document`
22+
- **Logo-kleuren passen zich automatisch aan** via CSS custom property overrides op `.dsn-page-header--inverse`: `--dsn-logo-color-primary` en `--dsn-logo-color-label` omgedraaid voor donkere achtergrond; reset in masthead-context
23+
- **Menu-items en buttons zichtbaar** op inverse achtergrond via context-gebonden token-overrides: `--dsn-menu-item-color`, `--dsn-menu-link-current-*` en `--dsn-button-subtle-color` → wit (`accent-1-inverse.color-default`) op alle inverse vlakken
24+
- Orthogonaal modifier — combineerbaar met alle andere props: `layout="compact" colorScheme="inverse"` werkt correct
25+
- 2 nieuwe Storybook stories: `Inverse color scheme` en `Inverse compact layout`
26+
27+
---
28+
29+
## Version 5.23.0 (April 9, 2026)
30+
31+
### PageHeader: compact layout (issue #147, PR #147)
32+
33+
#### Added
34+
35+
- **`layout` prop** op `PageHeader` — `'default'` (standaard) | `'compact'` — activeert de `dsn-page-header--compact` modifier
36+
- **Compact layout** (large viewport ≥ 64em): één enkele rij via CSS-grid `1fr auto 1fr`:
37+
- Logo (inline-start, eerste kolom)
38+
- Primaire navigatie (optisch gecentreerd, middelste kolom)
39+
- Servicemenu + icon-only zoekknop (inline-end, derde kolom)
40+
- `primaryNavigationLarge` / `secondaryNavigationLarge` worden ook in de compacte balk gebruikt (Drawer ontvangt altijd de verticale variant)
41+
- Zoekpaneel (`dsn-page-header__search-panel`) ook beschikbaar in compact layout, getriggerd via icon-only zoekknop
42+
- CSS-klassen: `dsn-page-header--compact`, `dsn-page-header__compact-layout`, `dsn-page-header__compact-inner`, `dsn-page-header__compact-primary-nav`, `dsn-page-header__compact-secondary`
43+
- 3 nieuwe design tokens: `compact.background-color` (`{dsn.color.neutral.bg-document}`), `compact.padding-block` (`{dsn.space.block.xl}`), `compact.padding-inline` (`{dsn.space.inline.xl}`)
44+
- 3 nieuwe Storybook stories: `Compact layout`, `RTL compact layout` en `AllStates`
45+
46+
---
47+
948
## Version 5.22.0 (April 9, 2026)
1049

1150
### SkipLink component (issue #148, PR #149)

‎packages/storybook/src/PageHeader.docs.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,105 @@ De mobile layout (hamburger + drawer) valt via `display: none` volledig uit de a
164164
3. Inline zoekveld + Zoeken-knop
165165
4. Primaire navigatie items
166166

167+
### Compact layout (large viewport)
168+
169+
De `layout="compact"` variant plaatst logo, primaire navigatie en servicemenu in één enkele rij via CSS-grid `1fr auto 1fr`. Gebruik dit wanneer de primaire navigatie maar één niveau heeft en de branding compacter mag:
170+
171+
```html
172+
<!-- HTML/CSS — compact layout modifier -->
173+
<header class="dsn-page-header dsn-page-header--compact">
174+
<!-- Small viewport layout (ongewijzigd) -->
175+
<div class="dsn-page-header__small-layout">...</div>
176+
177+
<!-- Compact balk (zichtbaar boven 64em) -->
178+
<div class="dsn-page-header__compact-layout">
179+
<div class="dsn-page-header__compact-inner">
180+
<div class="dsn-page-header__logo">
181+
<a href="/"><!-- Logo --></a>
182+
</div>
183+
<div class="dsn-page-header__compact-primary-nav">
184+
<nav aria-labelledby="primary-nav-id">
185+
<h2 id="primary-nav-id" class="dsn-visually-hidden">Hoofdmenu</h2>
186+
<!-- horizontale Menu met MenuLink items -->
187+
</nav>
188+
</div>
189+
<div class="dsn-page-header__compact-secondary">
190+
<!-- horizontale Menu met servicemenu items -->
191+
<button
192+
type="button"
193+
class="dsn-button dsn-button--subtle dsn-button--icon-only"
194+
aria-expanded="false"
195+
aria-controls="compact-search-panel"
196+
>
197+
<svg class="dsn-icon" aria-hidden="true"><!-- search --></svg>
198+
<span class="dsn-button__label">Zoeken</span>
199+
</button>
200+
</div>
201+
</div>
202+
<div class="dsn-page-header__search-panel" id="compact-search-panel" hidden>
203+
<!-- zoekveld + zoekknop -->
204+
</div>
205+
</div>
206+
</header>
207+
```
208+
209+
```tsx
210+
<PageHeader
211+
layout="compact"
212+
logoSlot={
213+
<a href="/">
214+
<Logo aria-hidden={true} />
215+
</a>
216+
}
217+
primaryNavigationLarge={
218+
<Menu orientation="horizontal">
219+
<MenuLink href="/home" level={1} current>
220+
Home
221+
</MenuLink>
222+
</Menu>
223+
}
224+
secondaryNavigationLarge={
225+
<Menu orientation="horizontal">
226+
<MenuLink href="/contact" level={1}>
227+
Contact
228+
</MenuLink>
229+
</Menu>
230+
}
231+
/>
232+
```
233+
234+
### Inverse kleurvariant
235+
236+
De `colorScheme="inverse"` variant gebruikt `accent-1-inverse` achtergronden op de navbar en compact balk voor prominente branding. Het masthead blijft altijd neutraal (`neutral.bg-document`). Logo-kleuren en menu-items passen zich automatisch aan via CSS context overrides — geen extra klassen nodig.
237+
238+
```html
239+
<!-- HTML/CSS — inverse modifier (combineerbaar met andere modifiers) -->
240+
<header class="dsn-page-header dsn-page-header--inverse">...</header>
241+
242+
<!-- Combinatie met compact layout -->
243+
<header
244+
class="dsn-page-header dsn-page-header--compact dsn-page-header--inverse"
245+
>
246+
...
247+
</header>
248+
```
249+
250+
```tsx
251+
<PageHeader colorScheme="inverse" logoSlot={...} ... />
252+
253+
{/* Combinatie */}
254+
<PageHeader layout="compact" colorScheme="inverse" logoSlot={...} ... />
255+
```
256+
257+
De inverse modifier overschrijft via CSS custom properties:
258+
259+
- `--dsn-page-header-background-color` → `accent-1-inverse.bg-default` (small viewport balk)
260+
- `--dsn-page-header-navbar-background-color` → `accent-1-inverse.bg-default`
261+
- `--dsn-page-header-compact-background-color` → `accent-1-inverse.bg-default`
262+
- `--dsn-page-header-search-panel-background-color` → `accent-1-inverse.bg-document`
263+
- `--dsn-logo-color-primary` / `--dsn-logo-color-label` → wit / achtergrondkleur (reset in masthead)
264+
- `--dsn-menu-item-color` en `--dsn-button-subtle-color` → wit op alle inverse vlakken
265+
167266
### Zoekpaneel (small viewport)
168267

169268
Het zoekpaneel verschijnt direct onder de header-binnenbalk. Het paneel bevat een `SearchInput` en een zoekknop:
@@ -206,6 +305,9 @@ Het zoekpaneel verschijnt direct onder de header-binnenbalk. Het paneel bevat ee
206305
| `--dsn-page-header-navbar-background-color` | `{dsn.color.accent-1.bg-default}` | Navigatiebalk achtergrond (large) |
207306
| `--dsn-page-header-navbar-padding-inline` | `{dsn.space.inline.xl}` | Horizontale padding navigatiebalk (large) |
208307
| `--dsn-page-header-secondary-nav-gap` | `{dsn.space.column.3xl}` | Gap servicemenu ↔ zoekveld (large) |
308+
| `--dsn-page-header-compact-background-color` | `{dsn.color.neutral.bg-document}` | Compact balk achtergrond |
309+
| `--dsn-page-header-compact-padding-block` | `{dsn.space.block.xl}` | Verticale padding compact balk |
310+
| `--dsn-page-header-compact-padding-inline` | `{dsn.space.inline.xl}` | Horizontale padding compact balk |
209311

210312
## Accessibility
211313

0 commit comments

Comments
 (0)