Skip to content

feat(ui-components): add ui-wizard component#83

Open
kiennt23 wants to merge 1 commit intomainfrom
feat/ui-wizard
Open

feat(ui-components): add ui-wizard component#83
kiennt23 wants to merge 1 commit intomainfrom
feat/ui-wizard

Conversation

@kiennt23
Copy link
Contributor

Summary

New <ui-wizard> Web Component — a multi-step wizard layout composing existing components.

Features

  • 2 layouts: horizontal (steps bar below header) and vertical (steps sidebar on left)
  • Composes <ui-step-group>, <ui-button>, <ui-separator> internally
  • Header: title with layout-appropriate typography (14px horizontal, 20px vertical)
  • Steps: slotted <ui-step-group> auto-configured per layout (S/horizontal, M/vertical)
  • Content: generic default slot for any form/content
  • Footer: Previous/Next buttons — Previous disabled on step 1, Next becomes "Finish" on last step
  • current-step attribute drives step progress + button states
  • Events: wizard-step-change with detail.step

API

<ui-wizard layout="vertical" title="Wizard Title" current-step="3">
  <ui-step-group slot="steps">
    <ui-step-item label="Account" sublabel="Optional"></ui-step-item>
    <ui-step-item label="Profile" sublabel="Optional"></ui-step-item>
    <ui-step-item label="Contact" sublabel="Optional"></ui-step-item>
  </ui-step-group>
  <div>Step content goes here</div>
</ui-wizard>

Testing

  • 3460 unit tests (43 new)
  • 4 Storybook stories (horizontal, vertical, first step, last step)
  • 56 Playwright visual regression tests (1 new)

Files

  • packages/ui-components/src/components/ui-wizard.ts
  • packages/ui-components/src/components/ui-wizard.test.ts
  • packages/ui-components/src/stories/ui-wizard.stories.ts
  • packages/ui-components/src/index.ts — barrel exports
  • apps/catalog/src/pages/wizard.ts — catalog page

@kiennt23 kiennt23 force-pushed the feat/ui-wizard branch 5 times, most recently from b9863e4 to 32c9c3d Compare March 19, 2026 07:34
- 2 layouts: horizontal (steps bar below header) and vertical (steps sidebar on left)
- Composes ui-step-group, ui-button, ui-separator internally
- Header: title with size-appropriate typography
- Steps: slotted ui-step-group, auto-configured for layout (S horizontal, M vertical)
- Content: generic default slot
- Footer: Previous/Next buttons with auto-disable/Finish logic
- current-step drives step progress + button states
- Events: wizard-step-change with detail.step
- 43 tests, 4 Storybook stories, catalog page
- 56 Playwright visual regression tests

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant