List

Atom

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 List

  • Olivier Youf
  • Arnaud Bernard
  • Guillaume Chervet
  • Samuel Gomez
  • Jean-Baptiste Rudant
  • Romain Petigny
Copied
<div class="tk-block-demo">
    <ul class="af-list">
        <li class="af-list__item">Olivier Youf</li>
        <li class="af-list__item">Arnaud Bernard</li>
        <li class="af-list__item">Guillaume Chervet</li>
        <li class="af-list__item">Samuel Gomez</li>
        <li class="af-list__item">Jean-Baptiste Rudant</li>
        <li class="af-list__item">Romain Petigny</li>
    </ul>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-list {
    &--check {
        list-style: none;
        padding-left: 1rem;

        .af-list__item {
            margin-bottom: 0.5rem;
            display: flex;
        }

        .glyphicon-ok {
            margin: 0.5rem 0.5rem 0 0;
            color: $color-malachite;
            width: 17px;
        }
    }
}

List With Icon

  • CSS et SASS
  • ReactJS
  • ES6
  • GIT
  • Webpack
  • Typescript
  • ReasonML
Copied
<div class="tk-block-demo">
    <ul class="af-list af-list--check">
        <li class="af-list__item">
            <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> CSS et SASS
        </li>
        <li class="af-list__item">
            <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> ReactJS
        </li>
        <li class="af-list__item">
            <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> ES6
        </li>
        <li class="af-list__item">
            <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> GIT
        </li>
        <li class="af-list__item">
            <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> Webpack
        </li>
        <li class="af-list__item">
            <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> Typescript
        </li>
        <li class="af-list__item">
            <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> ReasonML
        </li>
    </ul>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-list {
    &--check {
        list-style: none;
        padding-left: 1rem;

        .af-list__item {
            margin-bottom: 0.5rem;
            display: flex;
        }

        .glyphicon-ok {
            margin: 0.5rem 0.5rem 0 0;
            color: $color-malachite;
            width: 17px;
        }
    }
}

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

Pourquoi créons-nous des listes? Parce qu'ils constituent un moyen naturel d'optimiser la scannabilité et de résumer le contenu. Les listes sont un moyen de se souvenir, de résumer et de faire avancer les choses. Et dans la conception de l'interface utilisateur, ce n'est pas différent

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-list/dist/list.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-list 16 / 1 400 Source Sans Pro Regular

Colors

Mercury#e5e5e5$color-mercury
Silver#cccccc $color-silver
Policy Privacy © 2020 AXA All Rights Reserved