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:
Claude Fable 5
@@ -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 = {
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Component, input, output } from '@angular/core';
|
||||
import { NgTemplateOutlet } from '@angular/common';
|
||||
import { RouterLink } from '@angular/router';
|
||||
|
||||
/** Molecule: one row in a CIBG Huisstijl "aanvragen" list — `<li><a class="application">`
|
||||
with a title, optional subtitle/status/cta (see application-list.component.ts).
|
||||
Renders a plain (non-interactive) row when there's nothing to navigate to — the
|
||||
chevron/hover styling only applies to the `<a>`. A `[applicationActions]` slot
|
||||
projects a sibling action (e.g. "Annuleren") after the anchor — a button can't
|
||||
nest inside the anchor itself. */
|
||||
@Component({
|
||||
selector: 'app-application-link',
|
||||
imports: [RouterLink, NgTemplateOutlet],
|
||||
// display:contents so the <li> becomes a real DOM/accessibility-tree child of the
|
||||
// parent <ul> — a wrapper host between them can break list semantics for AT.
|
||||
styles: [`:host{display:contents}`],
|
||||
template: `
|
||||
<li>
|
||||
@if (to()) {
|
||||
<a class="application" [routerLink]="to()"><ng-container [ngTemplateOutlet]="body" /></a>
|
||||
} @else if (clickable()) {
|
||||
<a href="#" class="application" (click)="onActivate($event)"><ng-container [ngTemplateOutlet]="body" /></a>
|
||||
} @else {
|
||||
<div><ng-container [ngTemplateOutlet]="body" /></div>
|
||||
}
|
||||
<ng-content select="[applicationActions]" />
|
||||
</li>
|
||||
<ng-template #body>
|
||||
<h3 class="application-title">{{ heading() }}</h3>
|
||||
@if (subtitle()) { <div class="subtitle">{{ subtitle() }}</div> }
|
||||
@if (status()) { <div class="status">{{ status() }}</div> }
|
||||
@if (cta()) { <div class="cta">{{ cta() }}</div> }
|
||||
</ng-template>
|
||||
`,
|
||||
})
|
||||
export class ApplicationLinkComponent {
|
||||
heading = input.required<string>();
|
||||
subtitle = input('');
|
||||
status = input('');
|
||||
cta = input('');
|
||||
/** Set for a plain routerLink navigation (e.g. the "Wat wilt u doen?" actions). */
|
||||
to = input('');
|
||||
/** Set when the row navigates imperatively (e.g. resume with query params) — the
|
||||
row still renders as a clickable `<a>`, but `activate` decides what happens. */
|
||||
clickable = input(false);
|
||||
activate = output<void>();
|
||||
|
||||
protected onActivate(ev: Event) {
|
||||
ev.preventDefault(); // fragment href resolves against <base href>, not the route
|
||||
this.activate.emit();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { applicationConfig } from '@storybook/angular';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import { ApplicationLinkComponent } from './application-link.component';
|
||||
|
||||
const meta: Meta<ApplicationLinkComponent> = {
|
||||
title: 'Molecules/Application Link',
|
||||
component: ApplicationLinkComponent,
|
||||
decorators: [applicationConfig({ providers: [provideRouter([])] })],
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
// Rows are <li>s — a real list gives them their normal layout in the story.
|
||||
template: `<ul class="list-unstyled"><app-application-link [heading]="heading" [subtitle]="subtitle" [status]="status" [cta]="cta" [to]="to" [clickable]="clickable" /></ul>`,
|
||||
}),
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<ApplicationLinkComponent>;
|
||||
|
||||
export const Navigatie: Story = {
|
||||
args: { heading: 'Inschrijven', subtitle: 'Schrijf u in in het BIG-register.', to: '/registreren' },
|
||||
};
|
||||
export const Actie: Story = {
|
||||
args: { heading: 'Inschrijving', status: 'Stap 2 van 3', cta: 'Verder gaan', clickable: true },
|
||||
};
|
||||
export const NietInteractief: Story = {
|
||||
args: { heading: 'Herregistratie', status: 'Referentie 2024-00123 · ingediend op 12 mei 2024' },
|
||||
};
|
||||
@@ -0,0 +1,17 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
/** Molecule: wraps `<app-application-link>` rows in the CIBG Huisstijl "aanvragen"
|
||||
dashboard block (`.dashboard-block.applications`) — see
|
||||
designsystem.cibg.nl/componenten/aanvragen. Used for both the "Mijn aanvragen"
|
||||
list and the "Wat wilt u doen?" action list on the dashboard. */
|
||||
@Component({
|
||||
selector: 'app-application-list',
|
||||
template: `
|
||||
<div class="dashboard-block applications">
|
||||
<ul class="list-unstyled">
|
||||
<ng-content />
|
||||
</ul>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class ApplicationListComponent {}
|
||||
@@ -0,0 +1,26 @@
|
||||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { applicationConfig, moduleMetadata } from '@storybook/angular';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import { ApplicationListComponent } from './application-list.component';
|
||||
import { ApplicationLinkComponent } from '@shared/ui/application-link/application-link.component';
|
||||
|
||||
const meta: Meta<ApplicationListComponent> = {
|
||||
title: 'Molecules/Application List',
|
||||
component: ApplicationListComponent,
|
||||
decorators: [
|
||||
applicationConfig({ providers: [provideRouter([])] }),
|
||||
moduleMetadata({ imports: [ApplicationLinkComponent] }),
|
||||
],
|
||||
render: () => ({
|
||||
template: `
|
||||
<app-application-list>
|
||||
<app-application-link heading="Inschrijving" status="Stap 2 van 3" cta="Verder gaan" clickable="true" />
|
||||
<app-application-link heading="Herregistratie" status="Referentie 2024-00123 · ingediend op 12 mei 2024" />
|
||||
<app-application-link heading="Inschrijven" subtitle="Schrijf u in in het BIG-register." to="/registreren" />
|
||||
</app-application-list>`,
|
||||
}),
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<ApplicationListComponent>;
|
||||
|
||||
export const Default: Story = {};
|
||||
@@ -1,22 +1,17 @@
|
||||
import { Component, forwardRef, input } from '@angular/core';
|
||||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||
|
||||
/** Atom: a labelled checkbox wired as a form control (ngModel/reactive). Native
|
||||
input for full keyboard + screen-reader support; the label is the click target. */
|
||||
/** Atom: a labelled checkbox wired as a form control (ngModel/reactive). Thin
|
||||
wrapper over the CIBG Huisstijl `.form-check.styled` checkbox CSS; native
|
||||
input for full keyboard + screen-reader support. */
|
||||
@Component({
|
||||
selector: 'app-checkbox',
|
||||
styles: [`
|
||||
:host{display:block}
|
||||
label{display:inline-flex;align-items:center;gap:var(--rhc-space-max-md);cursor:pointer}
|
||||
/* form-check-input floats/margins for the .form-check layout; here it's flex-aligned. */
|
||||
.form-check-input{margin:0;float:none;inline-size:1.1rem;block-size:1.1rem}
|
||||
`],
|
||||
template: `
|
||||
<label class="form-check-label">
|
||||
<div class="form-check styled">
|
||||
<input class="form-check-input" type="checkbox" [id]="checkboxId()" [checked]="value" [disabled]="disabled"
|
||||
(change)="onToggle($event)" (blur)="onTouched()" />
|
||||
<span>{{ label() }}</span>
|
||||
</label>
|
||||
<label class="form-check-label" [for]="checkboxId()">{{ label() }}</label>
|
||||
</div>
|
||||
`,
|
||||
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true }],
|
||||
})
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Component, input } from '@angular/core';
|
||||
|
||||
/** Molecule: the CIBG Huisstijl "bevestiging" (confirmation) — an animated green
|
||||
checkmark banner shown at the end of an aanvraagproces, ONLY when the user has
|
||||
nothing left to do (see designsystem.cibg.nl/componenten/bevestiging). Follow-up
|
||||
content (a reference number, a restart button) is projected below the banner. */
|
||||
@Component({
|
||||
selector: 'app-confirmation',
|
||||
template: `
|
||||
<div class="confirmation">
|
||||
<svg class="confirmation__checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" height="52" width="52">
|
||||
<circle class="confirmation__checkmark-circle" cx="26" cy="26" r="18" fill="none" />
|
||||
<path class="confirmation__checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
|
||||
</svg>
|
||||
<div class="confirmation__title">
|
||||
<span class="visually-hidden">{{ successPrefix() }}</span>{{ title() }}
|
||||
</div>
|
||||
</div>
|
||||
<ng-content />
|
||||
`,
|
||||
})
|
||||
export class ConfirmationComponent {
|
||||
title = input.required<string>();
|
||||
successPrefix = input($localize`:@@confirmation.succes:Succes:`);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { ConfirmationComponent } from './confirmation.component';
|
||||
|
||||
const meta: Meta<ConfirmationComponent> = {
|
||||
title: 'Molecules/Confirmation',
|
||||
component: ConfirmationComponent,
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<app-confirmation [title]="title">
|
||||
<p class="app-section">Uw referentienummer is 2024-00123. Bewaar dit nummer voor uw administratie.</p>
|
||||
</app-confirmation>`,
|
||||
}),
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<ConfirmationComponent>;
|
||||
|
||||
export const Default: Story = { args: { title: 'Uw aanvraag is verstuurd' } };
|
||||
@@ -1,28 +1,15 @@
|
||||
import { Component, input } from '@angular/core';
|
||||
|
||||
/** Molecule: one key/value row in a data summary. Hand-rolled from tokens
|
||||
(CIBG has no data-summary component). Wrap several in a <dl> (see registration-summary). */
|
||||
/** Molecule: one key/value row in a CIBG Huisstijl "controlestap" data summary
|
||||
(`dt.col-md-4` / `dd.col-md-8`). `display:contents` so the dt/dd become direct
|
||||
flex children of the parent `<dl class="row">` — the Bootstrap grid classes
|
||||
need that to lay out correctly. Wrap several in a `<dl class="row mb-0">`. */
|
||||
@Component({
|
||||
selector: 'app-data-row',
|
||||
styles: [`
|
||||
.item{
|
||||
display:grid;
|
||||
grid-template-columns:minmax(8rem, 14rem) 1fr;
|
||||
gap:var(--rhc-space-max-md);
|
||||
padding-block:var(--rhc-space-max-md);
|
||||
border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);
|
||||
margin:0;
|
||||
}
|
||||
/* drop the divider on the last row so the list ends cleanly */
|
||||
:host:last-child .item{border-block-end-style:none}
|
||||
.item-key{font-weight:var(--rhc-text-font-weight-semi-bold);margin:0}
|
||||
.item-value{margin:0}
|
||||
`],
|
||||
styles: [`:host{display:contents}`],
|
||||
template: `
|
||||
<div class="item">
|
||||
<dt class="item-key">{{ key() }}</dt>
|
||||
<dd class="item-value"><ng-content>{{ value() }}</ng-content></dd>
|
||||
</div>
|
||||
<dt class="col-md-4">{{ key() }}</dt>
|
||||
<dd class="col-md-8"><ng-content>{{ value() }}</ng-content></dd>
|
||||
`,
|
||||
})
|
||||
export class DataRowComponent {
|
||||
|
||||
@@ -6,8 +6,8 @@ const meta: Meta<DataRowComponent> = {
|
||||
component: DataRowComponent,
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
// Rows live inside an RHC data-summary list (dt/dd); wrap so it renders in context.
|
||||
template: `<dl class="rhc-data-summary"><app-data-row [key]="key" [value]="value" /></dl>`,
|
||||
// Rows are dt.col-md-4/dd.col-md-8 flex children of a Bootstrap .row dl (CIBG controlestap).
|
||||
template: `<dl class="row mb-0"><app-data-row [key]="key" [value]="value" /></dl>`,
|
||||
}),
|
||||
args: { key: 'BIG-nummer', value: '19012345601' },
|
||||
};
|
||||
|
||||
@@ -1,28 +1,24 @@
|
||||
import { Component, booleanAttribute, input } from '@angular/core';
|
||||
|
||||
/** Molecule: form field = label + projected control + optional error/description.
|
||||
Reused by both the login form and the change-request form. */
|
||||
/** Molecule: form field = label + projected control + optional error/description,
|
||||
in the CIBG Huisstijl horizontal `form-group row` layout (label `col-md-4`,
|
||||
control `col-md-8`). The required asterisk comes from
|
||||
`.form-group.required>.col-form-label::after` — no separate "(verplicht)" text.
|
||||
Reused by the login form, the change-request form, and every wizard step. */
|
||||
@Component({
|
||||
selector: 'app-form-field',
|
||||
styles: [`
|
||||
:host{display:block}
|
||||
.label{display:block;font-weight:var(--rhc-text-font-weight-semi-bold);margin-block-end:var(--rhc-space-max-sm)}
|
||||
.req{font-weight:var(--rhc-text-font-weight-regular);color:var(--rhc-color-foreground-subtle)}
|
||||
.desc{color:var(--rhc-color-foreground-subtle);font-size:var(--rhc-text-font-size-sm);margin-block-end:var(--rhc-space-max-sm)}
|
||||
.error{color:var(--rhc-color-foreground-default);font-weight:var(--rhc-text-font-weight-semi-bold);margin-block-start:var(--rhc-space-max-sm);border-inline-start:var(--rhc-border-width-md) solid var(--rhc-color-rood-500);padding-inline-start:var(--rhc-space-max-md)}
|
||||
`],
|
||||
template: `
|
||||
<div class="form-field">
|
||||
<label class="form-label label" [id]="fieldId() + '-label'" [for]="fieldId()">
|
||||
{{ label() }}@if (required()) { <span class="req" i18n="@@formField.verplicht">(verplicht)</span> }
|
||||
</label>
|
||||
@if (description()) {
|
||||
<div class="form-text desc" [id]="fieldId() + '-desc'">{{ description() }}</div>
|
||||
}
|
||||
<ng-content />
|
||||
@if (error()) {
|
||||
<div class="error" [id]="fieldId() + '-error'" role="alert">{{ error() }}</div>
|
||||
}
|
||||
<div class="form-group row" [class.required]="required()">
|
||||
<label class="col-md-4 col-form-label" [id]="fieldId() + '-label'" [for]="fieldId()">{{ label() }}</label>
|
||||
<div class="col-md-8 col-control">
|
||||
@if (description()) {
|
||||
<div class="form-text" [id]="fieldId() + '-desc'">{{ description() }}</div>
|
||||
}
|
||||
<ng-content />
|
||||
@if (error()) {
|
||||
<div [id]="fieldId() + '-error'" role="alert"><span class="errortext">{{ error() }}</span></div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
|
||||
@@ -9,18 +9,21 @@ const meta: Meta<FormFieldComponent> = {
|
||||
decorators: [moduleMetadata({ imports: [TextInputComponent] })],
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
// form-horizontal + .row context, same as every real caller (wizard-shell, login-form, …).
|
||||
template: `
|
||||
<app-form-field [label]="label" [fieldId]="fieldId" [description]="description" [error]="error">
|
||||
<app-text-input [inputId]="fieldId" [invalid]="!!error" placeholder="Vul in" />
|
||||
</app-form-field>`,
|
||||
<form class="form-horizontal">
|
||||
<app-form-field [label]="label" [fieldId]="fieldId" [description]="description" [error]="error" [required]="required">
|
||||
<app-text-input [inputId]="fieldId" [invalid]="!!error" placeholder="Vul in" />
|
||||
</app-form-field>
|
||||
</form>`,
|
||||
}),
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<FormFieldComponent>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: { label: 'BSN', fieldId: 'bsn', description: '9 cijfers' },
|
||||
args: { label: 'BSN', fieldId: 'bsn', description: '9 cijfers', required: true },
|
||||
};
|
||||
export const WithError: Story = {
|
||||
args: { label: 'Straat en huisnummer', fieldId: 'street', error: 'Dit veld is verplicht.' },
|
||||
args: { label: 'Straat en huisnummer', fieldId: 'street', error: 'Dit veld is verplicht.', required: true },
|
||||
};
|
||||
|
||||
@@ -13,21 +13,11 @@ export const JA_NEE: RadioOption[] = [
|
||||
{ value: 'nee', label: $localize`:@@common.nee:Nee` },
|
||||
];
|
||||
|
||||
/** Atom: a radio group. Thin wrapper over the Utrecht/RHC radio CSS, wired as a
|
||||
form control so it works with ngModel just like the text-input atom. */
|
||||
/** Atom: a radio group. Thin wrapper over the CIBG Huisstijl `.form-check.styled`
|
||||
radio CSS, wired as a form control so it works with ngModel just like the
|
||||
text-input atom. */
|
||||
@Component({
|
||||
selector: 'app-radio-group',
|
||||
styles: [`
|
||||
.radio-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--rhc-space-max-md);
|
||||
padding-block: var(--rhc-space-max-sm);
|
||||
margin: 0;
|
||||
}
|
||||
/* form-check-input floats/margins for the .form-check layout; here it's flex-aligned. */
|
||||
.radio-option .form-check-input { margin: 0; float: none; }
|
||||
`],
|
||||
template: `
|
||||
<div
|
||||
role="radiogroup"
|
||||
@@ -35,19 +25,20 @@ export const JA_NEE: RadioOption[] = [
|
||||
[attr.aria-invalid]="invalid() ? 'true' : null"
|
||||
[attr.aria-describedby]="invalid() ? name() + '-error' : null">
|
||||
@for (opt of options(); track opt.value) {
|
||||
<label class="form-check-label radio-option">
|
||||
<div class="form-check styled">
|
||||
<input
|
||||
class="form-check-input"
|
||||
[class.is-invalid]="invalid()"
|
||||
type="radio"
|
||||
[id]="name() + '-' + opt.value"
|
||||
[name]="name()"
|
||||
[value]="opt.value"
|
||||
[checked]="value === opt.value"
|
||||
[disabled]="disabled"
|
||||
(change)="select(opt.value)"
|
||||
(blur)="onTouched()" />
|
||||
{{ opt.label }}
|
||||
</label>
|
||||
<label class="form-check-label" [for]="name() + '-' + opt.value">{{ opt.label }}</label>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
import { Component, input, output } from '@angular/core';
|
||||
|
||||
/** Molecule: one section of a CIBG Huisstijl "controlestap" (wizard review step) —
|
||||
a heading with a "Wijzigen" link, and the section's `<app-data-row>`s in a
|
||||
`.data-block > .block-wrapper > dl.row`. Domain-free; the caller supplies the
|
||||
heading and decides what "Wijzigen" does (typically jump back to a step). */
|
||||
@Component({
|
||||
selector: 'app-review-section',
|
||||
template: `
|
||||
<div class="d-flex">
|
||||
<h2>{{ heading() }}</h2>
|
||||
@if (showEdit()) {
|
||||
<div class="ms-auto">
|
||||
<a href="#" [attr.aria-label]="editAriaLabel() || editLabel()" (click)="onEdit($event)">{{ editLabel() }}</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="data-block">
|
||||
<div class="block-wrapper">
|
||||
<dl class="row mb-0">
|
||||
<ng-content />
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class ReviewSectionComponent {
|
||||
heading = input.required<string>();
|
||||
editLabel = input($localize`:@@reviewSection.wijzigen:Wijzigen`);
|
||||
editAriaLabel = input('');
|
||||
showEdit = input(true);
|
||||
|
||||
edit = output<void>();
|
||||
|
||||
protected onEdit(ev: Event) {
|
||||
ev.preventDefault(); // fragment href resolves against <base href>, not the route
|
||||
this.edit.emit();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { moduleMetadata } from '@storybook/angular';
|
||||
import { ReviewSectionComponent } from './review-section.component';
|
||||
import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
|
||||
|
||||
const meta: Meta<ReviewSectionComponent> = {
|
||||
title: 'Molecules/Review Section',
|
||||
component: ReviewSectionComponent,
|
||||
decorators: [moduleMetadata({ imports: [DataRowComponent] })],
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<app-review-section [heading]="heading" [editLabel]="editLabel" [editAriaLabel]="editAriaLabel" [showEdit]="showEdit">
|
||||
<app-data-row key="Straat en huisnummer" value="Dorpsstraat 1" />
|
||||
<app-data-row key="Postcode" value="1234 AB" />
|
||||
<app-data-row key="Woonplaats" value="Utrecht" />
|
||||
</app-review-section>`,
|
||||
}),
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<ReviewSectionComponent>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: { heading: 'Adres en correspondentie', editAriaLabel: 'Wijzigen adresgegevens' },
|
||||
};
|
||||
export const ZonderWijzigen: Story = {
|
||||
args: { heading: 'Adres en correspondentie', showEdit: false },
|
||||
};
|
||||
@@ -1,61 +1,71 @@
|
||||
import { Component, input } from '@angular/core';
|
||||
import { Component, ElementRef, input, output, viewChild } from '@angular/core';
|
||||
|
||||
/** Molecule: a horizontal step indicator for a multi-step flow. Visual progress
|
||||
plus accessible semantics — an ordered list with `aria-current="step"` on the
|
||||
active step and a visually-hidden "Stap X van Y" summary. Domain-free. */
|
||||
/** Molecule: the CIBG Huisstijl "stappenindicator" — numbered circles (`.step-list`),
|
||||
visited steps clickable for back-only navigation, and the step title merged into
|
||||
the same block (process name + "Stap X van Y: Titel", per the aanvraagproces
|
||||
pattern). Domain-free; forward navigation only via the wizard's own buttons. */
|
||||
@Component({
|
||||
selector: 'app-stepper',
|
||||
styles: [`
|
||||
:host{display:block}
|
||||
.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
|
||||
.steps{display:flex;list-style:none;margin:0;padding:0}
|
||||
.step{
|
||||
flex:1 1 0;min-inline-size:0;position:relative;
|
||||
display:flex;flex-direction:column;align-items:center;gap:var(--rhc-space-max-sm);
|
||||
text-align:center;color:var(--rhc-color-foreground-subtle);
|
||||
}
|
||||
/* connector line to the previous step, drawn behind the circles */
|
||||
.step::before{
|
||||
content:'';position:absolute;z-index:0;
|
||||
inset-block-start:calc(var(--rhc-space-max-4xl) / 2);
|
||||
inset-inline-start:-50%;inline-size:100%;block-size:var(--rhc-border-width-md);
|
||||
background:var(--rhc-color-cool-grey-300);
|
||||
}
|
||||
.step:first-child::before{display:none}
|
||||
.step--done::before,.step--current::before{background:var(--rhc-color-lintblauw-500)}
|
||||
.num{
|
||||
position:relative;z-index:1;display:grid;place-items:center;
|
||||
inline-size:var(--rhc-space-max-4xl);block-size:var(--rhc-space-max-4xl);
|
||||
border-radius:var(--rhc-border-radius-round);
|
||||
border:var(--rhc-border-width-md) solid var(--rhc-color-cool-grey-300);
|
||||
background:var(--rhc-color-wit);
|
||||
font-weight:var(--rhc-text-font-weight-bold);
|
||||
}
|
||||
.label{font-size:var(--rhc-text-font-size-sm);padding-inline:var(--rhc-space-max-sm)}
|
||||
.step--done .num{background:var(--rhc-color-lintblauw-500);border-color:var(--rhc-color-lintblauw-500);color:var(--rhc-color-foreground-on-primary)}
|
||||
.step--current{color:var(--rhc-color-foreground-default)}
|
||||
.step--current .num{background:var(--rhc-color-lintblauw-700);border-color:var(--rhc-color-lintblauw-700);color:var(--rhc-color-foreground-on-primary)}
|
||||
.step--current .label{font-weight:var(--rhc-text-font-weight-semi-bold)}
|
||||
`],
|
||||
template: `
|
||||
<nav i18n-aria-label="@@stepper.aria" aria-label="Voortgang">
|
||||
<p class="sr-only" i18n="@@stepper.stapVan">Stap {{ current() + 1 }} van {{ steps().length }}: {{ steps()[current()] }}</p>
|
||||
<ol class="steps">
|
||||
<div class="stepper">
|
||||
<ol class="step-list order-1">
|
||||
@for (label of steps(); track label; let i = $index) {
|
||||
<li
|
||||
class="step"
|
||||
[class.step--current]="i === current()"
|
||||
[class.step--done]="i < current()"
|
||||
[attr.aria-current]="i === current() ? 'step' : null">
|
||||
<span class="num" aria-hidden="true">{{ i + 1 }}</span>
|
||||
<span class="label">{{ label }}</span>
|
||||
<li>
|
||||
@if (i < current()) {
|
||||
<a href="#" class="step visited" (click)="select($event, i)" [attr.aria-label]="terugNaar(i, label)">
|
||||
<span class="visually-hidden" i18n="@@stepper.stap">Stap</span> {{ i + 1 }}
|
||||
<span class="visually-hidden" i18n="@@stepper.voltooid">Voltooid</span>
|
||||
</a>
|
||||
} @else if (i === current()) {
|
||||
<span class="step active" aria-current="step" [attr.aria-label]="huidigeStap(i, label)">
|
||||
<span class="visually-hidden" i18n="@@stepper.stap">Stap</span> {{ i + 1 }}
|
||||
<span class="visually-hidden" i18n="@@stepper.huidig">Huidige stap</span>
|
||||
</span>
|
||||
} @else {
|
||||
<span class="step" [attr.aria-label]="stap(i, label)">
|
||||
<span class="visually-hidden" i18n="@@stepper.stap">Stap</span> {{ i + 1 }}
|
||||
</span>
|
||||
}
|
||||
</li>
|
||||
}
|
||||
</ol>
|
||||
</nav>
|
||||
<h2 #title tabindex="-1" class="h1 order-0">
|
||||
@if (processName()) { <span class="process-name">{{ processName() }}</span> }
|
||||
<ng-container i18n="@@stepper.stapVan">Stap {{ current() + 1 }}<span class="visually-hidden"> van {{ steps().length }}</span>: {{ stepTitle() || steps()[current()] }}</ng-container>
|
||||
</h2>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class StepperComponent {
|
||||
steps = input.required<string[]>();
|
||||
current = input.required<number>();
|
||||
/** Name of the overall process, shown above the step title (e.g. "Herregistratie aanvragen"). */
|
||||
processName = input('');
|
||||
/** Overrides the step label as the title; falls back to `steps()[current()]`. */
|
||||
stepTitle = input('');
|
||||
|
||||
/** Emitted when a visited (earlier) step is clicked — back-navigation only. */
|
||||
stepSelected = output<number>();
|
||||
|
||||
private titleEl = viewChild<ElementRef<HTMLElement>>('title');
|
||||
|
||||
/** wizard-shell calls this after a step change so the new title is announced. */
|
||||
focusTitle(): void {
|
||||
this.titleEl()?.nativeElement.focus();
|
||||
}
|
||||
|
||||
protected select(ev: Event, i: number) {
|
||||
ev.preventDefault(); // fragment href resolves against <base href>, not the route
|
||||
this.stepSelected.emit(i);
|
||||
}
|
||||
|
||||
protected stap(i: number, label: string) {
|
||||
return $localize`:@@stepper.naarStap:Stap ${i + 1}:nummer: ${label}:label:`;
|
||||
}
|
||||
protected huidigeStap(i: number, label: string) {
|
||||
return $localize`:@@stepper.huidigeStapLabel:Huidige stap, stap ${i + 1}:nummer: ${label}:label:`;
|
||||
}
|
||||
protected terugNaar(i: number, label: string) {
|
||||
return $localize`:@@stepper.terugNaarStap:Terug naar stap ${i + 1}:nummer: ${label}:label:`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,14 +6,15 @@ const meta: Meta<StepperComponent> = {
|
||||
component: StepperComponent,
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `<app-stepper [steps]="steps" [current]="current" />`,
|
||||
template: `<app-stepper [steps]="steps" [current]="current" [processName]="processName" [stepTitle]="stepTitle" (stepSelected)="stepSelected($event)" />`,
|
||||
}),
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<StepperComponent>;
|
||||
|
||||
const steps = ['Adres', 'Beroep', 'Controle'];
|
||||
const base = { steps, processName: 'Inschrijven in het BIG-register', stepTitle: '', stepSelected: () => {} };
|
||||
|
||||
export const Eerste: Story = { args: { steps, current: 0 } };
|
||||
export const Midden: Story = { args: { steps, current: 1 } };
|
||||
export const Laatste: Story = { args: { steps, current: 2 } };
|
||||
export const Eerste: Story = { args: { ...base, current: 0 } };
|
||||
export const Midden: Story = { args: { ...base, current: 1, stepTitle: 'Beroep op basis van uw diploma' } };
|
||||
export const Laatste: Story = { args: { ...base, current: 2 } };
|
||||
|
||||
Reference in New Issue
Block a user