Two backlog trees are complete: `docs/project/backlog/` (75 files, every WP done) and `docs/project/refactor-backlog-setup/` (the arc before it). Move both under `docs/project/archive/` with `git mv`, so history stays intact through `git log --follow`. `SHOWCASE-ROADMAP.md` moves with them, because it points at the now-archived backlog README. Add `docs/project/archive/README.md`. It states that these trees are historical and names the two directories that are still live. Repoint every inbound reference named in RD-30's Files table: CLAUDE.md, the root README, both backend READMEs, `LetterHtml.cs`, `a11y.mdx`, the `document-feature` and `new-ssp` skills, and the readable-codebase PLAN, README, and RD-19 ticket. Fix two upward-relative links inside the moved WP files (WP-68, WP-69) that gained a directory level and would otherwise break. Repoint `.prettierignore`'s two agent-prompt exclusions to their new path, so prettier keeps leaving those files' exact wording alone. Mark RD-30 done and check off its acceptance criteria; flip its README row to done. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
4.9 KiB
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 → Actieblokmapping is stale: no.actieblok/actieclass exists in the vendored CSS, andtask-list's own header comment already (accurately) documents it as composingchoice-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 optionalcheck:cibg-gapsscript (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 theupload/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-rowmirrors 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/reference/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>plusparameters: { 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 overalertwith 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-chipPlus:- 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— titleFoundations/CIBG Gap Register - ADR-0003 gets a cross-link to the register
Steps
- Add the marker to each gap component +
cibgGapstory parameter. - Delete the banner; migrate its one consumer; run its former story's states through the consumer's story if coverage would drop.
- Write the MDX register: a table (component → closest CIBG concept → why) + the rule "grep the vendored CSS before hand-rolling anything".
- Optional but cheap: a
check:cibg-gapsscript that greps markers and diffs against the MDX table, so the register can't silently rot — add tocheck:tokens' CI step if trivial, else note as skipped.
Acceptance criteria
- Every component with hand-rolled surface CSS either wraps vendored classes or
carries the marker (spot-check with a grep for
styles: [vs markers). - Register MDX complete, linked from ADR-0003.
upload-status-bannergone; consumer green; no story coverage lost.- 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.