75 lines
3.1 KiB
Markdown
75 lines
3.1 KiB
Markdown
# 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
|
|
|
|
- [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.
|