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:
@@ -4,6 +4,10 @@ import { setCompodocJson } from '@storybook/addon-docs/angular';
|
||||
import docJson from '../documentation.json';
|
||||
setCompodocJson(docJson);
|
||||
|
||||
// Activate CIBG's official palette in the story iframe. The override is `body.brand--cibg`,
|
||||
// so it must sit on <body> (a wrapper <div> won't match) — mirrors index.html.
|
||||
if (typeof document !== 'undefined') document.body.classList.add('brand--cibg');
|
||||
|
||||
const preview: Preview = {
|
||||
// CIBG/Bootstrap styles bare elements — no theme wrapper class needed; just pad.
|
||||
// The token bridge lives in styles.scss (loaded via the app build target).
|
||||
|
||||
@@ -19135,7 +19135,7 @@
|
||||
},
|
||||
{
|
||||
"name": "SiteFooterComponent",
|
||||
"id": "component-SiteFooterComponent-f2ac4822d1c0c5075e0552c4aad07325fc213f385c9022177b0d98f69d53ccee5c3d3047ecc3310cee0fc731007c614de1bdc4e995df993bc15ebecb86653323",
|
||||
"id": "component-SiteFooterComponent-b55e94270c51daed95df229eeda44deeb81363b642b02f091f839880142571cee393d522730381bfc3fee17187c7283c8c85a22fd3a8af42c8dffc1ff32904a7",
|
||||
"file": "src/app/shared/layout/site-footer/site-footer.component.ts",
|
||||
"encapsulation": [],
|
||||
"entryComponents": [],
|
||||
@@ -19145,7 +19145,7 @@
|
||||
"selector": "app-site-footer",
|
||||
"styleUrls": [],
|
||||
"styles": [
|
||||
"\n :host{display:block}\n .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%}\n .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}\n .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}\n .ministry{margin-block-start:var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-on-primary)}\n .col h2{margin:0 0 var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);font-weight:var(--rhc-text-font-weight-bold);text-transform:uppercase;letter-spacing:.04em}\n .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)}\n .links a{color:var(--rhc-color-foreground-on-primary);text-decoration:none}\n .links a:hover{text-decoration:underline}\n .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}\n "
|
||||
"\n :host{display:block}\n .bar{background:var(--rhc-color-layout);color:var(--rhc-color-foreground-on-primary);margin-block-start:var(--rhc-space-max-5xl);inline-size:100%}\n .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}\n .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}\n .ministry{margin-block-start:var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-on-primary)}\n .col h2{margin:0 0 var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);font-weight:var(--rhc-text-font-weight-bold);text-transform:uppercase;letter-spacing:.04em}\n .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)}\n .links a{color:var(--rhc-color-foreground-on-primary);text-decoration:none}\n .links a:hover{text-decoration:underline}\n .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}\n "
|
||||
],
|
||||
"template": "<footer class=\"bar\">\n <div class=\"inner\">\n <div>\n <div class=\"tagline\" i18n=\"@@footer.tagline\">De Rijksoverheid. Voor Nederland.</div>\n <div class=\"ministry\" i18n=\"@@footer.ministry\">CIBG — Ministerie van Volksgezondheid, Welzijn en Sport</div>\n </div>\n <nav class=\"col\" i18n-aria-label=\"@@footer.overSiteAria\" aria-label=\"Over deze site\">\n <h2 i18n=\"@@footer.overSite\">Over deze site</h2>\n <ul class=\"links\">\n <li><a href=\"https://www.rijksoverheid.nl/privacy\" rel=\"noopener\" target=\"_blank\" i18n=\"@@footer.privacy\">Privacy</a></li>\n <li><a href=\"https://www.rijksoverheid.nl/cookies\" rel=\"noopener\" target=\"_blank\" i18n=\"@@footer.cookies\">Cookies</a></li>\n <li><a href=\"https://www.rijksoverheid.nl/toegankelijkheid\" rel=\"noopener\" target=\"_blank\" i18n=\"@@footer.toegankelijkheid\">Toegankelijkheid</a></li>\n </ul>\n </nav>\n <div class=\"meta\" i18n=\"@@footer.demo\">Demo / POC — geen echte gegevens.</div>\n </div>\n</footer>\n",
|
||||
"templateUrl": [],
|
||||
@@ -19164,15 +19164,15 @@
|
||||
"description": "<p>Organism: Rijksoverheid-style site footer — dark-blue, with the\n"De Rijksoverheid. Voor Nederland." tagline, responsible-ministry attribution,\nand a small "Over deze site" link column. ponytail: links point at the real\nrijksoverheid.nl pages, not a fabricated dead-link forest.</p>\n",
|
||||
"rawdescription": "\nOrganism: Rijksoverheid-style site footer — dark-blue, with the\n\"De Rijksoverheid. Voor Nederland.\" tagline, responsible-ministry attribution,\nand a small \"Over deze site\" link column. ponytail: links point at the real\nrijksoverheid.nl pages, not a fabricated dead-link forest.",
|
||||
"type": "component",
|
||||
"sourceCode": "import { Component } from '@angular/core';\n\n/** Organism: Rijksoverheid-style site footer — dark-blue, with the\n \"De Rijksoverheid. Voor Nederland.\" tagline, responsible-ministry attribution,\n and a small \"Over deze site\" link column. ponytail: links point at the real\n rijksoverheid.nl pages, not a fabricated dead-link forest. */\n@Component({\n selector: 'app-site-footer',\n styles: [`\n :host{display:block}\n .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%}\n .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}\n .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}\n .ministry{margin-block-start:var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-on-primary)}\n .col h2{margin:0 0 var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);font-weight:var(--rhc-text-font-weight-bold);text-transform:uppercase;letter-spacing:.04em}\n .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)}\n .links a{color:var(--rhc-color-foreground-on-primary);text-decoration:none}\n .links a:hover{text-decoration:underline}\n .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}\n `],\n template: `\n <footer class=\"bar\">\n <div class=\"inner\">\n <div>\n <div class=\"tagline\" i18n=\"@@footer.tagline\">De Rijksoverheid. Voor Nederland.</div>\n <div class=\"ministry\" i18n=\"@@footer.ministry\">CIBG — Ministerie van Volksgezondheid, Welzijn en Sport</div>\n </div>\n <nav class=\"col\" i18n-aria-label=\"@@footer.overSiteAria\" aria-label=\"Over deze site\">\n <h2 i18n=\"@@footer.overSite\">Over deze site</h2>\n <ul class=\"links\">\n <li><a href=\"https://www.rijksoverheid.nl/privacy\" rel=\"noopener\" target=\"_blank\" i18n=\"@@footer.privacy\">Privacy</a></li>\n <li><a href=\"https://www.rijksoverheid.nl/cookies\" rel=\"noopener\" target=\"_blank\" i18n=\"@@footer.cookies\">Cookies</a></li>\n <li><a href=\"https://www.rijksoverheid.nl/toegankelijkheid\" rel=\"noopener\" target=\"_blank\" i18n=\"@@footer.toegankelijkheid\">Toegankelijkheid</a></li>\n </ul>\n </nav>\n <div class=\"meta\" i18n=\"@@footer.demo\">Demo / POC — geen echte gegevens.</div>\n </div>\n </footer>\n `,\n})\nexport class SiteFooterComponent {}\n",
|
||||
"sourceCode": "import { Component } from '@angular/core';\n\n/** Organism: Rijksoverheid-style site footer — dark-blue, with the\n \"De Rijksoverheid. Voor Nederland.\" tagline, responsible-ministry attribution,\n and a small \"Over deze site\" link column. ponytail: links point at the real\n rijksoverheid.nl pages, not a fabricated dead-link forest. */\n@Component({\n selector: 'app-site-footer',\n styles: [`\n :host{display:block}\n .bar{background:var(--rhc-color-layout);color:var(--rhc-color-foreground-on-primary);margin-block-start:var(--rhc-space-max-5xl);inline-size:100%}\n .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}\n .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}\n .ministry{margin-block-start:var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-on-primary)}\n .col h2{margin:0 0 var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);font-weight:var(--rhc-text-font-weight-bold);text-transform:uppercase;letter-spacing:.04em}\n .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)}\n .links a{color:var(--rhc-color-foreground-on-primary);text-decoration:none}\n .links a:hover{text-decoration:underline}\n .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}\n `],\n template: `\n <footer class=\"bar\">\n <div class=\"inner\">\n <div>\n <div class=\"tagline\" i18n=\"@@footer.tagline\">De Rijksoverheid. Voor Nederland.</div>\n <div class=\"ministry\" i18n=\"@@footer.ministry\">CIBG — Ministerie van Volksgezondheid, Welzijn en Sport</div>\n </div>\n <nav class=\"col\" i18n-aria-label=\"@@footer.overSiteAria\" aria-label=\"Over deze site\">\n <h2 i18n=\"@@footer.overSite\">Over deze site</h2>\n <ul class=\"links\">\n <li><a href=\"https://www.rijksoverheid.nl/privacy\" rel=\"noopener\" target=\"_blank\" i18n=\"@@footer.privacy\">Privacy</a></li>\n <li><a href=\"https://www.rijksoverheid.nl/cookies\" rel=\"noopener\" target=\"_blank\" i18n=\"@@footer.cookies\">Cookies</a></li>\n <li><a href=\"https://www.rijksoverheid.nl/toegankelijkheid\" rel=\"noopener\" target=\"_blank\" i18n=\"@@footer.toegankelijkheid\">Toegankelijkheid</a></li>\n </ul>\n </nav>\n <div class=\"meta\" i18n=\"@@footer.demo\">Demo / POC — geen echte gegevens.</div>\n </div>\n </footer>\n `,\n})\nexport class SiteFooterComponent {}\n",
|
||||
"assetsDirs": [],
|
||||
"styleUrlsData": "",
|
||||
"stylesData": "\n :host{display:block}\n .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%}\n .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}\n .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}\n .ministry{margin-block-start:var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-on-primary)}\n .col h2{margin:0 0 var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);font-weight:var(--rhc-text-font-weight-bold);text-transform:uppercase;letter-spacing:.04em}\n .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)}\n .links a{color:var(--rhc-color-foreground-on-primary);text-decoration:none}\n .links a:hover{text-decoration:underline}\n .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}\n \n",
|
||||
"stylesData": "\n :host{display:block}\n .bar{background:var(--rhc-color-layout);color:var(--rhc-color-foreground-on-primary);margin-block-start:var(--rhc-space-max-5xl);inline-size:100%}\n .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}\n .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}\n .ministry{margin-block-start:var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-on-primary)}\n .col h2{margin:0 0 var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);font-weight:var(--rhc-text-font-weight-bold);text-transform:uppercase;letter-spacing:.04em}\n .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)}\n .links a{color:var(--rhc-color-foreground-on-primary);text-decoration:none}\n .links a:hover{text-decoration:underline}\n .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}\n \n",
|
||||
"extends": []
|
||||
},
|
||||
{
|
||||
"name": "SiteHeaderComponent",
|
||||
"id": "component-SiteHeaderComponent-35a3fcd73778e62ff04f299edaa3cde5490b2800314762ac4b7fe01a68af79246c6fda70c45e0113ac7cb2ec0a81f2405c14a6c2a92a7a1f21f1b2f57ea1042f",
|
||||
"id": "component-SiteHeaderComponent-4e99a966eef3f002465a6bb6a91c48f02cc0f39ed84dcd2ffcc04d6eb80ca2c878136183c30e68bd18ffd47d17cf0767639c39b8eba14d500220bb96ab81c592",
|
||||
"file": "src/app/shared/layout/site-header/site-header.component.ts",
|
||||
"encapsulation": [],
|
||||
"entryComponents": [],
|
||||
@@ -19182,7 +19182,7 @@
|
||||
"selector": "app-site-header",
|
||||
"styleUrls": [],
|
||||
"styles": [
|
||||
"\n :host{display:block}\n /* Tier 1 — white brand bar */\n .brandbar{background:var(--rhc-color-wit);border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);inline-size:100%}\n .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}\n .brand{display:flex;align-items:center;gap:var(--rhc-space-max-lg);color:var(--rhc-color-foreground-default);text-decoration:none}\n .mark{display:inline-block;inline-size:var(--rhc-space-max-md);block-size:var(--rhc-space-max-4xl);background:var(--rhc-color-lintblauw-700)}\n .name{font-weight:var(--rhc-text-font-weight-bold);line-height:var(--rhc-text-line-height-sm)}\n .sub{font-weight:var(--rhc-text-font-weight-regular);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-subtle)}\n .session{margin-inline-start:auto;display:flex;align-items:center;gap:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm)}\n .user{color:var(--rhc-color-foreground-subtle)}\n .logout{background:none;border:0;padding:0;cursor:pointer;color:var(--rhc-color-foreground-link);text-decoration:underline;font:inherit}\n .logout:hover{color:var(--rhc-color-foreground-link-hover)}\n /* Tier 2 — blue breadcrumb bar */\n .navbar{background:var(--rhc-color-lintblauw-700);color:var(--rhc-color-foreground-on-primary);inline-size:100%}\n .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}\n "
|
||||
"\n :host{display:block}\n /* Tier 1 — white brand bar */\n .brandbar{background:var(--rhc-color-wit);border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);inline-size:100%}\n .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}\n .brand{display:flex;align-items:center;gap:var(--rhc-space-max-lg);color:var(--rhc-color-foreground-default);text-decoration:none}\n .mark{display:inline-block;inline-size:var(--rhc-space-max-md);block-size:var(--rhc-space-max-4xl);background:var(--rhc-color-layout)}\n .name{font-weight:var(--rhc-text-font-weight-bold);line-height:var(--rhc-text-line-height-sm)}\n .sub{font-weight:var(--rhc-text-font-weight-regular);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-subtle)}\n .session{margin-inline-start:auto;display:flex;align-items:center;gap:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm)}\n .user{color:var(--rhc-color-foreground-subtle)}\n .logout{background:none;border:0;padding:0;cursor:pointer;color:var(--rhc-color-foreground-link);text-decoration:underline;font:inherit}\n .logout:hover{color:var(--rhc-color-foreground-link-hover)}\n /* Tier 2 — blue breadcrumb bar */\n .navbar{background:var(--rhc-color-layout);color:var(--rhc-color-foreground-on-primary);inline-size:100%}\n .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}\n "
|
||||
],
|
||||
"template": "<div class=\"brandbar\">\n <div class=\"inner\">\n <a routerLink=\"/dashboard\" class=\"brand\">\n <span aria-hidden=\"true\" class=\"mark\"></span>\n <span class=\"name\" i18n=\"@@header.brand\">Rijksoverheid<br><span class=\"sub\">BIG-register</span></span>\n </a>\n <span class=\"portal sub\">{{ subtitle() }}</span>\n @if (session(); as s) {\n <span class=\"session\">\n <span class=\"user\"><ng-container i18n=\"@@header.ingelogdAls\">Ingelogd als</ng-container> {{ s.naam }}</span>\n <button type=\"button\" class=\"logout\" (click)=\"logout()\" i18n=\"@@header.uitloggen\">Uitloggen</button>\n </span>\n }\n </div>\n</div>\n@if (trail().length) {\n <div class=\"navbar\">\n <div class=\"inner\">\n <app-breadcrumb class=\"inverse\" [items]=\"trail()\" />\n </div>\n </div>\n}\n",
|
||||
"templateUrl": [],
|
||||
@@ -19303,10 +19303,10 @@
|
||||
"description": "<p>Organism: Rijksoverheid-style site header. Two tiers, like rijksoverheid.nl:\na white brand bar (wordmark + session/logout) over a lint-blue bar carrying\nthe breadcrumb. ponytail: text wordmark, not the licensed Rijksoverheid logo;\nno search box (no search feature yet).</p>\n",
|
||||
"rawdescription": "\nOrganism: Rijksoverheid-style site header. Two tiers, like rijksoverheid.nl:\na white brand bar (wordmark + session/logout) over a lint-blue bar carrying\nthe breadcrumb. ponytail: text wordmark, not the licensed Rijksoverheid logo;\nno search box (no search feature yet).",
|
||||
"type": "component",
|
||||
"sourceCode": "import { Component, computed, inject, input } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router, RouterLink } from '@angular/router';\nimport { filter, map } from 'rxjs/operators';\nimport { SESSION_PORT } from '@shared/application/session.port';\nimport { BreadcrumbComponent } from '@shared/layout/breadcrumb/breadcrumb.component';\nimport { trailFor } from '@shared/layout/breadcrumb/breadcrumb-trail';\n\n/** Organism: Rijksoverheid-style site header. Two tiers, like rijksoverheid.nl:\n a white brand bar (wordmark + session/logout) over a lint-blue bar carrying\n the breadcrumb. ponytail: text wordmark, not the licensed Rijksoverheid logo;\n no search box (no search feature yet). */\n@Component({\n selector: 'app-site-header',\n imports: [RouterLink, BreadcrumbComponent],\n styles: [`\n :host{display:block}\n /* Tier 1 — white brand bar */\n .brandbar{background:var(--rhc-color-wit);border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);inline-size:100%}\n .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}\n .brand{display:flex;align-items:center;gap:var(--rhc-space-max-lg);color:var(--rhc-color-foreground-default);text-decoration:none}\n .mark{display:inline-block;inline-size:var(--rhc-space-max-md);block-size:var(--rhc-space-max-4xl);background:var(--rhc-color-lintblauw-700)}\n .name{font-weight:var(--rhc-text-font-weight-bold);line-height:var(--rhc-text-line-height-sm)}\n .sub{font-weight:var(--rhc-text-font-weight-regular);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-subtle)}\n .session{margin-inline-start:auto;display:flex;align-items:center;gap:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm)}\n .user{color:var(--rhc-color-foreground-subtle)}\n .logout{background:none;border:0;padding:0;cursor:pointer;color:var(--rhc-color-foreground-link);text-decoration:underline;font:inherit}\n .logout:hover{color:var(--rhc-color-foreground-link-hover)}\n /* Tier 2 — blue breadcrumb bar */\n .navbar{background:var(--rhc-color-lintblauw-700);color:var(--rhc-color-foreground-on-primary);inline-size:100%}\n .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}\n `],\n template: `\n <div class=\"brandbar\">\n <div class=\"inner\">\n <a routerLink=\"/dashboard\" class=\"brand\">\n <span aria-hidden=\"true\" class=\"mark\"></span>\n <span class=\"name\" i18n=\"@@header.brand\">Rijksoverheid<br><span class=\"sub\">BIG-register</span></span>\n </a>\n <span class=\"portal sub\">{{ subtitle() }}</span>\n @if (session(); as s) {\n <span class=\"session\">\n <span class=\"user\"><ng-container i18n=\"@@header.ingelogdAls\">Ingelogd als</ng-container> {{ s.naam }}</span>\n <button type=\"button\" class=\"logout\" (click)=\"logout()\" i18n=\"@@header.uitloggen\">Uitloggen</button>\n </span>\n }\n </div>\n </div>\n @if (trail().length) {\n <div class=\"navbar\">\n <div class=\"inner\">\n <app-breadcrumb class=\"inverse\" [items]=\"trail()\" />\n </div>\n </div>\n }\n `,\n})\nexport class SiteHeaderComponent {\n subtitle = input($localize`:@@header.subtitle:Mijn omgeving`);\n\n private router = inject(Router);\n private sessionPort = inject(SESSION_PORT, { optional: true });\n\n readonly session = computed(() => this.sessionPort?.session() ?? null);\n private url = toSignal(\n this.router.events.pipe(filter((e) => e instanceof NavigationEnd), map(() => this.router.url)),\n { initialValue: this.router.url },\n );\n protected trail = computed(() => trailFor(this.url()));\n\n logout() {\n this.sessionPort?.logout();\n this.router.navigate(['/login']);\n }\n}\n",
|
||||
"sourceCode": "import { Component, computed, inject, input } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router, RouterLink } from '@angular/router';\nimport { filter, map } from 'rxjs/operators';\nimport { SESSION_PORT } from '@shared/application/session.port';\nimport { BreadcrumbComponent } from '@shared/layout/breadcrumb/breadcrumb.component';\nimport { trailFor } from '@shared/layout/breadcrumb/breadcrumb-trail';\n\n/** Organism: Rijksoverheid-style site header. Two tiers, like rijksoverheid.nl:\n a white brand bar (wordmark + session/logout) over a lint-blue bar carrying\n the breadcrumb. ponytail: text wordmark, not the licensed Rijksoverheid logo;\n no search box (no search feature yet). */\n@Component({\n selector: 'app-site-header',\n imports: [RouterLink, BreadcrumbComponent],\n styles: [`\n :host{display:block}\n /* Tier 1 — white brand bar */\n .brandbar{background:var(--rhc-color-wit);border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);inline-size:100%}\n .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}\n .brand{display:flex;align-items:center;gap:var(--rhc-space-max-lg);color:var(--rhc-color-foreground-default);text-decoration:none}\n .mark{display:inline-block;inline-size:var(--rhc-space-max-md);block-size:var(--rhc-space-max-4xl);background:var(--rhc-color-layout)}\n .name{font-weight:var(--rhc-text-font-weight-bold);line-height:var(--rhc-text-line-height-sm)}\n .sub{font-weight:var(--rhc-text-font-weight-regular);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-subtle)}\n .session{margin-inline-start:auto;display:flex;align-items:center;gap:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm)}\n .user{color:var(--rhc-color-foreground-subtle)}\n .logout{background:none;border:0;padding:0;cursor:pointer;color:var(--rhc-color-foreground-link);text-decoration:underline;font:inherit}\n .logout:hover{color:var(--rhc-color-foreground-link-hover)}\n /* Tier 2 — blue breadcrumb bar */\n .navbar{background:var(--rhc-color-layout);color:var(--rhc-color-foreground-on-primary);inline-size:100%}\n .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}\n `],\n template: `\n <div class=\"brandbar\">\n <div class=\"inner\">\n <a routerLink=\"/dashboard\" class=\"brand\">\n <span aria-hidden=\"true\" class=\"mark\"></span>\n <span class=\"name\" i18n=\"@@header.brand\">Rijksoverheid<br><span class=\"sub\">BIG-register</span></span>\n </a>\n <span class=\"portal sub\">{{ subtitle() }}</span>\n @if (session(); as s) {\n <span class=\"session\">\n <span class=\"user\"><ng-container i18n=\"@@header.ingelogdAls\">Ingelogd als</ng-container> {{ s.naam }}</span>\n <button type=\"button\" class=\"logout\" (click)=\"logout()\" i18n=\"@@header.uitloggen\">Uitloggen</button>\n </span>\n }\n </div>\n </div>\n @if (trail().length) {\n <div class=\"navbar\">\n <div class=\"inner\">\n <app-breadcrumb class=\"inverse\" [items]=\"trail()\" />\n </div>\n </div>\n }\n `,\n})\nexport class SiteHeaderComponent {\n subtitle = input($localize`:@@header.subtitle:Mijn omgeving`);\n\n private router = inject(Router);\n private sessionPort = inject(SESSION_PORT, { optional: true });\n\n readonly session = computed(() => this.sessionPort?.session() ?? null);\n private url = toSignal(\n this.router.events.pipe(filter((e) => e instanceof NavigationEnd), map(() => this.router.url)),\n { initialValue: this.router.url },\n );\n protected trail = computed(() => trailFor(this.url()));\n\n logout() {\n this.sessionPort?.logout();\n this.router.navigate(['/login']);\n }\n}\n",
|
||||
"assetsDirs": [],
|
||||
"styleUrlsData": "",
|
||||
"stylesData": "\n :host{display:block}\n /* Tier 1 — white brand bar */\n .brandbar{background:var(--rhc-color-wit);border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);inline-size:100%}\n .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}\n .brand{display:flex;align-items:center;gap:var(--rhc-space-max-lg);color:var(--rhc-color-foreground-default);text-decoration:none}\n .mark{display:inline-block;inline-size:var(--rhc-space-max-md);block-size:var(--rhc-space-max-4xl);background:var(--rhc-color-lintblauw-700)}\n .name{font-weight:var(--rhc-text-font-weight-bold);line-height:var(--rhc-text-line-height-sm)}\n .sub{font-weight:var(--rhc-text-font-weight-regular);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-subtle)}\n .session{margin-inline-start:auto;display:flex;align-items:center;gap:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm)}\n .user{color:var(--rhc-color-foreground-subtle)}\n .logout{background:none;border:0;padding:0;cursor:pointer;color:var(--rhc-color-foreground-link);text-decoration:underline;font:inherit}\n .logout:hover{color:var(--rhc-color-foreground-link-hover)}\n /* Tier 2 — blue breadcrumb bar */\n .navbar{background:var(--rhc-color-lintblauw-700);color:var(--rhc-color-foreground-on-primary);inline-size:100%}\n .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}\n \n",
|
||||
"stylesData": "\n :host{display:block}\n /* Tier 1 — white brand bar */\n .brandbar{background:var(--rhc-color-wit);border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);inline-size:100%}\n .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}\n .brand{display:flex;align-items:center;gap:var(--rhc-space-max-lg);color:var(--rhc-color-foreground-default);text-decoration:none}\n .mark{display:inline-block;inline-size:var(--rhc-space-max-md);block-size:var(--rhc-space-max-4xl);background:var(--rhc-color-layout)}\n .name{font-weight:var(--rhc-text-font-weight-bold);line-height:var(--rhc-text-line-height-sm)}\n .sub{font-weight:var(--rhc-text-font-weight-regular);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-subtle)}\n .session{margin-inline-start:auto;display:flex;align-items:center;gap:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm)}\n .user{color:var(--rhc-color-foreground-subtle)}\n .logout{background:none;border:0;padding:0;cursor:pointer;color:var(--rhc-color-foreground-link);text-decoration:underline;font:inherit}\n .logout:hover{color:var(--rhc-color-foreground-link-hover)}\n /* Tier 2 — blue breadcrumb bar */\n .navbar{background:var(--rhc-color-layout);color:var(--rhc-color-foreground-on-primary);inline-size:100%}\n .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}\n \n",
|
||||
"extends": []
|
||||
},
|
||||
{
|
||||
@@ -20744,16 +20744,6 @@
|
||||
"rawdescription": "Used by the shell to find what to poll on return: still-in-flight uploads.",
|
||||
"description": "<p>Used by the shell to find what to poll on return: still-in-flight uploads.</p>\n"
|
||||
},
|
||||
{
|
||||
"name": "initial",
|
||||
"ctype": "miscellaneous",
|
||||
"subtype": "variable",
|
||||
"file": "src/app/brief/domain/brief.machine.ts",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"type": "BriefState",
|
||||
"defaultValue": "{ tag: 'loading' }"
|
||||
},
|
||||
{
|
||||
"name": "initial",
|
||||
"ctype": "miscellaneous",
|
||||
@@ -20774,6 +20764,16 @@
|
||||
"type": "IntakeState",
|
||||
"defaultValue": "{ tag: 'Answering', answers: {}, cursor: 0, errors: {}, scholingThreshold: SCHOLING_THRESHOLD_DEFAULT }"
|
||||
},
|
||||
{
|
||||
"name": "initial",
|
||||
"ctype": "miscellaneous",
|
||||
"subtype": "variable",
|
||||
"file": "src/app/brief/domain/brief.machine.ts",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"type": "BriefState",
|
||||
"defaultValue": "{ tag: 'loading' }"
|
||||
},
|
||||
{
|
||||
"name": "initial",
|
||||
"ctype": "miscellaneous",
|
||||
@@ -24759,50 +24759,6 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "reduce",
|
||||
"file": "src/app/brief/domain/brief.machine.ts",
|
||||
"ctype": "miscellaneous",
|
||||
"subtype": "function",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "",
|
||||
"args": [
|
||||
{
|
||||
"name": "s",
|
||||
"type": "BriefState",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": ""
|
||||
},
|
||||
{
|
||||
"name": "m",
|
||||
"type": "BriefMsg",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": ""
|
||||
}
|
||||
],
|
||||
"returnType": "BriefState",
|
||||
"jsdoctags": [
|
||||
{
|
||||
"name": "s",
|
||||
"type": "BriefState",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"tagName": {
|
||||
"text": "param"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "m",
|
||||
"type": "BriefMsg",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"tagName": {
|
||||
"text": "param"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "reduce",
|
||||
"file": "src/app/herregistratie/domain/herregistratie.machine.ts",
|
||||
@@ -24891,6 +24847,50 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "reduce",
|
||||
"file": "src/app/brief/domain/brief.machine.ts",
|
||||
"ctype": "miscellaneous",
|
||||
"subtype": "function",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "",
|
||||
"args": [
|
||||
{
|
||||
"name": "s",
|
||||
"type": "BriefState",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": ""
|
||||
},
|
||||
{
|
||||
"name": "m",
|
||||
"type": "BriefMsg",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": ""
|
||||
}
|
||||
],
|
||||
"returnType": "BriefState",
|
||||
"jsdoctags": [
|
||||
{
|
||||
"name": "s",
|
||||
"type": "BriefState",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"tagName": {
|
||||
"text": "param"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "m",
|
||||
"type": "BriefMsg",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"tagName": {
|
||||
"text": "param"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "reduce",
|
||||
"file": "src/app/registratie/domain/change-request.machine.ts",
|
||||
@@ -27807,18 +27807,6 @@
|
||||
"description": "<p>The server-owned geldigheidsvraag whose"ja" answer requires a Dutch-taalvaardigheid\nupload (proof of the confirmed B2 level). Stable id shared with the backend.</p>\n"
|
||||
}
|
||||
],
|
||||
"src/app/brief/domain/brief.machine.ts": [
|
||||
{
|
||||
"name": "initial",
|
||||
"ctype": "miscellaneous",
|
||||
"subtype": "variable",
|
||||
"file": "src/app/brief/domain/brief.machine.ts",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"type": "BriefState",
|
||||
"defaultValue": "{ tag: 'loading' }"
|
||||
}
|
||||
],
|
||||
"src/app/herregistratie/domain/herregistratie.machine.ts": [
|
||||
{
|
||||
"name": "initial",
|
||||
@@ -27867,6 +27855,18 @@
|
||||
"description": "<p>The fixed step list. Number of steps never changes; questions reveal inline.</p>\n"
|
||||
}
|
||||
],
|
||||
"src/app/brief/domain/brief.machine.ts": [
|
||||
{
|
||||
"name": "initial",
|
||||
"ctype": "miscellaneous",
|
||||
"subtype": "variable",
|
||||
"file": "src/app/brief/domain/brief.machine.ts",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"type": "BriefState",
|
||||
"defaultValue": "{ tag: 'loading' }"
|
||||
}
|
||||
],
|
||||
"src/app/registratie/domain/change-request.machine.ts": [
|
||||
{
|
||||
"name": "initial",
|
||||
|
||||
@@ -9,7 +9,11 @@ import { ButtonComponent } from '@shared/ui/button/button.component';
|
||||
selector: 'app-login-form',
|
||||
imports: [FormsModule, FormFieldComponent, TextInputComponent, ButtonComponent],
|
||||
template: `
|
||||
<form (ngSubmit)="submitted.emit(bsn)" class="app-form app-form-panel">
|
||||
<form (ngSubmit)="submitted.emit(bsn)" class="form-horizontal">
|
||||
<div class="form-header">
|
||||
<div class="form-action"><span class="meta" i18n="@@form.verplichteVelden">* verplichte velden</span></div>
|
||||
</div>
|
||||
|
||||
<app-form-field i18n-label="@@login.bsnLabel" label="BSN" fieldId="bsn" required i18n-description="@@login.bsnDescription" description="9 cijfers (demo: vul iets in)">
|
||||
<app-text-input inputId="bsn" [(ngModel)]="bsn" name="bsn" placeholder="123456789" />
|
||||
</app-form-field>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { ok, err } from '@shared/kernel/fp';
|
||||
import { initialUpload } from '@shared/upload/upload.machine';
|
||||
import { initial, next, back, submit, resolve, reduce, WizardState } from './herregistratie.machine';
|
||||
import { initial, next, back, gaNaarStap, submit, resolve, reduce, WizardState } from './herregistratie.machine';
|
||||
|
||||
const editing1 = (uren: string, jaren = '5', punten = ''): WizardState => ({ tag: 'Editing', step: 1, draft: { uren, jaren, punten }, errors: {}, upload: initialUpload });
|
||||
const editing2 = (uren: string, punten: string, jaren = '5'): WizardState => ({ tag: 'Editing', step: 2, draft: { uren, jaren, punten }, errors: {}, upload: initialUpload });
|
||||
@@ -46,6 +46,17 @@ describe('wizard.machine', () => {
|
||||
expect(resolve(submitting, ok(undefined)).tag).toBe('Submitted');
|
||||
expect(resolve(submitting, err('boom')).tag).toBe('Failed');
|
||||
});
|
||||
|
||||
it('gaNaarStap jumps back to an earlier step, clearing errors', () => {
|
||||
expect((gaNaarStap(editing3('4160', '200'), 1) as any).step).toBe(1);
|
||||
});
|
||||
|
||||
it('gaNaarStap ignores a same/forward jump and jumps outside Editing', () => {
|
||||
const e3 = editing3('4160', '200');
|
||||
expect(gaNaarStap(e3, 3)).toBe(e3); // same step -> no-op
|
||||
const submitting = submit(e3);
|
||||
expect(gaNaarStap(submitting, 1)).toBe(submitting); // not Editing -> no-op
|
||||
});
|
||||
});
|
||||
|
||||
describe('reduce (message-driven)', () => {
|
||||
|
||||
@@ -87,6 +87,13 @@ export function back(s: WizardState): WizardState {
|
||||
return { ...s, step: (s.step - 1) as 1 | 2, errors: {} };
|
||||
}
|
||||
|
||||
/** Jump back to an earlier step to correct data (controle → step N). Forward
|
||||
jumps are not allowed (would skip validation). */
|
||||
export function gaNaarStap(s: WizardState, step: 1 | 2 | 3): WizardState {
|
||||
if (s.tag !== 'Editing' || step >= s.step) return s;
|
||||
return { ...s, step, errors: {} };
|
||||
}
|
||||
|
||||
/** Step 3 submit: parse everything + require documents; Submitting only with Valid. */
|
||||
export function submit(s: WizardState): WizardState {
|
||||
if (s.tag !== 'Editing' || s.step !== 3) return s;
|
||||
@@ -121,6 +128,7 @@ export type WizardMsg =
|
||||
| { tag: 'SetField'; key: keyof Draft; value: string }
|
||||
| { tag: 'Next' }
|
||||
| { tag: 'Back' }
|
||||
| { tag: 'GaNaarStap'; step: 1 | 2 | 3 }
|
||||
| { tag: 'Submit' }
|
||||
| { tag: 'Retry' }
|
||||
| { tag: 'SubmitConfirmed' }
|
||||
@@ -136,6 +144,8 @@ export function reduce(s: WizardState, m: WizardMsg): WizardState {
|
||||
return next(s);
|
||||
case 'Back':
|
||||
return back(s);
|
||||
case 'GaNaarStap':
|
||||
return gaNaarStap(s, m.step);
|
||||
case 'Submit':
|
||||
return submit(s);
|
||||
case 'Retry':
|
||||
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
currentStep,
|
||||
next,
|
||||
back,
|
||||
gaNaarStap,
|
||||
submit,
|
||||
resolve,
|
||||
reduce,
|
||||
@@ -67,6 +68,19 @@ describe('navigation', () => {
|
||||
it('Back never goes below the first step', () => {
|
||||
expect(back(initial)).toBe(initial);
|
||||
});
|
||||
|
||||
it('gaNaarStap jumps back to an earlier step, clearing errors', () => {
|
||||
const s = answering({ buitenlandGewerkt: 'nee' }, 2);
|
||||
expect((gaNaarStap(s, 0) as any).cursor).toBe(0);
|
||||
});
|
||||
|
||||
it('gaNaarStap ignores a same/forward jump and jumps outside Answering', () => {
|
||||
const s = answering({ buitenlandGewerkt: 'nee' }, 1);
|
||||
expect(gaNaarStap(s, 1)).toBe(s); // same step -> no-op
|
||||
expect(gaNaarStap(s, 2)).toBe(s); // forward -> no-op
|
||||
const submitting = submit(answering({ buitenlandGewerkt: 'nee', uren: '4160' }, 2));
|
||||
expect(gaNaarStap(submitting, 0)).toBe(submitting); // not Answering -> no-op
|
||||
});
|
||||
});
|
||||
|
||||
describe('submit', () => {
|
||||
|
||||
@@ -156,6 +156,13 @@ export function back(s: IntakeState): IntakeState {
|
||||
return { ...s, cursor: s.cursor - 1, errors: {} };
|
||||
}
|
||||
|
||||
/** Jump back to an earlier step to correct answers (review → step N). Forward
|
||||
jumps are not allowed (would skip validation). */
|
||||
export function gaNaarStap(s: IntakeState, cursor: number): IntakeState {
|
||||
if (s.tag !== 'Answering' || cursor < 0 || cursor >= s.cursor) return s;
|
||||
return { ...s, cursor, errors: {} };
|
||||
}
|
||||
|
||||
export function submit(s: IntakeState): IntakeState {
|
||||
if (s.tag !== 'Answering') return s;
|
||||
const r = validateAll(s.answers, s.scholingThreshold);
|
||||
@@ -171,6 +178,7 @@ export type IntakeMsg =
|
||||
| { tag: 'SetAnswer'; key: keyof Answers; value: string }
|
||||
| { tag: 'Next' }
|
||||
| { tag: 'Back' }
|
||||
| { tag: 'GaNaarStap'; cursor: number }
|
||||
| { tag: 'Submit' }
|
||||
| { tag: 'Retry' }
|
||||
| { tag: 'SubmitConfirmed' }
|
||||
@@ -186,6 +194,8 @@ export function reduce(s: IntakeState, m: IntakeMsg): IntakeState {
|
||||
return next(s);
|
||||
case 'Back':
|
||||
return back(s);
|
||||
case 'GaNaarStap':
|
||||
return gaNaarStap(s, m.cursor);
|
||||
case 'Submit':
|
||||
return submit(s);
|
||||
case 'Retry':
|
||||
|
||||
@@ -3,7 +3,8 @@ import { FormsModule } from '@angular/forms';
|
||||
import { FormFieldComponent } from '@shared/ui/form-field/form-field.component';
|
||||
import { TextInputComponent } from '@shared/ui/text-input/text-input.component';
|
||||
import { AlertComponent } from '@shared/ui/alert/alert.component';
|
||||
import { WizardShellComponent, WizardError, WizardStatus } from '@shared/layout/wizard-shell/wizard-shell.component';
|
||||
import { WizardShellComponent, WizardError, WizardStatus, naarStapLabel } from '@shared/layout/wizard-shell/wizard-shell.component';
|
||||
import { ConfirmationComponent } from '@shared/ui/confirmation/confirmation.component';
|
||||
import { createStore } from '@shared/application/store';
|
||||
import { whenTag } from '@shared/kernel/fp';
|
||||
import { BigProfileStore } from '@registratie/application/big-profile.store';
|
||||
@@ -22,12 +23,13 @@ import { UploadState, initialUpload, deliveryRefs } from '@shared/upload/upload.
|
||||
the dashboard shows "in behandeling" immediately. */
|
||||
@Component({
|
||||
selector: 'app-herregistratie-wizard',
|
||||
imports: [FormsModule, FormFieldComponent, TextInputComponent, AlertComponent, WizardShellComponent, DocumentUploadComponent],
|
||||
imports: [FormsModule, FormFieldComponent, TextInputComponent, AlertComponent, ConfirmationComponent, WizardShellComponent, DocumentUploadComponent],
|
||||
template: `
|
||||
<app-wizard-shell
|
||||
[steps]="stepLabels"
|
||||
[current]="step() - 1"
|
||||
[stepTitle]="stepTitle()"
|
||||
i18n-processName="@@herregWizard.processName" processName="Herregistratie aanvragen"
|
||||
[status]="shellStatus()"
|
||||
[primaryLabel]="primaryLabel()"
|
||||
[canGoBack]="step() > 1"
|
||||
@@ -36,7 +38,8 @@ import { UploadState, initialUpload, deliveryRefs } from '@shared/upload/upload.
|
||||
(primary)="onPrimary()"
|
||||
(back)="dispatch({ tag: 'Back' })"
|
||||
(cancel)="restart()"
|
||||
(retry)="onRetry()">
|
||||
(retry)="onRetry()"
|
||||
(goToStep)="goToStep($event)">
|
||||
|
||||
@switch (step()) {
|
||||
@case (1) {
|
||||
@@ -71,7 +74,7 @@ import { UploadState, initialUpload, deliveryRefs } from '@shared/upload/upload.
|
||||
}
|
||||
|
||||
<div wizardSuccess>
|
||||
<app-alert type="ok" i18n="@@herregWizard.success">Uw aanvraag tot herregistratie is ontvangen.</app-alert>
|
||||
<app-confirmation i18n-title="@@herregWizard.success.title" title="Uw aanvraag tot herregistratie is ontvangen" />
|
||||
</div>
|
||||
</app-wizard-shell>
|
||||
`,
|
||||
@@ -127,7 +130,15 @@ export class HerregistratieWizardComponent {
|
||||
|
||||
// --- Presentational wiring for the shared wizard shell ---------------------
|
||||
protected stepTitle = computed(() => this.stepTitles[this.step() - 1]);
|
||||
protected primaryLabel = computed(() => (this.step() < 3 ? $localize`:@@wizard.volgende:Volgende` : $localize`:@@herregWizard.indienen:Herregistratie aanvragen`));
|
||||
protected primaryLabel = computed(() => {
|
||||
const step = this.step();
|
||||
return step < 3 ? naarStapLabel(step + 1, this.stepLabels[step]) : $localize`:@@herregWizard.indienen:Herregistratie aanvragen`;
|
||||
});
|
||||
|
||||
/** Stepper emits a 0-based index for an earlier (visited) step. */
|
||||
protected goToStep(index: number) {
|
||||
this.dispatch({ tag: 'GaNaarStap', step: (index + 1) as 1 | 2 | 3 });
|
||||
}
|
||||
protected errorMessage = computed(() => $localize`:@@wizard.indienenMislukt:Indienen mislukt:` + ` ${this.failedError()}`);
|
||||
protected shellStatus = computed<WizardStatus>(() => {
|
||||
switch (this.state().tag) {
|
||||
|
||||
@@ -6,7 +6,9 @@ import { RadioGroupComponent, JA_NEE } from '@shared/ui/radio-group/radio-group.
|
||||
import { ButtonComponent } from '@shared/ui/button/button.component';
|
||||
import { AlertComponent } from '@shared/ui/alert/alert.component';
|
||||
import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
|
||||
import { WizardShellComponent, WizardError, WizardStatus } from '@shared/layout/wizard-shell/wizard-shell.component';
|
||||
import { ReviewSectionComponent } from '@shared/ui/review-section/review-section.component';
|
||||
import { ConfirmationComponent } from '@shared/ui/confirmation/confirmation.component';
|
||||
import { WizardShellComponent, WizardError, WizardStatus, naarStapLabel } from '@shared/layout/wizard-shell/wizard-shell.component';
|
||||
import { createStore } from '@shared/application/store';
|
||||
import { whenTag } from '@shared/kernel/fp';
|
||||
import { BigProfileStore } from '@registratie/application/big-profile.store';
|
||||
@@ -32,12 +34,13 @@ import { IntakePolicyAdapter } from '@herregistratie/infrastructure/intake-polic
|
||||
sessionStorage so a page reload keeps the user's progress (cleared on tab close). */
|
||||
@Component({
|
||||
selector: 'app-intake-wizard',
|
||||
imports: [FormsModule, FormFieldComponent, TextInputComponent, RadioGroupComponent, ButtonComponent, AlertComponent, DataRowComponent, WizardShellComponent],
|
||||
imports: [FormsModule, FormFieldComponent, TextInputComponent, RadioGroupComponent, ButtonComponent, AlertComponent, DataRowComponent, ReviewSectionComponent, ConfirmationComponent, WizardShellComponent],
|
||||
template: `
|
||||
<app-wizard-shell
|
||||
[steps]="stepLabels"
|
||||
[current]="cursor()"
|
||||
[stepTitle]="stepTitle()"
|
||||
i18n-processName="@@intake.processName" processName="Herregistratie-intake"
|
||||
[status]="shellStatus()"
|
||||
[primaryLabel]="primaryLabel()"
|
||||
[canGoBack]="cursor() > 0"
|
||||
@@ -46,7 +49,8 @@ import { IntakePolicyAdapter } from '@herregistratie/infrastructure/intake-polic
|
||||
(primary)="onPrimary()"
|
||||
(back)="dispatch({ tag: 'Back' })"
|
||||
(cancel)="restart()"
|
||||
(retry)="onRetry()">
|
||||
(retry)="onRetry()"
|
||||
(goToStep)="dispatch({ tag: 'GaNaarStap', cursor: $event })">
|
||||
|
||||
@switch (step()) {
|
||||
@case ('buitenland') {
|
||||
@@ -81,12 +85,18 @@ import { IntakePolicyAdapter } from '@herregistratie/infrastructure/intake-polic
|
||||
}
|
||||
@case ('review') {
|
||||
<app-alert type="info" i18n="@@intake.review.controleer">Controleer uw antwoorden en dien de aanvraag in.</app-alert>
|
||||
<dl class="app-section">
|
||||
<app-review-section i18n-heading="@@intake.sectie.buitenland" heading="Buitenland"
|
||||
i18n-editAriaLabel="@@intake.buitenlandWijzigenAria" editAriaLabel="Wijzigen buitenland"
|
||||
(edit)="dispatch({ tag: 'GaNaarStap', cursor: 0 })">
|
||||
<app-data-row i18n-key="@@intake.review.buitenNl" key="Buiten NL gewerkt" [value]="answers().buitenlandGewerkt ?? '—'" />
|
||||
@if (answers().buitenlandGewerkt === 'ja') {
|
||||
<app-data-row i18n-key="@@intake.review.land" key="Land" [value]="answers().land ?? ''" />
|
||||
<app-data-row i18n-key="@@intake.review.buitenlandseUren" key="Buitenlandse uren" [value]="answers().buitenlandseUren ?? ''" />
|
||||
}
|
||||
</app-review-section>
|
||||
<app-review-section class="app-section" i18n-heading="@@intake.sectie.werk" heading="Werk in Nederland"
|
||||
i18n-editAriaLabel="@@intake.werkWijzigenAria" editAriaLabel="Wijzigen werk in Nederland"
|
||||
(edit)="dispatch({ tag: 'GaNaarStap', cursor: 1 })">
|
||||
<app-data-row i18n-key="@@intake.review.urenNl" key="Uren NL" [value]="answers().uren ?? ''" />
|
||||
@if (scholingZichtbaar()) {
|
||||
<app-data-row i18n-key="@@intake.review.scholing" key="Aanvullende scholing" [value]="answers().scholingGevolgd ?? ''" />
|
||||
@@ -94,15 +104,16 @@ import { IntakePolicyAdapter } from '@herregistratie/infrastructure/intake-polic
|
||||
@if (answers().scholingGevolgd === 'ja') {
|
||||
<app-data-row i18n-key="@@intake.review.punten" key="Nascholingspunten" [value]="answers().punten ?? ''" />
|
||||
}
|
||||
</dl>
|
||||
</app-review-section>
|
||||
}
|
||||
}
|
||||
|
||||
<div wizardSuccess>
|
||||
<app-alert type="ok" i18n="@@intake.success">Uw aanvraag tot herregistratie is ontvangen.</app-alert>
|
||||
<app-confirmation i18n-title="@@intake.success.title" title="Uw aanvraag tot herregistratie is ontvangen">
|
||||
<div class="app-section">
|
||||
<app-button variant="secondary" (click)="restart()" i18n="@@intake.opnieuw">Opnieuw beginnen</app-button>
|
||||
</div>
|
||||
</app-confirmation>
|
||||
</div>
|
||||
</app-wizard-shell>
|
||||
`,
|
||||
@@ -155,7 +166,11 @@ export class IntakeWizardComponent {
|
||||
review: $localize`:@@intake.title.review:Controleren en indienen`,
|
||||
};
|
||||
protected stepTitle = computed(() => this.stepTitles[this.step()]);
|
||||
protected primaryLabel = computed(() => (this.step() === 'review' ? $localize`:@@intake.indienen:Aanvraag indienen` : $localize`:@@wizard.volgende:Volgende`));
|
||||
protected primaryLabel = computed(() => {
|
||||
if (this.step() === 'review') return $localize`:@@intake.indienen:Aanvraag indienen`;
|
||||
const next = this.cursor() + 1;
|
||||
return naarStapLabel(next + 1, this.stepLabels[next]);
|
||||
});
|
||||
protected errorMessage = computed(() => $localize`:@@wizard.indienenMislukt:Indienen mislukt:` + ` ${this.failedError()}`);
|
||||
protected shellStatus = computed<WizardStatus>(() => {
|
||||
switch (this.state().tag) {
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
import { Component, computed, input, output } from '@angular/core';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { HeadingComponent } from '@shared/ui/heading/heading.component';
|
||||
import { StatusBadgeComponent } from '@shared/ui/status-badge/status-badge.component';
|
||||
import { ButtonComponent } from '@shared/ui/button/button.component';
|
||||
import { CardComponent } from '@shared/ui/card/card.component';
|
||||
import { ApplicationLinkComponent } from '@shared/ui/application-link/application-link.component';
|
||||
import { Aanvraag, AanvraagType } from '@registratie/domain/aanvraag';
|
||||
import { blockActions } from '@registratie/domain/block-actions';
|
||||
|
||||
@@ -13,53 +10,30 @@ const TYPE_LABELS: Record<AanvraagType, string> = {
|
||||
intake: $localize`:@@aanvraagBlock.type.intake:Herregistratie-intake`,
|
||||
};
|
||||
|
||||
/** Organism: one application on the dashboard's"Mijn aanvragen" list. Which badge
|
||||
+ actions it shows is driven by the pure `blockActions(status)` and the status
|
||||
tag; the block only renders. Composes card + status-badge + button. */
|
||||
/** Organism: one application on the dashboard's "Mijn aanvragen" list, rendered as
|
||||
a CIBG Huisstijl "aanvragen" row (application-link). Which text/actions it shows
|
||||
is driven by the pure `blockActions(status)` and the status tag; the block only
|
||||
renders. Only a resumable Concept is clickable — a resolved status has nothing
|
||||
to navigate to, so it renders as a plain (non-anchor) row. */
|
||||
@Component({
|
||||
selector: 'app-aanvraag-block',
|
||||
imports: [DatePipe, HeadingComponent, StatusBadgeComponent, ButtonComponent, CardComponent],
|
||||
styles: [`
|
||||
.head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rhc-space-max-md); flex-wrap: wrap; }
|
||||
.actions { display: flex; gap: var(--rhc-space-max-md); margin-block-start: var(--rhc-space-max-md); }
|
||||
`],
|
||||
imports: [ButtonComponent, ApplicationLinkComponent],
|
||||
// display:contents — see application-link.component.ts (keeps <li> a direct <ul> child).
|
||||
styles: [`:host{display:contents}`],
|
||||
template: `
|
||||
<app-card>
|
||||
<div class="head">
|
||||
<app-heading [level]="3">{{ typeLabel() }}</app-heading>
|
||||
<app-status-badge [label]="badgeLabel()" [color]="badgeColor()" />
|
||||
</div>
|
||||
|
||||
@switch (aanvraag().status.tag) {
|
||||
@case ('Concept') {
|
||||
<p i18n="@@aanvraagBlock.stap">Stap {{ stap().index }} van {{ stap().count }}</p>
|
||||
}
|
||||
@case ('InBehandeling') {
|
||||
<p i18n="@@aanvraagBlock.inBehandeling">Referentie {{ ref() }} · ingediend op {{ aanvraag().submittedAt | date: 'longDate' }}</p>
|
||||
@if (manual()) {
|
||||
<p class="app-text-subtle" i18n="@@aanvraagBlock.manual">Uw aanvraag wordt handmatig beoordeeld in de backoffice.</p>
|
||||
}
|
||||
}
|
||||
@case ('Goedgekeurd') {
|
||||
<p i18n="@@aanvraagBlock.goedgekeurd">Referentie {{ ref() }}</p>
|
||||
}
|
||||
@case ('Afgewezen') {
|
||||
<p i18n="@@aanvraagBlock.afgewezen">Referentie {{ ref() }}</p>
|
||||
<p class="app-text-subtle">{{ reden() }}</p>
|
||||
}
|
||||
}
|
||||
|
||||
@if (actions().length) {
|
||||
<div class="actions">
|
||||
@if (actions().includes('resume')) {
|
||||
<app-button (click)="resume.emit()" i18n="@@aanvraagBlock.verderGaan">Verder gaan</app-button>
|
||||
}
|
||||
<app-application-link
|
||||
[heading]="typeLabel()"
|
||||
[status]="statusText()"
|
||||
[subtitle]="subtitle()"
|
||||
[cta]="actions().includes('resume') ? verderGaan : ''"
|
||||
[clickable]="actions().includes('resume')"
|
||||
(activate)="resume.emit()">
|
||||
@if (actions().includes('cancel')) {
|
||||
<div applicationActions>
|
||||
<app-button variant="subtle" (click)="cancel.emit()" i18n="@@aanvraagBlock.annuleren">Annuleren</app-button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</app-card>
|
||||
</app-application-link>
|
||||
`,
|
||||
})
|
||||
export class AanvraagBlockComponent {
|
||||
@@ -68,42 +42,30 @@ export class AanvraagBlockComponent {
|
||||
resume = output<void>();
|
||||
cancel = output<void>();
|
||||
|
||||
protected readonly verderGaan = $localize`:@@aanvraagBlock.verderGaan:Verder gaan`;
|
||||
|
||||
protected typeLabel = computed(() => TYPE_LABELS[this.aanvraag().type]);
|
||||
protected actions = computed(() => blockActions(this.aanvraag().status));
|
||||
|
||||
// Status-tag → badge presentation (the UI's mapping, not a domain rule).
|
||||
protected badgeLabel = computed(() => {
|
||||
switch (this.aanvraag().status.tag) {
|
||||
case 'Concept': return $localize`:@@aanvraagBlock.badge.concept:Concept`;
|
||||
case 'InBehandeling': return $localize`:@@aanvraagBlock.badge.inBehandeling:In behandeling`;
|
||||
case 'Goedgekeurd': return $localize`:@@aanvraagBlock.badge.goedgekeurd:Goedgekeurd`;
|
||||
case 'Afgewezen': return $localize`:@@aanvraagBlock.badge.afgewezen:Afgewezen`;
|
||||
// Status-tag → row text (the UI's mapping, not a domain rule).
|
||||
protected statusText = computed(() => {
|
||||
const s = this.aanvraag().status;
|
||||
switch (s.tag) {
|
||||
case 'Concept': return $localize`:@@aanvraagBlock.stap:Stap ${s.stepIndex + 1}:index: van ${s.stepCount}:count:`;
|
||||
case 'InBehandeling': return $localize`:@@aanvraagBlock.inBehandeling:Referentie ${s.referentie}:ref: · ingediend op ${formatNL(this.aanvraag().submittedAt)}:datum:`;
|
||||
case 'Goedgekeurd': return $localize`:@@aanvraagBlock.goedgekeurd:Referentie ${s.referentie}:ref:`;
|
||||
case 'Afgewezen': return $localize`:@@aanvraagBlock.afgewezen:Referentie ${s.referentie}:ref:`;
|
||||
}
|
||||
});
|
||||
protected badgeColor = computed(() => {
|
||||
switch (this.aanvraag().status.tag) {
|
||||
case 'Concept': return 'var(--rhc-color-cool-grey-300)';
|
||||
case 'InBehandeling': return 'var(--rhc-color-oranje-500)';
|
||||
case 'Goedgekeurd': return 'var(--rhc-color-groen-500)';
|
||||
case 'Afgewezen': return 'var(--rhc-color-rood-500)';
|
||||
}
|
||||
});
|
||||
|
||||
// Field accessors per tag (the template @switch guarantees the right shape).
|
||||
protected stap = computed(() => {
|
||||
// Secondary note under the status line, when there's one to show.
|
||||
protected subtitle = computed(() => {
|
||||
const s = this.aanvraag().status;
|
||||
return s.tag === 'Concept' ? { index: s.stepIndex + 1, count: s.stepCount } : { index: 0, count: 0 };
|
||||
});
|
||||
protected ref = computed(() => {
|
||||
const s = this.aanvraag().status;
|
||||
return s.tag !== 'Concept' ? s.referentie : '';
|
||||
});
|
||||
protected manual = computed(() => {
|
||||
const s = this.aanvraag().status;
|
||||
return s.tag === 'InBehandeling' && s.manual;
|
||||
});
|
||||
protected reden = computed(() => {
|
||||
const s = this.aanvraag().status;
|
||||
return s.tag === 'Afgewezen' ? s.reden : '';
|
||||
if (s.tag === 'InBehandeling' && s.manual) return $localize`:@@aanvraagBlock.manual:Uw aanvraag wordt handmatig beoordeeld in de backoffice.`;
|
||||
if (s.tag === 'Afgewezen') return s.reden;
|
||||
return '';
|
||||
});
|
||||
}
|
||||
|
||||
function formatNL(iso?: string): string {
|
||||
return iso ? new Date(iso).toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' }) : '';
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { applicationConfig } from '@storybook/angular';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import { AanvraagBlockComponent } from './aanvraag-block.component';
|
||||
import { Aanvraag } from '@registratie/domain/aanvraag';
|
||||
|
||||
@@ -14,6 +16,12 @@ const base = {
|
||||
const meta: Meta<AanvraagBlockComponent> = {
|
||||
title: 'Organisms/Aanvraag Block',
|
||||
component: AanvraagBlockComponent,
|
||||
decorators: [applicationConfig({ providers: [provideRouter([])] })],
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
// A row is an <li> — the "applications" list styling needs the real list context.
|
||||
template: `<ul class="list-unstyled"><app-aanvraag-block [aanvraag]="aanvraag" /></ul>`,
|
||||
}),
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<AanvraagBlockComponent>;
|
||||
|
||||
@@ -22,7 +22,6 @@ export type AdresErrors = Partial<Record<keyof AdresValue, string>>;
|
||||
styles: [`
|
||||
fieldset{border:0;margin:0;padding:0;min-inline-size:0}
|
||||
legend{padding:0;font-weight:var(--rhc-text-font-weight-semi-bold);margin-block-end:var(--rhc-space-max-md)}
|
||||
app-form-field + app-form-field{display:block;margin-block-start:var(--rhc-space-max-lg)}
|
||||
`],
|
||||
template: `
|
||||
<fieldset>
|
||||
|
||||
@@ -28,7 +28,10 @@ import { ApiClient } from '@shared/infrastructure/api-client';
|
||||
</div>
|
||||
} @else {
|
||||
<app-heading [level]="2" i18n="@@changeRequest.heading">Adreswijziging doorgeven</app-heading>
|
||||
<form (ngSubmit)="onSubmit()" class="app-form app-form-panel app-section">
|
||||
<form (ngSubmit)="onSubmit()" class="form-horizontal app-section">
|
||||
<div class="form-header">
|
||||
<div class="form-action"><span class="meta" i18n="@@form.verplichteVelden">* verplichte velden</span></div>
|
||||
</div>
|
||||
<app-address-fields
|
||||
idPrefix="cr"
|
||||
[value]="adres()"
|
||||
|
||||
@@ -2,13 +2,13 @@ import { Component, computed, inject } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
|
||||
import { HeadingComponent } from '@shared/ui/heading/heading.component';
|
||||
import { LinkComponent } from '@shared/ui/link/link.component';
|
||||
import { AlertComponent } from '@shared/ui/alert/alert.component';
|
||||
import { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';
|
||||
import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
|
||||
import { CardComponent } from '@shared/ui/card/card.component';
|
||||
import { TaskListComponent } from '@shared/ui/task-list/task-list.component';
|
||||
import { SideNavComponent, NavItem } from '@shared/layout/side-nav/side-nav.component';
|
||||
import { ApplicationListComponent } from '@shared/ui/application-list/application-list.component';
|
||||
import { ApplicationLinkComponent } from '@shared/ui/application-link/application-link.component';
|
||||
import { ASYNC } from '@shared/ui/async/async.component';
|
||||
import { RegistrationSummaryComponent } from '@registratie/ui/registration-summary/registration-summary.component';
|
||||
import { RegistrationTableComponent } from '@registratie/ui/registration-table/registration-table.component';
|
||||
@@ -24,24 +24,21 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
|
||||
@Component({
|
||||
selector: 'app-dashboard-page',
|
||||
imports: [
|
||||
PageShellComponent, HeadingComponent, LinkComponent, AlertComponent, SkeletonComponent,
|
||||
DataRowComponent, CardComponent, TaskListComponent, SideNavComponent, ...ASYNC,
|
||||
PageShellComponent, HeadingComponent, AlertComponent, SkeletonComponent,
|
||||
DataRowComponent, CardComponent, TaskListComponent, ApplicationListComponent, ApplicationLinkComponent, ...ASYNC,
|
||||
RegistrationSummaryComponent, RegistrationTableComponent, AanvraagBlockComponent,
|
||||
],
|
||||
template: `
|
||||
<app-page-shell i18n-heading="@@dashboard.heading" heading="Mijn overzicht" i18n-intro="@@dashboard.intro" intro="Welkom in uw persoonlijke omgeving van het BIG-register. Hier ziet u uw registratie en regelt u uw zaken.">
|
||||
<div class="app-overview">
|
||||
<app-side-nav [items]="nav" />
|
||||
|
||||
<div class="app-stack">
|
||||
@if (aanvragen().length) {
|
||||
<section>
|
||||
<app-heading [level]="2" i18n="@@dashboard.mijnAanvragen">Mijn aanvragen</app-heading>
|
||||
<div class="app-stack app-section">
|
||||
<app-application-list class="app-section">
|
||||
@for (a of aanvragen(); track a.id) {
|
||||
<app-aanvraag-block animate.enter="app-item-enter" animate.leave="app-item-leave" [aanvraag]="a" (resume)="resume(a)" (cancel)="cancelAanvraag(a)" />
|
||||
}
|
||||
</div>
|
||||
</app-application-list>
|
||||
</section>
|
||||
}
|
||||
|
||||
@@ -68,7 +65,7 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
|
||||
<app-registration-summary [reg]="$any(p).registration" />
|
||||
</div>
|
||||
<app-card class="app-section" i18n-heading="@@dashboard.persoonsgegevens" heading="Persoonsgegevens (BRP)">
|
||||
<dl>
|
||||
<dl class="row mb-0">
|
||||
<app-data-row i18n-key="@@dashboard.straat" key="Straat" [value]="$any(p).person.adres.straat" />
|
||||
<app-data-row i18n-key="@@dashboard.postcode" key="Postcode" [value]="$any(p).person.adres.postcode" />
|
||||
<app-data-row i18n-key="@@dashboard.woonplaats" key="Woonplaats" [value]="$any(p).person.adres.woonplaats" />
|
||||
@@ -100,19 +97,13 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
|
||||
|
||||
<section>
|
||||
<app-heading [level]="2" i18n="@@dashboard.watWiltUDoen">Wat wilt u doen?</app-heading>
|
||||
<ul class="app-card-grid app-section">
|
||||
<app-application-list class="app-section">
|
||||
@for (a of acties; track a.to) {
|
||||
<li>
|
||||
<app-card [heading]="a.titel">
|
||||
<p>{{ a.tekst }}</p>
|
||||
<app-link [to]="a.to">{{ a.actie }} →</app-link>
|
||||
</app-card>
|
||||
</li>
|
||||
<app-application-link [heading]="a.titel" [subtitle]="a.tekst" [cta]="a.actie" [to]="a.to" />
|
||||
}
|
||||
</ul>
|
||||
</app-application-list>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</app-page-shell>
|
||||
`,
|
||||
})
|
||||
@@ -158,21 +149,15 @@ export class DashboardPage {
|
||||
return tasksFromProfile(reg, this.eligible());
|
||||
}
|
||||
|
||||
/** Portal sections (navigation, not actions). */
|
||||
protected readonly nav: NavItem[] = [
|
||||
{ label: $localize`:@@dashboard.nav.overzicht:Overzicht`, to: '/dashboard' },
|
||||
{ label: $localize`:@@dashboard.nav.gegevens:Mijn gegevens`, to: '/registratie' },
|
||||
{ label: $localize`:@@dashboard.nav.herregistratie:Herregistratie`, to: '/herregistratie' },
|
||||
{ label: $localize`:@@dashboard.nav.inschrijven:Inschrijven`, to: '/registreren' },
|
||||
{ label: $localize`:@@dashboard.nav.concepten:Functionele patronen`, to: '/concepts' },
|
||||
{ label: $localize`:@@dashboard.nav.brief:Brief opstellen`, to: '/brief' },
|
||||
];
|
||||
|
||||
/** Primary transactional actions, as a card grid. */
|
||||
/** Primary transactional actions, as an "aanvragen" list (see CIBG's
|
||||
componenten/aanvragen). The core portal sections live in the header nav now;
|
||||
the teaching pages (concepts/brief) are only reachable from here. */
|
||||
protected readonly acties = [
|
||||
{ to: '/registreren', titel: $localize`:@@dashboard.actie.inschrijven.titel:Inschrijven`, tekst: $localize`:@@dashboard.actie.inschrijven.tekst:Schrijf u in in het BIG-register via de registratiewizard.`, actie: $localize`:@@dashboard.actie.inschrijven.actie:Start inschrijving` },
|
||||
{ to: '/herregistratie', titel: $localize`:@@dashboard.actie.herregistratie.titel:Herregistratie aanvragen`, tekst: $localize`:@@dashboard.actie.herregistratie.tekst:Verleng uw registratie voor de komende periode.`, actie: $localize`:@@dashboard.actie.herregistratie.actie:Vraag aan` },
|
||||
{ to: '/intake', titel: $localize`:@@dashboard.actie.intake.titel:Herregistratie-intake`, tekst: $localize`:@@dashboard.actie.intake.tekst:Vragenlijst met vertakkingen.`, actie: $localize`:@@dashboard.actie.intake.actie:Start intake` },
|
||||
{ to: '/registratie', titel: $localize`:@@dashboard.actie.wijzigen.titel:Gegevens wijzigen`, tekst: $localize`:@@dashboard.actie.wijzigen.tekst:Bekijk uw gegevens of geef een wijziging door.`, actie: $localize`:@@dashboard.actie.wijzigen.actie:Bekijk gegevens` },
|
||||
{ to: '/concepts', titel: $localize`:@@dashboard.actie.concepten.titel:Functionele patronen`, tekst: $localize`:@@dashboard.actie.concepten.tekst:Bekijk de FP/TEA-bouwstenen van deze POC.`, actie: $localize`:@@dashboard.actie.concepten.actie:Bekijk patronen` },
|
||||
{ to: '/brief', titel: $localize`:@@dashboard.actie.brief.titel:Brief opstellen`, tekst: $localize`:@@dashboard.actie.brief.tekst:Stel een brief samen uit vaste en vrije onderdelen.`, actie: $localize`:@@dashboard.actie.brief.actie:Start brief` },
|
||||
];
|
||||
}
|
||||
|
||||
@@ -7,7 +7,9 @@ import { ButtonComponent } from '@shared/ui/button/button.component';
|
||||
import { AlertComponent } from '@shared/ui/alert/alert.component';
|
||||
import { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';
|
||||
import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
|
||||
import { WizardShellComponent, WizardError, WizardStatus } from '@shared/layout/wizard-shell/wizard-shell.component';
|
||||
import { ReviewSectionComponent } from '@shared/ui/review-section/review-section.component';
|
||||
import { ConfirmationComponent } from '@shared/ui/confirmation/confirmation.component';
|
||||
import { WizardShellComponent, WizardError, WizardStatus, naarStapLabel } from '@shared/layout/wizard-shell/wizard-shell.component';
|
||||
import { ASYNC } from '@shared/ui/async/async.component';
|
||||
import { AddressFieldsComponent } from '@registratie/ui/address-fields/address-fields.component';
|
||||
import { createStore } from '@shared/application/store';
|
||||
@@ -54,7 +56,7 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
|
||||
selector: 'app-registratie-wizard',
|
||||
imports: [
|
||||
FormsModule, FormFieldComponent, TextInputComponent, RadioGroupComponent, ButtonComponent,
|
||||
AlertComponent, SkeletonComponent, DataRowComponent, WizardShellComponent,
|
||||
AlertComponent, SkeletonComponent, DataRowComponent, ReviewSectionComponent, ConfirmationComponent, WizardShellComponent,
|
||||
AddressFieldsComponent, DocumentUploadComponent, ...ASYNC,
|
||||
],
|
||||
template: `
|
||||
@@ -62,6 +64,7 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
|
||||
[steps]="stepLabels"
|
||||
[current]="cursor()"
|
||||
[stepTitle]="stepTitle()"
|
||||
i18n-processName="@@regWizard.processName" processName="Inschrijven in het BIG-register"
|
||||
[status]="shellStatus()"
|
||||
[primaryLabel]="primaryLabel()"
|
||||
[canGoBack]="cursor() > 0"
|
||||
@@ -71,7 +74,8 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
|
||||
(primary)="onPrimary()"
|
||||
(back)="dispatch({ tag: 'Back' })"
|
||||
(cancel)="restart()"
|
||||
(retry)="onRetry()">
|
||||
(retry)="onRetry()"
|
||||
(goToStep)="dispatch({ tag: 'GaNaarStap', cursor: $event })">
|
||||
|
||||
@switch (step()) {
|
||||
@case ('adres') {
|
||||
@@ -119,7 +123,7 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
|
||||
[ngModel]="draft().beroep ?? ''" (ngModelChange)="dispatch({ tag: 'DeclareerBeroep', beroep: $event })" />
|
||||
</app-form-field>
|
||||
} @else if (draft().beroep) {
|
||||
<dl class="app-section">
|
||||
<dl class="row mb-0 app-section">
|
||||
<app-data-row i18n-key="@@regWizard.beroepAfgeleid" key="Beroep (afgeleid uit diploma)" [value]="draft().beroep ?? ''" />
|
||||
</dl>
|
||||
}
|
||||
@@ -156,31 +160,35 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
|
||||
}
|
||||
@case ('controle') {
|
||||
<app-alert type="info" i18n="@@regWizard.controleer">Controleer uw gegevens en dien de registratie in.</app-alert>
|
||||
<dl class="app-section">
|
||||
<app-review-section i18n-heading="@@regWizard.sectie.adres" heading="Adres en correspondentie"
|
||||
i18n-editAriaLabel="@@regWizard.adresWijzigenAria" editAriaLabel="Wijzigen adresgegevens"
|
||||
(edit)="dispatch({ tag: 'GaNaarStap', cursor: 0 })">
|
||||
<app-data-row i18n-key="@@regWizard.summary.adres" key="Adres" [value]="adresSamenvatting()" />
|
||||
<app-data-row i18n-key="@@regWizard.summary.herkomstAdres" key="Herkomst adres" [value]="adresHerkomstLabel()" />
|
||||
<app-data-row i18n-key="@@regWizard.summary.correspondentie" key="Correspondentie" [value]="correspondentieLabel()" />
|
||||
@if (draft().correspondentie === 'email') {
|
||||
<app-data-row i18n-key="@@regWizard.summary.email" key="E-mailadres" [value]="draft().email ?? ''" />
|
||||
}
|
||||
</app-review-section>
|
||||
<app-review-section class="app-section" i18n-heading="@@regWizard.sectie.beroep" heading="Beroep en diploma"
|
||||
i18n-editAriaLabel="@@regWizard.diplomaWijzigenAria" editAriaLabel="Wijzigen beroep en diploma"
|
||||
(edit)="dispatch({ tag: 'GaNaarStap', cursor: 1 })">
|
||||
<app-data-row i18n-key="@@regWizard.summary.beroep" key="Beroep" [value]="draft().beroep ?? ''" />
|
||||
<app-data-row i18n-key="@@regWizard.summary.herkomstDiploma" key="Herkomst diploma" [value]="diplomaHerkomstLabel()" />
|
||||
@for (item of samenvattingVragen(); track item.vraag) {
|
||||
<app-data-row [key]="item.vraag" [value]="item.antwoord" />
|
||||
}
|
||||
</dl>
|
||||
<div class="app-button-row app-section">
|
||||
<app-button type="button" variant="subtle" (click)="dispatch({ tag: 'GaNaarStap', cursor: 0 })" i18n="@@regWizard.adresWijzigen">Adres wijzigen</app-button>
|
||||
<app-button type="button" variant="subtle" (click)="dispatch({ tag: 'GaNaarStap', cursor: 1 })" i18n="@@regWizard.diplomaWijzigen">Diploma wijzigen</app-button>
|
||||
</div>
|
||||
</app-review-section>
|
||||
}
|
||||
}
|
||||
|
||||
<div wizardSuccess>
|
||||
<app-alert type="ok" i18n="@@regWizard.success">Uw registratie is ontvangen. Uw referentienummer is {{ referentie() }}. Bewaar dit nummer voor uw administratie.</app-alert>
|
||||
<app-confirmation i18n-title="@@regWizard.success.title" title="Uw registratie is ontvangen">
|
||||
<p class="app-section" i18n="@@regWizard.success.referentie">Uw referentienummer is {{ referentie() }}. Bewaar dit nummer voor uw administratie.</p>
|
||||
<div class="app-section">
|
||||
<app-button variant="secondary" (click)="restart()" i18n="@@regWizard.nieuweRegistratie">Nieuwe registratie starten</app-button>
|
||||
</div>
|
||||
</app-confirmation>
|
||||
</div>
|
||||
</app-wizard-shell>
|
||||
`,
|
||||
@@ -243,7 +251,11 @@ export class RegistratieWizardComponent {
|
||||
protected failedError = computed(() => whenTag(this.state(), 'Mislukt')?.error ?? '');
|
||||
|
||||
// --- Presentational wiring for the shared wizard shell ---------------------
|
||||
protected primaryLabel = computed(() => (this.step() === 'controle' ? $localize`:@@regWizard.indienen:Registratie indienen` : $localize`:@@wizard.volgende:Volgende`));
|
||||
protected primaryLabel = computed(() => {
|
||||
if (this.step() === 'controle') return $localize`:@@regWizard.indienen:Registratie indienen`;
|
||||
const next = this.cursor() + 1;
|
||||
return naarStapLabel(next + 1, this.stepLabels[next]);
|
||||
});
|
||||
protected errorMessage = computed(() => $localize`:@@regWizard.indienenMislukt:Het indienen is niet gelukt:` + ` ${this.failedError()}`);
|
||||
protected shellStatus = computed<WizardStatus>(() => {
|
||||
switch (this.state().tag) {
|
||||
|
||||
@@ -12,7 +12,7 @@ import { CardComponent } from '@shared/ui/card/card.component';
|
||||
imports: [DatePipe, DataRowComponent, StatusBadgeComponent, CardComponent],
|
||||
template: `
|
||||
<app-card>
|
||||
<dl>
|
||||
<dl class="row mb-0">
|
||||
<app-data-row i18n-key="@@summary.bigNummer" key="BIG-nummer" [value]="reg().bigNummer" />
|
||||
<app-data-row i18n-key="@@summary.naam" key="Naam" [value]="reg().naam" />
|
||||
<app-data-row i18n-key="@@summary.beroep" key="Beroep" [value]="reg().beroep" />
|
||||
|
||||
@@ -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> }
|
||||
<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 class="current" aria-current="page">{{ item.label }}</span>
|
||||
<span aria-current="page">{{ item.label }}</span>
|
||||
}
|
||||
</li>
|
||||
}
|
||||
</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>
|
||||
<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>
|
||||
<span class="portal sub">{{ subtitle() }}</span>
|
||||
</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) {
|
||||
<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><span class="login-name">{{ s.naam }}</span></div>
|
||||
<div><button type="button" class="logout" (click)="logout()" i18n="@@header.uitloggen">Uitloggen</button></div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@if (trail().length) {
|
||||
<div class="navbar">
|
||||
<div class="inner">
|
||||
<app-breadcrumb class="inverse" [items]="trail()" />
|
||||
</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 }],
|
||||
})
|
||||
|
||||
25
src/app/shared/ui/confirmation/confirmation.component.ts
Normal file
25
src/app/shared/ui/confirmation/confirmation.component.ts
Normal file
@@ -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:`);
|
||||
}
|
||||
18
src/app/shared/ui/confirmation/confirmation.stories.ts
Normal file
18
src/app/shared/ui/confirmation/confirmation.stories.ts
Normal file
@@ -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,29 +1,25 @@
|
||||
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>
|
||||
<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 desc" [id]="fieldId() + '-desc'">{{ description() }}</div>
|
||||
<div class="form-text" [id]="fieldId() + '-desc'">{{ description() }}</div>
|
||||
}
|
||||
<ng-content />
|
||||
@if (error()) {
|
||||
<div class="error" [id]="fieldId() + '-error'" role="alert">{{ error() }}</div>
|
||||
<div [id]="fieldId() + '-error'" role="alert"><span class="errortext">{{ error() }}</span></div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class FormFieldComponent {
|
||||
|
||||
@@ -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">
|
||||
<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>`,
|
||||
</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>
|
||||
`,
|
||||
|
||||
39
src/app/shared/ui/review-section/review-section.component.ts
Normal file
39
src/app/shared/ui/review-section/review-section.component.ts
Normal file
@@ -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();
|
||||
}
|
||||
}
|
||||
28
src/app/shared/ui/review-section/review-section.stories.ts
Normal file
28
src/app/shared/ui/review-section/review-section.stories.ts
Normal file
@@ -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 } };
|
||||
|
||||
@@ -5,15 +5,21 @@ import { useState, useLayoutEffect, useRef } from 'react';
|
||||
|
||||
# Design tokens
|
||||
|
||||
We do not hand-write colours or spacing. The Rijkshuisstijl (RHC) design system ships them
|
||||
as CSS custom properties; `src/styles.scss` imports them and adds a thin `--app-*` layer for
|
||||
the few measures RHC has no token for. `npm run check:tokens` fails the build on any
|
||||
hardcoded hex colour in atoms/molecules/chrome — so these tokens are the *only* source of
|
||||
colour.
|
||||
We do not hand-write colours or spacing. `src/styles.scss` defines a semantic `--rhc-*` token
|
||||
vocabulary and redefines every one of those tokens onto the vendored **CIBG Huisstijl**
|
||||
(Bootstrap 5.2) values — `--bs-*`/`--ro-*` custom properties where one exists, CIBG palette hex
|
||||
otherwise (that one file is exempt from `npm run check:tokens`, which fails the build on any
|
||||
*other* hardcoded hex colour in atoms/molecules/chrome). The `--rhc-*` names are an internal
|
||||
alias set now; the values are CIBG's.
|
||||
|
||||
**Prefer a CIBG class over a token where one exists** — `.btn`, `.form-control`, `.card`,
|
||||
`.stepper`, `.confirmation`, `.applications`, … are already themed by the vendored CSS (see
|
||||
`public/cibg-huisstijl/`). Reach for a `--rhc-*` token only where CIBG has no ready-made class
|
||||
(an `alert` surface, a skeleton loader, a status badge — see ADR-0003).
|
||||
|
||||
> Resolved values below are read live from the running theme via `getComputedStyle`, so they
|
||||
> can't drift from what ships. All demos are wrapped in `.rhc-theme.lintblauw`, the same scope
|
||||
> the app runs under.
|
||||
> can't drift from what ships. `body.brand--cibg` (set in `index.html` and Storybook's
|
||||
> `preview.ts`) activates CIBG's robijn/lintblauw palette; no extra wrapper class is needed.
|
||||
|
||||
export const Resolved = ({ token }) => {
|
||||
const ref = useRef(null);
|
||||
@@ -26,24 +32,23 @@ export const Resolved = ({ token }) => {
|
||||
|
||||
## When to use which token
|
||||
|
||||
- **CIBG class first** (see above) — a token is for the gaps a CIBG class doesn't cover.
|
||||
- **Semantic first** — reach for a role token (`--rhc-color-foreground-default`,
|
||||
`--rhc-color-border-default`, `--rhc-color-core`) before a raw palette step. Roles survive
|
||||
a theme swap; palette steps don't.
|
||||
`--rhc-color-border-default`, `--rhc-color-foreground-link`) before a raw palette step
|
||||
(`--rhc-color-lintblauw-500`). Roles survive a theme swap; palette steps don't.
|
||||
- **`--rhc-space-max-*`** for all spacing/gaps — never a raw `rem`.
|
||||
- **`--app-*`** (in `src/styles.scss`) only for app measures RHC has no token for
|
||||
(`--app-content-max`, `--app-form-max`). If you're tempted to add one, check RHC first.
|
||||
|
||||
<div className="rhc-theme lintblauw">
|
||||
- **`--app-*`** (in `src/styles.scss`) only for app measures CIBG has no token for
|
||||
(`--app-content-max`, `--app-form-narrow`). If you're tempted to add one, check CIBG first.
|
||||
|
||||
## Spacing scale — `--rhc-space-max-*`
|
||||
|
||||
<div style={{ display: 'grid', gap: '0.4rem', margin: '1rem 0' }}>
|
||||
{['2xs','xs','sm','md','lg','xl','2xl','3xl','4xl','5xl'].map((step) => {
|
||||
{['xs','sm','md','lg','xl','2xl','3xl','4xl','5xl'].map((step) => {
|
||||
const token = `--rhc-space-max-${step}`;
|
||||
return (
|
||||
<div key={step} style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
||||
<code style={{ width: '12rem', fontSize: '0.78rem' }}>{token}</code>
|
||||
<div style={{ height: '1rem', width: `var(${token})`, background: 'var(--rhc-color-core)', borderRadius: '2px' }} />
|
||||
<div style={{ height: '1rem', width: `var(${token})`, background: 'var(--rhc-color-lintblauw-500)', borderRadius: '2px' }} />
|
||||
<Resolved token={token} />
|
||||
</div>
|
||||
);
|
||||
@@ -57,11 +62,12 @@ export const Resolved = ({ token }) => {
|
||||
'--rhc-color-foreground-default',
|
||||
'--rhc-color-foreground-subtle',
|
||||
'--rhc-color-foreground-link',
|
||||
'--rhc-color-core',
|
||||
'--rhc-color-core-hover',
|
||||
'--rhc-color-layout',
|
||||
'--rhc-color-lintblauw-500',
|
||||
'--rhc-color-lintblauw-700',
|
||||
'--rhc-color-border-default',
|
||||
'--rhc-color-border-strong',
|
||||
'--rhc-color-bg-document',
|
||||
'--rhc-color-cool-grey-100',
|
||||
].map((token) => (
|
||||
<div key={token} style={{ border: '1px solid #ddd', borderRadius: '6px', overflow: 'hidden' }}>
|
||||
<div style={{ height: '3rem', background: `var(${token})` }} />
|
||||
@@ -72,5 +78,3 @@ export const Resolved = ({ token }) => {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -11,7 +11,9 @@
|
||||
Licensed Rijksoverheid fonts are not used — styles.scss overrides the stack to system-ui. -->
|
||||
<link rel="stylesheet" href="cibg-huisstijl/css/huisstijl.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- brand--cibg activates CIBG's official palette: robijn layout chrome + lintblauw accents
|
||||
(without it, --ro-layout falls back to the blue default). -->
|
||||
<body class="brand--cibg">
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -8,11 +8,14 @@
|
||||
The names are now an internal alias set; the VALUES are CIBG. (styles.scss is exempt
|
||||
from check:tokens, so palette hex is allowed in this one file.) */
|
||||
:root {
|
||||
/* — CIBG layout chrome colour (robijn under body.brand--cibg; blue fallback otherwise) — */
|
||||
--rhc-color-layout: var(--ro-layout);
|
||||
|
||||
/* — semantic foreground/background/border — */
|
||||
--rhc-color-foreground-default: var(--bs-body-color);
|
||||
--rhc-color-foreground-subtle: #617286; /* CIBG meta grey */
|
||||
--rhc-color-foreground-link: var(--bs-link-color); /* #01689b */
|
||||
--rhc-color-foreground-link-hover: #154273; /* CIBG active/hover */
|
||||
--rhc-color-foreground-subtle: #64748b; /* CIBG grey-3 */
|
||||
--rhc-color-foreground-link: var(--ro-link-color); /* brand--cibg → hemelblauw-fixed */
|
||||
--rhc-color-foreground-link-hover: var(--ro-link-active-color);
|
||||
--rhc-color-foreground-on-primary: #fff;
|
||||
--rhc-color-border-default: var(--bs-border-color);
|
||||
--rhc-color-border-subtle: #e2e8f0;
|
||||
@@ -31,24 +34,23 @@
|
||||
|
||||
/* — blues (CIBG primary family) — */
|
||||
--rhc-color-lintblauw-100: #e6eef3;
|
||||
--rhc-color-lintblauw-500: #01689b;
|
||||
--rhc-color-lintblauw-600: #015a87;
|
||||
--rhc-color-lintblauw-700: #154273;
|
||||
--rhc-color-hemelblauw-100: #e6f0f5;
|
||||
--rhc-color-hemelblauw-500: #01689b;
|
||||
--rhc-color-hemelblauw-700: #154273;
|
||||
--rhc-color-donkerblauw-700: #154273;
|
||||
--rhc-color-lintblauw-500: var(--ro-brand-primary); /* #01689b */
|
||||
--rhc-color-lintblauw-600: var(--ro-brand-primary-focus); /* #015782 */
|
||||
--rhc-color-lintblauw-700: var(--ro-lintblauw); /* #154273 */
|
||||
--rhc-color-hemelblauw-100: #d9ebf7; /* CIBG light-blue (info bg) */
|
||||
--rhc-color-hemelblauw-500: var(--ro-hemelblauw); /* #007bc7 CIBG info blue */
|
||||
--rhc-color-hemelblauw-700: #005a94;
|
||||
|
||||
/* — status colors (CIBG semantic) — */
|
||||
--rhc-color-groen-300: #e3f0d8;
|
||||
--rhc-color-groen-500: #39870c;
|
||||
--rhc-color-groen-700: #2a6609;
|
||||
--rhc-color-rood-100: #fbe4e2;
|
||||
--rhc-color-rood-300: #f0a9a3;
|
||||
--rhc-color-rood-500: #d52b1e;
|
||||
--rhc-color-rood-600: #b81f14;
|
||||
--rhc-color-geel-100: #fff4d6;
|
||||
--rhc-color-geel-600: #ffb612;
|
||||
/* — status colors (CIBG semantic, kleuren page) — */
|
||||
--rhc-color-groen-300: #e1eddb; /* light-green */
|
||||
--rhc-color-groen-500: #39870c; /* green */
|
||||
--rhc-color-groen-700: #176e1b;
|
||||
--rhc-color-rood-100: #f7d2dd; /* light-red */
|
||||
--rhc-color-rood-300: #eda3b6;
|
||||
--rhc-color-rood-500: var(--ro-brand-danger); /* #cc003d CIBG red */
|
||||
--rhc-color-rood-600: #b30035;
|
||||
--rhc-color-geel-100: #fff4dc; /* light-yellow */
|
||||
--rhc-color-geel-600: #ffb612; /* yellow */
|
||||
--rhc-color-oranje-500: #e17000;
|
||||
|
||||
/* — spacing scale (rem, Bootstrap-aligned) — */
|
||||
@@ -90,58 +92,16 @@ body { background: var(--rhc-color-wit); color: var(--rhc-color-foreground-defau
|
||||
these tokens instead of raw values. */
|
||||
:root {
|
||||
--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
|
||||
token-based and free of raw values. */
|
||||
.app-form { max-inline-size: var(--app-form-max); }
|
||||
.app-button-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--rhc-space-max-md);
|
||||
align-items: center;
|
||||
}
|
||||
.app-button-row--spaced { margin-block-start: var(--rhc-space-max-xl); }
|
||||
/* vertical rhythm between stacked blocks */
|
||||
.app-stack > * + * { margin-block-start: var(--rhc-space-max-xl); }
|
||||
.app-section { margin-block-start: var(--rhc-space-max-2xl); }
|
||||
.app-text-subtle { color: var(--rhc-color-foreground-subtle); }
|
||||
/* responsive card grid: cards wrap and stretch, gap from the spacing scale */
|
||||
.app-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
||||
gap: var(--rhc-space-max-xl);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
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 {
|
||||
|
||||
Reference in New Issue
Block a user