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.

Finished

In Progress

An optional description to provide more detail about this step.

Waiting

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

Finished

In Progress

An options description to provide more detail about this step.

Waiting

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.

Medium

Large

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.

Incomplete

Current

Completed

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.

Finished

In Progress

An optional description to provide more detail about this step.

Waiting

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.

Select type

Select template

An optional description to provide more detail about this step.

Add details

Select goals

Review

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