Steps

Use the Steps component to display sequential navigation. A step will display an incremental counter and may have a title and description.

Install
npm install @pluralsight/ps-design-system-steps
Import
import Badge from '@pluralsight/ps-design-system-steps'

Examples

Orientations

The Steps component can be oriented vertically or horizontally.

import React from 'react'
import Steps from '@pluralsight/ps-design-system-steps'

function Example() {
  return (
    <Steps orientation="vertical">
      <Steps.Step status={Steps.statuses.completed}>Finished</Steps.Step>

      <Steps.Step
        description="An optional description to provide more detail about this step."
        status={Steps.statuses.current}
      >
        In Progress
      </Steps.Step>

      <Steps.Step status={Steps.statuses.incomplete}>Waiting</Steps.Step>
    </Steps>
  )
}

export default Example

import React from 'react'
import Steps from '@pluralsight/ps-design-system-steps'

function Example() {
  return (
    <Steps orientation="horizontal">
      <Steps.Step status={Steps.statuses.completed}>Finished</Steps.Step>

      <Steps.Step
        description="An options description to provide more detail about this step."
        status={Steps.statuses.current}
      >
        In Progress
      </Steps.Step>

      <Steps.Step status={Steps.statuses.incomplete}>Waiting</Steps.Step>
    </Steps>
  )
}

export default Example

Sizes

The size prop will adjust the font and marker dimensions.

import React from 'react'
import Steps from '@pluralsight/ps-design-system-steps'

function Example() {
  return (
    <>
      <Steps orientation="horizontal" size="medium">
        <Steps.Step status={Steps.statuses.completed}>Medium</Steps.Step>
      </Steps>

      <Steps orientation="horizontal" size="large">
        <Steps.Step status={Steps.statuses.completed}>Large</Steps.Step>
      </Steps>
    </>
  )
}

export default Example

Step status

Use the status prop to defined the status of each step.

import React from 'react'
import Steps from '@pluralsight/ps-design-system-steps'

function Example() {
  return (
    <Steps orientation="horizontal" size="medium">
      <Steps.Step status={Steps.statuses.incomplete}>Incomplete</Steps.Step>
      <Steps.Step status={Steps.statuses.current}>Current</Steps.Step>
      <Steps.Step status={Steps.statuses.completed}>Completed</Steps.Step>
    </Steps>
  )
}

export default Example

Marker counters

Incremental counters can optionally be hidden using the counter prop.

import React from 'react'
import Steps from '@pluralsight/ps-design-system-steps'

function Example() {
  return (
    <Steps counter={false} orientation="horizontal" size="medium">
      <Steps.Step status={Steps.statuses.completed}>Finished</Steps.Step>

      <Steps.Step
        description="An optional description to provide more detail about this step."
        status={Steps.statuses.current}
      >
        In Progress
      </Steps.Step>

      <Steps.Step status={Steps.statuses.incomplete}>Waiting</Steps.Step>
    </Steps>
  )
}

export default Example

Interactive

Add an onClick prop to display the step as interactive.

import React from 'react'
import Steps from '@pluralsight/ps-design-system-steps'

function Example() {
  const { steps, select } = useData()

  return (
    <Steps orientation="vertical">
      {steps.map((step, index) => (
        <Steps.Step
          key={index}
          description={step.status === 'current' && step.description}
          onClick={() => select(step)}
          status={step.status}
        >
          {step.title}
        </Steps.Step>
      ))}
    </Steps>
  )
}

function useData() {
  const description =
    'An optional description to provide more detail about this step.'
  const { statuses } = Steps

  const [steps, setSteps] = React.useState([
    { description, title: 'Select type', status: statuses.completed },
    { description, title: 'Select template', status: statuses.current },
    { description, title: 'Add details', status: statuses.incomplete },
    { description, title: 'Select goals', status: statuses.incomplete },
    { description, title: 'Review', status: statuses.incomplete }
  ])

  const select = React.useCallback(
    nextStep => {
      const curIndex = steps.indexOf(nextStep)
      if (curIndex < 0) return

      setSteps(prev =>
        prev.map((step, index) => ({
          ...step,
          status:
            index === curIndex
              ? 'current'
              : index < curIndex
              ? 'completed'
              : 'incomplete'
        }))
      )
    },
    [steps]
  )

  return { steps, select }
}

export default Example

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests

Manual audit

WAI-ARIA Patterns: Disclosure

Props

Steps

Name	Type	Description	Default
`counter`	`boolean`	show/hide the marker counter	`true`
`orientation`	`horizontal \| vertical`		`vertical`
`size`	`medium \| large`		`large`

Steps.Step

Name	Type	Description	Default
`description`	`string`
`marker`	`Marker`	custom marker
`renderMarkerContainer`	`(props) => React.ReactNode`	render prop for custom marker container	`(p) => <div {...p} />`
`status` Required	`incomplete \| current \| completed`	step status