CSR-731 | Change buttonType to buttonTypeString
Removed radio-service-package
This commit is contained in:
Scott Kiener
parent
6377959980
commit
f58155728a
13 changed files with 21 additions and 224 deletions
|
|
@ -31,7 +31,7 @@ describe("buttonQuestion.vue", () => {
|
|||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion, {
|
||||
propsData: {
|
||||
buttonType: "listCard",
|
||||
buttonTypeString: "listCard",
|
||||
groupName: "group-name",
|
||||
},
|
||||
});
|
||||
|
|
@ -46,7 +46,7 @@ describe("buttonQuestion.vue", () => {
|
|||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion, {
|
||||
propsData: {
|
||||
buttonType: "listButtonHorizontal",
|
||||
buttonTypeString: "listButtonHorizontal",
|
||||
groupName: "group-name",
|
||||
},
|
||||
});
|
||||
|
|
@ -61,7 +61,7 @@ describe("buttonQuestion.vue", () => {
|
|||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion, {
|
||||
propsData: {
|
||||
buttonType: "radio",
|
||||
buttonTypeString: "radio",
|
||||
groupName: "group-name",
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
v-for="answer in buttonsInfo"
|
||||
:key="answer.value ? answer.value : answer">
|
||||
<component
|
||||
:is="buttonType"
|
||||
:is="buttonTypeString"
|
||||
:buttonLabel="answer.buttonLabel"
|
||||
:buttonLabelSubCopy="answer.buttonLabelSubCopy"
|
||||
:buttonBodyCopy="answer.buttonBodyCopy"
|
||||
|
|
@ -89,7 +89,7 @@ import { ErrorMessage } from "vee-validate";
|
|||
export default {
|
||||
name: "buttonQuestion",
|
||||
props: {
|
||||
buttonType: {
|
||||
buttonTypeString: {
|
||||
type: String,
|
||||
default: "listButton",
|
||||
},
|
||||
|
|
@ -128,7 +128,7 @@ export default {
|
|||
},
|
||||
beforeMount() {
|
||||
if (this.buttonTypeObject) {
|
||||
this.$options.components[this.buttonType] = this.buttonTypeObject;
|
||||
this.$options.components[this.buttonTypeString] = this.buttonTypeObject;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -140,7 +140,7 @@ export default {
|
|||
getFieldSetClasses() {
|
||||
if (this.isOverflowScrollable) {
|
||||
return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
|
||||
} else if (this.buttonType == "listCard") {
|
||||
} else if (this.buttonTypeString == "listCard") {
|
||||
return "w-100";
|
||||
} else {
|
||||
return "";
|
||||
|
|
@ -148,7 +148,7 @@ export default {
|
|||
},
|
||||
getComponentLoopWrapperClasses() {
|
||||
let classes;
|
||||
switch (this.buttonType) {
|
||||
switch (this.buttonTypeString) {
|
||||
case "listButton":
|
||||
classes = "w-100";
|
||||
break;
|
||||
|
|
@ -175,9 +175,9 @@ export default {
|
|||
|
||||
classes += this.isWide ? "col-12" : "col";
|
||||
|
||||
if (this.buttonType == "radio") {
|
||||
if (this.buttonTypeString == "radio") {
|
||||
classes += " radio-button-container";
|
||||
} else if (this.buttonType == "servicePackageRadio") {
|
||||
} else if (this.buttonTypeString == "servicePackageRadio") {
|
||||
classes = "package-wrapper";
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<buttonQuestion
|
||||
class="address-vehicles-question"
|
||||
buttonType="listButton"
|
||||
buttonTypeString="listButton"
|
||||
groupName="ChooseAddressVehicle"
|
||||
:questionText="questionText"
|
||||
:answers="vehicles"
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
cmsWidgetName="VinLookupMethod"
|
||||
:answers="answersFromCms"
|
||||
groupName="vinLookupMethodOption"
|
||||
buttonType="listButton"
|
||||
buttonTypeString="listButton"
|
||||
v-model="selectedVinLookupMethod"
|
||||
isRequired
|
||||
validationRules="option-required"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<buttonQuestion
|
||||
:answers="answersFromCms"
|
||||
:groupName="groupName"
|
||||
buttonType="listButtonHorizontal"
|
||||
buttonTypeString="listButtonHorizontal"
|
||||
v-model="selectedValues"
|
||||
:additionalData="{isCashOrInsurance: true}"
|
||||
isRequired
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<buttonQuestion
|
||||
:answers="servicePackageAnswers"
|
||||
:groupName="groupName"
|
||||
buttonType="servicePackageRadio"
|
||||
buttonTypeString="servicePackageRadio"
|
||||
:buttonTypeObject="servicePackageRadio"
|
||||
v-model="selectedValues"
|
||||
isRequired
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
isMultiSelect
|
||||
:answers="answersToDisplay"
|
||||
:groupName="groupName"
|
||||
buttonType="listCard"
|
||||
buttonTypeString="listCard"
|
||||
isRequired
|
||||
v-model="selectedValues"
|
||||
validationRules="damage-location-required"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
:isMultiSelect="isMultiSelect"
|
||||
:answers="answersToDisplay"
|
||||
:groupName="groupName"
|
||||
buttonType="listCard"
|
||||
buttonTypeString="listCard"
|
||||
v-model="selectedValues"
|
||||
:validationRules="validationRules"
|
||||
:suppressError="suppressError"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
isMultiSelect
|
||||
:answers="answersToDisplay"
|
||||
:groupName="groupName"
|
||||
buttonType="listCard"
|
||||
buttonTypeString="listCard"
|
||||
v-model="selectedDoorSidesValues"
|
||||
validationRules="damage-side-required"
|
||||
isRequired
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
:questionText="questionText"
|
||||
:answers="answersFromCms"
|
||||
:groupName="groupName"
|
||||
buttonType="listButtonHorizontal"
|
||||
buttonTypeString="listButtonHorizontal"
|
||||
useTextForValue
|
||||
v-model="selectedValue"
|
||||
:validationRules="validationRules"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
:questionText="questionText"
|
||||
:answers="answersFromCms"
|
||||
:groupName="groupName"
|
||||
buttonType="listCard"
|
||||
buttonTypeString="listCard"
|
||||
v-model="selectedValues"
|
||||
:suppressError="suppressError"
|
||||
:validationRules="validationRules"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<buttonQuestion
|
||||
v-model="selectedTint"
|
||||
:answers="tintSelectionOptions"
|
||||
buttonType="listCard"
|
||||
buttonTypeString="listCard"
|
||||
:isWide="true"
|
||||
altText=""
|
||||
isRequired
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<div class="col">
|
||||
<buttonQuestion
|
||||
v-model="selectedPartNumber"
|
||||
buttonType="radio"
|
||||
buttonTypeString="radio"
|
||||
class="radioQuestion"
|
||||
:questionText="glassFeatureQuestion"
|
||||
:answers="featureListData[selectedTint]"
|
||||
|
|
|
|||
|
|
@ -1,203 +0,0 @@
|
|||
<template>
|
||||
<div class="package-main">
|
||||
<div class="package-wrapper">
|
||||
<input type="radio" name="test-radio" id="testradio">
|
||||
<label for="testradio">
|
||||
<div class="package-specs">
|
||||
<p class="m-0">Economy service <span>As little as $0.00</span></p>
|
||||
<ul>
|
||||
<li>New replacement windshield</li>
|
||||
<li>Expert installation</li>
|
||||
<li>Nationwide lifetime warranty</li>
|
||||
</ul>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="package-wrapper">
|
||||
<input type="radio" name="test-radio" id="testradio-2">
|
||||
<label for="testradio-2">
|
||||
<div class="package-specs">
|
||||
<p class="mb-2">Standard service <span>As little as 59.97</span></p>
|
||||
<p class="sub-label m-0">most popular</p>
|
||||
<ul>
|
||||
<li>New replacement windshield</li>
|
||||
<li><textLink linkType="dashedUnderline" text="Rain Defense" href="#!" data-bs-toggle="modal" data-bs-target="#EstimateRainDefenseModal" aria-label="Modal window" /> treatment</li>
|
||||
<li>New <textLink linkType="dashedUnderline" text="front wiper blades" href="#!" data-bs-toggle="modal" data-bs-target="#EstimateFrontWiperModal" aria-label="Modal window" /></li>
|
||||
<li>New <textLink linkType="dashedUnderline" text="rear wiper blade" href="#!" data-bs-toggle="modal" data-bs-target="#EstimateRearWiperModal" aria-label="Modal window" /></li>
|
||||
<li>Expert <textLink linkType="dashedUnderline" text="recalibration" href="#!" data-bs-toggle="modal" data-bs-target="#EstimateRecalModal" aria-label="Modal window" /></li>
|
||||
<li>Nationwide lifetime warranty</li>
|
||||
<li>New wiper blades</li>
|
||||
</ul>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="package-wrapper">
|
||||
<input type="radio" name="test-radio" id="testradio-3">
|
||||
<label for="testradio-3">
|
||||
<div class="package-specs">
|
||||
<p class="mb-2">Premium service <span>As little as $94.97</span></p>
|
||||
<ul>
|
||||
<li>New replacement windshield</li>
|
||||
<li>Expert installation</li>
|
||||
<li>Nationwide lifetime warranty</li>
|
||||
<li>New wiper blades</li>
|
||||
<li>Rain Defense</li>
|
||||
</ul>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<modal
|
||||
cmsWidgetName="EstimateRainDefenseModal"
|
||||
/>
|
||||
<modal
|
||||
cmsWidgetName="EstimateFrontWiperModal"
|
||||
/>
|
||||
<modal
|
||||
cmsWidgetName="EstimateRearWiperModal"
|
||||
/>
|
||||
<modal
|
||||
cmsWidgetName="EstimateRecalModal"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import textLink from "@/ux-components/text-link/text-link";
|
||||
import modal from "@/common-components/modal/modal";
|
||||
export default {
|
||||
name: "radioServicePackage",
|
||||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
hasArrow: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleClass: function(event){
|
||||
this.isActive = !this.isActive;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
textLink,
|
||||
modal
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.package-main {
|
||||
.package-wrapper {
|
||||
margin: 0.5rem 0;
|
||||
input[type="radio"] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
|
||||
+ label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
border: 1px solid $gray-300;
|
||||
box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15), 0px 4px 24px -8px rgba(0, 0, 0, 0.2);
|
||||
border-radius: .5rem;
|
||||
overflow: hidden;
|
||||
min-height: 58px;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: relative;
|
||||
top: 5px;
|
||||
margin-right: 1rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $gray-500;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 19px;
|
||||
top: 24px;
|
||||
border-radius: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
min-width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
+ label {
|
||||
&:before {
|
||||
border: 1px solid #8E9292;
|
||||
box-shadow: 0px 0px 0px 4px #9FCEE6, 0px 1px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label {
|
||||
.package-specs {
|
||||
max-height: 1000px;
|
||||
}
|
||||
}
|
||||
+ label {
|
||||
background-color: $blue-100;
|
||||
border: 1px solid $blue;
|
||||
max-height: 500px;
|
||||
}
|
||||
+ label {
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 1px $blue;
|
||||
}
|
||||
}
|
||||
+ label {
|
||||
&:after {
|
||||
background: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
+ label {
|
||||
&:before {
|
||||
border: 2px solid $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.package-specs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-height: 0;
|
||||
transition: all .75s ease;
|
||||
|
||||
p {
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
color: $green;
|
||||
}
|
||||
&.sub-label {
|
||||
color: $green;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
margin: 1rem 0 0 -15px;
|
||||
padding: 0;
|
||||
li {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue