@asphalt-react/wizard

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"