Edwin van den Houdt
cbf697b8fa
Some checks failed
CI / storybook-a11y (push) Successful in 4m2s
CI / backend (push) Successful in 1m2s
CI / codeql (csharp) (push) Failing after 1m40s
CI / frontend (push) Failing after 54s
CI / codeql (javascript-typescript) (push) Failing after 1m23s
CI / api-client-drift (push) Successful in 1m30s
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
104 lines
4.9 KiB
Markdown
104 lines
4.9 KiB
Markdown
# WP-13 — CIBG-gap register + hygiene + MDX
|
|
|
|
Status: done (9d58f59)
|
|
Phase: 2 — CIBG fidelity
|
|
|
|
> **Deviation:** WP-11/12 ran first but left no markers (deferred to this WP, as their own
|
|
> files note), so this WP defines the marker format fresh per its own Decisions block —
|
|
> not adopted from 11/12. The Decisions block's `task-list → Actieblok` mapping is stale:
|
|
> no `.actieblok`/`actie` class exists in the vendored CSS, and `task-list`'s own header
|
|
> comment already (accurately) documents it as composing `choice-list`'s Keuzelijst
|
|
> pattern rather than a distinct Actieblok one — left as-is rather than forced to claim a
|
|
> nonexistent mapping. `application-link`'s `.static-row` (flagged as a marked-gap
|
|
> candidate in this file's own correction note) got the marker too. The optional
|
|
> `check:cibg-gaps` script (step 4) is skipped: the register is nine rows, reviewed at PR
|
|
> time same as any other doc — a CI script to diff it against code markers is complexity
|
|
> the size of the problem doesn't warrant (noted, not built).
|
|
|
|
> **Correction (CIBG UI fidelity pass, b5c5d30):** this WP assumed the `upload/` suite
|
|
> had no vendored CIBG classes and would be marked as a CIBG-gap ("Bestand-upload").
|
|
> The vendored build actually ships a full upload vocabulary (`.file-picker-drop-area`,
|
|
> `ul.file-list`, `.file-container`, `.file-name`/`.file-meta`, `.btn-upload`,
|
|
> `.upload-validation`), so the suite was **reworked to wrap those classes** instead —
|
|
> it is no longer a gap to mark. WP-13's remaining register still covers skeleton/
|
|
> spinner, rich-text-editor, wizard-shell, confirmation, card (`.app-card`),
|
|
> status-badge, placeholder-chip, etc. (Note: `application-link`'s non-navigating
|
|
> `.static-row` mirrors the aanvragen card surface from tokens — a small marked-gap
|
|
> candidate.)
|
|
|
|
## Why
|
|
|
|
User decision: hand-rolled token-bridge components are allowed **only if explicitly
|
|
marked** as CIBG-gap extensions in code + Storybook, so every deviation from the design
|
|
system is auditable. Plus two hygiene items from the audit: a dead wrapper to delete and
|
|
the list-family rationale to document.
|
|
|
|
## Read first
|
|
|
|
- `docs/architecture/0003-*.md` (ADR-0003 — the token-bridge rationale this extends)
|
|
- The audit's gap list (below)
|
|
|
|
## Decisions (pre-made, don't relitigate)
|
|
|
|
- Marker format (header comment in the component):
|
|
`// CIBG-GAP EXTENSION: <closest CIBG concept> — <why hand-rolled>` plus
|
|
`parameters: { cibgGap: true }` and a "CIBG-gap extension" line in the story
|
|
description.
|
|
- **Keep all three list families** — each maps a distinct CIBG pattern: `task-list` →
|
|
Actieblok, `application-list` → Aanvragen, `choice-list` → Keuzelijst. Header comment
|
|
in each names its pattern. Consolidation would blur exactly the design-system mapping
|
|
this showcase demonstrates.
|
|
- **Delete `upload-status-banner`** (`shared/ui/upload/upload-status-banner/`): a
|
|
23-line near-identity wrapper over `alert` with one consumer — inline `<app-alert>`
|
|
there.
|
|
|
|
## Files
|
|
|
|
Components to mark (closest CIBG concept in parens):
|
|
|
|
- `skeleton`, `spinner` (Laadindicatie — no vendored class, verified)
|
|
- `upload/` suite (Bestand-upload)
|
|
- `rich-text-editor` (Tekstgebied)
|
|
- `wizard-shell` (Wizard; error summary → Foutmelding, if WP-11 marked it)
|
|
- `confirmation` (Bevestiging — verify: it wraps vendored classes; if so it needs no
|
|
marker, only the pattern comment)
|
|
- `debug-state` (devtool, no CIBG concept)
|
|
- `status-badge` (deliberate custom, documented in code), `card` (`.app-card`),
|
|
`placeholder-chip`
|
|
Plus:
|
|
- Delete `upload-status-banner` + its story; inline alert at its consumer
|
|
- Header comments on `task-list`/`application-list`/`choice-list`
|
|
- New `src/docs/cibg-gaps.mdx` — title `Foundations/CIBG Gap Register`
|
|
- ADR-0003 gets a cross-link to the register
|
|
|
|
## Steps
|
|
|
|
1. Add the marker to each gap component + `cibgGap` story parameter.
|
|
2. Delete the banner; migrate its one consumer; run its former story's states through
|
|
the consumer's story if coverage would drop.
|
|
3. Write the MDX register: a table (component → closest CIBG concept → why) + the rule
|
|
"grep the vendored CSS before hand-rolling anything".
|
|
4. Optional but cheap: a `check:cibg-gaps` script that greps markers and diffs against
|
|
the MDX table, so the register can't silently rot — add to `check:tokens`' CI step if
|
|
trivial, else note as skipped.
|
|
|
|
## Acceptance criteria
|
|
|
|
- [x] Every component with hand-rolled surface CSS either wraps vendored classes or
|
|
carries the marker (spot-check with a grep for `styles: [` vs markers).
|
|
- [x] Register MDX complete, linked from ADR-0003.
|
|
- [x] `upload-status-banner` gone; consumer green; no story coverage lost.
|
|
- [x] List trio documented.
|
|
|
|
## Verification
|
|
|
|
GREEN + `npm run test-storybook:ci`.
|
|
|
|
## Out of scope
|
|
|
|
Rebuilding any gap component against the design system (they're sanctioned by decision).
|
|
|
|
## Risks
|
|
|
|
Low — mostly annotation; the deletion is the only behavior-touching change.
|