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 Textarea
<div class="row af-form__group af-form__group--label-top">
<div class="col-md-2">
<label class="af-form__group-label" for="textarea1">Input Textarea *</label>
</div>
<div class="col-md-10">
<div class="af-form__textarea">
<textarea class="af-form__input-textarea" name="textarea1" rows="5" cols="50" placeholder="Texte long long long"></textarea>
</div>
</div>
</div>@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
.af-form {
&__textarea {
&--disabled {
.af-form__input-textarea {
cursor: not-allowed;
}
}
&--error {
.af-form__input-textarea {
border: 1px solid $color-red-axa;
color: $color-red-axa;
}
}
&--warning {
.af-form__input-textarea {
border: 1px solid $color-orange-dark;
color: $color-orange-dark;
}
}
}
&__input-textarea {
font-family: $font-family-base;
border: 1px solid $color-silver;
padding: 0.7rem 1.2rem;
font-size: 1em;
&:focus {
border-color: $color-axa;
color: $color-axa;
}
&--hasinfobulle {
margin-right: 1rem;
}
}
}Input Textarea Success
<div class="row af-form__group af-form__group--label-top">
<div class="col-md-2">
<label class="af-form__group-label" for="textarea1">Input Textarea *</label>
</div>
<div class="col-md-10">
<div class="af-form__textarea af-form__textarea--success">
<textarea class="af-form__input-textarea" name="textarea1" rows="5" cols="50" placeholder="Texte long long long"></textarea>
</div>
</div>
</div>@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
.af-form {
&__textarea {
&--disabled {
.af-form__input-textarea {
cursor: not-allowed;
}
}
&--error {
.af-form__input-textarea {
border: 1px solid $color-red-axa;
color: $color-red-axa;
}
}
&--warning {
.af-form__input-textarea {
border: 1px solid $color-orange-dark;
color: $color-orange-dark;
}
}
}
&__input-textarea {
font-family: $font-family-base;
border: 1px solid $color-silver;
padding: 0.7rem 1.2rem;
font-size: 1em;
&:focus {
border-color: $color-axa;
color: $color-axa;
}
&--hasinfobulle {
margin-right: 1rem;
}
}
}Input Textarea Error
<div class="row af-form__group af-form__group--label-top">
<div class="col-md-2">
<label class="af-form__group-label" for="textarea1">Input Textarea *</label>
</div>
<div class="col-md-10">
<div class="af-form__textarea af-form__textarea--error">
<textarea class="af-form__input-textarea" name="textarea1" rows="5" cols="50" placeholder="Texte long long long"></textarea><small class="af-form__message af-form__message--error">
<svg class="glyphicon glyphicon-exclamation-sign" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M4.922 48.828q0-9.219 3.555-17.539t9.609-14.375 14.375-9.609 17.539-3.555 17.539 3.555 14.375 9.609 9.609 14.375 3.555 17.539-3.555 17.539-9.609 14.375-14.375 9.609-17.539 3.555-17.539-3.555-14.375-9.609-9.609-14.375-3.555-17.539zM38.75 29.219l4.531 23.594q0.313 1.563 1.68 2.695t2.93 1.133h4.219q1.563 0 2.93-1.133t1.68-2.695l4.531-23.594q0.313-1.563-0.625-2.695t-2.5-1.133h-16.172q-1.641 0-2.578 1.133t-0.625 2.695zM42.188 72.266h15.625v-7.813h-15.625v7.813z"></path>
</svg><span class="af-form__error-text">Message d'erreur</span></small>
</div>
</div>
</div>@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
.af-form {
&__textarea {
&--disabled {
.af-form__input-textarea {
cursor: not-allowed;
}
}
&--error {
.af-form__input-textarea {
border: 1px solid $color-red-axa;
color: $color-red-axa;
}
}
&--warning {
.af-form__input-textarea {
border: 1px solid $color-orange-dark;
color: $color-orange-dark;
}
}
}
&__input-textarea {
font-family: $font-family-base;
border: 1px solid $color-silver;
padding: 0.7rem 1.2rem;
font-size: 1em;
&:focus {
border-color: $color-axa;
color: $color-axa;
}
&--hasinfobulle {
margin-right: 1rem;
}
}
}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-form-input-textarea/dist/textarea.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-textarea | 16 / 1 | 400 | Source Sans Pro Regular |