@dsn-starter-kit/components-react 1.0.0

package/dist/PageBody/PageBody.css

@@ -0,0 +1,69 @@
+/**
+ * PageBody Component
+ * Structurele wrapper voor de hoofdinhoud van een pagina. Vult de beschikbare
+ * verticale ruimte op via `flex: 1` (sticky footer patroon binnen PageLayout).
+ *
+ * Structuur:
+ * <div class="dsn-page-body">
+ *   <div class="dsn-page-body__inner">
+ *     <main id="main-content" tabindex="-1">
+ *       <!-- paginainhoud -->
+ *     </main>
+ *   </div>
+ * </div>
+ */
+
+/* =============================================================================
+   Base
+   ============================================================================= */
+
+.dsn-page-body {
+  flex: 1;
+  overflow-x: clip;
+}
+
+/* =============================================================================
+   Inner container — padding + optioneel max-inline-size via dsn.page.max-inline-size
+   ============================================================================= */
+
+.dsn-page-body__inner {
+  padding-inline: var(--dsn-page-body-padding-inline);
+  max-inline-size: var(--dsn-page-max-inline-size);
+  margin-inline: auto;
+}
+
+/* =============================================================================
+   Sidebar layout — twee-koloms splitsing binnen dsn-page-body__inner
+   Sidebar zichtbaar op large viewport (>= 64em), gelijktijdig met
+   dsn-page-header__large-layout.
+   ============================================================================= */
+
+.dsn-sidebar-layout {
+  display: flex;
+}
+
+.dsn-sidebar-layout__sidebar {
+  display: none;
+}
+
+.dsn-sidebar-layout__main {
+  flex: 1;
+  min-inline-size: 0;
+  padding-block-start: var(--dsn-space-block-3xl);
+}
+
+@media (min-width: 64em) {
+  .dsn-sidebar-layout__sidebar {
+    display: block;
+    flex-shrink: 0;
+    inline-size: var(--dsn-sidebar-layout-sidebar-inline-size, 20rem);
+    padding-inline-end: var(--dsn-space-inline-2xl);
+    padding-block: var(--dsn-space-block-3xl);
+  }
+}
+
+/* Current-staat override in sidebar: transparante achtergrond */
+.dsn-sidebar-layout__sidebar .dsn-menu-link__link[aria-current='page'] {
+  background-color: transparent;
+}
+

package/dist/PageBody/PageBody.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import './PageBody.css';
+export interface PageBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * De paginainhoud: doorgaans een `<main>` element met `id="main-content"`.
+     */
+    children: React.ReactNode;
+    /**
+     * Extra CSS-klassen
+     */
+    className?: string;
+}
+/**
+ * PageBody component
+ * Structurele wrapper voor de hoofdinhoud van een pagina. Vult de beschikbare
+ * verticale ruimte op binnen `PageLayout` zodat `PageFooter` altijd onderaan
+ * de viewport staat (sticky footer patroon via `flex: 1`).
+ *
+ * @example
+ * ```tsx
+ * <PageLayout>
+ *   <PageHeader logoSlot={<Logo />} />
+ *   <PageBody>
+ *     <main id="main-content" tabIndex={-1}>
+ *       <Container>...</Container>
+ *     </main>
+ *   </PageBody>
+ *   <PageFooter slot1={<Logo />} />
+ * </PageLayout>
+ * ```
+ */
+export declare const PageBody: React.ForwardRefExoticComponent<PageBodyProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=PageBody.d.ts.map

package/dist/PageBody/PageBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageBody.d.ts","sourceRoot":"","sources":["../../src/PageBody/PageBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,QAAQ,sFAYpB,CAAC"}

package/dist/PageBody/PageBody.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './PageBody.css';
+/**
+ * PageBody component
+ * Structurele wrapper voor de hoofdinhoud van een pagina. Vult de beschikbare
+ * verticale ruimte op binnen `PageLayout` zodat `PageFooter` altijd onderaan
+ * de viewport staat (sticky footer patroon via `flex: 1`).
+ *
+ * @example
+ * ```tsx
+ * <PageLayout>
+ *   <PageHeader logoSlot={<Logo />} />
+ *   <PageBody>
+ *     <main id="main-content" tabIndex={-1}>
+ *       <Container>...</Container>
+ *     </main>
+ *   </PageBody>
+ *   <PageFooter slot1={<Logo />} />
+ * </PageLayout>
+ * ```
+ */
+export const PageBody = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: classNames('dsn-page-body', className), ...props, children: _jsx("div", { className: "dsn-page-body__inner", children: children }) }));
+});
+PageBody.displayName = 'PageBody';
+//# sourceMappingURL=PageBody.js.map

package/dist/PageBody/PageBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageBody.js","sourceRoot":"","sources":["../../src/PageBody/PageBody.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,gBAAgB,CAAC;AAcxB;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC,KAC7C,KAAK,YAET,cAAK,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAO,GAClD,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/PageBody/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PageBody';
+//# sourceMappingURL=index.d.ts.map

package/dist/PageBody/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/PageBody/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/PageBody/index.js

@@ -0,0 +1,2 @@
+export * from './PageBody';
+//# sourceMappingURL=index.js.map

package/dist/PageBody/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/PageBody/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/PageFooter/PageFooter.css

@@ -0,0 +1,102 @@
+/**
+ * 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 {
+  --dsn-grid-margin: 0;
+  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);
+  max-inline-size: var(--dsn-page-max-inline-size);
+  margin-inline: auto;
+}
+
+/* =============================================================================
+   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;
+}
+
+/* Logo-link display — inline <a> rond een block SVG fragmenteert de focus ring */
+.dsn-page-footer a:not(.dsn-link) {
+  display: inline-block;
+}
+
+/* =============================================================================
+   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);
+}
+

package/dist/PageFooter/PageFooter.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import './PageFooter.css';
+export type PageFooterColorScheme = 'default' | 'inverse';
+export interface PageFooterProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+    /** Kolom 1 (inline-start). Doorgaans het organisatielogo in een `<a>`. */
+    slot1?: React.ReactNode;
+    /** Kolom 2. Optioneel — wordt niet gerenderd als weggelaten. */
+    slot2?: React.ReactNode;
+    /** Kolom 3. Vrije inhoud: navigatielinks, tekst, adressen, etc. */
+    slot3?: React.ReactNode;
+    /** Kolom 4 (inline-end). Vrije inhoud: juridische links, social media, etc. */
+    slot4?: React.ReactNode;
+    /**
+     * Kleurschema van de footer.
+     * - `default`: accent-1 achtergrond (`bg-default`)
+     * - `inverse`: accent-1-inverse achtergrond voor een donkere huisstijlvariant
+     * @default 'default'
+     */
+    colorScheme?: PageFooterColorScheme;
+}
+/**
+ * PageFooter component
+ * Paginavoettekst met accent-1 achtergrond, dikke border-block-start en
+ * een 4-koloms grid. Responsief: verticale stapeling op mobiel,
+ * vier gelijke kolommen op grote viewports (≥ 64em).
+ *
+ * Het `<footer>` element als directe afstammeling van `<body>` heeft
+ * impliciet `role="contentinfo"` — geen extra attribuut nodig.
+ *
+ * @example
+ * ```tsx
+ * <PageFooter
+ *   slot1={
+ *     <a href="/">
+ *       <Logo aria-hidden={true} />
+ *       <span className="dsn-visually-hidden">Starter Kit — terug naar homepage</span>
+ *     </a>
+ *   }
+ *   slot3={
+ *     <UnorderedList>
+ *       <li><Link href="/nieuws">Nieuws</Link></li>
+ *       <li><Link href="/over-ons">Over ons</Link></li>
+ *     </UnorderedList>
+ *   }
+ *   slot4={
+ *     <UnorderedList>
+ *       <li><Link href="/privacy">Privacyverklaring</Link></li>
+ *       <li><Link href="/accessibility">Toegankelijkheid</Link></li>
+ *     </UnorderedList>
+ *   }
+ * />
+ * ```
+ */
+export declare const PageFooter: React.ForwardRefExoticComponent<PageFooterProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=PageFooter.d.ts.map

package/dist/PageFooter/PageFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageFooter.d.ts","sourceRoot":"","sources":["../../src/PageFooter/PageFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,SAAS,CAAC;AAE1D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,UAAU,CACX;IACC,0EAA0E;IAC1E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,gEAAgE;IAChE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,mEAAmE;IACnE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,UAAU,qFAgDtB,CAAC"}

package/dist/PageFooter/PageFooter.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import { Grid } from '../Grid';
+import { GridItem } from '../Grid';
+import './PageFooter.css';
+/**
+ * PageFooter component
+ * Paginavoettekst met accent-1 achtergrond, dikke border-block-start en
+ * een 4-koloms grid. Responsief: verticale stapeling op mobiel,
+ * vier gelijke kolommen op grote viewports (≥ 64em).
+ *
+ * Het `<footer>` element als directe afstammeling van `<body>` heeft
+ * impliciet `role="contentinfo"` — geen extra attribuut nodig.
+ *
+ * @example
+ * ```tsx
+ * <PageFooter
+ *   slot1={
+ *     <a href="/">
+ *       <Logo aria-hidden={true} />
+ *       <span className="dsn-visually-hidden">Starter Kit — terug naar homepage</span>
+ *     </a>
+ *   }
+ *   slot3={
+ *     <UnorderedList>
+ *       <li><Link href="/nieuws">Nieuws</Link></li>
+ *       <li><Link href="/over-ons">Over ons</Link></li>
+ *     </UnorderedList>
+ *   }
+ *   slot4={
+ *     <UnorderedList>
+ *       <li><Link href="/privacy">Privacyverklaring</Link></li>
+ *       <li><Link href="/accessibility">Toegankelijkheid</Link></li>
+ *     </UnorderedList>
+ *   }
+ * />
+ * ```
+ */
+export const PageFooter = React.forwardRef(({ className, slot1, slot2, slot3, slot4, colorScheme = 'default', ...props }, ref) => {
+    const classes = classNames('dsn-page-footer', colorScheme === 'inverse' && 'dsn-page-footer--inverse', className);
+    return (_jsx("footer", { ref: ref, className: classes, ...props, children: _jsx("div", { className: "dsn-page-footer__inner", children: _jsxs(Grid, { children: [slot1 && (_jsx(GridItem, { colSpan: 12, colSpanLg: 3, children: slot1 })), slot2 && (_jsx(GridItem, { colSpan: 12, colSpanLg: 3, children: slot2 })), slot3 && (_jsx(GridItem, { colSpan: 12, colSpanLg: 3, children: slot3 })), slot4 && (_jsx(GridItem, { colSpan: 12, colSpanLg: 3, children: slot4 }))] }) }) }));
+});
+PageFooter.displayName = 'PageFooter';
+//# sourceMappingURL=PageFooter.js.map

package/dist/PageFooter/PageFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageFooter.js","sourceRoot":"","sources":["../../src/PageFooter/PageFooter.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,kBAAkB,CAAC;AA6B1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,CACE,EACE,SAAS,EACT,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAW,GAAG,SAAS,EACvB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CACxB,iBAAiB,EACjB,WAAW,KAAK,SAAS,IAAI,0BAA0B,EACvD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,iBAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YAC7C,cAAK,SAAS,EAAC,wBAAwB,YACrC,MAAC,IAAI,eACF,KAAK,IAAI,CACR,KAAC,QAAQ,IAAC,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,YAChC,KAAK,GACG,CACZ,EACA,KAAK,IAAI,CACR,KAAC,QAAQ,IAAC,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,YAChC,KAAK,GACG,CACZ,EACA,KAAK,IAAI,CACR,KAAC,QAAQ,IAAC,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,YAChC,KAAK,GACG,CACZ,EACA,KAAK,IAAI,CACR,KAAC,QAAQ,IAAC,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,YAChC,KAAK,GACG,CACZ,IACI,GACH,GACC,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/PageFooter/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PageFooter';
+//# sourceMappingURL=index.d.ts.map

package/dist/PageFooter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/PageFooter/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/PageFooter/index.js

@@ -0,0 +1,2 @@
+export * from './PageFooter';
+//# sourceMappingURL=index.js.map

package/dist/PageFooter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/PageFooter/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}