@kadconsulting/dry
Version:
KAD Reusable Component Library
140 lines • 3.83 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Wizard from './Wizard';
const meta = {
title: 'Components/Navigation/Wizard',
component: Wizard,
argTypes: {
'data-testid': {
control: 'text',
description: 'ID for testing purposes',
defaultValue: 'Wizard-test-id',
},
steps: {
control: 'object',
description: 'Array of step objects defining the wizard structure',
},
currentStep: {
control: 'number',
description: 'Current active step index',
},
onStepChange: {
action: 'onStepChange',
description: 'Function called when step changes',
},
error: {
control: 'text',
description: 'Error message to display',
},
nextButtonLabel: {
control: 'text',
description: 'Label for the next button',
},
previousButtonLabel: {
control: 'text',
description: 'Label for the previous button',
},
loading: {
control: 'boolean',
description: 'Whether the wizard is in a loading state',
},
onStepChanging: {
action: 'onStepChanging',
description: 'Function called before step change',
},
hideProgressBar: {
control: 'boolean',
description: 'Whether to hide the progress bar',
},
},
};
export default meta;
const ExampleStep = ({ title }) => (_jsxs("div", { style: { padding: '20px', border: '1px solid #ccc' }, children: [_jsx("h2", { children: title }), _jsx("p", { children: "This is an example step content." })] }));
const defaultSteps = [
{
title: 'Step 1',
text: 'Step 1 description',
component: _jsx(ExampleStep, { title: 'Step 1' }),
},
{
title: 'Step 2',
text: 'Step 2 description',
component: _jsx(ExampleStep, { title: 'Step 2' }),
},
{
title: 'Step 3',
text: 'Step 3 description',
component: _jsx(ExampleStep, { title: 'Step 3' }),
},
];
export const Default = {
args: {
'data-testid': 'Wizard-test-id',
steps: defaultSteps,
},
};
export const WithCustomLabels = {
args: {
...Default.args,
nextButtonLabel: 'Continue',
previousButtonLabel: 'Go Back',
},
};
export const WithError = {
args: {
...Default.args,
error: 'An error occurred during the process.',
},
};
export const Loading = {
args: {
...Default.args,
loading: true,
},
};
export const HiddenProgressBar = {
args: {
...Default.args,
hideProgressBar: true,
},
};
export const WithValidation = {
args: {
...Default.args,
steps: [
{ ...defaultSteps[0], validate: () => true },
{ ...defaultSteps[1], validate: () => false },
defaultSteps[2],
],
},
};
export const WithCustomHandlers = {
args: {
...Default.args,
steps: [
{ ...defaultSteps[0], onNext: () => console.log('Step 1 next') },
{ ...defaultSteps[1], onPrevious: () => console.log('Step 2 previous') },
defaultSteps[2],
],
},
};
export const NoNextButton = {
args: {
...Default.args,
steps: [
defaultSteps[0],
{ ...defaultSteps[1], noNextButton: true },
defaultSteps[2],
],
},
};
export const RemoveButtons = {
args: {
...Default.args,
steps: [
defaultSteps[0],
{ ...defaultSteps[1], removeButtons: true },
defaultSteps[2],
],
},
};
//# sourceMappingURL=Wizard.stories.js.map