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 Form Filter
Filtrer
Reset- Nom du client
- N° Client
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id impedit aliquam soluta optio in beatae repudiandae tempore libero a expedita ullam minima, illum ipsam tempora omnis! Similique quibusdam fugit et.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id impedit aliquam soluta optio in beatae repudiandae tempore libero a expedita ullam minima, illum ipsam tempora omnis! Similique quibusdam fugit et.
Aide à la saisie
Aide à la saisie
Copied
<div class="row">
<div class="col col-sm-12 col-md-12 col-lg-6 col-xl-4">
<div class="af-filter">
<article class="af-panel">
<header class="af-panel__header">
<h3 class="af-panel__title">Filtrer</h3><a class="af-panel__reset" href="#reset" title="Ré-initialiser les filtres de recherche">
<svg class="glyphicon glyphicon-reset" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M5.125,34.184V0.851l12.083,12.083C25.93,6.156,35.791,2.767,46.791,2.767c6.555,0,12.791,1.264,18.708,3.792
c5.917,2.528,11.028,5.945,15.333,10.25c4.305,4.305,7.722,9.416,10.25,15.333c2.528,5.917,3.792,12.153,3.792,18.708l0.001,0.001
h-0.003c0,0.036,0.003,0.071,0.003,0.107c0,26.615-21.576,48.191-48.191,48.191c-11.067,0-21.255-3.74-29.39-10.012l8.337-9.381
c5.902,4.322,13.177,6.879,21.053,6.879c19.704,0,35.677-15.973,35.677-35.677c0-9.385-3.629-17.918-9.553-24.287l0.045-0.05
c-0.294-0.314-0.587-0.628-0.895-0.936c-6.945-6.945-15.334-10.417-25.167-10.417c-7.5,0-14.361,2.222-20.583,6.667l12.25,12.25
H5.125z"></path>
</svg><span class="af-panel__reset-text">Reset</span></a>
</header>
<section class="af-panel__content">
<ul class="af-filter-selected">
<li class="af-filter-selected__item"><span class="af-filter-selected__item-text">Nom du client</span>
<svg class="glyphicon glyphicon-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M90.086 0.888l-40.086 40.086-40.086-40.086-9.026 9.026 40.086 40.086-40.086 40.086 9.026 9.026 40.086-40.086 40.086 40.086 9.026-9.026-40.086-40.086 40.086-40.086z"></path>
</svg>
</li>
<li class="af-filter-selected__item"><span class="af-filter-selected__item-text">N° Client</span>
<svg class="glyphicon glyphicon-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M90.086 0.888l-40.086 40.086-40.086-40.086-9.026 9.026 40.086 40.086-40.086 40.086 9.026 9.026 40.086-40.086 40.086 40.086 9.026-9.026-40.086-40.086 40.086-40.086z"></path>
</svg>
</li>
</ul>
<div class="af-accordion af-accordion--arrow-right" role="tablist" aria-multiselectable="true">
<div class="af-accordion__item">
<div class="af-accordion__item-header" role="tab" id="headingOne">
<h3 class="af-accordion__item-title" role="intera">
<svg class="glyphicon glyphicon-menu-up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M1.625,83.803c-0.727-0.329-1.092-1.025-1.092-2.086V65.821c0-0.86,0.295-1.622,0.893-2.28l46.785-46.79
c0.531-0.466,1.126-0.699,1.789-0.699s1.259,0.233,1.792,0.699l46.785,46.79c0.596,0.662,0.891,1.422,0.891,2.28v15.896
c0,1.061-0.363,1.757-1.092,2.086c-0.727,0.331-1.484,0.099-2.281-0.697l-46.09-46.092L3.914,83.105
c-0.797,0.796-1.553,1.028-2.281,0.697H1.625z"></path>
</svg><a class="af-accordion__item-toggle" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Socle de garantie</a>
</h3>
</div>
<div class="af-accordion__collapse af-accordion__collapse--open" role="tabpanel" aria-labelledby="headingOne" id="collapseOne">
<div class="af-accordion__block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id impedit aliquam soluta optio in beatae repudiandae tempore libero a expedita ullam minima, illum ipsam tempora omnis! Similique quibusdam fugit et.</div>
</div>
</div>
<div class="af-accordion__item">
<div class="af-accordion__item-header" role="tab" id="headingTwo">
<h3 class="af-accordion__item-title" role="intera">
<svg class="glyphicon glyphicon-menu-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M98.4,16.2c0.7,0.3,1.1,1,1.1,2.1v15.9c0,0.9-0.3,1.6-0.9,2.3L51.8,83.2c-0.5,0.5-1.1,0.7-1.8,0.7
s-1.3-0.2-1.8-0.7L1.4,36.5c-0.6-0.7-0.9-1.4-0.9-2.3V18.3c0-1.1,0.4-1.8,1.1-2.1c0.7-0.3,1.5-0.1,2.3,0.7L50,63l46.1-46.1
C96.9,16.1,97.6,15.9,98.4,16.2L98.4,16.2z"></path>
</svg><a class="af-accordion__item-toggle" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">N° contrat</a>
</h3>
</div>
<div class="af-accordion__collapse" role="tabpanel" aria-labelledby="headingTwo" id="collapseTwo">
<div class="af-accordion__block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id impedit aliquam soluta optio in beatae repudiandae tempore libero a expedita ullam minima, illum ipsam tempora omnis! Similique quibusdam fugit et.</div>
</div>
</div>
<div class="af-accordion__item">
<div class="af-accordion__item-header" role="tab" id="headingThree">
<h3 class="af-accordion__item-title" role="intera">
<svg class="glyphicon glyphicon-menu-up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M1.625,83.803c-0.727-0.329-1.092-1.025-1.092-2.086V65.821c0-0.86,0.295-1.622,0.893-2.28l46.785-46.79
c0.531-0.466,1.126-0.699,1.789-0.699s1.259,0.233,1.792,0.699l46.785,46.79c0.596,0.662,0.891,1.422,0.891,2.28v15.896
c0,1.061-0.363,1.757-1.092,2.086c-0.727,0.331-1.484,0.099-2.281-0.697l-46.09-46.092L3.914,83.105
c-0.797,0.796-1.553,1.028-2.281,0.697H1.625z"></path>
</svg><a class="af-accordion__item-toggle" data-toggle="collapse" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">Application</a>
</h3>
</div>
<div class="af-accordion__collapse af-accordion__collapse--open" role="tabpanel" aria-labelledby="headingThree" id="collapseThree">
<div class="af-accordion__block">
<div class="af-form__text"><input class="af-form__input-text af-form__input-text--hasinfobulle" id="inputtext1" name="inputtextname" type="text" /><button class="btn af-btn af-btn--ok">OK</button><small class="af-form__help">Aide à la saisie</small></div>
</div>
</div>
</div>
<div class="af-accordion__item">
<div class="af-accordion__item-header" role="tab" id="headingFour">
<h3 class="af-accordion__item-title" role="intera">
<svg class="glyphicon glyphicon-menu-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M98.4,16.2c0.7,0.3,1.1,1,1.1,2.1v15.9c0,0.9-0.3,1.6-0.9,2.3L51.8,83.2c-0.5,0.5-1.1,0.7-1.8,0.7
s-1.3-0.2-1.8-0.7L1.4,36.5c-0.6-0.7-0.9-1.4-0.9-2.3V18.3c0-1.1,0.4-1.8,1.1-2.1c0.7-0.3,1.5-0.1,2.3,0.7L50,63l46.1-46.1
C96.9,16.1,97.6,15.9,98.4,16.2L98.4,16.2z"></path>
</svg><a class="af-accordion__item-toggle" data-toggle="collapse" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">Imprimé</a>
</h3>
</div>
<div class="af-accordion__collapse" role="tabpanel" aria-labelledby="headingFour" id="collapseFour">
<div class="af-accordion__block">
<div class="af-form__text"><input class="af-form__input-text af-form__input-text--hasinfobulle" id="inputtext1" name="inputtextname" type="text" /><button class="btn af-btn af-btn--ok">OK</button><small class="af-form__help">Aide à la saisie</small></div>
</div>
</div>
</div>
</div>
</section>
</article>
</div>
</div>
</div>Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
.af-filter {
line-height: 1.3;
.af-btn--ok {
padding: 0.625rem 1rem;
min-width: inherit;
vertical-align: top;
}
.af-panel {
border: 0;
&__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.625rem 0.9375rem;
border-bottom: none;
.glyphicon {
position: relative;
transform: inherit;
top: inherit;
right: inherit;
}
}
&__reset {
color: $white;
}
&__title {
font-weight: normal;
}
&__content {
padding: 0;
}
}
&-selected {
background: $color-filter-selected-background;
list-style: none;
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
margin: 0;
&__item {
margin-right: 0.5rem;
min-width: inherit;
background: $white;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
&-text {
padding: 0.25rem 1.438rem 0.25rem 0.8125rem;
font-size: 1rem;
font-weight: normal;
color: $color-filter-selected-text;
}
.glyphicon-close {
margin-right: 0.3125rem;
color: $color-filter-selected-glyphicon-close;
cursor: pointer;
width: 22px;
}
}
}
.af-accordion {
border: 0;
.af-form__input-text {
margin: 0;
}
&__item {
border: 0;
margin-bottom: 0;
border-bottom: 1px solid $color-silver;
&:nth-last-child(1) {
border: 0;
}
&-header {
background: $white;
color: $color-scorpion;
}
&-title {
color: $color-scorpion;
font-weight: 200;
font-size: 1.4em;
}
&-toggle {
color: $color-scorpion;
padding-left: 0.8rem;
font-size: 1rem;
}
}
&__collapse {
background: $color-wild-sand;
color: $color-scorpion;
border: 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.
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-link/dist/link.scss';
@import '@axa-fr/react-toolkit-form-input-text/dist/inputtext.scss';
@import '@axa-fr/react-toolkit-collapse/dist/accordion.scss';
@import '@axa-fr/react-toolkit-panel/dist/panel.scss';
@import '@axa-fr/react-toolkit-form-filter/dist/filter.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-filter | 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