No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

VerticalSteps
import { VerticalSteps } from '@proton/atoms';
VerticalSteps helps to create a vertical timeline UI. Each item accepts a few props: title, description, status (done, passed, next), icon.
  • Choose a usernameYou successfully selected your new email address.
  • Today: get instant access15 GB secure mailbox with unlimited personalisation.
  • Day 24: Trial end reminderWe’ll send you a notice. Cancel anytime.
  • Day 30: Trial endsYour subscription will start Jan 16th. Cancel anytime before.
() => (
    <VerticalSteps>
        <VerticalStep
            icon={<Icon name="checkmark" className="m-auto" size={4} />}
            title="Choose a username"
            description="You successfully selected your new email address."
            status={VerticalStepStatusEnum.Passed}
        />
        <VerticalStep
            icon={<Icon name="lock" className="m-auto" size={4} />}
            title="Today: get instant access"
            description="15 GB secure mailbox with unlimited personalisation."
            status={VerticalStepStatusEnum.Done}
        />
        <VerticalStep
            icon={<Icon name="bell" className="m-auto" size={4} />}
            title="Day 24: Trial end reminder"
            description="We’ll send you a notice. Cancel anytime."
        />
        <VerticalStep
            icon={<Icon name="calendar-row" className="m-auto" size={4} />}
            title="Day 30: Trial ends"
            description="Your subscription will start Jan 16th. Cancel anytime before."
        />
    </VerticalSteps>
)
Another variant is doable:
  • 1
    Select service to update
  • 2
    Do another great step
  • 3
    Do another great step again
  • 4
    Do another great step final step
() => (
    <VerticalSteps className="vertical-steps--primary">
        <VerticalStep
            titleCentered
            titleBold={false}
            title="Select service to update"
            icon={<span className="m-auto">1</span>}
        />
        <VerticalStep
            titleCentered
            titleBold={false}
            title="Do another great step"
            icon={<span className="m-auto">2</span>}
        />
        <VerticalStep
            titleCentered
            titleBold={false}
            title="Do another great step again"
            icon={<span className="m-auto">3</span>}
        />
        <VerticalStep
            titleCentered
            titleBold={false}
            title="Do another great step final step"
            icon={<span className="m-auto">4</span>}
        />
    </VerticalSteps>
)
Props
No inputs found for this component. Read the docs