60 lines
1.6 KiB
Plaintext
60 lines
1.6 KiB
Plaintext
|
import { Canvas, Meta, Story } from "@storybook/addon-docs";
|
||
|
|
import { useRouter } from "next/router";
|
||
|
|
|
||
|
|
import { CustomArgsTable, Title, VariantsTable, VariantRow } from "@calcom/storybook/components";
|
||
|
|
|
||
|
|
import WizardForm from "./WizardForm";
|
||
|
|
|
||
|
|
<Meta title="UI/Form/WizardForm" component={WizardForm} />
|
||
|
|
|
||
|
|
<Title title="WizardForm" subtitle="Version 1.0 — Last Update: 5 Sep 2023" />
|
||
|
|
|
||
|
|
## Definition
|
||
|
|
|
||
|
|
The `WizardForm` component provides a structure for creating multi-step forms or wizards.
|
||
|
|
|
||
|
|
## Structure
|
||
|
|
|
||
|
|
<CustomArgsTable of={WizardForm} />
|
||
|
|
|
||
|
|
## Note on Navigation
|
||
|
|
|
||
|
|
Please be aware that the steps navigation is managed internally within the `WizardForm` component. As such, when viewing this component in Storybook, clicking the "Next" button will not showcase the transition to the subsequent step.
|
||
|
|
|
||
|
|
To observe the actual step navigation behavior, please refer to the Storybook stories for the individual `Steps` component.
|
||
|
|
|
||
|
|
## WizardForm Story
|
||
|
|
|
||
|
|
<Canvas>
|
||
|
|
<Story
|
||
|
|
name="Basic"
|
||
|
|
args={{
|
||
|
|
href: "/wizard",
|
||
|
|
steps: [
|
||
|
|
{ title: "Step 1", description: "Description for Step 1" },
|
||
|
|
{ title: "Step 2", description: "Description for Step 2" },
|
||
|
|
{ title: "Step 3", description: "Description for Step 3" },
|
||
|
|
],
|
||
|
|
}}
|
||
|
|
argTypes={{
|
||
|
|
href: {
|
||
|
|
control: {
|
||
|
|
type: "text",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
steps: {
|
||
|
|
control: {
|
||
|
|
type: "object",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}}>
|
||
|
|
{({ href, steps }) => (
|
||
|
|
<VariantsTable titles={["Basic Wizard Form"]} columnMinWidth={150}>
|
||
|
|
<VariantRow>
|
||
|
|
<WizardForm href={href} steps={steps} />
|
||
|
|
</VariantRow>
|
||
|
|
</VariantsTable>
|
||
|
|
)}
|
||
|
|
</Story>
|
||
|
|
</Canvas>
|