Edwin van den Houdt
6257d7ede3
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>
34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import type { Preview } from '@storybook/angular';
|
|
import { componentWrapperDecorator } from '@storybook/angular';
|
|
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).
|
|
decorators: [
|
|
componentWrapperDecorator((story) => `<div style="padding:1.5rem">${story}</div>`),
|
|
],
|
|
parameters: {
|
|
layout: 'padded',
|
|
// Accessibility (axe) via @storybook/addon-a11y. Runs WCAG 2.0/2.1 A+AA rule
|
|
// sets on every story; flag violations in the a11y panel.
|
|
a11y: {
|
|
config: { runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'] } },
|
|
},
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/i,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
export default preview;
|