Edwin van den Houdt
9d58f597ea
Mark every hand-rolled shared/ui surface with a `// CIBG-GAP EXTENSION:` comment + `cibgGap` story parameter (skeleton, spinner, rich-text-editor, wizard-shell's error summary, application-link's non-navigating row, debug-state, status-badge, card, placeholder-chip) so deviations from the CIBG design system are auditable. Add the register MDX (Foundations/CIBG Gap Register), cross-linked from ADR-0003. Delete the near-identity upload-status-banner wrapper; its one consumer now uses <app-alert> directly (a story added to keep the info-banner state covered). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/angular';
|
|
import { WizardShellComponent } from './wizard-shell.component';
|
|
|
|
const meta: Meta<WizardShellComponent> = {
|
|
title: 'Templates/WizardShell',
|
|
component: WizardShellComponent,
|
|
render: (args) => ({
|
|
props: args,
|
|
template: `
|
|
<app-wizard-shell
|
|
[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>`,
|
|
}),
|
|
parameters: {
|
|
cibgGap: true,
|
|
docs: {
|
|
description: {
|
|
component:
|
|
'CIBG-gap extension (error summary only) — see Foundations/CIBG Gap Register.',
|
|
},
|
|
},
|
|
},
|
|
};
|
|
export default meta;
|
|
type Story = StoryObj<WizardShellComponent>;
|
|
|
|
const steps = ['Adres', 'Beroep', 'Controle'];
|
|
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 = {
|
|
args: {
|
|
...base,
|
|
status: 'editing',
|
|
errors: [
|
|
{ id: 'uren', message: 'Vul het aantal gewerkte uren in.' },
|
|
{ id: 'diploma', message: 'Kies een diploma.' },
|
|
],
|
|
},
|
|
};
|
|
export const Submitting: Story = { args: { ...base, status: 'submitting' } };
|
|
export const Submitted: Story = { args: { ...base, status: 'submitted' } };
|
|
export const Failed: Story = {
|
|
args: { ...base, status: 'failed', errorMessage: 'Het indienen is niet gelukt: netwerkfout.' },
|
|
};
|