Files
atomic-design-poc/docs/backlog/WP-15-missing-stories.md
Edwin van den Houdt f769242f76 docs: replace SHOWCASE-ROADMAP.md with docs/backlog/ (17 WPs)
Turns the prior roadmap sketch into ordered, gated work packages (enforcement
gates, FP/DDD consistency, CIBG fidelity, Storybook curriculum, a11y) from the
2026-07-02 showcase-hardening audit.
2026-07-02 17:07:59 +02:00

2.4 KiB

WP-15 — Missing stories: shell + brief components

Status: todo Phase: 3 — Storybook as curriculum Depends on: WP-14 (titles), WP-01 (axe gate covers the new stories automatically)

Why

"UI is exercised via Storybook stories" (CLAUDE.md §5) — but 7 components have none: shared/layout/shell and six of seven brief components. Unstoried components are also invisible to the axe gate.

Read first

  • src/app/brief/ui/letter-composer/letter-composer.stories.ts (the one brief story — fixture + decorator pattern to reuse)
  • The seven components below

Decisions (pre-made, don't relitigate)

  • Titles per WP-14 scheme: Design System/Templates/Shell, Domein/Brief/<Name>.
  • If fixture duplication across brief stories bites, extract a shared src/app/brief/ui/brief.fixtures.ts — otherwise keep fixtures co-located.

Files (new)

  • src/app/shared/layout/shell/shell.stories.ts
  • src/app/brief/ui/rejection-comments/rejection-comments.stories.ts
  • src/app/brief/ui/diagnostics-panel/diagnostics-panel.stories.ts
  • src/app/brief/ui/letter-block/letter-block.stories.ts
  • src/app/brief/ui/letter-preview/letter-preview.stories.ts
  • src/app/brief/ui/letter-section/letter-section.stories.ts
  • src/app/brief/ui/passage-picker/passage-picker.stories.ts

Steps

  1. One story file per component: default state + at least one meaningful variant (e.g. letter-block locked/editable, diagnostics with findings/empty, rejection-comments filled, preview with sample data toggle).
  2. Provide router/HTTP/store context via applicationConfig/moduleMetadata decorators like the wizard stories do.
  3. Run the axe gate; fix trivial violations in the components (label/role level); anything structural → escape hatch + cross-ref WP-16.

Acceptance criteria

  • Every component in src/app has ≥1 story (verify: list components without a co-located *.stories.ts; expect zero, pages excepted if that's the existing norm — note the norm in this file when checked).
  • All new stories pass the axe gate (or carry a justified skip).
  • Titles follow WP-14.

Verification

GREEN + npm run test-storybook:ci.

Out of scope

Play-test assertions (WP-16 adds those where they enforce a contract).

Risks

Brief components may lean on BriefStore state — stub via the store's public API in a decorator rather than reaching into internals.