feat(OnboardingWizard): rewrite stories with interactive demo wrapper and fix broken logos#64
Merged
garrity-miepub merged 3 commits intomainfrom Feb 3, 2026
Merged
Conversation
… and fix broken logos Stories Improvements: - Replace static stories with OnboardingWizardDemo wrapper for proper state management - Add demoMode selector: interactive, loading, error, customBranding, noHeader, incomplete - Implement conditional argTypes that show/hide controls based on selected demo mode - Add currentStep range slider (0-4) for easy step navigation - Change layout from fullscreen to padded with 700px container - Fix container styling to properly position footer at bottom Logo Fixes: - Update default logoUrl from broken local path to MIE logo URL - Update customBranding story to use Enterprise Health HubSpot-hosted logo UI Enhancements: - Improve payment step with actual form fields and proper label accessibility - Polish import step buttons with better spacing and hover states - Shorten button labels for cleaner appearance
…e support Component Integration: - Replace raw HTML buttons with Button component - Replace custom spinner with Spinner component - Replace custom error div with Alert component - Replace custom progress bar with Progress component - Use Input component in stories for form fields Dark Mode / Theming: - Use bg-background for theme-aware backgrounds - Use text-foreground for proper text colors - Use border-border for theme-aware borders - Use text-muted-foreground for secondary text UX Improvements: - Back button always visible but disabled on first step - Progress bar position stays consistent across steps - All interactive elements use consistent Button variants
Deploying ui with
|
| Latest commit: |
c7f4f26
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://560c3f0c.ui-6d0.pages.dev |
| Branch Preview URL: | https://feature-onboarding-wizard-up.ui-6d0.pages.dev |
There was a problem hiding this comment.
Pull request overview
This PR modernizes the OnboardingWizard Storybook stories with an interactive demo wrapper and fixes branding/logo issues while polishing some step UIs.
Changes:
- Update
OnboardingWizard’s defaultlogoUrlto a hosted MIE logo instead of a broken local asset. - Replace static stories with an
OnboardingWizardDemowrapper that supports multiple demo modes (interactive, loading, error, custom branding, no header, incomplete) with conditional controls and a step slider. - Refine Import and Payment steps in the sample data with improved button layout, hover states, and a more realistic, accessible payment form UI.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
src/components/OnboardingWizard/OnboardingWizard.tsx |
Switches the default logoUrl to a hosted MIE image to fix broken logo references. |
src/components/OnboardingWizard/OnboardingWizard.stories.tsx |
Rewrites stories to use an interactive OnboardingWizardDemo wrapper, adds demo modes and conditional argTypes, and improves the sample Import/Payment step UIs and branding examples. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
garrity-miepub
force-pushed
the
feature/onboarding-wizard-updates
branch
from
24bdc21 to
434da31
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Remove hard-coded currentStep:4 in incomplete mode to allow navigation - Use 0-based indices for incompleteSteps (1='Import Employees', 2='Payment') - Set effectiveInitialStep to 4 for incomplete mode when starting fresh - Navigation from OnboardingCompletion's 'Go to step' buttons now works correctly
garrity-miepub
force-pushed
the
feature/onboarding-wizard-updates
branch
from
434da31 to
c7f4f26
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Stories Improvements:
Logo Fixes:
UI Enhancements:
onboarding.mov