@navinc/base-react-components/src/flow-steps.story.js

Nav's Pattern Library

import React from 'react'
import FlowSteps from './flow-steps.js'
import readme from './flow-steps.readme.md'

export default {
  title: 'General/FlowSteps',
  component: FlowSteps,
  parameters: {
    readme: { content: readme },
  },
}

export const Basic = (args) => <FlowSteps {...args} />

Basic.args = {
  currentPath: '/step-one',
  endLocation: {
    name: 'see offers',
    icon: 'financing/money-bag',
  },
  flow: [
    {
      name: 'Start',
      icon: 'system/search',
      route: '/step-one',
    },
    {
      name: 'Keep going',
      icon: 'buildings/business',
      route: '/step-two',
    },
    {
      name: 'Almost there',
      icon: 'data/report',
      route: '/step-three',
    },
    {
      name: 'Soooo close!',
      icon: 'people/profile',
      route: '/step-four',
    },
    {
      name: 'EEEEE!',
      icon: 'financing/cash',
      route: '/step-five',
    },
  ],
}