Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Vous devez choisir une formule.
HTML
PUG
include ../../../mixins/swap-component
include ../../../mixins/tarif
script.
function toggleFormuleCta(elem) {
const formule = elem.closest('.formule-version2');
const resetComposant = elem.closest('.form-group-version2');
if (resetComposant) {
resetComposant.querySelectorAll('.button').forEach(
function(element){
const classesToRemove = [ '-primary' ];
element.classList.remove(...classesToRemove);
element.closest('.formule-version2').classList.remove('-check');
element.classList.add('-secondary');
element.innerHTML = "Choisir";
element.setAttribute('aria-describedby', element.getAttribute('aria-describedby').replace('formule-error',''));
}
);
formule.querySelectorAll('.button').forEach(
function(button){
const classesToAdd = [ '-primary' ];
button.classList.add(...classesToAdd);
button.classList.remove('-secondary');
button.innerHTML = " Sélectionnée";
}
)
formule.classList.add('-check');
resetComposant.classList.remove('has-error');
const helpblock = resetComposant.querySelector('.help-block')
if(helpblock) {
helpblock.remove()
}
}
}
.title-exemple
h4 Version basique
.form-group-version2
.field-item.-formule-group-version2
.structure.-swipe.-horizontal-md.-items-per-line-md-2
.structure-row
.structure-item
.formule-version2
.wrapper-principal
.wrapper-content
.title#titre-formule-1
h2 Title + TitleTagName
.cta-group-version2.-vertical
button(type='button' aria-describedby="titre-formule-1" onclick='toggleFormuleCta(this)').button.-secondary.-full-width
| Choisir
.structure-item
.formule-version2
.wrapper-principal
.wrapper-content
.title#titre-formule-2
h2 Title + TitleTagName
.cta-group-version2.-vertical
button(type='button' aria-describedby="titre-formule-1" onclick='toggleFormuleCta(this)').button.-secondary.-full-width
| Choisir
.documentation-space
.title-exemple
h4 Version defaultChecked
.form-group-version2
.field-item.-formule-group-version2
.structure.-swipe.-horizontal-md.-items-per-line-md-2
.structure-row
.structure-item
.formule-version2.-check
.wrapper-principal
.wrapper-content
.title#titre-formule-1-1
h2 Title + TitleTagName
.cta-group-version2.-vertical
button(type='button' aria-describedby="titre-formule-1-1" onclick='toggleFormuleCta(this)').button.-primary.-full-width
i.maificon.maificon-form-check(aria-hidden='true')
| Selectionnée
.structure-item
.formule-version2
.wrapper-principal
.wrapper-content
.title#titre-formule-2-2
h2 Title + TitleTagName
.cta-group-version2.-vertical
button(type='button' aria-describedby="titre-formule-2-2" onclick='toggleFormuleCta(this)').button.-secondary.-full-width
| Choisir
.documentation-space
.title-exemple
h4 Version avec Formule.Foooter
.form-group-version2
.field-item.-formule-group-version2
.structure.-swipe.-horizontal-md.-items-per-line-md-2
.structure-row
.structure-item
.formule-version2
.wrapper-principal
.wrapper-content
.title#titre-formule-1-1
h2 Title + TitleTagName
.cta-group-version2.-vertical
button(type='button' aria-describedby="titre-formule-1-1" onclick='toggleFormuleCta(this)').button.-secondary.-full-width
| Choisir
.wrapper-complementary
.formule-footer
.title
h4 Title footer
button(type='button' aria-describedby="titre-formule-1" onclick='toggleFormuleCta(this)').button.-secondary.-full-width
| Choisir
.structure-item
.formule-version2
.wrapper-principal
.wrapper-content
.title#titre-formule-2-2
h2 Title + TitleTagName
.cta-group-version2.-vertical
button(type='button' aria-describedby="titre-formule-2-2" onclick='toggleFormuleCta(this)').button.-secondary.-full-width
| Choisir
.wrapper-complementary
.formule-footer
.title
h4 Title footer
button(type='button' aria-describedby="titre-formule-1" onclick='toggleFormuleCta(this)').button.-secondary.-full-width
| Choisir
.documentation-space
.title-exemple
h4 Version avec Formule.Garantie multi-collapse
.form-group-version2
.field-item.-formule-group-version2
.structure.-swipe.-horizontal-md.-items-per-line-md-2
.structure-row
.structure-item
.formule-version2
.wrapper-principal
.wrapper-content
.title#titre-formule-1-1
h2 Title + TitleTagName
.cta-group-version2.-vertical
button(type='button' aria-describedby="titre-formule-1-1" onclick='toggleFormuleCta(this)').button.-secondary.-full-width
| Choisir
.wrapper-complementary
.formule-garantie.-collapse
.title
h3
button.collapse-handler(type="button" data-toggle="collapse" data-target=".multi-collapse-2" aria-expanded="false" aria-describedby="titre-formule-3")
span Garantie
.collapse.multi-collapse-2
.collapse-content
+swap-component()
.structure-item
.formule-version2
.wrapper-principal
.wrapper-content
.title#titre-formule-2-2
h2 Title + TitleTagName
.cta-group-version2.-vertical
button(type='button' aria-describedby="titre-formule-2-2" onclick='toggleFormuleCta(this)').button.-secondary.-full-width
| Choisir
.wrapper-complementary
.formule-garantie.-collapse
.title
h3
button.collapse-handler(type="button" data-toggle="collapse" data-target=".multi-collapse-2" aria-expanded="false" aria-describedby="titre-formule-3")
span Garantie
.collapse.multi-collapse-2
.collapse-content
+swap-component()
.documentation-space
.title-exemple
h4 Version en erreur
.form-group-version2.has-error
.field-item.-formule-group-version2
.structure.-swipe.-horizontal-md.-items-per-line-md-2
.structure-row
.structure-item
.formule-version2
.wrapper-principal
.wrapper-content
.title#titre-formule-3-1
h2 Title + TitleTagName
.cta-group-version2.-vertical
button(type='button' aria-describedby="titre-formule-3-1 formule-error" onclick='toggleFormuleCta(this)').button.-secondary.-full-width
| Choisir
.structure-item
.formule-version2
.wrapper-principal
.wrapper-content
.title#titre-formule-3-1
h2 Title + TitleTagName
.cta-group-version2.-vertical
button(type='button' aria-describedby="titre-formule-3-1 formule-error" onclick='toggleFormuleCta(this)').button.-secondary.-full-width
| Choisir
.help-block
p#formule-error Vous devez choisir une formule.