Skip to content

Commit 490c0c5

Browse files
jeffreylauwersjeffreylauwers
authored
Merge pull request #152 from jeffreylauwers/feature/page-header-compact-layout
feat(PageHeader): inverse kleurvariant
2 parents 705e75b + 7300554 commit 490c0c5

7 files changed

Lines changed: 336 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/components-html/src/page-header/page-header.css‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -307,3 +307,111 @@
307307
--dsn-text-input-padding-block-start: var(--dsn-space-block-md);
308308
--dsn-text-input-padding-block-end: var(--dsn-space-block-md);
309309
}
310+
311+
/* =============================================================================
312+
Inverse kleurvariant — accent-1-inverse achtergrond voor prominente branding
313+
Navbar + compact bar: accent-1-inverse.bg-default
314+
Zoekpaneel: accent-1-inverse.bg-document (iets donkerder voor visuele scheiding)
315+
Masthead: ongewijzigd (neutral.bg-document)
316+
Logo-kleuren passen zich automatisch aan via CSS custom property overrides.
317+
============================================================================= */
318+
319+
.dsn-page-header--inverse {
320+
/* Small viewport: header-balk en border krijgen de inverse achtergrondkleur */
321+
--dsn-page-header-background-color: var(
322+
--dsn-color-accent-1-inverse-bg-default
323+
);
324+
--dsn-page-header-border-block-end-color: var(
325+
--dsn-color-accent-1-inverse-bg-default
326+
);
327+
/* Navbar (large default layout) */
328+
--dsn-page-header-navbar-background-color: var(
329+
--dsn-color-accent-1-inverse-bg-default
330+
);
331+
/* Zoekpaneel: bg-document is donkerder dan bg-default — visuele scheiding */
332+
--dsn-page-header-search-panel-background-color: var(
333+
--dsn-color-accent-1-inverse-bg-document
334+
);
335+
/* Compact layout balk */
336+
--dsn-page-header-compact-background-color: var(
337+
--dsn-color-accent-1-inverse-bg-default
338+
);
339+
/* Logo: primaire kleur en label omdraaien voor donkere achtergrond */
340+
--dsn-logo-color-primary: var(--dsn-color-accent-1-inverse-color-default);
341+
--dsn-logo-color-label: var(--dsn-color-accent-1-inverse-bg-default);
342+
}
343+
344+
/* Masthead blijft op neutrale achtergrond — logo kleuren resetten naar standaard */
345+
.dsn-page-header--inverse .dsn-page-header__masthead {
346+
--dsn-logo-color-primary: var(--dsn-color-accent-1-inverse-bg-default);
347+
--dsn-logo-color-label: var(--dsn-color-neutral-bg-document);
348+
}
349+
350+
/* Buttons in de header-balk (small viewport: menu + zoekknop) op inverse achtergrond */
351+
.dsn-page-header--inverse .dsn-page-header__small-layout {
352+
--dsn-button-subtle-color: var(--dsn-color-accent-1-inverse-color-default);
353+
--dsn-button-subtle-hover-background-color: var(
354+
--dsn-color-accent-1-inverse-bg-hover
355+
);
356+
--dsn-button-subtle-hover-color: var(
357+
--dsn-color-accent-1-inverse-color-hover
358+
);
359+
--dsn-button-subtle-active-background-color: var(
360+
--dsn-color-accent-1-inverse-bg-active
361+
);
362+
--dsn-button-subtle-active-color: var(
363+
--dsn-color-accent-1-inverse-color-active
364+
);
365+
}
366+
367+
/* Menu-items + expand-buttons + zoekknop in de inverse navbar en compacte navigatie */
368+
.dsn-page-header--inverse .dsn-page-header__navbar,
369+
.dsn-page-header--inverse .dsn-page-header__compact-primary-nav,
370+
.dsn-page-header--inverse .dsn-page-header__compact-secondary {
371+
/* Menu-item kleuren: tekst en interactiestaten */
372+
--dsn-menu-item-color: var(--dsn-color-accent-1-inverse-color-default);
373+
--dsn-menu-item-hover-color: var(--dsn-color-accent-1-inverse-color-hover);
374+
--dsn-menu-item-hover-background-color: var(
375+
--dsn-color-accent-1-inverse-bg-hover
376+
);
377+
--dsn-menu-item-active-color: var(--dsn-color-accent-1-inverse-color-active);
378+
--dsn-menu-item-active-background-color: var(
379+
--dsn-color-accent-1-inverse-bg-active
380+
);
381+
/* MenuLink current (actieve pagina) */
382+
--dsn-menu-link-current-color: var(
383+
--dsn-color-accent-1-inverse-color-default
384+
);
385+
--dsn-menu-link-current-background-color: var(
386+
--dsn-color-accent-1-inverse-bg-active
387+
);
388+
--dsn-menu-link-current-indicator-color: var(
389+
--dsn-color-accent-1-inverse-color-default
390+
);
391+
--dsn-menu-link-current-hover-color: var(
392+
--dsn-color-accent-1-inverse-color-hover
393+
);
394+
--dsn-menu-link-current-hover-background-color: var(
395+
--dsn-color-accent-1-inverse-bg-active
396+
);
397+
--dsn-menu-link-current-active-color: var(
398+
--dsn-color-accent-1-inverse-color-active
399+
);
400+
--dsn-menu-link-current-active-background-color: var(
401+
--dsn-color-accent-1-inverse-bg-active
402+
);
403+
/* Subtle buttons: uitklapknop in MenuLink + icon-only zoekknop */
404+
--dsn-button-subtle-color: var(--dsn-color-accent-1-inverse-color-default);
405+
--dsn-button-subtle-hover-background-color: var(
406+
--dsn-color-accent-1-inverse-bg-hover
407+
);
408+
--dsn-button-subtle-hover-color: var(
409+
--dsn-color-accent-1-inverse-color-hover
410+
);
411+
--dsn-button-subtle-active-background-color: var(
412+
--dsn-color-accent-1-inverse-bg-active
413+
);
414+
--dsn-button-subtle-active-color: var(
415+
--dsn-color-accent-1-inverse-color-active
416+
);
417+
}

‎packages/components-react/src/PageHeader/PageHeader.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import './PageHeader.css';
99

1010
export type PageHeaderSticky = 'none' | 'sticky' | 'auto-hide';
1111
export type PageHeaderLayout = 'default' | 'compact';
12+
export type PageHeaderColorScheme = 'default' | 'inverse';
1213

1314
export interface PageHeaderProps extends Omit<
1415
React.HTMLAttributes<HTMLElement>,
@@ -41,6 +42,16 @@ export interface PageHeaderProps extends Omit<
4142
*/
4243
layout?: PageHeaderLayout;
4344

45+
/**
46+
* Kleurschema van de header.
47+
* - `default`: neutrale achtergrond met accent-1 navbar
48+
* - `inverse`: sterke accent-1-inverse achtergrond op navbar en compact balk
49+
* voor prominente branding. Het masthead blijft altijd neutraal.
50+
* Logo-kleuren passen zich automatisch aan via CSS context overrides.
51+
* @default 'default'
52+
*/
53+
colorScheme?: PageHeaderColorScheme;
54+
4455
/**
4556
* Initiële open-staat van het zoekpaneel (small viewport).
4657
* Handig voor Storybook en tests — het paneel kan daarna nog steeds
@@ -141,6 +152,7 @@ export const PageHeader = React.forwardRef<HTMLElement, PageHeaderProps>(
141152
logoSlot,
142153
sticky = 'none',
143154
layout = 'default',
155+
colorScheme = 'default',
144156
initialSearchOpen = false,
145157
primaryNavigation,
146158
primaryNavigationLarge,
@@ -254,6 +266,7 @@ export const PageHeader = React.forwardRef<HTMLElement, PageHeaderProps>(
254266
sticky === 'sticky' && 'dsn-page-header--sticky',
255267
sticky === 'auto-hide' && 'dsn-page-header--auto-hide',
256268
layout === 'compact' && 'dsn-page-header--compact',
269+
colorScheme === 'inverse' && 'dsn-page-header--inverse',
257270
className
258271
);
259272

0 commit comments

Comments
 (0)