@axa-fr/react-toolkit-form-steps
TypeScript icon, indicating that this package has built-in type declarations

3.0.2 • Public • Published

@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;

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
3.0.2-alpha.00next
3.0.20latest

Version History

VersionDownloads (Last 7 Days)Published
3.0.20
3.0.2-alpha.00
3.0.10
3.0.00
3.0.0-alpha.20
3.0.0-alpha.10
3.0.0-alpha.00
2.3.12
2.3.1-alpha.00
2.3.00
2.3.0-alpha.20
2.3.0-alpha.00
2.2.00
2.2.0-alpha.10
2.2.0-alpha.00
2.1.10
2.1.1-alpha.00
2.1.00
2.1.0-alpha.60
2.1.0-alpha.50
2.1.0-alpha.40
2.1.0-alpha.30
2.1.0-alpha.20
2.1.0-alpha.10
2.0.1-alpha.10
2.0.1-alpha.00
2.0.01
2.0.0-alpha.110
2.0.0-alpha.100
2.0.0-alpha.90
2.0.0-alpha.80
2.0.0-alpha.50
2.0.0-alpha.40
2.0.0-alpha.30
1.4.1101
1.4.00
2.0.0-alpha.10
2.0.0-alpha.00
1.4.0-alpha.10
1.4.0-alpha.00
1.3.230
1.3.210
1.3.160
1.3.150
1.3.141
1.3.130
1.3.120
1.3.110
1.3.100
1.3.90
1.3.9-alpha.00
1.3.8-alpha.00
1.3.7-alpha.00
1.3.60
1.3.6-alpha.00
1.3.5-alpha.00
1.3.40
1.3.30
1.3.20
1.3.2-alpha.00
1.2.160
1.2.151
1.2.140
1.2.130
1.2.120
1.2.110
1.2.100
1.2.80
1.2.70
1.2.60
1.2.6-alpha.00
1.2.50
1.2.5-alpha.00
1.2.40
1.2.30
1.2.20
1.2.10
1.2.00
1.1.20
1.1.10
1.1.00
1.0.50
1.0.40
1.0.30
1.0.20
1.0.10
1.0.00
0.0.2-alpha.00

Package Sidebar

Install

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

Weekly Downloads

106

Version

3.0.2

License

MIT

Unpacked Size

158 kB

Total Files

72

Last publish

Collaborators

  • johnathan.meunier
  • martinweb
  • fcornaire
  • guillaume.chervet.axa
  • samuel-gomez
  • antoine.blancke
  • arnaudforaison