Progress indicator

v4.0.0

Progress indicators provide visual feedback to users to let them know and understand their current context at any given time and be assured that they are progressing through the system.

Released

History
View changes
Install
npm i @gold.au/progress-indicator
Tags
Requires
Contributors
  • Gary Broadbent avatar picture
  • Trevor Brennan avatar picture
  • Patrick De Young avatar picture
  • Alexander Sadleir avatar picture
  • Alex Page avatar picture
  • Dominik Wilkowski avatar picture

Default

Our design system provides a progress indicator for larger tasks that can be completed out of order and returned to at a later date, like doing a tax return or applying for a drivers licence.

The individual tasks or steps are shown as either:

  • todo the task is available for the user to do
  • doing the task has been started
  • done the task has been completed

Example

<!--
  Light:  <ul class="au-progress-indicator">
  Dark:   <ul class="au-progress-indicator au-progress-indicator--dark">
-->

<ul class="au-progress-indicator">
  <li>
    <a class="au-progress-indicator__link au-progress-indicator__link--doing" href="#url">
      <span class="au-progress-indicator__status">Doing</span>
      Introduction
    </a>
  </li>
  <li>
    <a class="au-progress-indicator__link au-progress-indicator__link--todo" href="#url">
      <span class="au-progress-indicator__status">To do</span>
      Business Contacts
    </a>
  </li>
  <li>
    <a class="au-progress-indicator__link au-progress-indicator__link--done" href="#url">
      <span class="au-progress-indicator__status">Done</span>
      Case Studies
    </a>
  </li>
</ul>
/*
  Light:  <AUprogressIndicator items={[
  Dark:   <AUprogressIndicator dark items={[
*/

import AUprogressIndicator from '@gold.au/progress-indicator';

<AUprogressIndicator items={[
  {
    link: '#url',
    text: 'Introduction',
    status: 'doing',
  },
  {
    link: '#url',
    text: 'Business Contacts',
    status: 'todo',
  },
  {
    link: '#url',
    text: 'Case Studies',
    status: 'done',
  },
]} />