Merge pull request #162 from jeffreylauwers/feature/page-footer

feat(PageFooter): paginavoettekst met 4-koloms grid en inverse colorScheme

Author: jeffreylauwers

docs/03-components.md

@@ -1,6 +1,6 @@
 # Components
 
-**Last Updated:** April 9, 2026
+**Last Updated:** April 17, 2026
 
 Complete component specifications and guidelines for the Design System Starter Kit.
 
@@ -1697,7 +1697,7 @@ const [isOpen, setIsOpen] = React.useState(false);
 
 ## Navigation Components
 
-**Status:** Complete (HTML/CSS, React): 5 components total
+**Status:** Complete (HTML/CSS, React): 6 components total
 
 ### Menu
 
@@ -2237,6 +2237,130 @@ const [isOpen, setIsOpen] = React.useState(false);
 
 ---
 
+### PageFooter
+
+**Status:** Complete (HTML/CSS, React)
+
+**Location:** `packages/components-{html|react}/src/page-footer/` / `packages/components-react/src/PageFooter/`
+
+**Tokens:** `tokens/components/page-footer.json`
+
+**Props:** `logoSlot`, `secondarySlot`, `contentSlot`, `linksSlot`, `colorScheme` (`'default'` | `'inverse'`), `className`
+
+**Features:**
+
+- Paginavoettekst met `accent-1` achtergrond en dikke `border-block-start` (4px): visuele tegenhanger van de `PageHeader border-block-end`
+- `<footer>` element met impliciet `role="contentinfo"` landmark — geen extra attribuut nodig
+- 4-koloms grid via `dsn-grid` + `dsn-col-12 dsn-col-lg-3`: vier gelijke slots naast elkaar op ≥ 64em, verticaal gestapeld op mobiel
+- `row-gap` tussen gestapelde slots op mobiel via `--dsn-page-footer-slot-gap`
+- `colorScheme="inverse"`: schakelt naar `accent-1-inverse` achtergrond; tekst-, link- en logokleuren worden via CSS custom property overrides automatisch aangepast voor contrast
+- Logo-slot: `max-block-size` via `--dsn-page-footer-logo-max-block-size` (2rem); `--dsn-logo-color-primary` en `--dsn-logo-color-label` omgedraaid bij inverse voor correct doorkijkje-effect
+- `secondarySlot` (slot 2): optioneel; verdwijnt op mobiel via `:empty { display: none }` als leeg
+
+**CSS-klassen:**
+
+| Klasse                        | Element    | Beschrijving                                             |
+| ----------------------------- | ---------- | -------------------------------------------------------- |
+| `dsn-page-footer`             | `<footer>` | Rootblok: accent-1 achtergrond, dikke border-block-start |
+| `dsn-page-footer--inverse`    | `<footer>` | Modifier: accent-1-inverse kleurenschaal                 |
+| `dsn-page-footer__inner`      | `<div>`    | Padding-container voor het grid                          |
+| `dsn-page-footer__empty-slot` | `<div>`    | Optioneel slot 2: verborgen via `:empty` wanneer leeg    |
+
+**Design tokens:**
+
+| Token                                        | Waarde                                | Beschrijving                             |
+| -------------------------------------------- | ------------------------------------- | ---------------------------------------- |
+| `--dsn-page-footer-background-color`         | `{dsn.color.accent-1.bg-default}`     | Achtergrondkleur (default)               |
+| `--dsn-page-footer-border-block-start-width` | `{dsn.border.width.thick}`            | Breedte topborder (4px)                  |
+| `--dsn-page-footer-border-block-start-color` | `{dsn.color.accent-1.border-default}` | Kleur topborder (default)                |
+| `--dsn-page-footer-padding-block`            | `{dsn.space.block.6xl}`               | Verticale padding boven en onder (64px)  |
+| `--dsn-page-footer-padding-inline`           | `{dsn.space.inline.xl}`               | Horizontale padding                      |
+| `--dsn-page-footer-slot-gap`                 | `{dsn.space.block.xl}`                | Verticale ruimte tussen gestapelde slots |
+| `--dsn-page-footer-logo-max-block-size`      | `2rem`                                | Maximale logohoogte (32px)               |
+
+**Usage:**
+
+```html
+<!-- HTML/CSS -->
+<footer class="dsn-page-footer">
+  <div class="dsn-page-footer__inner">
+    <div class="dsn-grid">
+      <div class="dsn-col-12 dsn-col-lg-3">
+        <a href="/">
+          <svg class="dsn-logo" aria-hidden="true"><!-- logo --></svg>
+          <span class="dsn-visually-hidden"
+            >Naam organisatie — terug naar homepage</span
+          >
+        </a>
+      </div>
+      <div class="dsn-col-12 dsn-col-lg-3 dsn-page-footer__empty-slot">
+        <p class="dsn-paragraph">
+          Korte beschrijving.
+          <a class="dsn-link" href="/about">Meer informatie</a>.
+        </p>
+      </div>
+      <div class="dsn-col-12 dsn-col-lg-3">
+        <ul class="dsn-unordered-list">
+          <li><a class="dsn-link" href="/nieuws">Nieuws</a></li>
+          <li><a class="dsn-link" href="/over-ons">Over ons</a></li>
+        </ul>
+      </div>
+      <div class="dsn-col-12 dsn-col-lg-3">
+        <ul class="dsn-unordered-list">
+          <li><a class="dsn-link" href="/privacy">Privacyverklaring</a></li>
+          <li>
+            <a class="dsn-link" href="/accessibility">Toegankelijkheid</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</footer>
+```
+
+```tsx
+// React
+<PageFooter
+  logoSlot={
+    <a href="/">
+      <Logo aria-hidden={true} />
+      <span className="dsn-visually-hidden">
+        Naam organisatie — terug naar homepage
+      </span>
+    </a>
+  }
+  secondarySlot={
+    <Paragraph>
+      Korte beschrijving. <Link href="/about">Meer informatie</Link>.
+    </Paragraph>
+  }
+  contentSlot={
+    <UnorderedList>
+      <li>
+        <Link href="/nieuws">Nieuws</Link>
+      </li>
+      <li>
+        <Link href="/over-ons">Over ons</Link>
+      </li>
+    </UnorderedList>
+  }
+  linksSlot={
+    <UnorderedList>
+      <li>
+        <Link href="/privacy">Privacyverklaring</Link>
+      </li>
+      <li>
+        <Link href="/accessibility">Toegankelijkheid</Link>
+      </li>
+    </UnorderedList>
+  }
+/>
+```
+
+**Tests:** React (11 tests)
+
+---
+
 ## Branding Components
 
 **Status:** Complete (HTML/CSS, React): 1 component total

docs/changelog.md

@@ -6,6 +6,23 @@ All notable changes to this project are documented in this file.
 
 ---
 
+## Version 5.26.0 (April 17, 2026)
+
+### PageFooter component (issue #161, PR #162)
+
+#### Added
+
+- **PageFooter** component: paginavoettekst met `accent-1` achtergrond, dikke `border-block-start` (4px) en een responsive 4-koloms grid (PR #162)
+- `<footer>` element met impliciet `role="contentinfo"` landmark
+- 4 slots: `logoSlot` (slot 1), `secondarySlot` (slot 2, optioneel), `contentSlot` (slot 3), `linksSlot` (slot 4)
+- Op mobiel: slots verticaal gestapeld met `row-gap` via `--dsn-page-footer-slot-gap`; leeg `secondarySlot` verborgen via `:empty { display: none }`
+- Op ≥ 64em: vier gelijke kolommen naast elkaar via `dsn-col-12 dsn-col-lg-3`
+- `colorScheme="inverse"` modifier: schakelt naar `accent-1-inverse` achtergrond; tekst-, link- en logokleuren via CSS custom property overrides; `--dsn-logo-color-label` mee omgedraaid voor correct doorkijkje-effect
+- 7 design tokens in `tokens/components/page-footer.json`: `background-color`, `border-block-start-width`, `border-block-start-color`, `padding-block`, `padding-inline`, `slot-gap`, `logo.max-block-size`
+- 11 tests, 3 Storybook bestanden
+
+---
+
 ## Version 5.25.0 (April 14, 2026)
 
 ### Popover component (issue #155, PR #156)

packages/components-html/src/page-footer/page-footer.css

@@ -0,0 +1,93 @@
+/**
+ * PageFooter Component
+ * Paginavoettekst met accent-1 achtergrond, dikke border-block-start en
+ * een 4-koloms grid. Mobile-first: slots stapelen verticaal; op grote
+ * viewports (≥ 64em) vier gelijke kolommen naast elkaar.
+ *
+ * Structuur:
+ * <footer class="dsn-page-footer">
+ *   <div class="dsn-page-footer__inner">
+ *     <div class="dsn-grid">
+ *       <div class="dsn-col-12 dsn-col-lg-3"><!-- logo slot --></div>
+ *       <div class="dsn-col-12 dsn-col-lg-3"><!-- slot 2 (optioneel) --></div>
+ *       <div class="dsn-col-12 dsn-col-lg-3"><!-- content slot --></div>
+ *       <div class="dsn-col-12 dsn-col-lg-3"><!-- links slot --></div>
+ *     </div>
+ *   </div>
+ * </footer>
+ *
+ * <!-- Inverse colorScheme -->
+ * <footer class="dsn-page-footer dsn-page-footer--inverse">...</footer>
+ */
+
+/* =============================================================================
+   Base
+   ============================================================================= */
+
+.dsn-page-footer {
+  background-color: var(--dsn-page-footer-background-color);
+  border-block-start: var(--dsn-page-footer-border-block-start-width) solid
+    var(--dsn-page-footer-border-block-start-color);
+}
+
+/* =============================================================================
+   Inner container — max-breedte + padding
+   ============================================================================= */
+
+.dsn-page-footer__inner {
+  padding-block: var(--dsn-page-footer-padding-block);
+  padding-inline: var(--dsn-page-footer-padding-inline);
+}
+
+/* =============================================================================
+   Logo — max-block-size op directe child van het logo-slot
+   ============================================================================= */
+
+.dsn-page-footer .dsn-logo {
+  max-block-size: var(--dsn-page-footer-logo-max-block-size);
+  inline-size: auto;
+}
+
+/* =============================================================================
+   Grid slot-gap — verticale ruimte tussen gestapelde slots op small viewport.
+   Op large viewport (4 kolommen naast elkaar) is row-gap visueel niet storend.
+   ============================================================================= */
+
+.dsn-page-footer .dsn-grid {
+  row-gap: var(--dsn-page-footer-slot-gap);
+}
+
+/* =============================================================================
+   Inverse modifier — schakelt naar accent-1-inverse kleurenschaal
+   ============================================================================= */
+
+.dsn-page-footer--inverse {
+  --dsn-page-footer-background-color: var(
+    --dsn-color-accent-1-inverse-bg-default
+  );
+  --dsn-page-footer-border-block-start-color: var(
+    --dsn-color-accent-1-inverse-border-default
+  );
+}
+
+/* Tekst- en linkkleur-overrides op inverse achtergrond */
+.dsn-page-footer--inverse {
+  --dsn-paragraph-color: var(--dsn-color-accent-1-inverse-color-default);
+  --dsn-link-color: var(--dsn-color-accent-1-inverse-color-default);
+  --dsn-link-text-decoration-color: var(
+    --dsn-color-accent-1-inverse-color-default
+  );
+  --dsn-link-hover-color: var(--dsn-color-accent-1-inverse-color-hover);
+  --dsn-unordered-list-color: var(--dsn-color-accent-1-inverse-color-default);
+  --dsn-unordered-list-marker-color: var(
+    --dsn-color-accent-1-inverse-color-default
+  );
+}
+
+/* Logo-kleuren aanpassen op inverse achtergrond:
+   primary → wit (logo-rand zichtbaar op donkere achtergrond)
+   label   → donkerblauw (doorkijkje-effect: letters tonen de achtergrondkleur) */
+.dsn-page-footer--inverse .dsn-logo {
+  --dsn-logo-color-primary: var(--dsn-color-accent-1-inverse-color-default);
+  --dsn-logo-color-label: var(--dsn-color-accent-1-inverse-bg-default);
+}

packages/components-react/src/PageFooter/PageFooter.css

@@ -0,0 +1 @@
+@import '../../../components-html/src/page-footer/page-footer.css';

packages/components-react/src/PageFooter/PageFooter.test.tsx

@@ -0,0 +1,128 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { PageFooter } from './PageFooter';
+
+const defaultLogo = (
+  <a href="/">
+    <span>Logo</span>
+    <span className="dsn-visually-hidden">
+      Starter Kit — terug naar homepage
+    </span>
+  </a>
+);
+
+describe('PageFooter', () => {
+  // ---------------------------------------------------------------------------
+  // Structuur
+  // ---------------------------------------------------------------------------
+
+  it('rendert een <footer>-element', () => {
+    const { container } = render(<PageFooter slot1={defaultLogo} />);
+    expect(container.querySelector('footer')).toBeTruthy();
+  });
+
+  it('heeft de basis dsn-page-footer klasse', () => {
+    const { container } = render(<PageFooter slot1={defaultLogo} />);
+    expect(container.querySelector('footer')).toHaveClass('dsn-page-footer');
+  });
+
+  it('rendert de inner-wrapper met dsn-page-footer__inner', () => {
+    const { container } = render(<PageFooter slot1={defaultLogo} />);
+    expect(container.querySelector('.dsn-page-footer__inner')).toBeTruthy();
+  });
+
+  it('rendert een grid (dsn-grid) binnen de inner-wrapper', () => {
+    const { container } = render(<PageFooter slot1={defaultLogo} />);
+    expect(
+      container.querySelector('.dsn-page-footer__inner .dsn-grid')
+    ).toBeTruthy();
+  });
+
+  it('rendert slot1 in de footer', () => {
+    const { container } = render(<PageFooter slot1={defaultLogo} />);
+    expect(container.querySelector('footer a[href="/"]')).toBeTruthy();
+  });
+
+  // ---------------------------------------------------------------------------
+  // colorScheme
+  // ---------------------------------------------------------------------------
+
+  it('heeft geen inverse modifier bij colorScheme default', () => {
+    const { container } = render(<PageFooter slot1={defaultLogo} />);
+    expect(container.querySelector('footer')).not.toHaveClass(
+      'dsn-page-footer--inverse'
+    );
+  });
+
+  it('heeft de inverse modifier bij colorScheme inverse', () => {
+    const { container } = render(
+      <PageFooter slot1={defaultLogo} colorScheme="inverse" />
+    );
+    expect(container.querySelector('footer')).toHaveClass(
+      'dsn-page-footer--inverse'
+    );
+  });
+
+  // ---------------------------------------------------------------------------
+  // Slots
+  // ---------------------------------------------------------------------------
+
+  it('rendert slot3 als dat meegegeven wordt', () => {
+    const { container } = render(
+      <PageFooter slot1={defaultLogo} slot3={<p>Lorem ipsum</p>} />
+    );
+    expect(container.querySelector('footer p')).toBeTruthy();
+  });
+
+  it('rendert slot4 als dat meegegeven wordt', () => {
+    const { container } = render(
+      <PageFooter
+        slot1={defaultLogo}
+        slot4={
+          <ul>
+            <li>
+              <a href="/privacy">Privacyverklaring</a>
+            </li>
+          </ul>
+        }
+      />
+    );
+    expect(container.querySelector('footer ul')).toBeTruthy();
+    expect(container.querySelector('footer a[href="/privacy"]')).toBeTruthy();
+  });
+
+  it('rendert slot2 als dat meegegeven wordt', () => {
+    const { container } = render(
+      <PageFooter
+        slot1={defaultLogo}
+        slot2={<span data-testid="secondary">Extra</span>}
+      />
+    );
+    expect(container.querySelector('[data-testid="secondary"]')).toBeTruthy();
+  });
+
+  // ---------------------------------------------------------------------------
+  // className en ref
+  // ---------------------------------------------------------------------------
+
+  it('voegt extra className toe aan het root element', () => {
+    const { container } = render(
+      <PageFooter slot1={defaultLogo} className="extra-class" />
+    );
+    expect(container.querySelector('footer')).toHaveClass('extra-class');
+  });
+
+  it('stuurt HTML-attributen door naar het <footer>-element', () => {
+    const { container } = render(
+      <PageFooter slot1={defaultLogo} data-testid="page-footer" />
+    );
+    expect(container.querySelector('[data-testid="page-footer"]')).toBeTruthy();
+  });
+
+  it('geeft ref door naar het <footer>-element', () => {
+    const ref = { current: null as HTMLElement | null };
+    render(<PageFooter slot1={defaultLogo} ref={ref} />);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName.toLowerCase()).toBe('footer');
+  });
+});