Wizard

Wizard is a component that guides the user through a set of predefined steps and helps to complete a large task or a process. Each Step of Wizard supports multiple intents, and can present some optional content with it.

This pattern is also called as Progress stepper.

Usage

import { 
  Wizard, 
  Step, 
  StepContent, 
  StepIndicator, 
  StepLabel, 
  WizardPath 
} from '@asphalt-react/wizard'

<Wizard>
  <Step>
    <StepIndicator>1</StepIndicator>
    <StepContent>
      <StepLabel>User Info</StepLabel>
    </StepContent>
  </Step>
  <WizardPath/>
  <Step>
    <StepIndicator>2</StepIndicator>
    <StepContent>
      <StepLabel>User Preferences</StepLabel>
    </StepContent>
  </Step>
  <WizardPath/>
  <Step>
    <StepIndicator>3</StepIndicator>
    <StepContent>
      <StepLabel>Checkout</StepLabel>
    </StepContent>
  </Step>
</Wizard>

Unit Components

The Wizard component exports the Unit components:

1. Step
2. StepIndicator
3. StepContent
4. StepLabel
5. StepDescription
6. WizardPath

Unit components under Step accepts active prop, that can be used to indicate the current or highlighted step. They also accept a disabled to make any step appear unavailable to the user. All intents success, warning, danger & info can be set to the StepIndicator component, with neutral appearance being the default.

Building a Wizard

Think of building a Wizard, as a series of Step components, connected with WizardPath.

Each Step is composed of StepIndicator and optionally with StepLabel & StepDescription wrapped in a StepContent

Orientation

Wizard, by default renders itself and the steps horizontally. This can be changed by setting vertical prop to Wizard and WizardPath.

Props

vertical

Enables vertical variant

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

children

Steps of wizard

| type | required | default | | ---- | -------- | ------- | | node | true | N/A |

Step

Props

children

Accepts indicator and content.

| type | required | default | | ---- | -------- | ------- | | node | true | N/A |

aside

Enable aside behaviour. Aside behaviour allows indicator and content to be arranged horizontally.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

StepIndicator

Props

children

Children for StepIndicator.

| type | required | default | | ---- | -------- | ------- | | node | false | null |

size

Controls size of the StepIndicator. Accepts m & l for medium & large respectively.

| type | required | default | | ---- | -------- | ------- | | enum | false | "m" |

aside

Enables aside mode.

| type | required | default | | ---- | -------- | ------- | | bool | false | N/A |

success

Applies success intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

info

Applies information intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

danger

Applies danger intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

warning

Applies warning intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

active

Active state of StepIndicator.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

disabled

Disabled state of StepIndicator.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

StepContent

Props

children

React node for content.

| type | required | default | | ---- | -------- | ------- | | node | false | N/A |

aside

Enables aside mode.

| type | required | default | | ---- | -------- | ------- | | bool | false | N/A |

StepLabel

Props

children

Accepts text node for StepLabel.

| type | required | default | | ---- | -------- | ------- | | node | false | N/A |

active

Active state of StepLabel.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

disabled

Disabled state of StepLabel.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

StepDescription

Props

children

React node for description.

| type | required | default | | ---- | -------- | ------- | | node | true | N/A |

disabled

Disabled state of StepDescription.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

WizardPath

Props

completed

Completed state for WizardPath.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

vertical

Vertical mode for WizardPath.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

aside

Assist in aside behaviour.

| type | required | default | | ---- | -------- | ------- | | bool | false | N/A |

size

Controls size of the WizardPath. Accepts s, m, l for small, medium & large.

| type | required | default | | ---- | -------- | ------- | | enum | false | "m" |