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.

Palette principale

$color-axa#00008fBLEU AXA
$color-azur#3032c1BLEU Action (lien, bouton etc...)
$color-action-1#70709aBLEU Action inactif (tabs, carte, formule etc...)
$color-action-2#d3d3e7BLEU 4

$color-texte#333GRIS Texte
$color-gray-1#cccGRIS 1
$color-gray-2#e5e5e5GRIS 2
$color-gray-3#f5f5f5GRIS 3
$color-white#fffBLANC

$color-red-error#f02849ROUGE Erreur

Palette secondaire

$color-red-1#a70d26ROUGE 1
$color-red-2#e992a1ROUGE 2
$color-red-3#f9bcc6ROUGE 3
$color-red-4#debbc1ROUGE 4

$color-flamingo#ec4d33ORANGE 1
$color-burnt-sienna#f07662ORANGE 2

$color-green-1#1cc578VERT 1
$color-green-2#10a992VERT 2
$color-green-3#3db899VERT 3
$color-green-4#18a854VERT 4
$color-green-5#bdeccbVERT 5
$color-green-6#a4cdb1VERT 6

$color-blue-1#49bdcaBLEU 1
$color-blue-2#3fa7b3BLEU 2

$color-mauve-1#4972caMAUVE 1
$color-mauve-2#375db0MAUVE 2

$color-yellow-1#c78e13JAUNE 1
$color-yellow-2#f1d596JAUNE 2
$color-yellow-3#c8b282JAUNE 3

Couleur d’univers

$color-auto#a70d26AUTO
$color-habitation#ec4d33HABITATION
$color-sante#1cc578SANTE
$color-collective#49bdcaCOLLECTIVE
$color-loisirs#00af8fLOISIRS
$color-banque#51aad3BANQUE
$color-epargne#6377baÉPARGNE
$color-entreprise#5e3778ENTREPRISE
$color-iard#42145fIARD
$color-patrimonial#c5a57fPATRIMONIAL
$color-pros#738b9cPROS
$color-assurbanque#ff1821ASSURBANQUE

Couleurs composants

$color-alertSucces-leftBgColor#38a758ALERT SUCCESS
$color-alertSucces-bgColor#bdeccbALERT SUCCESS
$color-alertSucces-colorBorder#a1cbaeALERT SUCCESS
$color-alertSucces-textColor#146a2dALERT SUCCESS

$color-alertInfo-leftBgColor#0b99bfALERT INFO
$color-alertInfo-bgColor#97d3e3ALERT INFO
$color-alertInfo-colorBorder#78b2c1ALERT INFO
$color-alertInfo-textColor#1b6a7fALERT INFO

$color-alertDanger-leftBgColor#c78e13ALERT DANGER
$color-alertDanger-bgColor#f1d596ALERT DANGER
$color-alertDanger-colorBorder#c8b282ALERT DANGER
$color-alertDanger-textColor#805b0aALERT DANGER

$color-alertError-leftBgColor#a70d26ALERT ERROR
$color-alertError-bgColor#ffd5dcALERT ERROR
$color-alertError-colorBorder#debbc1ALERT ERROR
$color-alertError-textColor#a02237ALERT ERROR

$color-btn-success#1cc578BOUTON
$color-btn-success-dark#0d844eBOUTON
$color-btn-danger#f02849BOUTON
$color-btn-danger-dark#8f182cBOUTON
$color-btn-disabled#c9c9c9BOUTON

$card-white#fffCARD
$card-grey-light#f5f5f5CARD
$card-border-grey#dbdbdbCARD
$card-blue-active#3032c1CARD
$card-header#cccCARD
$card-text-color#4d4d4dCARD
$card-bg-disabled#e5e5e5CARD

$color-table-sorting#20a892TABLE

$color-pager-link#4d4d4dLIEN

$color-accordion-custom#49bdcaACCORDEON
$color-accordeon-border-collapse#eeeACCORDEON

$color-tabs-item#cccTABS
$color-tabs-link#6e6e6eTABS
$color-tabs-content#c0c0c0TABS
$color-tabs-disabled#cccTABS
$color-tabs-disabled-button#333TABS

$color-filter-selected-background#cccFILTER
$color-filter-selected-text#333FILTER
$color-filter-selected-glyphicon-close#696868FILTER

$error-custom-bg#ffbfbfFORM
$error-custom-border#d18e8eFORM

$border-bottom-header#979797RESTITUTION
$brand-primary#00008fRESTITUTION
$color-highlightpink#d52861RESTITUTION

Autres couleurs

$color-red-axa#ff1721COLOR
$color-gray-contract#c4c4c4COLOR
$color-text-contract#4d4d4dCOLOR
$color-deep-sapphire#00005bCOLOR
$color-st-tropaz#2425aaCOLOR
$color-dark-indigo#3b3fd8COLOR
$color-blue-lighter#494df4COLOR
$color-blue-alert#30b8dcCOLOR
$color-blue-alert-dark#218eabCOLOR
$color-pink#fe3951COLOR
$color-pink-dark#c0203aCOLOR
$color-orange#f1b531COLOR
$color-orange-dark#c5901bCOLOR
$color-mine-shaft#333COLOR
$color-scorpion#333COLOR
$color-gray#7f7f7fCOLOR
$color-dusty-gray#999COLOR
$color-silver#cccCOLOR
$color-mercury#e5e5e5COLOR
$color-wild-sand#f5f5f5COLOR
$color-alabaster#fafafaCOLOR
$color-malachite#1cc54eCOLOR
$color-malachite-light#3db899COLOR
$color-malachite-dark#2b8c47COLOR

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) Général

a) La couleur est une notion indispensable dans l’identité de marque. Axa possède des codes bien définis, offrant un cadre pour l’ensemble de ses produits digitaux, qu’il convient de définir.

Au delà de la marque, d’autres couleurs, sémantiques, ajoutent un niveau de contexte aux informations à l’écran: rouge pour erreur, vert pour succès, etc.

2) Principale

a) La couleur principale est le bleu AXA.

3) Sémantique

a) Erreur b) Réussite c) Avertissement d) Information

4) Styles de textes

5) Interaction

a) hover b) active c) selected d) focus e) disabled

6) Thème

Un seul thème, clair, est proposé actuellement

7) Couleur de fond

8) Accessibilité

L’ensemble des textes doivent respecter les contrastes de couleurs minimum de la norme WCAG 2.1, avec une valeur de contraste pour les textes de 4,5:1 et de titrage, composants visuels et éléments d’interface de 3:1.

https://webaim.org/resources/contrastchecker/

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';