@kadconsulting/dry
Version:
KAD Reusable Component Library
108 lines • 3.38 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import ProgressSteps from './ProgressSteps';
import { IconNames } from '../Icons/paths';
export default {
title: 'Components/ProgressSteps',
tags: ['autodocs'],
component: ProgressSteps,
argTypes: {
// Define controls for component props here
},
};
const mobileStepsData = [
{
icon: IconNames.User01,
title: 'Your details',
text: 'Company details',
},
{
icon: IconNames.User02,
title: 'Invite your team',
text: 'provide name and email',
},
{
icon: IconNames.User03,
title: 'details about your company',
text: 'Start collaborating',
},
{
icon: IconNames.User03,
title: 'about your company',
text: ' with your team',
},
];
const stepsData = [
{
icon: IconNames.User01,
title: 'Your details',
text: 'Company details',
},
{
icon: IconNames.User02,
title: 'Invite your team',
text: 'Please provide your name and email',
},
{
icon: IconNames.User03,
title: 'A few details about your company',
text: 'Start collaborating with your team',
},
{
icon: IconNames.User03,
title: 'A few details about your company',
text: 'Start collaborating with your team',
},
];
const extraLongStepsData = [
{
icon: IconNames.User01,
title: 'Your details',
text: 'Company details',
},
{
icon: IconNames.User01,
title: 'Your details',
text: 'Company details',
},
{
icon: IconNames.User01,
title: 'Your details',
text: 'Company details',
},
{
icon: IconNames.User01,
title: 'Your details',
text: 'Company details',
},
{
icon: IconNames.User01,
title: 'Your details',
text: 'Company details',
},
{
icon: IconNames.User01,
title: 'Your details',
text: 'Company details',
},
];
const stepsDataTextHeaders = [
{
title: 'Personal information',
},
{
title: 'Password/security',
},
{
title: 'Account members',
},
];
const typographyProps = {
textAlign: 'center',
};
export const Default = (args) => (_jsx(ProgressSteps, { ...args, steps: stepsData, size: 'lg', onStepClick: undefined, typographyProps: typographyProps }));
export const Mobile = (args) => (_jsx(ProgressSteps, { ...args, steps: mobileStepsData, size: 'lg', onStepClick: undefined, typographyProps: typographyProps, isMobile: true }));
export const ExtraLongSteps = (args) => (_jsx(ProgressSteps, { ...args, steps: extraLongStepsData, size: 'lg', onStepClick: undefined, typographyProps: typographyProps }));
export const TextHeaders = (args) => (_jsx(ProgressSteps, { ...args, steps: stepsDataTextHeaders, onStepClick: undefined, progressBarEnabled: false, typographyProps: typographyProps }));
export const TextHeadersVertical = (args) => (_jsx(ProgressSteps, { ...args, steps: stepsDataTextHeaders, onStepClick: undefined, progressBarEnabled: false, orientation: 'vertical' }));
export const TextHasNoIconVertical = (args) => (_jsx(ProgressSteps, { ...args, steps: stepsData, progressBarEnabled: false, hasIcon: false }));
//# sourceMappingURL=ProgressSteps.stories.js.map