1import { Icon } from '@proton/components'; 2 3import VerticalStep, { VerticalStepStatusEnum } from './VerticalStep'; 4import VerticalSteps from './VerticalSteps'; 5import mdx from './VerticalSteps.mdx'; 6 7export default { 8 component: VerticalSteps, 9 subcomponents: { VerticalStep }, 10 title: 'components/VerticalSteps', 11 parameters: { docs: { page: mdx } }, 12}; 1314export const Basic = () => ( 15 <VerticalSteps> 16 <VerticalStep 17 icon={<Icon name="checkmark" className="m-auto" size={4} />} 18 title="Choose a username" 19 description="You successfully selected your new email address." 20 status={VerticalStepStatusEnum.Passed} 21 /> 22 <VerticalStep 23 icon={<Icon name="lock" className="m-auto" size={4} />} 24 title="Today: get instant access" 25 description="15 GB secure mailbox with unlimited personalisation." 26 status={VerticalStepStatusEnum.Done} 27 /> 28 <VerticalStep 29 icon={<Icon name="bell" className="m-auto" size={4} />} 30 title="Day 24: Trial end reminder" 31 description="We’ll send you a notice. Cancel anytime." 32 /> 33 <VerticalStep 34 icon={<Icon name="calendar-row" className="m-auto" size={4} />} 35 title="Day 30: Trial ends" 36 description="Your subscription will start Jan 16th. Cancel anytime before." 37 /> 38 </VerticalSteps> 39);40 41export const Primary = () => ( 42 <VerticalSteps className="vertical-steps--primary"> 43 <VerticalStep 44 titleCentered 45 titleBold={false} 46 title="Select service to update" 47 icon={<span className="m-auto">1</span>} 48 /> 49 <VerticalStep 50 titleCentered 51 titleBold={false} 52 title="Do another great step" 53 icon={<span className="m-auto">2</span>} 54 /> 55 <VerticalStep 56 titleCentered 57 titleBold={false} 58 title="Do another great step again" 59 icon={<span className="m-auto">3</span>} 60 /> 61 <VerticalStep 62 titleCentered 63 titleBold={false} 64 title="Do another great step final step" 65 icon={<span className="m-auto">4</span>} 66 /> 67 </VerticalSteps> 68);