Panel

Organisms

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

Panel

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque similique, quis aliquam temporibus velit ullam, quos quasi? Quod modi asperiores incidunt, velit repellendus, totam saepe quaerat voluptates cum quo facere.

Copied
<article class="af-panel">
    <header class="af-panel__header"><span class="af-panel__title">Title</span></header>
    <section class="af-panel__content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque similique, quis aliquam temporibus velit ullam, quos quasi? Quod modi asperiores incidunt, velit repellendus, totam saepe quaerat voluptates cum quo facere.</p>
    </section>
    <footer class="af-panel__footer"><a class="af-panel__footer-link" href="https://www.qwant.com" target="_blank" rel="noopener noreferrer">
            <svg class="glyphicon glyphicon-new-window" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 100">
                <path d="M0 65.417q0 13.75 9.792 23.542t23.542 9.792h25q13.583 0 23.458-9.792t9.875-23.542v-8.167l-6.5-6.083-10.167 10.25v12.333q0 3.417-2.458 5.875t-5.875 2.458h-41.667q-3.417 0-5.875-2.458t-2.458-5.875v-41.667q0-3.417 2.458-5.875t5.875-2.458h13l9.833-10.167-6.167-6.5h-8.333q-13.75 0-23.542 9.792t-9.792 23.542v25zM41.333 39.667l29.417-28.5-12.417-12.417h41.667v41.667l-12.417-12.417-28.5 29.417z"></path>
            </svg><span> Search with Qwant</span></a></footer>
</article>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

$color-headpanel-default: $color-axa;
$color-footpanel-default: $color-axa;
$color-border-default: $color-blue-lighter;

.af-panel {
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    background: $white;

    &__header {
        background: $color-headpanel-default;
        border-bottom: 1px solid $color-border-default;
        padding: 0.5rem 3rem 0.5rem 1rem;
        position: relative;
        color: $white;

        .sps-icons,
        .glyphicon {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translate(0, -50%);
            width: 20px;
            color: $white;
            fill: $white;
            width: 17px;
        }
    }

    &__title {
        font-size: 1.25em;
        font-weight: normal;
        margin: 0;
        color: $white;
    }

    &__content {
        padding: 0.625rem 0.75rem 0.875rem 1.313rem;
        flex-grow: 1;
        position: relative;
        overflow: hidden;

        &-notice {
            line-height: 1em;
            position: absolute;
            bottom: 1rem;
        }
    }

    &__footer {
        background: $color-footpanel-default;
        border-top: 1px solid $color-border-default;
        padding: 0.5rem 1rem;
        position: relative;
        color: $white;

        &-link {
            color: $white;

            &:hover,
            :focus {
                color: $white;
            }
        }

        .glyphicon {
            vertical-align: middle;
            width: 17px;
        }
    }

    &__list {
        list-style: none;
        padding: 0;

        &-item {
            line-height: 2em;
        }
    }

    &__def-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid $color-silver;
        flex-wrap: wrap;
        margin: 0;
        padding: 0.5rem 1rem;

        &--ajust {
            background: $color-silver;
            color: $white;
        }

        &--result {
            background: $color-malachite;
            color: $white;

            .af-panel {
                &__terme {
                    flex-basis: 30%;
                    font-size: 1.5em;
                    font-weight: 600;
                    line-height: 1.2em;
                }

                &__def {
                    flex-basis: 70%;

                    &-price {
                        font-size: 3em;
                    }

                    &-month {
                        font-size: 1.3em;
                        font-weight: 200;
                    }

                    &-byyear {
                        display: block;
                        font-size: 1.3em;
                        font-weight: 200;
                    }
                }
            }
        }
    }

    &__terme {
        flex-basis: 50%;
        font-weight: 200;
    }

    &__def {
        flex-basis: 50%;
        font-weight: 600;
        text-align: right;
    }

    /* Déclinaisons */

    &--selection {
        .af-panel {
            &__content {
                padding: 0;
            }

            &__footer {
                text-align: right;
                background: $white;
                border: 0;

                &-link {
                    color: $color-axa;
                }
            }
        }
    }

    @include generate-universes() {
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);

        .af-panel {
            &__header {
                border-bottom-color: $color;
                background: $color;
                padding: 0.5rem 3rem 0.5rem 1rem;

                .sps-icons,
                .glyphicon {
                    color: $color;
                    fill: $color;
                }
            }

            &__title {
                color: mix($color, white, 10%);
            }

            &__footer {
                background: $color;
                border-top-color: $color;
                color: mix($color, white, 10%);

                &-link {
                    color: mix($color, white, 10%);

                    &:hover,
                    :focus {
                        color: mix($color, white, 10%);
                    }
                }
            }
        }
    }

    .af-badge {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translate(0, -50%);
    }
}

Panel list

Synthèse du besoin2
  • Marié, 2 enfants
  • Artisan
  • Renault Clio
  • Achat à crédit
  • Usage privé/travail
  • Bonus 35%
  • Avec antécédent
  • 0 sinitre depuis 3 ans
  • 1 permis de - de 3 ans / 3 véhicules au foyer
Copied
<article class="af-panel">
    <header class="af-panel__header"><span class="af-panel__title">Synthèse du besoin<span class="af-badge af-badge--info">2</span></span></header>
    <section class="af-panel__content">
        <ul class="af-panel__list">
            <li class="af-panel__list-item">Marié, 2 enfants</li>
            <li class="af-panel__list-item">Artisan</li>
            <li class="af-panel__list-item">Renault Clio</li>
            <li class="af-panel__list-item">Achat à crédit</li>
            <li class="af-panel__list-item">Usage privé/travail</li>
            <li class="af-panel__list-item">Bonus 35%</li>
            <li class="af-panel__list-item">Avec antécédent</li>
            <li class="af-panel__list-item">0 sinitre depuis 3 ans</li>
            <li class="af-panel__list-item">1 permis de - de 3 ans / 3 véhicules au foyer</li>
        </ul>
    </section>
</article>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

$color-headpanel-default: $color-axa;
$color-footpanel-default: $color-axa;
$color-border-default: $color-blue-lighter;

.af-panel {
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    background: $white;

    &__header {
        background: $color-headpanel-default;
        border-bottom: 1px solid $color-border-default;
        padding: 0.5rem 3rem 0.5rem 1rem;
        position: relative;
        color: $white;

        .sps-icons,
        .glyphicon {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translate(0, -50%);
            width: 20px;
            color: $white;
            fill: $white;
            width: 17px;
        }
    }

    &__title {
        font-size: 1.25em;
        font-weight: normal;
        margin: 0;
        color: $white;
    }

    &__content {
        padding: 0.625rem 0.75rem 0.875rem 1.313rem;
        flex-grow: 1;
        position: relative;
        overflow: hidden;

        &-notice {
            line-height: 1em;
            position: absolute;
            bottom: 1rem;
        }
    }

    &__footer {
        background: $color-footpanel-default;
        border-top: 1px solid $color-border-default;
        padding: 0.5rem 1rem;
        position: relative;
        color: $white;

        &-link {
            color: $white;

            &:hover,
            :focus {
                color: $white;
            }
        }

        .glyphicon {
            vertical-align: middle;
            width: 17px;
        }
    }

    &__list {
        list-style: none;
        padding: 0;

        &-item {
            line-height: 2em;
        }
    }

    &__def-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid $color-silver;
        flex-wrap: wrap;
        margin: 0;
        padding: 0.5rem 1rem;

        &--ajust {
            background: $color-silver;
            color: $white;
        }

        &--result {
            background: $color-malachite;
            color: $white;

            .af-panel {
                &__terme {
                    flex-basis: 30%;
                    font-size: 1.5em;
                    font-weight: 600;
                    line-height: 1.2em;
                }

                &__def {
                    flex-basis: 70%;

                    &-price {
                        font-size: 3em;
                    }

                    &-month {
                        font-size: 1.3em;
                        font-weight: 200;
                    }

                    &-byyear {
                        display: block;
                        font-size: 1.3em;
                        font-weight: 200;
                    }
                }
            }
        }
    }

    &__terme {
        flex-basis: 50%;
        font-weight: 200;
    }

    &__def {
        flex-basis: 50%;
        font-weight: 600;
        text-align: right;
    }

    /* Déclinaisons */

    &--selection {
        .af-panel {
            &__content {
                padding: 0;
            }

            &__footer {
                text-align: right;
                background: $white;
                border: 0;

                &-link {
                    color: $color-axa;
                }
            }
        }
    }

    @include generate-universes() {
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);

        .af-panel {
            &__header {
                border-bottom-color: $color;
                background: $color;
                padding: 0.5rem 3rem 0.5rem 1rem;

                .sps-icons,
                .glyphicon {
                    color: $color;
                    fill: $color;
                }
            }

            &__title {
                color: mix($color, white, 10%);
            }

            &__footer {
                background: $color;
                border-top-color: $color;
                color: mix($color, white, 10%);

                &-link {
                    color: mix($color, white, 10%);

                    &:hover,
                    :focus {
                        color: mix($color, white, 10%);
                    }
                }
            }
        }
    }

    .af-badge {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translate(0, -50%);
    }
}

Panel selection

Votre sélection
Socle de garanties
7,00 € / mois
Mes proches et moi
12,00 € / mois
Mes travaux
15,00 € / mois
Ajustements
-2,00 € / mois
Tarif mensuel
32,00 €/ moisSoit 768,00 € / an
Copied
<article class="af-panel af-panel--selection">
    <header class="af-panel__header"><span class="af-panel__title">Votre sélection</span></header>
    <section class="af-panel__content">
        <dl class="af-panel__def-list">
            <dt class="af-panel__terme">Socle de garanties</dt>
            <dd class="af-panel__def">7,00 € / mois</dd>
        </dl>
        <dl class="af-panel__def-list">
            <dt class="af-panel__terme">Mes proches et moi</dt>
            <dd class="af-panel__def">12,00 € / mois</dd>
            <dt class="af-panel__terme">Mes travaux</dt>
            <dd class="af-panel__def">15,00 € / mois</dd>
        </dl>
        <dl class="af-panel__def-list af-panel__def-list--ajust">
            <dt class="af-panel__terme">Ajustements</dt>
            <dd class="af-panel__def">-2,00 € / mois</dd>
        </dl>
        <dl class="af-panel__def-list af-panel__def-list--result">
            <dt class="af-panel__terme">Tarif mensuel</dt>
            <dd class="af-panel__def"><b class="af-panel__def-price">32,00 €</b><span class="af-panel__def-month">/ mois</span><small class="af-panel__def-byyear">Soit 768,00 € / an</small></dd>
        </dl>
    </section>
    <footer class="af-panel__footer"><a class="af-panel__footer-link" href="" role="button">
            <svg class="glyphicon glyphicon-cog" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M2.167 50.229q0 2.75 0.5 6.167l12.583 3.167 0.167 0.5q1.167 4.083 3.167 7.75l0.25 0.417-6.667 11.167q3.75 4.917 8.75 8.75l11.083-6.75 0.417 0.25q3.75 2.167 7.833 3.25l0.417 0.167 3.167 12.583q3.333 0.417 6.167 0.417 2.25 0 6.167-0.417l3.167-12.583 0.5-0.167q3.833-1.083 7.75-3.25l0.417-0.25 11.167 6.75q4.667-3.667 8.667-8.75l-6.667-11.167 0.25-0.417q2-3.667 3.25-7.75l0.083-0.5 12.667-3.167q0.417-3.333 0.417-6.167 0-2.333-0.417-6.083l-12.667-3.167-0.083-0.5q-1.333-4.25-3.25-7.75l-0.25-0.417 6.667-11.167q-3.667-4.833-8.667-8.75l-11.167 6.75-0.417-0.25q-3.75-2.083-7.75-3.25l-0.5-0.083-3.167-12.667q-3.333-0.417-6.167-0.417-2.25 0-6.167 0.417l-3.167 12.667-0.417 0.083q-4.167 1.167-7.833 3.25l-0.417 0.25-11.083-6.75q-4.917 3.917-8.75 8.75l6.667 11.167-0.25 0.417q-2.083 3.917-3.167 7.75l-0.167 0.5-12.583 3.167q-0.5 4-0.5 6.083zM32.083 50.229q0-7.333 5.25-12.583t12.667-5.25 12.667 5.25 5.25 12.583q0 7.417-5.25 12.667t-12.667 5.25-12.667-5.25-5.25-12.667z"></path>
            </svg><span> Ajustements</span></a></footer>
</article>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

$color-headpanel-default: $color-axa;
$color-footpanel-default: $color-axa;
$color-border-default: $color-blue-lighter;

.af-panel {
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    background: $white;

    &__header {
        background: $color-headpanel-default;
        border-bottom: 1px solid $color-border-default;
        padding: 0.5rem 3rem 0.5rem 1rem;
        position: relative;
        color: $white;

        .sps-icons,
        .glyphicon {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translate(0, -50%);
            width: 20px;
            color: $white;
            fill: $white;
            width: 17px;
        }
    }

    &__title {
        font-size: 1.25em;
        font-weight: normal;
        margin: 0;
        color: $white;
    }

    &__content {
        padding: 0.625rem 0.75rem 0.875rem 1.313rem;
        flex-grow: 1;
        position: relative;
        overflow: hidden;

        &-notice {
            line-height: 1em;
            position: absolute;
            bottom: 1rem;
        }
    }

    &__footer {
        background: $color-footpanel-default;
        border-top: 1px solid $color-border-default;
        padding: 0.5rem 1rem;
        position: relative;
        color: $white;

        &-link {
            color: $white;

            &:hover,
            :focus {
                color: $white;
            }
        }

        .glyphicon {
            vertical-align: middle;
            width: 17px;
        }
    }

    &__list {
        list-style: none;
        padding: 0;

        &-item {
            line-height: 2em;
        }
    }

    &__def-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid $color-silver;
        flex-wrap: wrap;
        margin: 0;
        padding: 0.5rem 1rem;

        &--ajust {
            background: $color-silver;
            color: $white;
        }

        &--result {
            background: $color-malachite;
            color: $white;

            .af-panel {
                &__terme {
                    flex-basis: 30%;
                    font-size: 1.5em;
                    font-weight: 600;
                    line-height: 1.2em;
                }

                &__def {
                    flex-basis: 70%;

                    &-price {
                        font-size: 3em;
                    }

                    &-month {
                        font-size: 1.3em;
                        font-weight: 200;
                    }

                    &-byyear {
                        display: block;
                        font-size: 1.3em;
                        font-weight: 200;
                    }
                }
            }
        }
    }

    &__terme {
        flex-basis: 50%;
        font-weight: 200;
    }

    &__def {
        flex-basis: 50%;
        font-weight: 600;
        text-align: right;
    }

    /* Déclinaisons */

    &--selection {
        .af-panel {
            &__content {
                padding: 0;
            }

            &__footer {
                text-align: right;
                background: $white;
                border: 0;

                &-link {
                    color: $color-axa;
                }
            }
        }
    }

    @include generate-universes() {
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);

        .af-panel {
            &__header {
                border-bottom-color: $color;
                background: $color;
                padding: 0.5rem 3rem 0.5rem 1rem;

                .sps-icons,
                .glyphicon {
                    color: $color;
                    fill: $color;
                }
            }

            &__title {
                color: mix($color, white, 10%);
            }

            &__footer {
                background: $color;
                border-top-color: $color;
                color: mix($color, white, 10%);

                &-link {
                    color: mix($color, white, 10%);

                    &:hover,
                    :focus {
                        color: mix($color, white, 10%);
                    }
                }
            }
        }
    }

    .af-badge {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translate(0, -50%);
    }
}

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.

No guideline yet, coming soon ...

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-panel/dist/panel.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-panel 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