@navinc/base-react-components/src/wizard-flow.readme.md

Nav's Pattern Library

# Wizard Flow

These components were extracted from `pipsqeaks` `vdf-flow` so that it could be reused in our other apps such as `ent-web`.

Please note that the prop `actionForm` on `<WizardStep />` needs to match the `id` attribute given to the `Form` component in order for the `submit` to work properly.

Example:

```
<WizardFlowProvider>
  <WizardStep actionForm="form-id" >
    <Form id="form-id">
      ...
    </Form>
  </WizardStep>
</WizardFlowProvider>
```

## Usage

```
import React from 'react'
import { WizardFlowProvider, WizardStep } from '@navinc/base-react-components'

export default () => (
  <WizardFlowProvider>
      <WizardStep
        imageFileName="vdf-AnnualRevenue.svg"
        headerCopy="What is your estimated annual revenue?"
        stepContainerTestId="voluntary-data-form:annual-revenue:section"
        actionTestId="voluntary-data-form:annual-revenue:button"
        actionForm="annual-revenue-form"
        actionTrackingContext={{
          type: 'interaction_link',
          category: 'link',
          name: 'voluntary_data_form:annual_revenue',
          label: 'voluntary_data_form:annual_revenue'
        }}
      >
        <AnnualRevenue />
      </WizardStep>
      <WizardStep
        imageFileName="vdf-PersonalIncome.svg"
        headerCopy="What is your personal income?"
        actionForm="personal-income-form"
        actionTestId="voluntary-data-form:personal-income:button"
        stepContainerTestId="voluntary-data-form:personal-income:section"
        actionTrackingContext={{
          type: 'interaction_link',
          category: 'link',
          name: 'voluntary_data_form:personal_income',
          label: 'voluntary_data_form:personal_income'
        }}
      >
        <PersonalIncome />
      </WizardStep>
)

```