jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-399 vin-information WIP

Browse source
This commit is contained in:
bmauger 2022-03-02 17:24:12 -05:00
parent 96b1042d2b
commit 4b6821c694
3 changed files with 90 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
src/common-components/vin-information/vin-information.spec.js Normal file
View file

78
src/common-components/vin-information/vin-information.vue Normal file
View file

@ -0,0 +1,78 @@
<template>
<div class="vin-information">
<div class="vin-toggle d-inline-flex" :class="[isActive ? 'active' : '']" @click="toggleClass()">
<textLink :text="HeadlineText" linkType="text" href="#!" />
</div>
<div class="vin-info">
<div class="mt-3" v-html="BodyText"></div>
<img :src="OptionalImage" alt="" />
</div>
</div>
</template>
<script>
import textLink from "@/ux-components/text-link/text-link";
export default {
name: "vinInformation",
components: {
textLink,
},
data() {
return {
isActive: false,
HeadlineText: "Where can I find my VIN?",
BodyText: "<p class='mb-2'>You can find your VIN in a few places:</p> <ol> <li>Driver side windshield</li> <li>Driver side doorjamb</li> <li>Vehicle registration card</li> <li>Auto insurance card or app</li> </ol>",
OptionalImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/vin_location.svg?sfvrsn=63a9a2cf_3",
};
},
methods: {
toggleClass: function(event){
this.isActive = !this.isActive;
}
}
}
</script>
<style lang="scss">
.vin-information {
p,li {
font-size: .875rem;
color: $gray-600;
}
a {
font-size: .875rem;
}
.vin-toggle {
&: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:after {
transform: rotate(180deg);
}
&.active + .vin-info {
max-height: 500px;
transition: all 250ms ease-in;
opacity: 1;
}
}
.vin-info {
max-height: 0;
transition: all 250ms ease-out;
overflow: hidden;
opacity: 0;
img {
width: 117%;
height: auto;
}
}
}
</style>

12
src/layouts/component-test/component-test.vue
View file

@ -1,5 +1,15 @@
<template>
<div class="container-fluid container-shadow p-2 rounded-3">
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">VIN Information</h4>
</div>
</div>
<div class="row my-2">
<div class="col">
<vinInformation/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Text Input</h4>
@ -1134,6 +1144,7 @@
import textLink from "@/ux-components/text-link/text-link";
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
import vinInformation from "@/common-components/vin-information/vin-information";
export default {
name: "App",
components: {
@ -1148,6 +1159,7 @@
textLink,
textboxQuestion,
dropdownQuestion,
vinInformation,
},
data() {
return {