[GoodBounty]: Finalize Governance Onboarding UI/Components

[L03TJ3]

Summary

Pick up the existing AI-generated PR for the Governance onboarding UI and make it ready for
human review.

Source items:

• Parent issue: #55 [Feature]: Governance UI Onboarding components
• Plan issue: #56 [PLAN] Governance UI onboarding components
• PR to finalize: #57 Add governance onboarding UI flow and reusable wizard primitives

The PR already adds:

• onboarding screens for welcome, house selection, profile, stake progress, and success
• shared PageWizard and Stepper primitives in packages/ui
• Storybook stories under examples/storybook/src/stories/governance-widget/
• Playwright widget coverage under tests/widgets/governance-widget/

The contributor should focus on the remaining gaps in design, structure, and review readiness.

there are large gaps where it drifted from the original design references.
you are expected to test and go through the flow and verify design in both stitch and figma:
https://stitch.withgoogle.com/preview/1959701114157262308?node-id=2791404570cb4f338118ca3f7f87e9bb
https://www.figma.com/design/xsk5EiF6CvStA9mtdbA9OR/GoodWidget-Library?node-id=2373-2&t=DQGt4ziOfLbCRXay-1

Contributor task

Make sure to branch out from copilot/plan-governance-ui-onboarding-components >
and when you create a pull-request the target branch should also be verified to be: copilot/plan-governance-ui-onboarding-components

• Claim the bounty with an ETA.
• Check out PR #57 and run it locally from the PR branch.
• Compare the implementation against issue #55, plan issue #56, PR #54 for governance
  styling direction, and any shared design references/Figma used during review.
• Fix concrete gaps in UI consistency, layout, component structure, and review evidence.
• Refresh screenshots/videos if UI changes.
• Leave a handoff comment with what changed, what was tested, and remaining risks.

Known finish-work to verify or fix

• Align the onboarding UI with the shared design references.
  Main gaps today are consistency issues in padding, color usage, font sizing, hierarchy,
  badge/button treatment, and overall polish.
• Fix the wizard step header so all onboarding steps read clearly in the target layout.
  The current stepper/header treatment does not cleanly communicate the full 5-step flow.
• Fill in issue-spec gaps on the onboarding screens.
• Modularize the onboarding implementation.
  packages/governance-widget/src/GovernanceOnboardingWidget.tsx is currently a large
  all-in-one file and should be split into smaller component-based files with clean ownership.
• Keep package boundaries clean.
  Only reusable primitives should stay in packages/ui; governance-specific composition should
  remain in packages/governance-widget.
• Clean up branch hygiene issues that are part of this PR.
  Example: remove the duplicate @goodwidget/governance-widget dependency entry in
  examples/storybook/package.json if it is still present.
• Re-verify Storybook and Playwright from a clean process and make sure committed screenshots
  reflect the final branch output.
• Update the PR description so it references issues #55 and #56 and mirrors the final
  acceptance criteria with a checklist.

Scope checks

• PR #57 still solves the issue #55 requirements for the governance onboarding UI.
• The implementation follows plan issue #56 or clearly explains any deviation.
• Existing repo patterns, theming rules, and package boundaries are respected.
• Main onboarding states work for welcome, house selection, profile, stake progress, and
  success and are visually aligned with shared design references
• Storybook covers the expected review states.
• Playwright covers the main flow and the committed screenshots reflect the current branch.
• Optimizied for mobile layouts.
• The PR description links the source issues and includes current test evidence.

Required commands

pnpm install
pnpm run build
pnpm run lint
pnpm --filter @goodwidget/storybook build-storybook
pnpm test:demo tests/widgets/governance-widget

[greyw0rks]

Claiming this bounty — ETA: 2 days

Hi team, I'd like to claim this bounty.

I've reviewed PR #57, the feature spec (#55), and the plan (#56), and have the source branch pulled locally. I have a clear picture of the gaps:

• Fix the Stepper to match the design's 4-step structure (Verify → Path → Profile → Transact) with correct completed/active/pending visual states and labels
• Design alignment pass: padding, color tokens, typography hierarchy, badge/button treatment, identity status row accent, CTA styling
• Modularize GovernanceOnboardingWidget.tsx into focused component files
• Enforce package boundaries: generic primitives in packages/ui, governance composition in packages/governance-widget
• Remove duplicate @goodwidget/governance-widget dep from examples/storybook/package.json
• Re-run Playwright and Storybook from clean state; commit updated screenshots
• Update PR Add governance onboarding UI flow and reusable wizard primitives #57 description with references to [Feature]: Governance UI Onboarding components #55/[PLAN] Governance UI onboarding components #56 and full acceptance checklist

ETA: 2 days

[HushLuxe]

Hi @L03TJ3
I would like to take on this issue. As an existing contributor to GoodDollar, I am already fully ramped up on the repository's architecture, package boundaries, Tamagui theme contract, and testing environment (Playwright/Storybook). I can deliver clean, review-ready code with minimal review overhead.

My implementation plan:

• Modularization & Clean Boundaries: Break down GovernanceOnboardingWidget.tsx into smaller, focused component files. Reusable primitives (like the Stepper and PageWizard wrapper) will stay in packages/ui while governance-specific elements stay inside packages/governance-widget.
• Figma/Stitch Alignment: Re-align the step header and screens (welcome, house selection, profile, staking progress, and success) with the Figma specs—specifically correcting layout padding, button sizing, badge styles, and typography.
• Wizard Stepper Fixes: Rebuild the wizard header/stepper so the full flow state is clearly communicated and reads cleanly.
• Hygiene & Verification: Clean up dependencies (removing duplicate Storybook entries), run full Storybook/Playwright runs, and commit fresh, updated screenshots.

[0xcoredev]

Claiming this bounty. ETA: 2 days

Hi @L03TJ3, I just shipped a very similar onboarding flow in GoodCollective (PR #318, create-pool rewrite + bulk member add, merged two days ago), so I'm already familiar with this pattern and can jump straight into PR #57 without the usual ramp-up.

I took a close look at the current state of #57 and noted a few things:

• GovernanceOnboardingWidget.tsx is sitting at ~870 lines doing everything in one file. It really needs to be broken down.
• The Stepper and PageWizard components look good in packages/ui, but the header doesn't properly show the full 5-step flow (welcome → house selection → profile → stake progress → success)
• There's still a duplicate @goodwidget/governance-widget entry in the Storybook package.json
• The existing screenshots and some tests need updating to match the final design

My plan:

Day 1

• Start from the copilot/plan-governance-ui-onboarding-components branch
• Do a clean install + full build/lint/test run
• Split the big widget into smaller screen components, hooks, and validators while keeping the thin orchestrator
• Clean up the duplicate dependency

Day 2

• Fix and improve the Stepper so all steps are visible with proper states
• Do a full design alignment pass (padding, colors, typography, buttons, mobile layout, etc.)
• Add the missing Playwright cases (invalid input + back navigation), update the screenshots, and expand the Storybook stories.
• Update the PR description with proper references and a clear checklist

I'll make sure everything stays within the existing package boundaries and follows the repo patterns

Happy to start as soon as this is assigned

[L03TJ3]

@HushLuxe you are assigned now

[HushLuxe]

Thank you @L03TJ3 for the assignment

Starting recon now