atomic-design-poc/docs/backlog/WP-15-missing-stories.md

WP-15 — Missing stories: shell + brief components

Status: done (0cfb01f) 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

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). 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.