Create rule flow: page templates, navigation, and design system support
Overview
This branch implements the CommunityRule “create rule” full-screen flow end-to-end: ordered step routes under /create/*, shared layout with CreateFlowTopNav / CreateFlowFooter, CreateFlowContext for draft state, and URL-driven navigation via useCreateFlowNavigation and flowSteps. It also lands supporting design-system components (HeaderLockup, Card, Upload, CardStack, CommunityRuleDocument, InfoMessageBox, DecisionMakingSidebar, Scrollbar, Tag, etc.), Figma-aligned prop normalization updates, MultiSelect add-button styling and Custom chip flow for “add” actions, communication copy in messages/en/create, and logo/asset restructuring. Marketing and dev preview surfaces are updated where the flow or logo is exposed.
Select / confirm-stakeholders: MultiSelect with Custom chip on add; stakeholders confirm to Selected; select template adds Unselected options from custom input.
Components and tokens
New/updated primitives and composites as listed in implementation (HeaderLockup, NumberedList, Upload, Card + CardStack, RuleCard/Create modal behavior, Chip/MultiSelect, create-flow chrome, etc.).
lib/propNormalization: expanded normalizers for form controls and Figma PascalCase compatibility.
Tailwind / CSS variables where added for create flow and components.
Integration and assets
TopNav entry into create flow; Logo moved to asset module and public path updated.
messages/en: create communication strings wired through app context where used.
Tests & Storybook (this PR)
Tests: Review-style smoke tests for informational, text, select, upload, confirm-stakeholders; flowSteps unit tests; InfoMessageBox and DecisionMakingSidebar at Tag-level depth; TypeScript/test fixes (WebVitals dynamic import cast, vitest React setup, BlogPost test fixtures, unused React imports).
Storybook:Pages/Create Flow/* for each static step (mirror Review fullscreen + Desktop/Mobile); Completed uses teal-aligned decorator; Components/Utility stories for InfoMessageBox and DecisionMakingSidebar. Dynamic [step] intentionally omitted (no existing Storybook + use(params) pattern).
Housekeeping
WebVitals container typing; vitest setup; blog-related test fixture completeness.
Screenshots
How to Test
npm install if needed, then npm run dev.
From the marketing TopNav, start Create rule (or open /create/informational).
Walk the flow: Next / Back; confirm URLs update per step.
Select and Confirm stakeholders:Add → custom chip (“Type to add”) → confirm/cancel; MultiSelect add control uses white label + brand “+”; selected chips stay yellow-filled.
Save & Exit / draft behavior as implemented in context.
npm run lint, npm run test, npm run storybook:build, npm run build.
Storybook:Pages/Create Flow and Components/Utility/InfoMessageBox, DecisionMakingSidebar at desktop and mobile viewports.
Notes
Some step content and document data remain placeholders for future product/API wiring.
Run Playwright / visual regression locally if your pipeline depends on them.
Optional before merge: rebase or merge main into this branch if it has diverged.
# Create rule flow: page templates, navigation, and design system support
## Overview
This branch implements the **CommunityRule “create rule” full-screen flow** end-to-end: ordered step routes under `/create/*`, shared layout with **CreateFlowTopNav** / **CreateFlowFooter**, **CreateFlowContext** for draft state, and **URL-driven navigation** via `useCreateFlowNavigation` and `flowSteps`. It also lands supporting **design-system components** (HeaderLockup, Card, Upload, CardStack, CommunityRuleDocument, InfoMessageBox, DecisionMakingSidebar, Scrollbar, Tag, etc.), **Figma-aligned prop normalization** updates, **MultiSelect** add-button styling and **Custom** chip flow for “add” actions, **communication** copy in `messages/en/create`, and **logo/asset** restructuring. Marketing and dev preview surfaces are updated where the flow or logo is exposed.
## Changes
### Create flow
- Step pages: informational, text, select, upload, review, cards, right-rail, **confirm-stakeholders**, final-review, completed; dynamic `[step]` validation against `FLOW_STEP_ORDER`.
- **Flow order** includes `confirm-stakeholders` immediately before `final-review`.
- **Layout:** full-height chrome, progress bar, Back / Next (and step-specific primary labels, e.g. confirm stakeholders / finalize).
- **State:** `CreateFlowContext` (draft persistence helpers), navigation hook, `flowSteps` helpers.
- **Select / confirm-stakeholders:** MultiSelect with **Custom** chip on add; stakeholders confirm to **Selected**; select template adds **Unselected** options from custom input.
### Components and tokens
- New/updated primitives and composites as listed in implementation (HeaderLockup, NumberedList, Upload, Card + CardStack, RuleCard/Create modal behavior, Chip/MultiSelect, create-flow chrome, etc.).
- **`lib/propNormalization`:** expanded normalizers for form controls and Figma PascalCase compatibility.
- **Tailwind / CSS variables** where added for create flow and components.
### Integration and assets
- **TopNav** entry into create flow; **Logo** moved to asset module and public path updated.
- **`messages/en`:** create communication strings wired through app context where used.
### Tests & Storybook (this PR)
- **Tests:** Review-style smoke tests for informational, text, select, upload, confirm-stakeholders; `flowSteps` unit tests; **InfoMessageBox** and **DecisionMakingSidebar** at Tag-level depth; TypeScript/test fixes (WebVitals dynamic import cast, vitest `React` setup, `BlogPost` test fixtures, unused `React` imports).
- **Storybook:** `Pages/Create Flow/*` for each static step (mirror **Review** fullscreen + Desktop/Mobile); **Completed** uses teal-aligned decorator; **Components/Utility** stories for InfoMessageBox and DecisionMakingSidebar. Dynamic `[step]` intentionally omitted (no existing Storybook + `use(params)` pattern).
### Housekeeping
- WebVitals container typing; vitest setup; blog-related test fixture completeness.
## Screenshots
<img width="1375" alt="Screenshot 2026-04-04 at 10.53.06 AM.png" src="attachments/2acfebfe-2665-4fa3-8bdb-6e99ebb4a921"><img width="1375" alt="Screenshot 2026-04-04 at 10.53.38 AM.png" src="attachments/4b40b7a5-c261-41fe-833d-b669fb555b5d"><img width="1375" alt="Screenshot 2026-04-04 at 10.53.52 AM.png" src="attachments/28b44425-fa9a-499b-b652-f56f63a94645"><img width="1375" alt="Screenshot 2026-04-04 at 10.54.09 AM.png" src="attachments/d21329c9-fd8a-4a81-9ff9-200c73f1ff1e">
## How to Test
1. `npm install` if needed, then `npm run dev`.
2. From the marketing **TopNav**, start **Create rule** (or open `/create/informational`).
3. Walk the flow: **Next** / **Back**; confirm URLs update per step.
4. **Select** and **Confirm stakeholders:** **Add** → custom chip (“Type to add”) → confirm/cancel; MultiSelect add control uses white label + brand “+”; selected chips stay yellow-filled.
5. **Save & Exit** / draft behavior as implemented in context.
6. `npm run lint`, `npm run test`, `npm run storybook:build`, `npm run build`.
7. **Storybook:** **Pages/Create Flow** and **Components/Utility/InfoMessageBox**, **DecisionMakingSidebar** at desktop and mobile viewports.
## Notes
- Some step content and document data remain **placeholders** for future product/API wiring.
- Run Playwright / visual regression locally if your pipeline depends on them.
- Optional before merge: **rebase or merge `main`** into this branch if it has diverged.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Create rule flow: page templates, navigation, and design system support
Overview
This branch implements the CommunityRule “create rule” full-screen flow end-to-end: ordered step routes under
/create/*, shared layout with CreateFlowTopNav / CreateFlowFooter, CreateFlowContext for draft state, and URL-driven navigation viauseCreateFlowNavigationandflowSteps. It also lands supporting design-system components (HeaderLockup, Card, Upload, CardStack, CommunityRuleDocument, InfoMessageBox, DecisionMakingSidebar, Scrollbar, Tag, etc.), Figma-aligned prop normalization updates, MultiSelect add-button styling and Custom chip flow for “add” actions, communication copy inmessages/en/create, and logo/asset restructuring. Marketing and dev preview surfaces are updated where the flow or logo is exposed.Changes
Create flow
[step]validation againstFLOW_STEP_ORDER.confirm-stakeholdersimmediately beforefinal-review.CreateFlowContext(draft persistence helpers), navigation hook,flowStepshelpers.Components and tokens
lib/propNormalization: expanded normalizers for form controls and Figma PascalCase compatibility.Integration and assets
messages/en: create communication strings wired through app context where used.Tests & Storybook (this PR)
flowStepsunit tests; InfoMessageBox and DecisionMakingSidebar at Tag-level depth; TypeScript/test fixes (WebVitals dynamic import cast, vitestReactsetup,BlogPosttest fixtures, unusedReactimports).Pages/Create Flow/*for each static step (mirror Review fullscreen + Desktop/Mobile); Completed uses teal-aligned decorator; Components/Utility stories for InfoMessageBox and DecisionMakingSidebar. Dynamic[step]intentionally omitted (no existing Storybook +use(params)pattern).Housekeeping
Screenshots
How to Test
npm installif needed, thennpm run dev./create/informational).npm run lint,npm run test,npm run storybook:build,npm run build.Notes
maininto this branch if it has diverged.