# WP-15 — Missing stories: shell + brief components

Status: done (<pending commit>)
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

- [x] 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.
- [x] All new stories pass the axe gate (or carry a justified skip).
- [x] 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.