Merge pull request #624 from Safelite/CSR-731-package-radio-button
Csr 731 package radio button
This commit is contained in:
bmauger
GitHub
commit
b7471d2bfc
2 changed files with 213 additions and 2 deletions
|
|
@ -26,7 +26,7 @@
|
||||||
isCashOrInsurance
|
isCashOrInsurance
|
||||||
isRequired
|
isRequired
|
||||||
/>
|
/>
|
||||||
<radio/>
|
<radioServicePackage/>
|
||||||
<funnel-footer
|
<funnel-footer
|
||||||
cmsWidgetName="FunnelFooterWidget"
|
cmsWidgetName="FunnelFooterWidget"
|
||||||
:isForwardActionDisabled="!meta.valid"
|
:isForwardActionDisabled="!meta.valid"
|
||||||
|
|
@ -46,6 +46,7 @@ import funnelHeader from "@/common-components/funnel-header/funnel-header";
|
||||||
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
|
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
|
||||||
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
||||||
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
|
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
|
||||||
|
import radioServicePackage from "@/ux-components/radio-service-package/radio-service-package";
|
||||||
|
|
||||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||||
|
|
@ -98,7 +99,8 @@ export default {
|
||||||
vehicleBanner,
|
vehicleBanner,
|
||||||
funnelSubHeader,
|
funnelSubHeader,
|
||||||
Form,
|
Form,
|
||||||
buttonQuestion
|
buttonQuestion,
|
||||||
|
radioServicePackage
|
||||||
},
|
},
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,209 @@
|
||||||
|
<template>
|
||||||
|
<div class="package-main">
|
||||||
|
<a href="#!" class="justify-content-end w-100" :class="[isActive ? 'active' : '']" @click="toggleClass()">Compare packages</a>
|
||||||
|
<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>Expert installation</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™ treatment</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "radioServicePackage",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isActive: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleClass: function(event){
|
||||||
|
this.isActive = !this.isActive;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.package-main {
|
||||||
|
a {
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
transition: all .5s ease;
|
||||||
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right center;
|
||||||
|
margin-left: .5rem;
|
||||||
|
width: 16px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
~ .package-wrapper {
|
||||||
|
.package-specs {
|
||||||
|
max-height: 1000px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.active:after {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
&.active + .vin-info {
|
||||||
|
max-height: 500px;
|
||||||
|
transition: all 250ms ease-in;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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