feat(design): adopt CIBG component patterns (header, forms, wizards, dashboard)
Re-skins the app's layout on top of the CIBG Huisstijl theme (previous commit) so it
matches designsystem.cibg.nl, not just its colour tokens — magenta ("robijn") header,
horizontal nav, and the CIBG component markup for forms/wizards/dashboard.
- Header: logo block + robijn titlebar (breadcrumb + user menu) + grey horizontal nav
(4 links) replacing the dashboard side-nav; breadcrumb restyled for the titlebar
(no background of its own — CIBG's global `header nav` rule otherwise bleeds a grey
fill into it, fixed by scoping an override inside BreadcrumbComponent).
- Forms: form-field/radio-group/checkbox rebuilt on CIBG's horizontal `form-group row`
/ `form-check.styled` markup (label col-md-4, control col-md-8); same input() APIs.
- Wizards: stepper rebuilt as the CIBG "stappenindicator" (numbered circles, visited
steps clickable for back-nav, title merged in); wizard-shell adopts the CIBG
procesnavigatie button row. Back-navigation wired into all three wizard machines
(registratie-wizard already had it; added `GaNaarStap` to intake/herregistratie
machines, pure + spec'd).
- New shared/ui molecules: confirmation (animated bevestiging checkmark, replaces
plain alerts on submit), review-section (controlestap sections with "Wijzigen"),
application-list/application-link (CIBG "aanvragen" rows, replace the dashboard's
card grid and aanvraag-block).
- Cleanup: delete side-nav and now-unused styles.scss utilities (.app-overview,
.app-form-panel, .app-card-grid); correct design-tokens.mdx (it referenced tokens
that no longer exist) and document the CIBG-value token bridge.
Verified: build/lint/check:tokens green, 178 tests pass (4 new GaNaarStap cases), and
manually driven end-to-end (dashboard, a full herregistratie submission through to the
confirmation screen, mobile width, keyboard focus).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -6,39 +6,27 @@ export interface BreadcrumbItem {
|
||||
link?: string; // omit on the current (last) page
|
||||
}
|
||||
|
||||
/** Chrome: breadcrumb navigation. Renders the RHC/Utrecht breadcrumb pattern; the
|
||||
last item is the current page (no link, aria-current). Domain-free — the caller
|
||||
supplies the trail. */
|
||||
/** Chrome: breadcrumb navigation, styled for the CIBG titlebar (`.titlebar .title`) —
|
||||
plain links with a chevron `::after` from the CIBG Icons font, current page as an
|
||||
unlinked, bold span. Domain-free — the caller supplies the trail. */
|
||||
@Component({
|
||||
selector: 'app-breadcrumb',
|
||||
imports: [RouterLink],
|
||||
styles: [`
|
||||
:host{display:block}
|
||||
.list{display:flex;flex-wrap:wrap;gap:var(--rhc-space-max-md);align-items:center;list-style:none;margin:0;padding:0;font-size:var(--rhc-text-font-size-sm)}
|
||||
.crumb{display:inline-flex;align-items:center;gap:var(--rhc-space-max-md)}
|
||||
a{color:var(--rhc-color-foreground-link);text-decoration:underline}
|
||||
a:hover{color:var(--rhc-color-foreground-link-hover)}
|
||||
.current{color:var(--rhc-color-foreground-subtle)}
|
||||
.sep{color:var(--rhc-color-foreground-subtle)}
|
||||
/* Inverse: on the blue header bar, everything is white. */
|
||||
:host(.inverse) a,
|
||||
:host(.inverse) .current,
|
||||
:host(.inverse) .sep { color: var(--rhc-color-foreground-on-primary); }
|
||||
`],
|
||||
// CIBG's global "header nav" background rule matches ANY nav inside a <header>
|
||||
// — including this one, wherever it's mounted. Override it so the breadcrumb
|
||||
// never carries its own background (it should show whatever's behind it, e.g.
|
||||
// the titlebar's robijn fill).
|
||||
styles: [`nav{background:none}`],
|
||||
template: `
|
||||
<nav i18n-aria-label="@@breadcrumb.aria" aria-label="Kruimelpad">
|
||||
<ol class="list">
|
||||
@for (item of items(); track item.label; let last = $last; let first = $first) {
|
||||
<li class="crumb">
|
||||
@if (!first) { <span class="sep" aria-hidden="true">›</span> }
|
||||
@if (item.link && !last) {
|
||||
<a [routerLink]="item.link">{{ item.label }}</a>
|
||||
} @else {
|
||||
<span class="current" aria-current="page">{{ item.label }}</span>
|
||||
}
|
||||
</li>
|
||||
<span class="visually-hidden" i18n="@@breadcrumb.hier">U bevindt zich hier:</span>
|
||||
@for (item of items(); track item.label; let last = $last) {
|
||||
@if (item.link && !last) {
|
||||
<a [routerLink]="item.link">{{ item.label }}</a>
|
||||
} @else {
|
||||
<span aria-current="page">{{ item.label }}</span>
|
||||
}
|
||||
</ol>
|
||||
}
|
||||
</nav>
|
||||
`,
|
||||
})
|
||||
|
||||
@@ -9,7 +9,8 @@ const meta: Meta<BreadcrumbComponent> = {
|
||||
decorators: [applicationConfig({ providers: [provideRouter([])] })],
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `<app-breadcrumb [items]="items" />`,
|
||||
// Rendered inside a mock .titlebar .title so the story reflects the real chrome.
|
||||
template: `<div class="titlebar" style="padding: 1rem"><div class="title"><app-breadcrumb [items]="items" /></div></div>`,
|
||||
}),
|
||||
};
|
||||
export default meta;
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
import { Component, input } from '@angular/core';
|
||||
import { RouterLink, RouterLinkActive } from '@angular/router';
|
||||
|
||||
export interface NavItem {
|
||||
readonly label: string;
|
||||
readonly to: string;
|
||||
}
|
||||
|
||||
/** Organism: vertical side navigation for the "Mijn omgeving" portal. The active
|
||||
route is marked with `routerLinkActive`. Domain-free — the caller supplies the
|
||||
items (English-named shared chrome). */
|
||||
@Component({
|
||||
selector: 'app-side-nav',
|
||||
imports: [RouterLink, RouterLinkActive],
|
||||
styles: [`
|
||||
:host{display:block}
|
||||
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--rhc-space-max-xs)}
|
||||
.item{
|
||||
display:block;
|
||||
padding:var(--rhc-space-max-md) var(--rhc-space-max-lg);
|
||||
color:var(--rhc-color-foreground-default);
|
||||
text-decoration:none;
|
||||
border-radius:var(--rhc-border-radius-sm);
|
||||
border-inline-start:var(--rhc-border-width-md) solid transparent;
|
||||
}
|
||||
.item:hover{background:var(--rhc-color-cool-grey-100)}
|
||||
.item.active{
|
||||
background:var(--rhc-color-lintblauw-100);
|
||||
border-inline-start-color:var(--rhc-color-lintblauw-700);
|
||||
color:var(--rhc-color-lintblauw-700);
|
||||
font-weight:var(--rhc-text-font-weight-semi-bold);
|
||||
}
|
||||
`],
|
||||
template: `
|
||||
<nav [attr.aria-label]="ariaLabel()">
|
||||
<ul class="list">
|
||||
@for (item of items(); track item.to) {
|
||||
<li>
|
||||
<a class="item" [routerLink]="item.to" routerLinkActive="active"
|
||||
[routerLinkActiveOptions]="{ exact: true }">{{ item.label }}</a>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</nav>
|
||||
`,
|
||||
})
|
||||
export class SideNavComponent {
|
||||
items = input.required<NavItem[]>();
|
||||
ariaLabel = input($localize`:@@sideNav.aria:Mijn omgeving`);
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { applicationConfig } from '@storybook/angular';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import { SideNavComponent } from './side-nav.component';
|
||||
|
||||
const meta: Meta<SideNavComponent> = {
|
||||
title: 'Layout/Side Nav',
|
||||
component: SideNavComponent,
|
||||
decorators: [applicationConfig({ providers: [provideRouter([])] })],
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `<div style="max-inline-size:15rem"><app-side-nav [items]="items" /></div>`,
|
||||
}),
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<SideNavComponent>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
items: [
|
||||
{ label: 'Overzicht', to: '/dashboard' },
|
||||
{ label: 'Mijn gegevens', to: '/registratie' },
|
||||
{ label: 'Herregistratie', to: '/herregistratie' },
|
||||
{ label: 'Inschrijven', to: '/registreren' },
|
||||
],
|
||||
},
|
||||
};
|
||||
@@ -8,7 +8,7 @@ import { Component } from '@angular/core';
|
||||
selector: 'app-site-footer',
|
||||
styles: [`
|
||||
:host{display:block}
|
||||
.bar{background:var(--rhc-color-donkerblauw-700);color:var(--rhc-color-foreground-on-primary);margin-block-start:var(--rhc-space-max-5xl);inline-size:100%}
|
||||
.bar{background:var(--rhc-color-layout);color:var(--rhc-color-foreground-on-primary);margin-block-start:var(--rhc-space-max-5xl);inline-size:100%}
|
||||
.inner{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-3xl) var(--rhc-space-max-2xl);box-sizing:border-box;display:flex;gap:var(--rhc-space-max-3xl);flex-wrap:wrap;justify-content:space-between}
|
||||
.tagline{font-style:italic;font-weight:var(--rhc-text-font-weight-semi-bold);font-size:var(--rhc-text-font-size-lg);max-inline-size:18rem}
|
||||
.ministry{margin-block-start:var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-on-primary)}
|
||||
@@ -16,7 +16,7 @@ import { Component } from '@angular/core';
|
||||
.links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--rhc-space-max-sm);font-size:var(--rhc-text-font-size-sm)}
|
||||
.links a{color:var(--rhc-color-foreground-on-primary);text-decoration:none}
|
||||
.links a:hover{text-decoration:underline}
|
||||
.meta{inline-size:100%;border-block-start:var(--rhc-border-width-sm) solid var(--rhc-color-lintblauw-600);margin-block-start:var(--rhc-space-max-xl);padding-block-start:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm);opacity:.85}
|
||||
.meta{inline-size:100%;border-block-start:var(--rhc-border-width-sm) solid rgb(255 255 255 / 0.25);margin-block-start:var(--rhc-space-max-xl);padding-block-start:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm);opacity:.85}
|
||||
`],
|
||||
template: `
|
||||
<footer class="bar">
|
||||
|
||||
@@ -1,62 +1,81 @@
|
||||
import { Component, computed, inject, input } from '@angular/core';
|
||||
import { Component, computed, inject } from '@angular/core';
|
||||
import { toSignal } from '@angular/core/rxjs-interop';
|
||||
import { NavigationEnd, Router, RouterLink } from '@angular/router';
|
||||
import { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
|
||||
import { filter, map } from 'rxjs/operators';
|
||||
import { SESSION_PORT } from '@shared/application/session.port';
|
||||
import { BreadcrumbComponent } from '@shared/layout/breadcrumb/breadcrumb.component';
|
||||
import { trailFor } from '@shared/layout/breadcrumb/breadcrumb-trail';
|
||||
|
||||
/** Organism: Rijksoverheid-style site header. Two tiers, like rijksoverheid.nl:
|
||||
a white brand bar (wordmark + session/logout) over a lint-blue bar carrying
|
||||
the breadcrumb. ponytail: text wordmark, not the licensed Rijksoverheid logo;
|
||||
no search box (no search feature yet). */
|
||||
interface HeaderNavItem {
|
||||
readonly label: string;
|
||||
readonly to: string;
|
||||
}
|
||||
|
||||
const NAV_ITEMS: readonly HeaderNavItem[] = [
|
||||
{ label: $localize`:@@header.nav.overzicht:Overzicht`, to: '/dashboard' },
|
||||
{ label: $localize`:@@header.nav.gegevens:Mijn gegevens`, to: '/registratie' },
|
||||
{ label: $localize`:@@header.nav.herregistratie:Herregistratie`, to: '/herregistratie' },
|
||||
{ label: $localize`:@@header.nav.inschrijven:Inschrijven`, to: '/registreren' },
|
||||
];
|
||||
|
||||
/** Organism: CIBG Huisstijl site header — logo block, robijn titlebar (breadcrumb +
|
||||
user menu), horizontal nav. ponytail: text wordmark, not the licensed Rijksoverheid
|
||||
beeldmerk; no search box (no search feature yet). */
|
||||
@Component({
|
||||
selector: 'app-site-header',
|
||||
imports: [RouterLink, BreadcrumbComponent],
|
||||
imports: [RouterLink, RouterLinkActive, BreadcrumbComponent],
|
||||
styles: [`
|
||||
:host{display:block}
|
||||
/* Tier 1 — white brand bar */
|
||||
.brandbar{background:var(--rhc-color-wit);border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);inline-size:100%}
|
||||
.brandbar .inner{display:flex;align-items:center;gap:var(--rhc-space-max-xl);max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-lg) var(--rhc-space-max-2xl);box-sizing:border-box}
|
||||
.brand{display:flex;align-items:center;gap:var(--rhc-space-max-lg);color:var(--rhc-color-foreground-default);text-decoration:none}
|
||||
.mark{display:inline-block;inline-size:var(--rhc-space-max-md);block-size:var(--rhc-space-max-4xl);background:var(--rhc-color-lintblauw-700)}
|
||||
.name{font-weight:var(--rhc-text-font-weight-bold);line-height:var(--rhc-text-line-height-sm)}
|
||||
.sub{font-weight:var(--rhc-text-font-weight-regular);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-subtle)}
|
||||
.session{margin-inline-start:auto;display:flex;align-items:center;gap:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm)}
|
||||
.user{color:var(--rhc-color-foreground-subtle)}
|
||||
.logout{background:none;border:0;padding:0;cursor:pointer;color:var(--rhc-color-foreground-link);text-decoration:underline;font:inherit}
|
||||
.logout:hover{color:var(--rhc-color-foreground-link-hover)}
|
||||
/* Tier 2 — blue breadcrumb bar */
|
||||
.navbar{background:var(--rhc-color-lintblauw-700);color:var(--rhc-color-foreground-on-primary);inline-size:100%}
|
||||
.navbar .inner{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-md) var(--rhc-space-max-2xl);box-sizing:border-box}
|
||||
.logout{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;font:inherit;color:inherit}
|
||||
/* CIBG's header nav has no bg by default in this build — the grey bar is ours.
|
||||
(.titlebar keeps its own robijn fill — --ro-layout — untouched; the breadcrumb
|
||||
inside it has no background of its own, so the bar's colour shows through.) */
|
||||
nav{background-color:var(--rhc-color-cool-grey-200)}
|
||||
`],
|
||||
template: `
|
||||
<div class="brandbar">
|
||||
<div class="inner">
|
||||
<a routerLink="/dashboard" class="brand">
|
||||
<span aria-hidden="true" class="mark"></span>
|
||||
<span class="name" i18n="@@header.brand">Rijksoverheid<br><span class="sub">BIG-register</span></span>
|
||||
</a>
|
||||
<span class="portal sub">{{ subtitle() }}</span>
|
||||
@if (session(); as s) {
|
||||
<span class="session">
|
||||
<span class="user"><ng-container i18n="@@header.ingelogdAls">Ingelogd als</ng-container> {{ s.naam }}</span>
|
||||
<button type="button" class="logout" (click)="logout()" i18n="@@header.uitloggen">Uitloggen</button>
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@if (trail().length) {
|
||||
<div class="navbar">
|
||||
<div class="inner">
|
||||
<app-breadcrumb class="inverse" [items]="trail()" />
|
||||
<header>
|
||||
<div class="logo">
|
||||
<div class="logo__wrapper">
|
||||
<a routerLink="/dashboard" class="logo__link">
|
||||
<figure class="logo__figure">
|
||||
<figcaption class="logo__text">
|
||||
<span class="logo__sender" i18n="@@header.sender">BIG-register</span>
|
||||
<span class="logo__ministry" i18n="@@header.ministry">Ministerie van Volksgezondheid, Welzijn en Sport</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div class="titlebar">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="title col-md-7">
|
||||
@if (trail().length) { <app-breadcrumb [items]="trail()" /> }
|
||||
</div>
|
||||
<div class="user-menu col-md-5">
|
||||
@if (session(); as s) {
|
||||
<div><span class="login-name">{{ s.naam }}</span></div>
|
||||
<div><button type="button" class="logout" (click)="logout()" i18n="@@header.uitloggen">Uitloggen</button></div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav i18n-aria-label="@@header.navAria" aria-label="Hoofdnavigatie">
|
||||
<div class="container">
|
||||
<ul>
|
||||
@for (item of navItems; track item.to) {
|
||||
<li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
|
||||
<a [routerLink]="item.to">{{ item.label }}</a>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
`,
|
||||
})
|
||||
export class SiteHeaderComponent {
|
||||
subtitle = input($localize`:@@header.subtitle:Mijn omgeving`);
|
||||
protected readonly navItems = NAV_ITEMS;
|
||||
|
||||
private router = inject(Router);
|
||||
private sessionPort = inject(SESSION_PORT, { optional: true });
|
||||
|
||||
@@ -9,9 +9,8 @@ const meta: Meta<SiteHeaderComponent> = {
|
||||
decorators: [applicationConfig({ providers: [provideRouter([])] })],
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `<app-site-header [subtitle]="subtitle" />`,
|
||||
template: `<app-site-header />`,
|
||||
}),
|
||||
args: { subtitle: 'Mijn omgeving' },
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<SiteHeaderComponent>;
|
||||
|
||||
@@ -5,6 +5,11 @@ import { AlertComponent } from '@shared/ui/alert/alert.component';
|
||||
import { SpinnerComponent } from '@shared/ui/spinner/spinner.component';
|
||||
import { StepperComponent } from '@shared/ui/stepper/stepper.component';
|
||||
|
||||
/** CIBG procesnavigatie primary-button copy for a non-final step: "Naar stap 2 - Werk".
|
||||
Shared so every wizard's `primaryLabel` reads the same way. */
|
||||
export const naarStapLabel = (stepNumber: number, stepLabel: string) =>
|
||||
$localize`:@@wizard.naarStap:Naar stap ${stepNumber}:nummer: - ${stepLabel}:label:`;
|
||||
|
||||
/** A flat validation error pointing at a field: `id` matches the field's anchor. */
|
||||
export interface WizardError {
|
||||
readonly id: string;
|
||||
@@ -15,9 +20,9 @@ export type WizardStatus = 'editing' | 'submitting' | 'submitted' | 'failed';
|
||||
|
||||
/**
|
||||
* Template: the canonical shell every wizard renders into, so they cannot drift.
|
||||
* It owns the consistent outline — stepper + focusable step heading + error
|
||||
* summary + the <form> + the Back/Next/Cancel action bar + the submitting/
|
||||
* submitted/failed states — and the a11y focus management.
|
||||
* It owns the consistent outline — CIBG stappenindicator (title merged in) + error
|
||||
* summary + the horizontal <form> + the CIBG procesnavigatie button row + the
|
||||
* submitting/submitted/failed states — and the a11y focus management.
|
||||
*
|
||||
* Presentational and unidirectional: all state stays in the wizard container
|
||||
* (the Elm-style store). Inputs flow down; the container reacts to the outputs
|
||||
@@ -34,8 +39,8 @@ export type WizardStatus = 'editing' | 'submitting' | 'submitted' | 'failed';
|
||||
template: `
|
||||
@switch (status()) {
|
||||
@case ('editing') {
|
||||
<app-stepper class="app-section" [steps]="steps()" [current]="current()" />
|
||||
<h2 #stepHeading tabindex="-1" class="app-section">{{ stepTitle() }}</h2>
|
||||
<app-stepper class="app-section" [steps]="steps()" [current]="current()"
|
||||
[processName]="processName()" [stepTitle]="stepTitle()" (stepSelected)="goToStep.emit($event)" />
|
||||
@if (errors().length) {
|
||||
<div #errorSummary tabindex="-1" role="alert" aria-labelledby="wizard-error-title" class="app-section">
|
||||
<app-alert type="error">
|
||||
@@ -48,13 +53,19 @@ export type WizardStatus = 'editing' | 'submitting' | 'submitted' | 'failed';
|
||||
</app-alert>
|
||||
</div>
|
||||
}
|
||||
<form (ngSubmit)="primary.emit()" class="app-form app-form-panel">
|
||||
<form (ngSubmit)="primary.emit()" class="form-horizontal app-section">
|
||||
<div class="form-header">
|
||||
<div class="form-action"><span class="meta" i18n="@@form.verplichteVelden">* verplichte velden</span></div>
|
||||
</div>
|
||||
<ng-content />
|
||||
<div class="app-button-row app-button-row--spaced">
|
||||
<hr />
|
||||
<div class="d-flex flex-column flex-sm-row-reverse">
|
||||
<div class="m-0"><app-button type="submit" variant="primary">{{ primaryLabel() }}</app-button></div>
|
||||
@if (canGoBack()) {
|
||||
<app-button type="button" variant="secondary" (click)="back.emit()" i18n="@@wizard.vorige">Vorige</app-button>
|
||||
<app-button type="button" variant="subtle" class="me-auto" (click)="back.emit()" i18n="@@wizard.terugVorige">Terug naar vorige stap</app-button>
|
||||
}
|
||||
<app-button type="submit" variant="primary">{{ primaryLabel() }}</app-button>
|
||||
</div>
|
||||
<div class="app-section">
|
||||
<app-button type="button" variant="subtle" (click)="cancel.emit()" i18n="@@wizard.annuleren">Annuleren</app-button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -78,6 +89,8 @@ export class WizardShellComponent {
|
||||
steps = input.required<string[]>();
|
||||
current = input.required<number>();
|
||||
stepTitle = input.required<string>();
|
||||
/** Overall process name, shown above the step title (e.g. "Herregistratie aanvragen"). */
|
||||
processName = input('');
|
||||
status = input.required<WizardStatus>();
|
||||
primaryLabel = input.required<string>();
|
||||
canGoBack = input(false);
|
||||
@@ -89,6 +102,8 @@ export class WizardShellComponent {
|
||||
back = output<void>();
|
||||
cancel = output<void>();
|
||||
retry = output<void>();
|
||||
/** A visited step number was clicked in the stepper — back-navigation only. */
|
||||
goToStep = output<number>();
|
||||
|
||||
/** Error-summary link: focus the field instead of letting the browser navigate.
|
||||
A fragment href resolves against <base href="/">, not the current route, so
|
||||
@@ -98,18 +113,18 @@ export class WizardShellComponent {
|
||||
document.getElementById(id)?.focus(); // focus() scrolls the input into view
|
||||
}
|
||||
|
||||
private stepHeading = viewChild<ElementRef<HTMLElement>>('stepHeading');
|
||||
private stepper = viewChild(StepperComponent);
|
||||
private errorSummary = viewChild<ElementRef<HTMLElement>>('errorSummary');
|
||||
|
||||
constructor() {
|
||||
// A11y: move focus to the step heading when the step changes (skip first run
|
||||
// A11y: move focus to the step title when the step changes (skip first run
|
||||
// so we don't grab focus on initial load). Tracks current(), which is value-
|
||||
// stable across keystrokes, so typing never steals focus.
|
||||
let firstStep = true;
|
||||
effect(() => {
|
||||
this.current();
|
||||
if (firstStep) { firstStep = false; return; }
|
||||
untracked(() => queueMicrotask(() => this.stepHeading()?.nativeElement.focus()));
|
||||
untracked(() => queueMicrotask(() => this.stepper()?.focusTitle()));
|
||||
});
|
||||
// A11y: when validation errors first appear (after a failed submit), move
|
||||
// focus to the error summary so it's announced. Only on the rising edge
|
||||
|
||||
@@ -8,8 +8,9 @@ const meta: Meta<WizardShellComponent> = {
|
||||
props: args,
|
||||
template: `
|
||||
<app-wizard-shell
|
||||
[steps]="steps" [current]="current" [stepTitle]="stepTitle" [status]="status"
|
||||
[primaryLabel]="primaryLabel" [canGoBack]="canGoBack" [errors]="errors" [errorMessage]="errorMessage">
|
||||
[steps]="steps" [current]="current" [stepTitle]="stepTitle" [processName]="processName" [status]="status"
|
||||
[primaryLabel]="primaryLabel" [canGoBack]="canGoBack" [errors]="errors" [errorMessage]="errorMessage"
|
||||
(goToStep)="goToStep($event)">
|
||||
<p class="rhc-paragraph">Voorbeeld-stapinhoud (de stapvelden worden hier geprojecteerd).</p>
|
||||
<div wizardSuccess><p class="rhc-paragraph">Uw aanvraag is ontvangen.</p></div>
|
||||
</app-wizard-shell>`,
|
||||
@@ -19,7 +20,10 @@ export default meta;
|
||||
type Story = StoryObj<WizardShellComponent>;
|
||||
|
||||
const steps = ['Adres', 'Beroep', 'Controle'];
|
||||
const base = { steps, current: 1, stepTitle: 'Beroep op basis van uw diploma', primaryLabel: 'Volgende', canGoBack: true, errors: [], errorMessage: '' };
|
||||
const base = {
|
||||
steps, current: 1, stepTitle: 'Beroep op basis van uw diploma', processName: 'Inschrijven in het BIG-register',
|
||||
primaryLabel: 'Volgende', canGoBack: true, errors: [], errorMessage: '', goToStep: () => {},
|
||||
};
|
||||
|
||||
export const Editing: Story = { args: { ...base, status: 'editing' } };
|
||||
export const EditingMetFouten: Story = {
|
||||
|
||||
Reference in New Issue
Block a user