ajout de bouton réserver et ajout du formulaire lycée

This commit is contained in:
2026-05-25 17:15:17 +02:00
parent 107093f7bb
commit c2a11f1b61
12 changed files with 929 additions and 26 deletions

View File

@@ -15,11 +15,13 @@
<slot name="title" />
</DsHeading>
<slot />
<div v-if="$slots.button" class="decalage_button">
<slot name="button" />
</div>
<div v-if="ensavoirplusTarget" class="decalage_button">
<DsButton :textColor="buttonTone" :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget, ensavoirplusGroup)">En savoir +</DsButton>
<div class="decalage_button_wp">
<div v-if="resolvedLienCta" class="decalage_button">
<DsButton :to="resolvedLienCta" variant="white" textColor="default" borderColor="none">Candidater à nos projets</DsButton>
</div>
<div v-if="ensavoirplusTarget" class="decalage_button">
<DsButton :textColor="buttonTone" :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget, ensavoirplusGroup)">En savoir +</DsButton>
</div>
</div>
</div>
</div>
@@ -27,17 +29,23 @@
</template>
<script setup>
import { computed } from 'vue'
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
import DsText from '@root/design-system/primitives/DsText.vue'
import DsButton from '@root/design-system/primitives/DsButton.vue'
defineProps({
const props = defineProps({
tone: { type: String, default: 'default' },
titleTone: { type: String, default: 'default' },
buttonTone: { type: String, default: 'default' },
position: { type: String, default: 'left' },
cta: { type: String, default: '' },
lienCta: { type: String, default: '' },
ensavoirplusTarget: { type: String, default: '' },
ensavoirplusGroup: { type: String, default: '' }
ensavoirplusGroup: { type: String, default: '' },
})
const resolvedLienCta = computed(() => props.lienCta || props.cta)
function toggleTarget(ensavoirplusTarget, ensavoirplusGroup) {
const target = document.getElementById(ensavoirplusTarget)
if (!target) return
@@ -134,10 +142,17 @@
.decalage_button {
text-align: right;
}
.decalage_button_wp {
justify-content: flex-end;
}
}
.decalage_button {
.decalage_button_wp {
margin-top: 32px;
display: flex;
gap: 20px;
flex-wrap: wrap;
}
}