@axa-fr/react-toolkit-form-steps

1. Installation
2. Old Design Steps
3. New Design Steps

The component step can have multiple values for the mode props :

mode: 'link' | 'active' | 'disabled';

Installation

npm i @axa-fr/react-toolkit-form-steps

Old Design Steps

Import

import { Steps, Step, StepBase } from '@axa-fr/react-toolkit-form-steps';
import '@axa-fr/react-toolkit-form-steps/dist/af-step-form.css';

Use

const OldDesignSteps = () => (
  <Steps classModifier="" className="">
    <Step
      id="id1"
      href="/etape1"
      onClick={(e) => {
        console.log(e);
      }}
      number="1"
      mode="link"
      title="Previous step"
    />
    <Step
      id="id2"
      href="/etape2"
      number="2"
      onClick={(e) => {
        console.log(e);
      }}
      title="Previous step"
      mode="link"
    />
    <Step
      id="id3"
      number="3"
      onClick={(e) => {
        console.log(e);
      }}
      title="Current step"
      mode="active"
    />
    <StepBase id="idf4" title="Un titre">
      <a
        className="af-steps-list-stepLabel"
        href="#/"
        onClick={(e) => {
          console.log(e);
        }}>
        <span className="af-steps-list-stepNumber">
          <i className="glyphicon glyphicon-ok" />
        </span>
        <span className="af-steps-list-stepTitle">Custom</span>
      </a>
    </StepBase>
    <Step id="id5" number="5" title="Final step" mode="disabled" />
  </Steps>
);
export default OldDesignSteps;

New Design Steps

Import

import {
  Steps,
  Step,
  StepBase,
  StepModes,
} from '@axa-fr/react-toolkit-form-steps';
import '@axa-fr/react-toolkit-form-steps/dist/af-step-form-new.css';

Use

const NewDesignSteps = () => (
  <Steps classModifier="" className="af-steps-new">
    <Step
      id="id1"
      href="/etape1"
      onClick={(e) => {
        console.log(e);
      }}
      mode="link"
      title="Previous step"
    />
    <Step
      id="id2"
      href="/etape2"
      onClick={(e) => {
        console.log(e);
      }}
      title="Previous step"
      mode="link"
    />
    <Step
      id="id3"
      number="13"
      onClick={(e) => {
        console.log(e);
      }}
      title="Current step"
      mode="active"
    />
    <StepBase id="idf4" title="Un titre">
      <a
        className="af-steps-list-stepLabel"
        href="#/"
        onClick={(e) => {
          console.log(e);
        }}>
        <span className="af-steps-list-stepNumber">
          <i className="glyphicon glyphicon-ok" />
        </span>
        <span className="af-steps-list-stepTitle">Custom</span>
      </a>
    </StepBase>
    <Step id="id5" title="Final step" mode="disabled" />
  </Steps>
);
export default NewDesignSteps;