Merge branch 'develop' into feature/CSR-297

This commit is contained in:
CarlNation 2022-02-22 16:12:14 -05:00
commit 830ec9ca8f
10 changed files with 53 additions and 52 deletions

View file

@ -7,4 +7,5 @@
@import "@/styles/common-styles.scss";
@import "@/styles/common-typography-styles.scss";
@import "@/styles/common-error-styles.scss";
@import "@/styles/common-animations.scss";
</style>

View file

@ -60,7 +60,7 @@ export default {
<style lang="scss" scoped>
.funnel-header {
height: 56px;
padding: 0.97rem 0;
}
.logo-image {

View file

@ -1,6 +1,6 @@
<template>
<transition name="fade" mode="out-in">
<div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''">
<div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
<buttonQuestion
isWide
:questionText="questionText"
@ -87,15 +87,3 @@ export default ({
}
})
</script>
<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>

View file

@ -90,7 +90,8 @@ describe("replace-options-question.vue", () => {
driverSideReplaceOptions = ["FrontDoor", "BackDoor"],
passengerSideReplaceOptions = ["FrontDoor", "BackDoor"],
driverSideOptions = ["Car-FrontDoor", "Car-BackDoor"],
passengerSideOptions = ["Car-FrontDoor", "Car-BackDoor"]
passengerSideOptions = ["Car-FrontDoor", "Car-BackDoor"],
selectedDamageLocations = ["SideDoor"]
}) {
//Mock store
@ -107,6 +108,7 @@ describe("replace-options-question.vue", () => {
mountOptions.propsData = {
modelValue: modelValueProp,
groupName: groupName,
selectedDamageLocations: selectedDamageLocations,
};
const wrapper = shallowMount(sideDoorOptions, mountOptions);

View file

@ -1,13 +1,17 @@
<template>
<div class="side-door-options">
<buttonQuestion
:questionText="questionText"
isMultiSelect
:answers="answersToDisplay"
:groupName="groupName"
buttonType="listCard"
v-model="selectedDoorSidesValues"
/>
<transition name="fade" mode="out-in">
<div class="side-doors" v-if="selectedDamageLocations.includes('SideDoor')" aria-live="polite">
<buttonQuestion
:questionText="questionText"
isMultiSelect
:answers="answersToDisplay"
:groupName="groupName"
buttonType="listCard"
v-model="selectedDoorSidesValues"
/>
</div>
</transition>
<replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory v-model="selectedDriverSideReplacOptionsValues" />
@ -35,6 +39,7 @@ export default ({
props: {
groupName: String,
modelValue: Array,
selectedDamageLocations: Array,
},
methods: {
initializeComponent(cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions){

View file

@ -4,11 +4,11 @@
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
<funnelSubHeader ref="funnelSubHeader" />
<damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
<sideDoorOptions ref="sideDoorOptions" isAvailable groupName="SideDoorSideQuestion" v-model="sideDoorOptionsData" />
<windshieldOptions ref="windshieldOptions"
v-model="selectedWindshieldOptions"
:selectedDamageLocations="selectedDamageLocations"
/>
<sideDoorOptions ref="sideDoorOptions" groupName="SideDoorSideQuestion" v-model="sideDoorOptionsData" :selectedDamageLocations="selectedDamageLocations" />
<funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
</div>
</template>

View file

@ -1,8 +1,7 @@
<template>
<transition name="fade">
<div class="windshield-chip-count-question">
<transition name="fade" mode="out-in">
<div class="windshield-chip-count-question" v-if="isAvailable" aria-live="polite">
<buttonQuestion
v-if="isAvailable"
:questionText="questionText"
:answers="answersFromCms"
:groupName="groupName"
@ -49,4 +48,4 @@ export default ({
buttonQuestion,
}
})
</script>
</script>

View file

@ -1,8 +1,7 @@
<template>
<transition name="fade">
<div class="windshield-damage-type-question">
<transition name="fade" mode="out-in">
<div class="windshield-damage-type-question" v-if="isAvailable" aria-live="polite">
<buttonQuestion
v-if="isAvailable"
:questionText="questionText"
:answers="answersFromCms"
:groupName="groupName"
@ -68,4 +67,4 @@ export default ({
buttonQuestion,
}
})
</script>
</script>

View file

@ -1,24 +1,22 @@
<template>
<transition name="fade">
<div class="windshield-options" aria-live="polite">
<windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion"
:isAvailable=isWindshieldDamageLocation
:suppressError="suppressError"
groupName="WindshieldDamageTypeQuestion"
v-model="selectedWindshieldDamageTypeValues"
/>
<windshieldChipCountQuestion ref="windshieldChipCountQuestion"
:isAvailable=isRepairOptionSelected
groupName="WindshieldChipCountQuestion"
v-model="selectedWindshieldChipCountValues"
/>
<replaceOptionsQuestion ref="replaceOptionsQuestion"
:isAvailable=isReplaceOptionSelected
groupName="WindshieldReplaceOptions"
v-model="selectedWindshieldReplaceOptionsValues"
/>
</div>
</transition>
<div class="windshield-options">
<windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion"
:isAvailable=isWindshieldDamageLocation
:suppressError="suppressError"
groupName="WindshieldDamageTypeQuestion"
v-model="selectedWindshieldDamageTypeValues"
/>
<windshieldChipCountQuestion ref="windshieldChipCountQuestion"
:isAvailable=isRepairOptionSelected
groupName="WindshieldChipCountQuestion"
v-model="selectedWindshieldChipCountValues"
/>
<replaceOptionsQuestion ref="replaceOptionsQuestion"
:isAvailable=isReplaceOptionSelected
groupName="WindshieldReplaceOptions"
v-model="selectedWindshieldReplaceOptionsValues"
/>
</div>
</template>
<script>

View file

@ -0,0 +1,9 @@
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}