node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

@gov.au/progress-indicator

@gov.au/progress-indicator

Indicator of progress through a multitude of pages mostly used for forms.

Contents


Install

yarn add @gov.au/progress-indicator
npm install @gov.au/progress-indicator --save-dev

⬆ back to top


Usage

⬆ back to top


React

Usage:

import ProgressIndicator from './progress-indicator.js';
 
<ProgressIndicator items={[
    {
        link: 'forms/intro/',
        text: 'Introduction',
        status: 'done',
    },
    {
        link: 'forms/contacts/',
        text: 'Business Contacts',
        status: 'doing',
    },
    {
        link: 'forms/casestudies/',
        text: 'Case Studies',
        status: 'todo',
    },
]} />

All props:

<ProgressIndicator
    items={[                   {/* All steps in a neat array */}
        {
            link: 'forms/intro/',  {/* The link to this step, optional */}
            text: 'Introduction',  {/* The name of this step */}
            status: 'done',        {/* The status of this step, can be: 'done', 'doing', 'todo' */}
            onClick={ () => {} }   {/* A function to execute when the link is clicked, optional */}
        },
    ]}
/>

For more details have a look at the usage example.

⬆ back to top


Dependency graph

progress-indicator
└─ core

⬆ back to top


Build

⬆ back to top


Tests

The visual test: http://uikit.apps.staging.digital.gov.au/packages/progress-indicator/tests/site/

⬆ back to top


Release History

  • v1.0.0 - Fixing BEM issues with class names
  • v0.3.0 - Added pancake-react plugin, ES5 main file
  • v0.2.0 - Added react component
  • v0.1.0 - 💥 Initial version

⬆ back to top


License

Copyright (c) Commonwealth of Australia. Licensed under MIT.

⬆ back to top

};