Files

Edwin van den Houdt 0cfb01f12c feat(fp): WP-15 — missing stories: shell + brief components

Add the 7 stories CLAUDE.md's testing rule ("UI is exercised via Storybook
stories") was missing: shared/layout/shell (Design System/Templates/Shell)
and all six previously-unstoried brief components (passage-picker,
rejection-comments, diagnostics-panel, letter-block, letter-preview,
letter-section — Domein/Brief/*), each with a default state plus the
meaningful variants (locked/editable, findings/clean, show/entry, etc).
Every *.component.ts in the repo now has a co-located story; *.page.ts
files stay unstoried, matching the existing norm.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

2026-07-03 23:37:58 +02:00

3.2 KiB

Raw Blame History

WP-15 — Missing stories: shell + brief components

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

Note: fixture duplication across the four brief stories that need Brief/ LetterSection/LetterBlock shapes (letter-block, letter-preview, letter-section, plus the pre-existing letter-composer) didn't bite enough to justify the shared-fixtures escape hatch — each story only builds the minimal slice it actually renders (letter-block needs one block, not a whole Brief), so the co-located fixtures stayed small and non-duplicative in practice. A pre-existing, unrelated axe finding on text-input--invalid (informational only — test-storybook:ci doesn't fail on it) shows up in the run; it predates this WP and isn't caused by anything here.

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

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).
Provide router/HTTP/store context via applicationConfig/moduleMetadata decorators like the wizard stories do.
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). Confirmed norm: *.page.ts files (9 of them) have never had stories; every *.component.ts now does.
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.

3.2 KiB Raw Blame History