New Steps

Molecule

react storybookgithub readmenpm version

Source Code HTML / SASS

Vous trouverez ici les démos et le code source statiques du composant.

On expose les différentes déclinaisons du composant au format HTML et SASS.

Le composant React a été conçu sur la base de cette structure en y ajoutant les interactions que vous trouverez dans notre storybook.react storybook

Classic New Steps

  1. 1
    Current step
  2. 2
    Next step
  3.  
    Confirmation
Copied
<div class="af-steps-new">
    <ol class="af-steps-list">
        <li class="af-steps-list-step on" title="Etape 1">
            <div class="af-steps-list-stepLabel">
                <div class="af-steps-list-stepNumber">1</div>
                <div class="af-steps-list-stepTitle">Current step</div>
                <svg class="glyphicon glyphicon-arrow-rounded-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M76.5,55l-43,43c-2.7,2.7-7.2,2.7-9.9,0c-2.7-2.7-2.7-7.2,0-9.9l38-38l-38-38c-2.7-2.7-2.7-7.2,0-9.9
		c2.7-2.7,7.2-2.7,9.9,0l43,43c1.4,1.4,2,3.2,2,4.9C78.5,51.8,77.8,53.6,76.5,55z"></path>
                </svg>
            </div>
        </li>
        <li class="af-steps-list-step disabled" title="Etape 2">
            <div class="af-steps-list-stepLabel">
                <div class="af-steps-list-stepNumber">2</div>
                <div class="af-steps-list-stepTitle">Next step</div>
                <svg class="glyphicon glyphicon-arrow-rounded-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M76.5,55l-43,43c-2.7,2.7-7.2,2.7-9.9,0c-2.7-2.7-2.7-7.2,0-9.9l38-38l-38-38c-2.7-2.7-2.7-7.2,0-9.9
		c2.7-2.7,7.2-2.7,9.9,0l43,43c1.4,1.4,2,3.2,2,4.9C78.5,51.8,77.8,53.6,76.5,55z"></path>
                </svg>
            </div>
        </li>
        <li class="af-steps-list-step disabled" title="Etape finale">
            <div class="af-steps-list-stepLabel">
                <div class="af-steps-list-stepNumber">&nbsp;
                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                    </svg>
                </div>
                <div class="af-steps-list-stepTitle">Confirmation</div>
            </div>
        </li>
    </ol>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

// Wizard Steps
// --------------------------------------------------
$steps-bg: $gray-lighter;
$steps-bg-active: $white;
$font-size-step: $font-size-base;
$font-size-step-number: $font-size-base+0.2rem;
$steps-color: $gray-dark;
$steps-color-active: mix($black, $brand-primary, 20%);

.af-steps-new {
    margin-bottom: 2rem;
    background: white;

    .af-steps-list {
        display: flex;
        justify-content: space-around;
        line-height: 3rem;
        padding: 0;
        margin: 0;
        border-bottom: 1px solid $steps-bg;
        list-style: none;
        counter-reset: stepper-counter;

        &-step {
            display: inline-flex;
            font-size: $font-size-step;
            color: $steps-color;
            counter-increment: stepper-counter;

            &.number {
                &::before {
                    content: none;
                }
            }

            &::before {
                content: counter(stepper-counter);
                color: $steps-color;
                margin-right: 0.8rem;
                font-size: $font-size-step-number;
                font-weight: 600;
            }

            &::after {
                content: '\EA12';
                font-family: icons;
            }

            &.on {
                color: $steps-color-active;

                &::before,
                * {
                    color: $steps-color-active;
                }
            }

            &.past {
                color: $color-pager-link;

                &::before {
                    color: $color-pager-link;
                }

                &:hover {
                    color: $steps-color-active;
                }
            }

            &.disabled {
                color: $color-btn-disabled;

                &::before {
                    color: $color-btn-disabled;
                }
            }

            &Label {
                display: inline-flex;
                padding-right: 2rem;
            }

            &Number {
                margin-right: 0.6rem;
                font-size: $font-size-step-number;
                font-weight: 600;
                color: $steps-color;

                .glyphicon {
                    font-size: 1.5rem;
                    width: 17px;
                }
            }

            &Title {
                font-weight: 600;
                color: $steps-color;

                &:hover {
                    color: $steps-color-active;
                }
            }

            &:last-child {
                &.on::before {
                    color: $color-btn-success;
                }

                &::before {
                    content: '\EABA';
                    font-family: icons;
                }

                &::after {
                    content: none;
                }

                .af-steps-list-stepLabel {
                    padding-right: 0;

                    &::after,
                    &::before {
                        display: none;
                    }
                }

                .af-steps-list-stepNumber {
                    font-size: ceil(($font-size-step * 1.1));
                }
            }
        }
    }

    @include media-breakpoint-down(xs) {
        .af-steps-list {
            table-layout: auto;

            &-step {
                min-width: 3rem;
                padding-left: 0;

                &Title {
                    display: none;
                }

                &Number {
                    left: 2rem;
                    z-index: 2;
                    margin-right: 1rem;

                    .glyphicon {
                        font-size: 1.2rem;
                    }
                }

                &.on {
                    .af-steps-list-stepTitle {
                        display: block;
                    }

                    .af-steps-list-stepNumber {
                        margin-right: 0.5rem;

                        .glyphicon {
                            font-size: 1.2rem;
                        }
                    }
                }
            }
        }
    }
}

New Steps with more steps

  1. 1
    Previous step
  2. 2
    Previous step
  3. 3
    Current step
  4. 4
    Next step
  5.  
    Confirmation
Copied
<div class="af-steps-new">
    <ol class="af-steps-list">
        <li class="af-steps-list-step past" title="Etape 1">
            <div class="af-steps-list-stepLabel">
                <div class="af-steps-list-stepNumber">1</div>
                <div class="af-steps-list-stepTitle">Previous step</div>
                <svg class="glyphicon glyphicon-arrow-rounded-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M76.5,55l-43,43c-2.7,2.7-7.2,2.7-9.9,0c-2.7-2.7-2.7-7.2,0-9.9l38-38l-38-38c-2.7-2.7-2.7-7.2,0-9.9
		c2.7-2.7,7.2-2.7,9.9,0l43,43c1.4,1.4,2,3.2,2,4.9C78.5,51.8,77.8,53.6,76.5,55z"></path>
                </svg>
            </div>
        </li>
        <li class="af-steps-list-step past" title="Etape 2">
            <div class="af-steps-list-stepLabel">
                <div class="af-steps-list-stepNumber">2</div>
                <div class="af-steps-list-stepTitle">Previous step</div>
                <svg class="glyphicon glyphicon-arrow-rounded-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M76.5,55l-43,43c-2.7,2.7-7.2,2.7-9.9,0c-2.7-2.7-2.7-7.2,0-9.9l38-38l-38-38c-2.7-2.7-2.7-7.2,0-9.9
		c2.7-2.7,7.2-2.7,9.9,0l43,43c1.4,1.4,2,3.2,2,4.9C78.5,51.8,77.8,53.6,76.5,55z"></path>
                </svg>
            </div>
        </li>
        <li class="af-steps-list-step on" title="Etape 3">
            <div class="af-steps-list-stepLabel">
                <div class="af-steps-list-stepNumber">3</div>
                <div class="af-steps-list-stepTitle">Current step</div>
                <svg class="glyphicon glyphicon-arrow-rounded-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M76.5,55l-43,43c-2.7,2.7-7.2,2.7-9.9,0c-2.7-2.7-2.7-7.2,0-9.9l38-38l-38-38c-2.7-2.7-2.7-7.2,0-9.9
		c2.7-2.7,7.2-2.7,9.9,0l43,43c1.4,1.4,2,3.2,2,4.9C78.5,51.8,77.8,53.6,76.5,55z"></path>
                </svg>
            </div>
        </li>
        <li class="af-steps-list-step disabled" title="Etape 3">
            <div class="af-steps-list-stepLabel">
                <div class="af-steps-list-stepNumber">4</div>
                <div class="af-steps-list-stepTitle">Next step</div>
                <svg class="glyphicon glyphicon-arrow-rounded-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M76.5,55l-43,43c-2.7,2.7-7.2,2.7-9.9,0c-2.7-2.7-2.7-7.2,0-9.9l38-38l-38-38c-2.7-2.7-2.7-7.2,0-9.9
		c2.7-2.7,7.2-2.7,9.9,0l43,43c1.4,1.4,2,3.2,2,4.9C78.5,51.8,77.8,53.6,76.5,55z"></path>
                </svg>
            </div>
        </li>
        <li class="af-steps-list-step disabled" title="Etape finale">
            <div class="af-steps-list-stepLabel">
                <div class="af-steps-list-stepNumber">&nbsp;
                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                    </svg>
                </div>
                <div class="af-steps-list-stepTitle">Confirmation</div>
            </div>
        </li>
    </ol>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

// Wizard Steps
// --------------------------------------------------
$steps-bg: $gray-lighter;
$steps-bg-active: $white;
$font-size-step: $font-size-base;
$font-size-step-number: $font-size-base+0.2rem;
$steps-color: $gray-dark;
$steps-color-active: mix($black, $brand-primary, 20%);

.af-steps-new {
    margin-bottom: 2rem;
    background: white;

    .af-steps-list {
        display: flex;
        justify-content: space-around;
        line-height: 3rem;
        padding: 0;
        margin: 0;
        border-bottom: 1px solid $steps-bg;
        list-style: none;
        counter-reset: stepper-counter;

        &-step {
            display: inline-flex;
            font-size: $font-size-step;
            color: $steps-color;
            counter-increment: stepper-counter;

            &.number {
                &::before {
                    content: none;
                }
            }

            &::before {
                content: counter(stepper-counter);
                color: $steps-color;
                margin-right: 0.8rem;
                font-size: $font-size-step-number;
                font-weight: 600;
            }

            &::after {
                content: '\EA12';
                font-family: icons;
            }

            &.on {
                color: $steps-color-active;

                &::before,
                * {
                    color: $steps-color-active;
                }
            }

            &.past {
                color: $color-pager-link;

                &::before {
                    color: $color-pager-link;
                }

                &:hover {
                    color: $steps-color-active;
                }
            }

            &.disabled {
                color: $color-btn-disabled;

                &::before {
                    color: $color-btn-disabled;
                }
            }

            &Label {
                display: inline-flex;
                padding-right: 2rem;
            }

            &Number {
                margin-right: 0.6rem;
                font-size: $font-size-step-number;
                font-weight: 600;
                color: $steps-color;

                .glyphicon {
                    font-size: 1.5rem;
                    width: 17px;
                }
            }

            &Title {
                font-weight: 600;
                color: $steps-color;

                &:hover {
                    color: $steps-color-active;
                }
            }

            &:last-child {
                &.on::before {
                    color: $color-btn-success;
                }

                &::before {
                    content: '\EABA';
                    font-family: icons;
                }

                &::after {
                    content: none;
                }

                .af-steps-list-stepLabel {
                    padding-right: 0;

                    &::after,
                    &::before {
                        display: none;
                    }
                }

                .af-steps-list-stepNumber {
                    font-size: ceil(($font-size-step * 1.1));
                }
            }
        }
    }

    @include media-breakpoint-down(xs) {
        .af-steps-list {
            table-layout: auto;

            &-step {
                min-width: 3rem;
                padding-left: 0;

                &Title {
                    display: none;
                }

                &Number {
                    left: 2rem;
                    z-index: 2;
                    margin-right: 1rem;

                    .glyphicon {
                        font-size: 1.2rem;
                    }
                }

                &.on {
                    .af-steps-list-stepTitle {
                        display: block;
                    }

                    .af-steps-list-stepNumber {
                        margin-right: 0.5rem;

                        .glyphicon {
                            font-size: 1.2rem;
                        }
                    }
                }
            }
        }
    }
}

New Steps with icon

  1. 1
    Previous step
  2. 2
    Previous step
  3. 3
    Previous step
  4. 4
    Previous step
  5.  
    Confirmation
Copied
<div class="af-steps-new">
    <ol class="af-steps-list">
        <li class="af-steps-list-step past" title="Etape 1">
            <div class="af-steps-list-stepLabel">
                <div class="af-steps-list-stepNumber">1</div>
                <div class="af-steps-list-stepTitle">Previous step</div>
                <svg class="glyphicon glyphicon-arrow-rounded-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M76.5,55l-43,43c-2.7,2.7-7.2,2.7-9.9,0c-2.7-2.7-2.7-7.2,0-9.9l38-38l-38-38c-2.7-2.7-2.7-7.2,0-9.9
		c2.7-2.7,7.2-2.7,9.9,0l43,43c1.4,1.4,2,3.2,2,4.9C78.5,51.8,77.8,53.6,76.5,55z"></path>
                </svg>
            </div>
        </li>
        <li class="af-steps-list-step past" title="Etape 2">
            <div class="af-steps-list-stepLabel">
                <div class="af-steps-list-stepNumber">2</div>
                <div class="af-steps-list-stepTitle">Previous step</div>
                <svg class="glyphicon glyphicon-arrow-rounded-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M76.5,55l-43,43c-2.7,2.7-7.2,2.7-9.9,0c-2.7-2.7-2.7-7.2,0-9.9l38-38l-38-38c-2.7-2.7-2.7-7.2,0-9.9
		c2.7-2.7,7.2-2.7,9.9,0l43,43c1.4,1.4,2,3.2,2,4.9C78.5,51.8,77.8,53.6,76.5,55z"></path>
                </svg>
            </div>
        </li>
        <li class="af-steps-list-step past" title="Etape 3">
            <div class="af-steps-list-stepLabel">
                <div class="af-steps-list-stepNumber">3</div>
                <div class="af-steps-list-stepTitle">Previous step</div>
                <svg class="glyphicon glyphicon-arrow-rounded-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M76.5,55l-43,43c-2.7,2.7-7.2,2.7-9.9,0c-2.7-2.7-2.7-7.2,0-9.9l38-38l-38-38c-2.7-2.7-2.7-7.2,0-9.9
		c2.7-2.7,7.2-2.7,9.9,0l43,43c1.4,1.4,2,3.2,2,4.9C78.5,51.8,77.8,53.6,76.5,55z"></path>
                </svg>
            </div>
        </li>
        <li class="af-steps-list-step past" title="Etape 3">
            <div class="af-steps-list-stepLabel">
                <div class="af-steps-list-stepNumber">4</div>
                <div class="af-steps-list-stepTitle">Previous step</div>
                <svg class="glyphicon glyphicon-arrow-rounded-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M76.5,55l-43,43c-2.7,2.7-7.2,2.7-9.9,0c-2.7-2.7-2.7-7.2,0-9.9l38-38l-38-38c-2.7-2.7-2.7-7.2,0-9.9
		c2.7-2.7,7.2-2.7,9.9,0l43,43c1.4,1.4,2,3.2,2,4.9C78.5,51.8,77.8,53.6,76.5,55z"></path>
                </svg>
            </div>
        </li>
        <li class="af-steps-list-step on" title="Etape finale">
            <div class="af-steps-list-stepLabel">
                <div class="af-steps-list-stepNumber">&nbsp;
                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                    </svg>
                </div>
                <div class="af-steps-list-stepTitle">Confirmation</div>
            </div>
        </li>
    </ol>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

// Wizard Steps
// --------------------------------------------------
$steps-bg: $gray-lighter;
$steps-bg-active: $white;
$font-size-step: $font-size-base;
$font-size-step-number: $font-size-base+0.2rem;
$steps-color: $gray-dark;
$steps-color-active: mix($black, $brand-primary, 20%);

.af-steps-new {
    margin-bottom: 2rem;
    background: white;

    .af-steps-list {
        display: flex;
        justify-content: space-around;
        line-height: 3rem;
        padding: 0;
        margin: 0;
        border-bottom: 1px solid $steps-bg;
        list-style: none;
        counter-reset: stepper-counter;

        &-step {
            display: inline-flex;
            font-size: $font-size-step;
            color: $steps-color;
            counter-increment: stepper-counter;

            &.number {
                &::before {
                    content: none;
                }
            }

            &::before {
                content: counter(stepper-counter);
                color: $steps-color;
                margin-right: 0.8rem;
                font-size: $font-size-step-number;
                font-weight: 600;
            }

            &::after {
                content: '\EA12';
                font-family: icons;
            }

            &.on {
                color: $steps-color-active;

                &::before,
                * {
                    color: $steps-color-active;
                }
            }

            &.past {
                color: $color-pager-link;

                &::before {
                    color: $color-pager-link;
                }

                &:hover {
                    color: $steps-color-active;
                }
            }

            &.disabled {
                color: $color-btn-disabled;

                &::before {
                    color: $color-btn-disabled;
                }
            }

            &Label {
                display: inline-flex;
                padding-right: 2rem;
            }

            &Number {
                margin-right: 0.6rem;
                font-size: $font-size-step-number;
                font-weight: 600;
                color: $steps-color;

                .glyphicon {
                    font-size: 1.5rem;
                    width: 17px;
                }
            }

            &Title {
                font-weight: 600;
                color: $steps-color;

                &:hover {
                    color: $steps-color-active;
                }
            }

            &:last-child {
                &.on::before {
                    color: $color-btn-success;
                }

                &::before {
                    content: '\EABA';
                    font-family: icons;
                }

                &::after {
                    content: none;
                }

                .af-steps-list-stepLabel {
                    padding-right: 0;

                    &::after,
                    &::before {
                        display: none;
                    }
                }

                .af-steps-list-stepNumber {
                    font-size: ceil(($font-size-step * 1.1));
                }
            }
        }
    }

    @include media-breakpoint-down(xs) {
        .af-steps-list {
            table-layout: auto;

            &-step {
                min-width: 3rem;
                padding-left: 0;

                &Title {
                    display: none;
                }

                &Number {
                    left: 2rem;
                    z-index: 2;
                    margin-right: 1rem;

                    .glyphicon {
                        font-size: 1.2rem;
                    }
                }

                &.on {
                    .af-steps-list-stepTitle {
                        display: block;
                    }

                    .af-steps-list-stepNumber {
                        margin-right: 0.5rem;

                        .glyphicon {
                            font-size: 1.2rem;
                        }
                    }
                }
            }
        }
    }
}

React interactions

Vous trouverez ici les démos Storybook pour visualiser les interactions du composant.

Vous avez la possibilité de jouer avec les propriétés du composant React sur notre storybook.react storybook

Generales Guidelines

Les guidelines permettent de décrire l'ensemble des règles et des éléments graaphiques pour la conception des interfaces.

Elle sont destinées à être respectées par tous les intervenants d'un projet (UX, Développeurs, PO, etc ...), il s'agit donc d'un référentiel commun.

1) Définition

Le train d’étapes est une représentation visuelle de la position de l’utilisateur dans un parcours composé de plusieurs étapes. Il permet à celui-ci de se repérer et de connaître son niveau d’avancement, mais aussi améliore indirectement le taux de complétion des étapes.

2) Use case

Le train d’étapes sera utilisé pour des parcours comprenant plusieurs étapes.

step

3) DO/DONT

Le train d’étapes ne sera pas utilisé pour un parcours comprenant plus de 7 étapes, on préfèrera couper le parcours en plusieurs sections comportant chacune leurs étapes. Trop d’étapes peuvent envoyer un signal contraire : trop d’étapes pour compléter le parcours = abandon/non complétion de certaines étapes.

4) Utilisation

step

a) Position

Le train d’étape sera toujours le premier élément collé sous le header.

b) Alignement

Le train d’étapes s’étale sur les 12 colonnes, son fond blanc.

c) Contenu

Le train d’étapes doit contenir toutes les étapes, séparé d’icônes [>] entre chacune.

d) Rédaction

Un mot ou une expression par étapes, le plus succint le mieux.

f) Pictogramme

Seule la section finale, de confirmation/validation du parcours pourra utiliser un icône [markup]

g) Action

Cliquer sur une étape précédente ramènera l’utilisateur en arrière.

Style

Un style a été défini pour chaque composant, il possible d'importer uniquement le style du composant sur le projet fin optimiser le bundle.

On liste également les codes couleur utilisés, cliquez-ici pour voir l'ensemble des couleurs du Design System

Imports SASS

@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
@import '@axa-fr/react-toolkit-form-steps/dist/step-form-new.scss';

Typography

Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.

Class Font-size (px/rem) Font-weight Font-family
.af-steps-new 16 / 1 400 Source Sans Pro Regular

Colors

BLEU AXA#00008f$color-axa
BLEU Action#3032c1$color-azur
BLEU Action focus#aaabf9$color-azur-focused
Mercury#e5e5e5$color-mercury
Silver#cccccc $color-silver
Button Disabled#c9c9c9 $color-btn-disabled
Button success #1cc578 $color-btn-success
Button success dark #0d844e $color-btn-success-dark
Button success focuced #bdffe1 $color-btn-success-focused
Button danger #f02849 $color-btn-danger
Button danger dark #8f182c $color-btn-danger-dark
Button danger focuced #ffa0af $color-btn-danger-focused
Policy Privacy © 2020 AXA All Rights Reserved