Storybook stories for the `OnboardingStepCard` component, covering all visual states and a full list layout as seen on the Get Started page. ## Key Components | Export | Description | |--------|-------------| | `Default` | Pending state — shows **Skip Step** + primary action button | | `Completed` | Success state — shows completed badge + **Manage** button | | `Skipped` | Skipped state — shows only the **SKIPPED** badge | | `CheckingCompletion` | Loading skeleton while completion status is being fetched | | `List` | Full multi-step list replicating the Get Started page layout | ## Usage Example ```typescript // Render a pending onboarding step , actionText: 'Invite Users', completedText: 'Manage Users', onAction: () => console.log('action'), onSkip: () => console.log('skip'), }} isCompleted={false} isSkipped={false} isCheckingCompletion={false} onAction={() => console.log('action')} onSkip={() => console.log('skip')} /> ``` ## Notes - The card itself has **no hover state or click handler** — only the inner buttons (`Skip Step`, `Action`, `Manage`) are interactive. - The `List` story is useful for verifying that hovering a row does **not** change its border or background. - Stories use `layout: 'padded'` and are tagged with `autodocs` for automatic documentation generation.