Skip to content

feat(Templates): Base Page — eerste paginatemplate#168

Merged
jeffreylauwers merged 3 commits intomainfrom
feature/template-basic-page
Apr 17, 2026
Merged

feat(Templates): Base Page — eerste paginatemplate#168
jeffreylauwers merged 3 commits intomainfrom
feature/template-basic-page

Conversation

@jeffreylauwers
Copy link
Copy Markdown
Owner

@jeffreylauwers jeffreylauwers commented Apr 17, 2026

Sluit #165.

Summary

Voegt de nieuwe Storybook-categorie Templates toe met het Base Page template.

  • Twee stories: Base Page (default) en Base Page: Inverse
  • Geen Container — padding staat direct als inline style op <main> via tokens: paddingBlock: var(--dsn-space-block-6xl) (64px) en paddingInline: var(--dsn-space-inline-xl) (16px). Template-specifiek bewust niet via een herbruikbare klasse.
  • Documentatie beschrijft de verantwoordelijkheidsverdeling per laag, waarom <main> in het template zit (niet in PageBody), de padding-keuze, en de skip-link vereiste (WCAG 2.4.1)

Test plan

  • TypeScript schoon (pnpm --filter storybook exec tsc --noEmit)
  • Lint schoon (pnpm lint)
  • Default story: 64px/16px padding rondom inhoud, footer onderaan viewport
  • Inverse story: donkere accent-1-inverse footer zichtbaar
  • Introduction.mdx bijgewerkt met Templates-categorie

🤖 Generated with Claude Code

jeffreylauwers and others added 2 commits April 17, 2026 18:05
Voegt de nieuwe Storybook-categorie 'Templates' toe met het Basic Page
template: een complete, toegankelijke paginastructuur van Body +
SkipLink + PageLayout + PageHeader + PageBody + PageFooter.

Twee stories: Default en Inverse (colorScheme="inverse" op header en footer).
Documentatie beschrijft de verantwoordelijkheidsverdeling per laag,
waarom <main> in het template zit (niet in PageBody), en de
skip-link vereiste (WCAG 2.4.1).

Sluit #165.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…er door inline padding

- BasicPage → BasePage (bestanden, titels, Storybook-route)
- Container verwijderd: padding nu direct op <main> als inline style
  via tokens: paddingBlock var(--dsn-space-block-6xl) (64px),
  paddingInline var(--dsn-space-inline-xl) (16px)
- Documentatie uitgebreid met uitleg waarom inline style en niet
  een herbruikbare klasse

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@jeffreylauwers jeffreylauwers changed the title feat(Templates): Basic Page — eerste paginatemplate feat(Templates): Base Page — eerste paginatemplate Apr 17, 2026
De Grid inside PageFooter had een dubbele padding-inline: de eigen
--dsn-grid-margin (24px) bovenop de --dsn-page-footer-padding-inline
(16px) van de __inner wrapper. Via een scoped custom property override
op .dsn-page-footer valt de Grid-margin weg en lijnt het logo uit met
de paginainhoud.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@jeffreylauwers jeffreylauwers merged commit 72e7ce2 into main Apr 17, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant