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.

Classic Input File

Input File *

Glissez/déposez vos fichiers

Copied

<div class="af-form__group row">
    <div class="col-md-2">
        <label class="af-form__group-label" for="inputtext1">Input File *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__file">
            <div class="af-form__file-input">
                <div class="drop-box hidden-mobile" id="uniqueid" style="position: relative;" aria-disabled="false">
                    <div>Glissez/d&eacute;posez vos fichiers</div>
                    <input accept="image/jpeg, image/png, application/*" type="file" style="position: absolute; inset: 0px; opacity: 0.00001; pointer-events: none;" multiple="" autocomplete="off" name="placeImage" />
                </div>
                <button class="af-btn af-btn--file af-btn--hasiconLeft" type="button">
                    <svg class="glyphicon glyphicon-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <path d="M3.125 101.875v-22.917q0-0.917 0.583-1.5t1.5-0.583h87.333q0.917 0 1.583 0.625t0.667 1.458v22.917h-91.667zM11.458 43.542h25v25h25v-25h24.583l-37.083-41.667zM78.125 89.375h8.333v-4.167h-8.333v4.167z"></path>
                    </svg> Parcourir
                </button>
            </div>
        </div>
    </div>
</div>

Copied

@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__file {
        &-input {
            position: relative;
            display: flex;
            background: $white;
            justify-content: space-between;
            cursor: pointer;

            .drop-box {
                padding-left: 1rem;
                border: 2px dashed $color-mercury;
                border-right: 0;
                flex: 1;
                display: flex;
                align-items: center;
                text-align: center;
            }

            .af-btn--file {
                min-width: 8rem;
            }

            &:hover,
            &:focus {
                .drop-box {
                    border-color: $color-axa;
                }
            }
        }

        &-errors {
            color: $color-red-error;
            margin-top: 1rem;
            font-size: 0.9rem;
        }

        &-list {
            list-style: none;
            display: flex;
            padding: 0;
            flex-wrap: wrap;
            font-size: 0.9rem;
        }

        &-line {
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 0.5rem 0;
            border-bottom: 1px solid $color-mercury;
            background: $white;
            width: 100%;

            .glyphicon {
                width: 17px;
            }
        }
    }
}

.af-link {
    &--delete-file {
        border: 0;
        text-decoration: underline;
        background: none;

        &:hover {
            text-decoration: none;
        }
    }
}

Classic Input File with list files

Input File *

Glissez/déposez vos fichiers

Enter the place name, ex : Webcenter

error-file.jpg100Mo
fichier.png100Mo
fichier.csv100ko

Copied

<div class="row af-form__group af-form__group--label-top">
    <div class="col-md-2">
        <label class="af-form__group-label" for="inputtext1">Input File *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__file-input">
            <div class="drop-box hidden-mobile" id="uniqueid" style="position: relative;" aria-disabled="false">
                <div>Glissez/d&eacute;posez vos fichiers</div>
                <input accept="image/jpeg, image/png, application/*" type="file" style="position: absolute; inset: 0px; opacity: 0.00001; pointer-events: none;" autocomplete="off" name="placeImage" />
            </div>
            <button class="af-btn af-btn--file af-btn--hasiconLeft" type="button">
                <svg class="glyphicon glyphicon-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M3.125 101.875v-22.917q0-0.917 0.583-1.5t1.5-0.583h87.333q0.917 0 1.583 0.625t0.667 1.458v22.917h-91.667zM11.458 43.542h25v25h25v-25h24.583l-37.083-41.667zM78.125 89.375h8.333v-4.167h-8.333v4.167z"></path>
                </svg> Parcourir
            </button>
        </div><small class="af-form__help">Enter the place name, ex : Webcenter</small>
        <div class="custom-table-file af-file-table">
            <ul class="af-form__file-list">
                <li class="af-form__file-line"><span>
                        <div class="af-popover__container">
                            <div class="af-popover__container-over" role="presentation">
                                <svg class="glyphicon glyphicon-picture" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                    <path d="M0 91.958v-84.333q0-1.5 1.083-2.583t2.583-1.083h92.667q1.583 0 2.625 1.083t1.042 2.583v84.333q0 1.5-1.042 2.583t-2.625 1.083h-92.667q-1.5 0-2.583-1.083t-1.083-2.583zM8.333 73.708l20.583-15.167 24.833 10.917-6.167-13 24.417-26.5 19.667 24v-41.667h-83.333v61.417zM17.333 33.125q0-4.667 3.25-7.917t7.917-3.25 7.917 3.25 3.25 7.917-3.25 7.917-7.917 3.25-7.917-3.25-3.25-7.917z"></path>
                                </svg>
                            </div>
                        </div>
                    </span><span>error-file.jpg</span><span>100Mo</span>
                    <button class="af-link af-link--delete-file" type="button"><span class="af-link__text">Supprimer</span></button>
                </li>
                <li class="af-form__file-line"><span>
                        <div class="af-popover__container">
                            <div class="af-popover__container-over" role="presentation">
                                <svg class="glyphicon glyphicon-picture" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                    <path d="M0 91.958v-84.333q0-1.5 1.083-2.583t2.583-1.083h92.667q1.583 0 2.625 1.083t1.042 2.583v84.333q0 1.5-1.042 2.583t-2.625 1.083h-92.667q-1.5 0-2.583-1.083t-1.083-2.583zM8.333 73.708l20.583-15.167 24.833 10.917-6.167-13 24.417-26.5 19.667 24v-41.667h-83.333v61.417zM17.333 33.125q0-4.667 3.25-7.917t7.917-3.25 7.917 3.25 3.25 7.917-3.25 7.917-7.917 3.25-7.917-3.25-3.25-7.917z"></path>
                                </svg>
                            </div>
                        </div>
                    </span><span>fichier.png</span><span>100Mo</span>
                    <button class="af-link af-link--delete-file" type="button"><span class="af-link__text">Supprimer</span></button>
                </li>
                <li class="af-form__file-line">
                    <svg class="glyphicon glyphicon-file" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <path d="M9.635 96.722v-92.838q0-0.888 0.565-1.453t1.453-0.565h38.346v40.365h32.292v54.492q0 0.888-0.565 1.453t-1.453 0.565h-68.62q-0.888 0-1.453-0.565t-0.565-1.453zM58.073 34.157v-24.219l24.219 24.219h-24.219z"></path>
                    </svg><span>fichier.csv</span><span>100ko</span>
                    <button class="af-link af-link--delete-file" type="button"><span class="af-link__text">Supprimer</span></button>
                </li>
            </ul>
        </div>
    </div>
</div>

Copied

@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__file {
        &-input {
            position: relative;
            display: flex;
            background: $white;
            justify-content: space-between;
            cursor: pointer;

            .drop-box {
                padding-left: 1rem;
                border: 2px dashed $color-mercury;
                border-right: 0;
                flex: 1;
                display: flex;
                align-items: center;
                text-align: center;
            }

            .af-btn--file {
                min-width: 8rem;
            }

            &:hover,
            &:focus {
                .drop-box {
                    border-color: $color-axa;
                }
            }
        }

        &-errors {
            color: $color-red-error;
            margin-top: 1rem;
            font-size: 0.9rem;
        }

        &-list {
            list-style: none;
            display: flex;
            padding: 0;
            flex-wrap: wrap;
            font-size: 0.9rem;
        }

        &-line {
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 0.5rem 0;
            border-bottom: 1px solid $color-mercury;
            background: $white;
            width: 100%;

            .glyphicon {
                width: 17px;
            }
        }
    }
}

.af-link {
    &--delete-file {
        border: 0;
        text-decoration: underline;
        background: none;

        &:hover {
            text-decoration: none;
        }
    }
}

Classic Input File with errors

Input File *

Glissez/déposez vos fichiers

Enter the place name, ex : Webcenter

Le chargement de certains fichiers a échoué :

refused-extension-file.svg (100ko)
too-big-file.jpg (100Mo)
error-file.jpg (100Mo)

error-file.jpg100Mo
fichier.png100Mo
fichier.csv100ko

Copied

<div class="row af-form__group af-form__group--label-top">
    <div class="col-md-2">
        <label class="af-form__group-label" for="inputtext1">Input File *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__file-input">
            <div class="drop-box hidden-mobile" id="uniqueid" style="position: relative;" aria-disabled="false">
                <div>Glissez/d&eacute;posez vos fichiers</div>
                <input accept="image/jpeg, image/png, application/*" type="file" style="position: absolute; inset: 0px; opacity: 0.00001; pointer-events: none;" autocomplete="off" name="placeImage" />
            </div>
            <button class="af-btn af-btn--file af-btn--hasiconLeft" type="button">
                <svg class="glyphicon glyphicon-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M3.125 101.875v-22.917q0-0.917 0.583-1.5t1.5-0.583h87.333q0.917 0 1.583 0.625t0.667 1.458v22.917h-91.667zM11.458 43.542h25v25h25v-25h24.583l-37.083-41.667zM78.125 89.375h8.333v-4.167h-8.333v4.167z"></path>
                </svg> Parcourir
            </button>
        </div><small class="af-form__help">Enter the place name, ex : Webcenter</small>
        <div class="custom-table-file af-file-table">
            <div class="af-form__file-errors"><span>Le chargement de certains fichiers a &eacute;chou&eacute; :</span>
                <ul class="af-form__file-errors-list">
                    <li>refused-extension-file.svg (100ko)</li>
                    <li>too-big-file.jpg (100Mo)</li>
                    <li>error-file.jpg (100Mo)</li>
                </ul>
            </div>
            <ul class="af-form__file-list">
                <li class="af-form__file-line"><span>
                        <div class="af-popover__container">
                            <div class="af-popover__container-over" role="presentation">
                                <svg class="glyphicon glyphicon-picture" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                    <path d="M0 91.958v-84.333q0-1.5 1.083-2.583t2.583-1.083h92.667q1.583 0 2.625 1.083t1.042 2.583v84.333q0 1.5-1.042 2.583t-2.625 1.083h-92.667q-1.5 0-2.583-1.083t-1.083-2.583zM8.333 73.708l20.583-15.167 24.833 10.917-6.167-13 24.417-26.5 19.667 24v-41.667h-83.333v61.417zM17.333 33.125q0-4.667 3.25-7.917t7.917-3.25 7.917 3.25 3.25 7.917-3.25 7.917-7.917 3.25-7.917-3.25-3.25-7.917z"></path>
                                </svg>
                            </div>
                        </div>
                    </span><span>error-file.jpg</span><span>100Mo</span>
                    <button class="af-link af-link--delete-file" type="button"><span class="af-link__text">Supprimer</span></button>
                </li>
                <li class="af-form__file-line"><span>
                        <div class="af-popover__container">
                            <div class="af-popover__container-over" role="presentation">
                                <svg class="glyphicon glyphicon-picture" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                    <path d="M0 91.958v-84.333q0-1.5 1.083-2.583t2.583-1.083h92.667q1.583 0 2.625 1.083t1.042 2.583v84.333q0 1.5-1.042 2.583t-2.625 1.083h-92.667q-1.5 0-2.583-1.083t-1.083-2.583zM8.333 73.708l20.583-15.167 24.833 10.917-6.167-13 24.417-26.5 19.667 24v-41.667h-83.333v61.417zM17.333 33.125q0-4.667 3.25-7.917t7.917-3.25 7.917 3.25 3.25 7.917-3.25 7.917-7.917 3.25-7.917-3.25-3.25-7.917z"></path>
                                </svg>
                            </div>
                        </div>
                    </span><span>fichier.png</span><span>100Mo</span>
                    <button class="af-link af-link--delete-file" type="button"><span class="af-link__text">Supprimer</span></button>
                </li>
                <li class="af-form__file-line">
                    <svg class="glyphicon glyphicon-file" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <path d="M9.635 96.722v-92.838q0-0.888 0.565-1.453t1.453-0.565h38.346v40.365h32.292v54.492q0 0.888-0.565 1.453t-1.453 0.565h-68.62q-0.888 0-1.453-0.565t-0.565-1.453zM58.073 34.157v-24.219l24.219 24.219h-24.219z"></path>
                    </svg><span>fichier.csv</span><span>100ko</span>
                    <button class="af-link af-link--delete-file" type="button"><span class="af-link__text">Supprimer</span></button>
                </li>
            </ul>
        </div>
    </div>
</div>

Copied

@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__file {
        &-input {
            position: relative;
            display: flex;
            background: $white;
            justify-content: space-between;
            cursor: pointer;

            .drop-box {
                padding-left: 1rem;
                border: 2px dashed $color-mercury;
                border-right: 0;
                flex: 1;
                display: flex;
                align-items: center;
                text-align: center;
            }

            .af-btn--file {
                min-width: 8rem;
            }

            &:hover,
            &:focus {
                .drop-box {
                    border-color: $color-axa;
                }
            }
        }

        &-errors {
            color: $color-red-error;
            margin-top: 1rem;
            font-size: 0.9rem;
        }

        &-list {
            list-style: none;
            display: flex;
            padding: 0;
            flex-wrap: wrap;
            font-size: 0.9rem;
        }

        &-line {
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 0.5rem 0;
            border-bottom: 1px solid $color-mercury;
            background: $white;
            width: 100%;

            .glyphicon {
                width: 17px;
            }
        }
    }
}

.af-link {
    &--delete-file {
        border: 0;
        text-decoration: underline;
        background: none;

        &:hover {
            text-decoration: none;
        }
    }
}

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.

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

Un champ d’upload permet à l’utilisateur de charger un ou plusieurs fichiers sur un serveur.

2) Use case

Un champ d’upload doit être accompagné des formats et tailles de fichiers autorisés.

3) DO/DONT

Un champ d’upload ne doit pas être utilisé pour autre chose que pour charger des fichiers.
Le champ d’upload ne doit pas être utilisé sans son bouton « Choisir un fichier ».

4) Utilisation

a) Position

Comme n’importe quel autre champ de formulaire, le champ d’upload s’affichera à droite de son label.

b) Alignement

Le champ d’upload doit être aligné à gauche sur la colonne des champs de formulaire, en prenant toute la largeur possible vers la droite.

c) Contenu

Le texte dans le bouton upload — ou accompagnant la puce — doit être le plus clair et concis que possible.

d) Rédaction

Aucun pictogramme ne doit être ajouté au placeholder ou au bouton que le pictogramme d’upload déjà présent.

e) Action

Lorsqu’un fichier est déposé/sélectionné, le chargement commence.
Lorsque le chargement est terminé, une ligne avec un pictogramme [√], le nom du fichier et un lien de suppression s’affiche en dessous du champ.
En cas d’erreur, une ligne avec un pictogramme [!] et le nom du fichier s’affiche en dessous du champ. La cause d’erreur sera affichée avec une notification inline.
Plusieurs lignes de fichiers peuvent s’accumuler.

f) États

Actif
Hover
Focus
Erreur
Désactivé

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-all/dist/style/bootstrap/grid.css';
@import '@axa-fr/react-toolkit-button/dist/button.scss';
@import '@axa-fr/react-toolkit-form-core/dist/form.scss';
@import '@axa-fr/react-toolkit-form-input-text/dist/inputtext.scss';
@import '@axa-fr/react-toolkit-form-input-file/dist/file.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-form-file	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

Slash

Design System

Form File

Molecule

Source Code HTML / SASS

Classic Input File

Classic Input File with list files

Classic Input File with errors

React interactions

Generales Guidelines

1) Définition

2) Use case

3) DO/DONT

4) Utilisation

Style

Imports SASS

Typography

Colors