@navinc/base-react-components/src/wizard-flow.story.js

Nav's Pattern Library

import React from 'react'
import { Formik, Form } from 'formik'
import Input from './input.js'
import WizardStep, { WizardFlowProvider, useWizardFlow } from './wizard-flow.js'
import readme from './wizard-flow.readme.md'

const SampleForm = () => {
  const { incrementStep } = useWizardFlow()
  return (
    <Formik
      initialValues={{
        sample: '',
      }}
      onSubmit={() => {
        incrementStep()
      }}
    >
      {({ handleBlur, handleChange, handleSubmit, values: { sample } }) => {
        return (
          <Form id="sample-form" onSubmit={handleSubmit}>
            <Input
              hasSpaceForErrors
              name="sample"
              label="Sample"
              value={sample}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </Form>
        )
      }}
    </Formik>
  )
}

export default {
  title: 'Layout/WizardFlow',
  parameters: {
    info: { text: readme },
  },
}

export const Basic = (args) => (
  <WizardFlowProvider>
    <WizardStep {...args}>
      <SampleForm />
    </WizardStep>
  </WizardFlowProvider>
)

Basic.args = {
  imageFileName: 'vdf-PersonalIncome.svg',
  headerCopy: 'what is your estimated annual revenue?',
  actionForm: 'this should match the FORM_ID',
}