eho/atomic-design-poc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rijkshuisstijl restyle + wizard fixes

Browse Source 
Chrome: two-tier Rijksoverheid header (white brand bar + lint-blue
breadcrumb bar, route-driven), dark multi-column footer, white page
surface. Session shown via a shared SESSION_PORT token (keeps shared/
free of the auth context).

Overview ("Mijn overzicht") rebuilt to the NL Design System #392 pattern:
side-nav + "Wat moet ik regelen" task list (derived) + "Mijn registratie"
cards. New shared components: card, task-list, side-nav; pure
tasksFromProfile (+spec).

Wizards: grey form panel, connected numbered stepper, form-field
"(verplicht)" markers + styled description/error, full-width inputs.
Propagated to login, detail, change-request, address-fields.

Bug fixes:
- wizard-shell: add FormsModule so NgForm intercepts submit (wizards now
  advance; no native GET leaking choices into the URL).
- wizard-shell: error-summary links focus the field instead of navigating
  (a fragment href resolved against <base href="/"> reloaded to "/" and
  bounced to login).
- wizard-shell: error-summary focus only on the rising edge, so typing
  while errors are shown no longer scrolls the page up.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Edwin van den Houdt
2026-06-27 13:21:54 +02:00
parent d08f3877f7
commit 7a582ae2fa
30 changed files with 677 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/styles.scss
View File

@@ -6,15 +6,18 @@
@import '@rijkshuisstijl-community/components-css/dist/index.css'; /* component classes */
html, body { margin: 0; min-height: 100%; }
/* Rijkshuisstijl pages sit on white; cards/panels carry the subtle grey. */
body { background: var(--rhc-color-wit); color: var(--rhc-color-foreground-default); }
/* App theme layer: a few app-specific measures RHC has no token for (content/form
widths), defined ONCE here and mapped onto RHC where possible. Components reference
these tokens instead of raw values. */
:root {
--app-content-max: 64rem; /* readable page column */
--app-form-max: 30rem; /* default wizard form width */
--app-content-max: 67rem; /* readable page column */
--app-form-max: 32rem; /* default wizard form width */
--app-form-narrow: 32rem; /* page-shell narrow variant */
--app-skip-link-offset: -999px; /* off-screen skip link */
--app-sidebar-width: 15rem; /* overview side navigation */
}
/* App utility classes: centralise the repeated inline layout idioms so components stay
@@ -41,6 +44,36 @@ html, body { margin: 0; min-height: 100%; }
padding: 0;
}
/* Overview ("Mijn omgeving") layout: side navigation + main column. Collapses to
a single column on narrow viewports (nav stacks above the content). */
.app-overview {
display: grid;
grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr);
gap: var(--rhc-space-max-3xl);
align-items: start;
}
@media (max-width: 48rem) {
.app-overview { grid-template-columns: 1fr; }
}
/* Rijkshuisstijl form panel: the subtle-grey block a form sits in (see the
rijksoverheid.nl contact-form reference). */
.app-form-panel {
background: var(--rhc-color-cool-grey-100);
border-radius: var(--rhc-border-radius-md);
padding: var(--rhc-space-max-2xl);
}
/* Vertical rhythm between fields projected into a form panel. Global (not
component-scoped) so it reaches projected content past view encapsulation. */
.app-form-panel > * + * { margin-block-start: var(--rhc-space-max-xl); }
/* Bordered info box (outline, no fill) — e.g. a "Vragen?" contact block. */
.app-info-box {
border: var(--rhc-border-width-sm) solid var(--rhc-color-border-default);
border-radius: var(--rhc-border-radius-md);
padding: var(--rhc-space-max-xl);
}
/* Route transitions (withViewTransitions): cross-fade the routed CONTENT only.
The chrome gets its own stable view-transition-name so it's lifted out of the
`root` snapshot and stays put while the content fades. */