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 Input Pass
Copied
<div class="af-form__group row">
<div class="col-md-2">
<label class="af-form__group-label" for="inputpassword">Input password *</label>
</div>
<div class="col-md-10">
<div class="af-form__pass-container">
<div class="af-form__pass af-form__pass--hasinfobulle">
<div class="af-form__pass-strength"></div>
<input class="af-form__input-text" id="uniqueid" name="inputpassword" value="" tabindex="" type="password" />
<button class="af-form__pass-btn" type="button">
<svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
<path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
</svg>
</button>
</div>
<div class="af-popover__container">
<div class="af-popover__container-over">
<button class="af-btn--circle-small"><span class="af-more-help">i</span></button>
</div>
</div><small class="af-form__help">8 caractères minimum</small>
</div>
</div>
</div>
<div class="af-form__group row af-form__group--bad">
<div class="col-md-2">
<label class="af-form__group-label" for="inputpassword">Input password *</label>
</div>
<div class="col-md-10">
<div class="af-form__pass-container">
<div class="af-form__pass af-form__pass--hasinfobulle af-form__pass--bad">
<div class="af-form__pass-strength"></div>
<input class="af-form__input-text" id="uniqueid" name="inputpassword" value="" tabindex="" type="password" />
<button class="af-form__pass-btn" type="button">
<svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
<path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
</svg>
</button>
</div>
<div class="af-popover__container">
<div class="af-popover__container-over">
<button class="af-btn--circle-small"><span class="af-more-help">i</span></button>
</div>
</div><small class="af-form__help">8 caractères minimum</small>
</div>
</div>
</div>
<div class="af-form__group row af-form__group--okay">
<div class="col-md-2">
<label class="af-form__group-label" for="inputpassword">Input password *</label>
</div>
<div class="col-md-10">
<div class="af-form__pass-container">
<div class="af-form__pass af-form__pass--hasinfobulle af-form__pass--okay">
<div class="af-form__pass-strength"></div>
<input class="af-form__input-text" id="uniqueid" name="inputpassword" value="" tabindex="" type="password" />
<button class="af-form__pass-btn" type="button">
<svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
<path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
</svg>
</button>
</div>
<div class="af-popover__container">
<div class="af-popover__container-over">
<button class="af-btn--circle-small"><span class="af-more-help">i</span></button>
</div>
</div><small class="af-form__help">8 caractères minimum</small>
</div>
</div>
</div>
<div class="af-form__group row af-form__group--good">
<div class="col-md-2">
<label class="af-form__group-label" for="inputpassword">Input password *</label>
</div>
<div class="col-md-10">
<div class="af-form__pass-container">
<div class="af-form__pass af-form__pass--hasinfobulle af-form__pass--good">
<div class="af-form__pass-strength"></div>
<input class="af-form__input-text" id="uniqueid" name="inputpassword" value="" tabindex="" type="password" />
<button class="af-form__pass-btn" type="button">
<svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
<path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
</svg>
</button>
</div>
<div class="af-popover__container">
<div class="af-popover__container-over">
<button class="af-btn--circle-small"><span class="af-more-help">i</span></button>
</div>
</div><small class="af-form__help">8 caractères minimum</small>
</div>
</div>
</div>
<div class="af-form__group row af-form__group--verygood">
<div class="col-md-2">
<label class="af-form__group-label" for="inputpassword">Input password *</label>
</div>
<div class="col-md-10">
<div class="af-form__pass-container">
<div class="af-form__pass af-form__pass--hasinfobulle af-form__pass--verygood">
<div class="af-form__pass-strength"></div>
<input class="af-form__input-text" id="uniqueid" name="inputpassword" value="" tabindex="" type="password" />
<button class="af-form__pass-btn" type="button">
<svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
<path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
</svg>
</button>
</div>
<div class="af-popover__container">
<div class="af-popover__container-over">
<button class="af-btn--circle-small"><span class="af-more-help">i</span></button>
</div>
</div><small class="af-form__help">8 caractères minimum</small>
</div>
</div>
</div>
<div class="af-form__group row af-form__group--excellent">
<div class="col-md-2">
<label class="af-form__group-label" for="inputpassword">Input password *</label>
</div>
<div class="col-md-10">
<div class="af-form__pass-container">
<div class="af-form__pass af-form__pass--hasinfobulle af-form__pass--excellent">
<div class="af-form__pass-strength"></div>
<input class="af-form__input-text" id="uniqueid" name="inputpassword" value="" tabindex="" type="password" />
<button class="af-form__pass-btn" type="button">
<svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
<path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
</svg>
</button>
</div>
<div class="af-popover__container">
<div class="af-popover__container-over">
<button class="af-btn--circle-small"><span class="af-more-help">i</span></button>
</div>
</div><small class="af-form__help">8 caractères minimum</small>
</div>
</div>
</div>Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
$levels: (bad red '20%',
okay orange '40%',
good green '60%',
verygood blue '80%',
excellent purple '100%'
);
.af-form {
&__pass {
position: relative;
display: inline-block;
.af-form__input-text {
padding-right: 3rem;
}
&--hasinfobulle {
margin-right: 1rem;
}
.af-form__help {
min-height: 1.6em;
display: flex;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
justify-content: flex-start;
margin: 0.2rem 0;
}
&-btn {
position: absolute;
right: 5px;
top: 6px;
background: none;
border: none;
outline: 0;
color: gray;
font-size: 1.3em;
cursor: pointer;
display: flex;
padding: 0.45rem 0.4rem;
&:hover {
background: $color-mercury;
border-radius: 100%;
}
&:focus {
outline: 0;
}
.glyphicon {
width: 22px;
}
}
&-strength {
width: 0;
height: 3px;
background: transparent;
transition: all 300ms ease-in-out;
}
@each $level in $levels {
&--#{nth($level, 1)} {
.af-form__pass-strength {
width: #{nth($level, 3)};
background: #{nth($level, 2)};
}
}
}
}
&__pass-container {
.af-popover__container {
display: inline-block;
}
}
}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-form-core/dist/form.scss';
@import '@axa-fr/react-toolkit-form-input-text/dist/inputtext.scss';
@import '@axa-fr/react-toolkit-form-input-pass/dist/pass.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-form-pass | 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