import React from 'react'; import { ComponentStory, ComponentMeta } from '@storybook/react'; import { Stepper } from '.'; import { Button } from '../Button'; import { testStepData, noNavTestStepData } from './testStepData'; import { Avatar } from '../Avatar'; const parentWrapper = { height: '1px', minHeight: '450px', }; export default { title: '3.Layout/Stepper', component: Stepper, argTypes: { onComplete: { action: 'completed' } }, decorators: [(storyFn) =>
Are you having any trouble?
); export const Demo = Template.bind({}); Demo.args = { step: 1, stepData: testStepData, onComplete: () => alert('done'), }; export const PreLoadStep0 = Template.bind({}); PreLoadStep0.args = { stepData: testStepData }; export const StepsWithFooter = Template.bind({}); StepsWithFooter.args = { step: 1, stepData: testStepData, helperContent: testHelpContent(), }; export const StepsWithoutNav = Template.bind({}); StepsWithoutNav.args = { step: 1, stepData: noNavTestStepData, hasNavButtons: false, }; export const CustomCompleteString = Template.bind({}); CustomCompleteString.args = { step: 5, stepData: testStepData, completeTitle: 'Custom Complete Title', completeMessage: 'and you can customize this message too', }; export const CustomCompleteDom = Template.bind({}); CustomCompleteDom.args = { step: 5, stepData: testStepData, completeTitle: 'Custom Complete Title', completeMessage: