3.0.1 • Published 9 months ago

@axa-fr/react-toolkit-form-steps v3.0.1

Weekly downloads
104
License
MIT
Repository
github
Last release
9 months ago

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

9 months ago

3.0.0

9 months ago

3.0.0-alpha.1

10 months ago

3.0.0-alpha.2

10 months ago

3.0.0-alpha.0

11 months ago

2.3.1

1 year ago

2.3.1-alpha.0

1 year ago

2.3.0

1 year ago

2.3.0-alpha.2

1 year ago

2.3.0-alpha.0

1 year ago

2.2.0

1 year ago

2.2.0-alpha.0

2 years ago

2.2.0-alpha.1

1 year ago

2.1.1

2 years ago

2.1.1-alpha.0

2 years ago

2.1.0

2 years ago

2.1.0-alpha.6

2 years ago

2.1.0-alpha.5

2 years ago

2.1.0-alpha.4

2 years ago

2.1.0-alpha.3

2 years ago

2.0.1-alpha.1

2 years ago

2.1.0-alpha.2

2 years ago

2.1.0-alpha.1

2 years ago

2.0.0

3 years ago

2.0.1-alpha.0

3 years ago

2.0.0-alpha.11

3 years ago

2.0.0-alpha.8

3 years ago

2.0.0-alpha.9

3 years ago

2.0.0-alpha.10

3 years ago

2.0.0-alpha.3

4 years ago

2.0.0-alpha.4

4 years ago

2.0.0-alpha.5

4 years ago

1.4.1

4 years ago

1.4.0

4 years ago

2.0.0-alpha.0

4 years ago

2.0.0-alpha.1

4 years ago

1.4.0-alpha.1

4 years ago

1.4.0-alpha.0

5 years ago

1.3.23

5 years ago

1.3.21

5 years ago

1.3.16

5 years ago

1.3.15

5 years ago

1.3.14

5 years ago

1.3.13

5 years ago

1.3.12

5 years ago

1.3.11

5 years ago

1.3.10

5 years ago

1.3.9

5 years ago

1.3.9-alpha.0

5 years ago

1.3.8-alpha.0

5 years ago

1.3.7-alpha.0

5 years ago

1.3.6

5 years ago

1.3.6-alpha.0

5 years ago

1.3.5-alpha.0

5 years ago

1.3.4

5 years ago

1.3.3

5 years ago

1.3.2

6 years ago

1.3.2-alpha.0

6 years ago

1.2.16

6 years ago

1.2.15

6 years ago

1.2.14

6 years ago

1.2.13

6 years ago

1.2.12

6 years ago

1.2.11

6 years ago

1.2.10

6 years ago

1.2.8

6 years ago

1.2.7

6 years ago

1.2.6

6 years ago

1.2.6-alpha.0

6 years ago

1.2.5

6 years ago

1.2.5-alpha.0

6 years ago

1.2.4

6 years ago

1.2.3

6 years ago

1.2.2

6 years ago

1.2.1

6 years ago

1.2.0

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

7 years ago

1.0.0

7 years ago

0.0.2-alpha.0

7 years ago