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 Header

Copied

<div class="af-header">
    <div class="af-container af-header__wrapper">
        <header class="af-header__content" role="banner">
            <div class="af-header__name"><a class="af-logo" href="/"><img class="af-logo__brand" src="../../assets/images/slash-logo.svg" alt="Logo Slash Design System" /></a>
                <h2 class="af-header__title">Nom de l&apos;application<small class="af-header__subtitle">Baseline</small></h2>
            </div>
            <div class="af-contrat">
                <svg class="glyphicon glyphicon-info-sign" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M50.382 0.736c-27.365 0-49.549 22.184-49.549 49.55 0 27.364 22.184 49.547 49.549 49.547 27.365 0 49.548-22.183 49.548-49.547 0-27.366-22.183-49.55-49.548-49.55zM58.151 68.517c-3.74 5.613-7.544 9.941-13.944 9.941-4.369-0.712-6.163-3.843-5.214-7.031l8.233-27.269c0.198-0.668-0.135-1.381-0.744-1.594-0.609-0.214-1.799 0.576-2.829 1.702l-4.975 5.988c-0.136-1.003-0.014-2.667-0.014-3.337 3.74-5.612 9.88-10.044 14.046-10.044 3.962 0.407 5.833 3.571 5.144 7.050l-8.29 27.402c-0.111 0.62 0.216 1.246 0.779 1.444 0.609 0.213 1.89-0.576 2.92-1.703l4.975-5.988c0.136 1.002-0.087 2.769-0.087 3.439zM57.043 32.901c-3.149 0-5.701-2.291-5.701-5.671 0-3.378 2.552-5.669 5.701-5.669 3.148 0 5.701 2.291 5.701 5.669-0.001 3.381-2.553 5.671-5.701 5.671z"></path>
                </svg>
                <dl class="af-contrat__list">
                    <dt class="af-contrat__word">Client :</dt>
                    <dd class="af-contrat__def">0123456789 - NOM</dd>
                    <dt class="af-contrat__word">Portefeuille :</dt>
                    <dd class="af-contrat__def">000123456789</dd>
                    <dt class="af-contrat__word">Status :</dt>
                    <dd class="af-contrat__def">Affaire nouvelle</dd>
                </dl>
            </div>
            <div class="af-info-user"><a class="af-info-user__link" href="/profile" title="Voir mon profil"><span class="af-info-user__name">Pierre Martin</span><span class="af-info-user__profile">[Profile]</span></a></div>
        </header>
    </div>
</div>

Copied

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

.af-header {
    &__content {
        padding-bottom: 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
}

@include media-breakpoint-up(sm) {
    .af-header {
        &__wrapper {
            width: 100%;
        }
    }
}

@include media-breakpoint-up(md) {
    .af-header {
        &__wrapper {
            width: nth(nth($container-max-widths, 4), 2);
            max-width: 100%;
        }

        &__content {
            flex-wrap: initial;
        }
    }
}

Header with NavBar

Copied

<div class="af-header">
    <div class="af-container af-header__wrapper">
        <header class="af-header__content" role="banner">
            <div class="af-header__name"><a class="af-logo" href="/"><img class="af-logo__brand" src="../../assets/images/slash-logo.svg" alt="Logo Slash Design System" /></a>
                <h2 class="af-header__title">Nom de l&apos;application<small class="af-header__subtitle">Baseline</small></h2>
            </div>
            <div class="af-contrat">
                <svg class="glyphicon glyphicon-info-sign" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M50.382 0.736c-27.365 0-49.549 22.184-49.549 49.55 0 27.364 22.184 49.547 49.549 49.547 27.365 0 49.548-22.183 49.548-49.547 0-27.366-22.183-49.55-49.548-49.55zM58.151 68.517c-3.74 5.613-7.544 9.941-13.944 9.941-4.369-0.712-6.163-3.843-5.214-7.031l8.233-27.269c0.198-0.668-0.135-1.381-0.744-1.594-0.609-0.214-1.799 0.576-2.829 1.702l-4.975 5.988c-0.136-1.003-0.014-2.667-0.014-3.337 3.74-5.612 9.88-10.044 14.046-10.044 3.962 0.407 5.833 3.571 5.144 7.050l-8.29 27.402c-0.111 0.62 0.216 1.246 0.779 1.444 0.609 0.213 1.89-0.576 2.92-1.703l4.975-5.988c0.136 1.002-0.087 2.769-0.087 3.439zM57.043 32.901c-3.149 0-5.701-2.291-5.701-5.671 0-3.378 2.552-5.669 5.701-5.669 3.148 0 5.701 2.291 5.701 5.669-0.001 3.381-2.553 5.671-5.701 5.671z"></path>
                </svg>
                <dl class="af-contrat__list">
                    <dt class="af-contrat__word">Client :</dt>
                    <dd class="af-contrat__def">0123456789 - NOM</dd>
                    <dt class="af-contrat__word">Portefeuille :</dt>
                    <dd class="af-contrat__def">000123456789</dd>
                    <dt class="af-contrat__word">Status :</dt>
                    <dd class="af-contrat__def">Affaire nouvelle</dd>
                </dl>
            </div>
            <div class="af-info-user"><a class="af-info-user__link" href="/profile" title="Voir mon profil"><span class="af-info-user__name">Pierre Martin</span><span class="af-info-user__profile">[Profile]</span></a></div>
        </header>
    </div>
</div>
<div class="af-nav-container">
    <button class="mask fade show" type="button"></button>
    <nav class="af-nav af-drawer left show" role="navigation" aria-label="Menu principal">
        <div class="af-container af-nav__wrapper">
            <div class="af-nav__aside-header">
                <h4 class="af-nav__aside-title">Menu</h4><a class="af-nav__aside-close" href="#" role="button" aria-haspopup="true" aria-controls="idmenu" id="menubutton">×</a>
            </div>
            <ul class="af-nav__list" role="menubar" aria-labelledby="menubutton" id="idmenu">
                <li class="af-nav__item af-nav__item--active" role="none"><a class="af-nav__link" role="menuitem" href="/home" tabindex="0">Home</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/form" tabindex="-1">Forms</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/fileupload" tabindex="-1">Fileupload</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/table" tabindex="-1">Table</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/collapse" tabindex="-1">Accordions</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/table" tabindex="-1"> Drag n drop</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/alert" tabindex="-1">Alerts</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/contributing" tabindex="-1">Validation</a>
                </li>
                <li class="af-nav__item af-nav__item--haschild" role="none"><a class="af-nav__link" role="menuitem" href="/doc" tabindex="-1" aria-haspopup="aria-haspopup" aria-expanded="aria-expanded">Doc</a>
                    <svg class="glyphicon glyphicon-arrow-xs-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <path d="M86.799 36.75h-73.299l36.654 35.636 36.645-35.636z"></path>
                    </svg>
                    <ul class="af-nav__list af-nav__list--children" role="menu" aria-label="Doc">
                        <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/doc/sous-lien" tabindex="-1">Sous lien</a></li>
                        <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/doc/sous-lien2" tabindex="-1">Sous lien 2</a></li>
                        <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/doc/sous-lien3" tabindex="-1">Sous lien 3</a></li>
                        <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/doc/sous-lien4" tabindex="-1">Sous lien 4</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</div>

Copied

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

.af-header {
    &__content {
        padding-bottom: 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
}

@include media-breakpoint-up(sm) {
    .af-header {
        &__wrapper {
            width: 100%;
        }
    }
}

@include media-breakpoint-up(md) {
    .af-header {
        &__wrapper {
            width: nth(nth($container-max-widths, 4), 2);
            max-width: 100%;
        }

        &__content {
            flex-wrap: initial;
        }
    }
}

Header with TitleBar

Slash Design SystemSous titre

lien titlebar

Copied

<div class="af-header">
    <div class="af-container af-header__wrapper">
        <header class="af-header__content" role="banner">
            <div class="af-header__name"><a class="af-logo" href="/"><img class="af-logo__brand" src="../../assets/images/slash-logo.svg" alt="Logo Slash Design System" /></a>
                <h2 class="af-header__title">Nom de l&apos;application<small class="af-header__subtitle">Baseline</small></h2>
            </div>
            <div class="af-contrat">
                <svg class="glyphicon glyphicon-info-sign" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M50.382 0.736c-27.365 0-49.549 22.184-49.549 49.55 0 27.364 22.184 49.547 49.549 49.547 27.365 0 49.548-22.183 49.548-49.547 0-27.366-22.183-49.55-49.548-49.55zM58.151 68.517c-3.74 5.613-7.544 9.941-13.944 9.941-4.369-0.712-6.163-3.843-5.214-7.031l8.233-27.269c0.198-0.668-0.135-1.381-0.744-1.594-0.609-0.214-1.799 0.576-2.829 1.702l-4.975 5.988c-0.136-1.003-0.014-2.667-0.014-3.337 3.74-5.612 9.88-10.044 14.046-10.044 3.962 0.407 5.833 3.571 5.144 7.050l-8.29 27.402c-0.111 0.62 0.216 1.246 0.779 1.444 0.609 0.213 1.89-0.576 2.92-1.703l4.975-5.988c0.136 1.002-0.087 2.769-0.087 3.439zM57.043 32.901c-3.149 0-5.701-2.291-5.701-5.671 0-3.378 2.552-5.669 5.701-5.669 3.148 0 5.701 2.291 5.701 5.669-0.001 3.381-2.553 5.671-5.701 5.671z"></path>
                </svg>
                <dl class="af-contrat__list">
                    <dt class="af-contrat__word">Client :</dt>
                    <dd class="af-contrat__def">0123456789 - NOM</dd>
                    <dt class="af-contrat__word">Portefeuille :</dt>
                    <dd class="af-contrat__def">000123456789</dd>
                    <dt class="af-contrat__word">Status :</dt>
                    <dd class="af-contrat__def">Affaire nouvelle</dd>
                </dl>
            </div>
            <div class="af-info-user"><a class="af-info-user__link" href="/profile" title="Voir mon profil"><span class="af-info-user__name">Pierre Martin</span><span class="af-info-user__profile">[Profile]</span></a></div>
        </header>
    </div>
</div>
<div class="af-title-bar">
    <div class="af-title-bar__wrapper af-container">
        <button class="af-btn-circle af-title-bar__mobile-menu">
            <div class="af-btn__wrapper">
                <svg class="glyphicon glyphicon-menu-hamburger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M3.649,1.21h92.701c0.65,0,1.222,0.243,1.708,0.73c0.487,0.49,0.732,1.057,0.732,1.71v14.638
	c0,0.65-0.245,1.221-0.732,1.707c-0.486,0.488-1.058,0.732-1.708,0.732H3.649c-0.653,0-1.219-0.244-1.708-0.732
	c-0.489-0.486-0.732-1.057-0.732-1.707V3.65c0-0.653,0.243-1.22,0.732-1.71C2.431,1.453,2.996,1.21,3.649,1.21L3.649,1.21z
	 M3.649,40.241h92.701c0.65,0,1.222,0.244,1.708,0.729c0.487,0.486,0.732,1.059,0.732,1.709v14.638c0,0.65-0.245,1.222-0.732,1.708
	c-0.486,0.488-1.058,0.736-1.708,0.736H3.649c-0.653,0-1.219-0.248-1.708-0.736c-0.489-0.486-0.732-1.058-0.732-1.708V42.679
	c0-0.65,0.243-1.223,0.732-1.709C2.431,40.485,2.996,40.241,3.649,40.241L3.649,40.241z M3.649,79.272h92.701
	c0.65,0,1.222,0.241,1.708,0.731c0.487,0.49,0.732,1.058,0.732,1.712v14.638c0,0.65-0.245,1.219-0.732,1.708
	c-0.486,0.485-1.058,0.729-1.708,0.729H3.649c-0.653,0-1.219-0.243-1.708-0.729c-0.489-0.489-0.732-1.058-0.732-1.708V81.716
	c0-0.654,0.243-1.222,0.732-1.712S2.996,79.272,3.649,79.272L3.649,79.272z"></path>
                </svg>
            </div>
        </button>
        <h1 class="af-title-bar__title">Slash Design System<small class="af-title-bar__subtitle">Sous titre</small></h1>
        <div class="af-title-bar__actions"><a class="af-title-bar__link" href="#lien" title="lien titlebar">lien titlebar</a><a class="af-btn--circle" href="#enregistrer" title="Enregistrer" role="button" tabindex="0">
                <svg class="glyphicon glyphicon-floppy-disk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M3.125 92.5v-83.333q0-1.667 1.208-2.917t2.958-1.25h20.833v25h41.667v-25h8.333l16.667 16.667v70.833q0 1.75-1.25 2.958t-2.917 1.208h-12.5v-33.333h-58.333v33.333h-12.5q-1.75 0-2.958-1.208t-1.208-2.958zM53.125 21.667h8.333v-16.667h-8.333v16.667z"></path>
                </svg></a><a class="af-btn--circle" href="#imprimer" title="Imprimer" role="button" tabindex="0">
                <svg class="glyphicon glyphicon-print" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M1.563 90.667v-56.51h16.146l8.073 16.146h48.438l8.073-16.146h16.146v56.51h-16.146v-16.146h-64.583v16.146h-16.146zM21.987 31.816l3.229 10.010h47.792l5.005-10.010-7.588-27.932q-0.162-0.888-0.807-1.453t-1.453-0.565h-36.328q-0.807 0-1.453 0.565t-0.807 1.453zM24.247 96.803l3.068-12.271q0.162-0.807 0.928-1.372t1.574-0.565h40.365q0.807 0 1.574 0.565t0.928 1.372l3.068 12.271q0.162 0.807-0.283 1.372t-1.251 0.565h-48.438q-0.807 0-1.251-0.565t-0.283-1.372z"></path>
                </svg></a></div>
    </div>
</div>

Copied

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

.af-header {
    &__content {
        padding-bottom: 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
}

@include media-breakpoint-up(sm) {
    .af-header {
        &__wrapper {
            width: 100%;
        }
    }
}

@include media-breakpoint-up(md) {
    .af-header {
        &__wrapper {
            width: nth(nth($container-max-widths, 4), 2);
            max-width: 100%;
        }

        &__content {
            flex-wrap: initial;
        }
    }
}

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.

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-layout-header/dist/Header/header.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-slider	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

Header

Organisms

Source Code HTML / SASS

Classic Header

Nom de l'applicationBaseline

Header with NavBar

Nom de l'applicationBaseline

Header with TitleBar

Nom de l'applicationBaseline

Slash Design SystemSous titre

React interactions

Generales Guidelines

Style

Imports SASS

Typography

Colors