@asphalt-react/wizard v2.0.0-alpha.11

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/>
    <StepContent>
      <StepLabel>Step 1<StepLabel>
    </StepContent>
  <Step>
  <WizardPath/>
  <Step>
    <StepIndicator/>
    <StepContent>
      <StepLabel>Step 2<StepLabel>
    </StepContent>
  <Step>
  <WizardPath/>
  <Step>
    <StepIndicator/>
    <StepContent>
      <StepLabel>Finish<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

children

Steps of wizard

Step

Props

children

Accepts indicator and content.

StepIndicator

Props

success

Applies success intent.

info

Applies information intent.

danger

Applies danger intent.

warning

Applies warning intent.

active

Active state of StepIndicator.

disabled

Disabled state of StepIndicator.

StepContent

Props

children

Accepts StepLabel and StepDescription.

StepLabel

Props

children

Accepts text node for StepLabel.

active

Active state of StepLabel.

disabled

Disabled state of StepLabel.

StepDescription

Props

children

React node for description.

disabled

Disabled state of StepDescription.

WizardPath

Props

completed

Completed state for WizardPath.

vertical

Vertical mode for WizardPath

size

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