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 Popover
<div class="tk-block-demo">
<div class="af-popover__container">
<div class="af-popover__container-over"><a class="btn af-btn--circle" href="#" role="button">
<svg class="glyphicon glyphicon-pushpin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M3.125 95.703l23.672-29.688 16.172-16.25-16.406-16.563h23.438l20.859-21.797-2.734-2.813q-1.172-1.094-1.172-2.734t1.172-2.734q1.094-1.172 2.734-1.172t2.734 1.172l22.109 22.031q1.172 1.172 1.172 2.813t-1.172 2.734q-1.094 1.172-2.734 1.172t-2.734-1.172l-2.813-2.734-21.797 20.859v23.438l-16.563-16.406-16.25 16.172z"></path>
</svg></a></div>
<div class="af-popover__container-pop" data-placement="top" style="text-align: center;position: absolute; transform: translate3d(32px, -7px, 0px); top: 0px; left: 0px; will-change: transform;">pushpin<span class="af-popover__arrow"></span></div>
</div>
<div class="af-popover__container">
<div class="af-popover__container-over"><a class="btn af-btn--circle" href="#" role="button">
<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 class="af-popover__container-pop" data-placement="top" style="text-align: center;position: absolute; transform: translate3d(44px, -7px, 0px); top: 0px; left: 0px; will-change: transform;">print<span class="af-popover__arrow"></span></div>
</div>
<div class="af-popover__container">
<div class="af-popover__container-over"><a class="btn af-btn--circle" href="#" role="button">
<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></a></div>
<div class="af-popover__container-pop" data-placement="top" style="text-align: center;position: absolute; transform: translate3d(9px, -7px, 0px); top: 0px; left: 0px; will-change: transform;">arrow-xs-down<span class="af-popover__arrow"></span></div>
</div>
<div class="af-popover__container">
<div class="af-popover__container-over"><a class="btn af-btn--circle" href="#" role="button">
<svg class="glyphicon glyphicon-heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M8.333 34.979q0-5.333 2.333-10.25t6.083-8.375 8.708-5.333 9.917-1.708 10 3.208 8.708 8.708q4-5.75 9.125-8.75t10.125-3.167 9.875 1.708 8.542 5.333 5.917 8.375 2.25 10.25q0 4.75-2.792 9.792t-7.833 10.375-10.542 10.625-12.5 12.708-12.167 14.5q-5.167-7.083-12.125-14.5t-12.458-12.708-10.542-10.625-7.833-10.375-2.792-9.792z"></path>
</svg></a></div>
<div class="af-popover__container-pop" data-placement="top" style="text-align: center;position: absolute; transform: translate3d(42px, -7px, 0px); top: 0px; left: 0px; will-change: transform;">heart<span class="af-popover__arrow"></span></div>
</div>
</div>@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
$arrow-size: 16px;
$arrow-offset: -4px;
$padding-popover: 0.5rem 1rem;
.af-popover {
&__wrapper {
display: inline-block;
background: inherit;
border: 0;
padding: 0;
}
&__container {
cursor: initial;
display: inline-block;
&-pop {
position: relative;
background: $color-azur;
color: $white;
border-radius: 3px;
padding: $padding-popover;
z-index: 100;
width: 260px;
.af-subtitle {
color: $white;
font-size: 2em;
&::after {
display: none;
}
}
}
&--small {
.af-btn {
&--circle {
width: 2rem;
height: 2rem;
}
}
}
.af-popover__arrow {
width: $arrow-size;
height: $arrow-size;
position: absolute;
z-index: -1;
&::before {
content: '';
background: $color-azur;
width: $arrow-size;
height: $arrow-size;
transform: rotate(45deg);
position: absolute;
}
}
[data-popper-placement^='top']>.af-popover__arrow {
bottom: $arrow-offset;
}
[data-popper-placement^='bottom']>.af-popover__arrow {
top: $arrow-offset;
}
[data-popper-placement^='right']>.af-popover__arrow {
left: $arrow-offset;
}
[data-popper-placement^='left']>.af-popover__arrow {
right: $arrow-offset;
}
}
&-fade-in {
animation: fadein 0.2s linear 1 forwards;
}
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}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
Une infobulle offre un commentaire textuel à un objet auquel elle est rattachée.
2) Use case
- Une infobulle doit être utilisée si le composant associé n’est pas compréhensible hors contexte.
- Une infobulle doit être utilisée si une donnée spécifique est requise.
- Une infobulle doit être utilisée si l’utilisateur a besoin d’une explication spécifique pour agir.
3) DO/DONT
Une infobulle ne doit jamais cacher un composant avec lequel l’utilisateur peut agir directement : [x], bouton CTA, checkbox, radio, onglet, etc.
4) Utilisation
a) Position
- Une infobulle peut être rattachée à un bouton d’information. Dans ce cas, l’infobulle sera positionnée à droite du bouton, centré sur la hauteur.
- Sinon, l’infobulle pourra être rattaché à son composant dans toutes les directions : au-dessus, dessous, droite ou gauche, tout en restant centré dans la hauteur ou la largeur.
b) Alignement
c) Contenu
Une infobulle ne doit contenir que du texte de labeur ferré à gauche.
d) Rédaction
Le texte de l’infobulle doit être le plus clair et concis que possible, tout en étant suffisamment précis pour donner suffisamment de contexte à l’utilisateur.
e) Pictogrammes
Aucun pictogramme ne doit être utilisé en plus du label.
f) Action
L’infobulle d’un composant s’affiche quand l’utilisateur clique dessus ou passe sa souris dessus (hover).
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-popover/dist/popover.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-popover | 16 / 1 | 400 | Source Sans Pro Regular |