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

Merge branch 'develop' into CASH-1042-header-and-progress-bar-style-updates

Browse source
This commit is contained in:
Bryan Mauger 2025-07-29 14:26:46 -04:00
commit b7c098b900
48 changed files with 529 additions and 509 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
public/css/site-2020Styling.css
View file

@ -194,16 +194,6 @@ html .in-shop.vspacing .list-group.radio.vspacing .list-group-item {
margin-bottom: 2px; margin-bottom: 2px;
} }
@media (min-width: 500px) {
.form-group {
width: 80%;
}
}
@media (min-width: 800px) {
.form-group {
width: 60%;
}
}
.list-group { .list-group {
margin-bottom: 20px; margin-bottom: 20px;
padding-left: 0; padding-left: 0;

11
public/scss/site-2020Styling.scss
View file

@ -188,17 +188,6 @@
margin-bottom: 2px; margin-bottom: 2px;
} }
@media (min-width: 500px) {
.form-group {
width: 80%;
}
}
@media (min-width: 800px) {
.form-group {
width: 60%;
}
}
.list-group { .list-group {
margin-bottom: 20px; margin-bottom: 20px;
padding-left: 0; padding-left: 0;

13
src/digital-components/button-question/button-question.vue
View file

@ -7,7 +7,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
"> ">
<div <div
v-if="questionText && answers && answers.length > 0" v-if="questionText && answers && answers.length > 0"
class="question-text d-flex" class="question-text"
:class="{ 'small-question-text': isSmallQuestionText }"> :class="{ 'small-question-text': isSmallQuestionText }">
<span class="fw-bold w-100" :class="[labelBold ? 'span-bold' : '']"> <span class="fw-bold w-100" :class="[labelBold ? 'span-bold' : '']">
{{ questionText }} {{ questionText }}
@ -83,10 +83,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
</div> </div>
</fieldset> </fieldset>
</div> </div>
<div <div id="form-test-error" class="row form-test-error">
id="form-test-error"
class="row form-test-error"
:class="isErrorCentered ? 'text-center' : ''">
<error-message <error-message
role="comment" role="comment"
aria-atomic="true" aria-atomic="true"
@ -261,12 +258,6 @@ export default {
return classes; return classes;
}, },
isErrorCentered() {
if (this.buttonTypeString == "listCard" && this.buttonsInfo.length <= 2) {
return true;
}
return false;
},
buttonsInfo() { buttonsInfo() {
return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({ return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({
buttonLabel: answer.buttonLabel ?? answer.Text ?? answer, buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,

1
src/digital-components/dropdown-question/dropdown-question.vue
View file

@ -152,6 +152,7 @@ export default {
border: 1px solid $gray-500; border: 1px solid $gray-500;
border-radius: 0.5rem; border-radius: 0.5rem;
min-height: 3rem; min-height: 3rem;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
min-height: 3.5rem; min-height: 3.5rem;
} }

27
src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue
View file

@ -66,19 +66,18 @@ export default {
.btn { .btn {
&.btn-primary { &.btn-primary {
position: relative; position: relative;
background: linear-gradient(270deg, $blue 0%, $blue-800 100%); background: $red;
border: none; border: none;
border-radius: $border-radius-lg;
color: $white; color: $white;
justify-content: center; justify-content: center;
font-weight: 500; font-weight: 500;
@media (hover: hover) { @media (hover: hover) {
background: linear-gradient(270deg, $blue 0%, $blue-800 100%); background: $red;
} }
&:focus { &:focus {
box-shadow: box-shadow:
0 0 0 3px, 0 0 0 3px,
0 0 0 5.5px $blue-700; 0 0 0 5.5px $red;
} }
&:focus, // Mouse, touch, stylus focus &:focus, // Mouse, touch, stylus focus
&:focus-visible { &:focus-visible {
@ -86,27 +85,26 @@ export default {
outline: none; outline: none;
box-shadow: box-shadow:
0 0 0 3px, 0 0 0 3px,
0 0 0 5.5px $blue-700; 0 0 0 5.5px $red;
color: $white; color: $white;
background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%); background: $red;
} }
&:disabled { &:disabled {
background: $gray-200 !important; background: $gray-200 !important;
background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important; background: $red !important;
color: $gray-600 !important; color: $gray-600 !important;
font-weight: 400; font-weight: 400;
height: 48px; height: 48px;
border: none; border: none;
border-radius: $border-radius-lg;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
} }
&.has-loader { &.has-loader {
color: $white; color: $white;
background: $blue-700; background: $red;
box-shadow: box-shadow:
0 0 0 3px, 0 0 0 3px,
0 0 0 5.5px $blue-700; 0 0 0 5.5px $red;
pointer-events: none; pointer-events: none;
} }
&.delay { &.delay {
@ -117,8 +115,7 @@ export default {
&.btn-secondary { &.btn-secondary {
position: relative; position: relative;
background: transparent; background: transparent;
border: 1px solid $blue; border: 1px solid $red;
border-radius: $border-radius-lg;
color: $blue; color: $blue;
font-weight: 500; font-weight: 500;
transition: all 150ms linear; transition: all 150ms linear;
@ -133,7 +130,7 @@ export default {
outline: none; outline: none;
box-shadow: box-shadow:
0 0 0 3px $white, 0 0 0 3px $white,
0 0 0 5.5px $blue-700; 0 0 0 5.5px $red;
color: $white; color: $white;
@include blue-gradient; @include blue-gradient;
} }
@ -142,14 +139,12 @@ export default {
color: $gray-550 !important; color: $gray-550 !important;
font-weight: 400; font-weight: 400;
height: 48px; height: 48px;
border: 1px solid $gray-550; border: 1px solid $red;
border-radius: $border-radius-lg;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
} }
&.has-loader { &.has-loader {
color: $white; color: $white;
@include blue-gradient;
pointer-events: none; pointer-events: none;
} }
&.delay { &.delay {

1
src/digital-components/textbox-question/textbox-question.vue
View file

@ -337,6 +337,7 @@ export default {
border-radius: 0.5rem; border-radius: 0.5rem;
min-height: 3rem; min-height: 3rem;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
padding: 1rem; padding: 1rem;
min-height: 3.5rem; min-height: 3.5rem;

6
src/fmg-components/cart/cart.vue
View file

@ -1286,11 +1286,11 @@ export default {
&:after { &:after {
content: ""; content: "";
transition: all 0.5s ease; transition: all 0.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-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230070D1' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm6.113 11.28-5.52 5.52a.84.84 0 0 1-1.186 0l-5.52-5.52a.843.843 0 1 1 1.186-1.2L12 15.012l4.927-4.932a.843.843 0 1 1 1.186 1.2Z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right center; background-position: right center;
width: 16px; width: 24px;
height: 9px; height: 24px;
display: inline-flex; display: inline-flex;
position: relative; position: relative;
right: 0.75rem; right: 0.75rem;

21
src/fmg-components/funnel-footer/funnel-footer.vue
View file

@ -1,15 +1,5 @@
<template> <template>
<div class="funnel-footer"> <div class="funnel-footer">
<div class="container-fluid">
<div class="row">
<div class="col d-flex justify-content-center justify-content-md-start">
<img class="skyline" src="~@/assets/img/skyline-van.svg" alt="" />
</div>
<div class="col d-none d-md-flex justify-content-end align-items-end">
<img class="neighborhood" src="~@/assets/img/neighborhood.svg" alt="" />
</div>
</div>
</div>
<div class="footer-inner-wrapper"> <div class="footer-inner-wrapper">
<textLink <textLink
linkType="newWindowLink" linkType="newWindowLink"
@ -64,13 +54,6 @@ export default {
margin-top: auto; margin-top: auto;
padding: 0 0 2rem 0; padding: 0 0 2rem 0;
.skyline {
height: 96px;
}
.neighborhood {
height: 48px;
}
p { p {
font-size: 0.875rem; font-size: 0.875rem;
margin-top: 0.25rem; margin-top: 0.25rem;
@ -93,12 +76,16 @@ export default {
:deep(a) { :deep(a) {
text-decoration: none; text-decoration: none;
&.new-window-link { &.new-window-link {
font-family: Urbanist, Arial, Helvetica, sans-serif;
margin: 0 0.75rem; margin: 0 0.75rem;
color: $gray-600; color: $gray-600;
font-weight: 400;
} }
&.navigation-link { &.navigation-link {
font-family: Urbanist, Arial, Helvetica, sans-serif;
margin: 0 0.75rem; margin: 0 0.75rem;
color: $gray-600; color: $gray-600;
font-weight: 400;
} }
} }

54
src/fmg-components/funnel-header/funnel-header.vue
View file

@ -1,8 +1,16 @@
<template> <template>
<div class="funnel-header" v-if="imageSrc"> <div class="funnel-header" v-if="imageSrc">
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex w-100">
<div class="button-container"> <progress-bar :page="$route.name" />
<span class="webchat"> </div>
<div class="container d-flex">
<div class="site-logo">
<a href="https://safelite.com">
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
</a>
</div>
<div class="button-container webchat">
<span class="webchat d-flex">
<button <button
v-show="shouldShowWebchatButton" v-show="shouldShowWebchatButton"
v-on:click="webchatClicked" v-on:click="webchatClicked"
@ -10,18 +18,10 @@
class="chat-button"></button> class="chat-button"></button>
</span> </span>
</div> </div>
<div class="site-logo">
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
</div>
<div class="button-container"> <div class="button-container">
<!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
<menuModal /> <menuModal />
<!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
</div> </div>
</div> </div>
<div class="d-flex w-100">
<progress-bar :page="$route.name" />
</div>
</div> </div>
<template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id"> <template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
@ -197,23 +197,39 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.funnel-header { .funnel-header {
.container {
padding: 1rem 0.75rem;
display: flex;
align-items: center;
@include media-breakpoint-up(md) {
padding: 2rem 0.75rem;
}
}
position: relative; position: relative;
padding: 1rem 0; padding: 0 0 1rem 0;
.button-container { .button-container {
width: 1.5rem; &.webchat {
height: 1.625rem; margin-right: 1rem;
@include media-breakpoint-up(md) {
margin-right: 2rem;
}
}
}
.site-logo {
margin-right: auto;
} }
.logo-image { .logo-image {
width: auto; width: 100px;
height: 1.1875rem; height: auto;
margin: 0 auto; margin: 0 auto;
@include media-breakpoint-up(md) {
width: 165px;
}
} }
:deep(.menu-modal-container) {
display: none; // This is temporary until the hamburger menu is re-implemented for use with the progress bar
}
.webchat { .webchat {
.chat-button { .chat-button {
width: 1.5rem; width: 1.5rem;

252
src/fmg-components/funnel-header/menu-modal/menu-modal.vue
View file

@ -6,9 +6,13 @@
:class="[isActive ? 'active' : '']" :class="[isActive ? 'active' : '']"
@click="toggleModal" @click="toggleModal"
aria-label="Hamburger Menu (modal window)"> aria-label="Hamburger Menu (modal window)">
<div class="bar1"></div> <span v-if="isActive">Close</span>
<div class="bar2"></div> <span v-else>Step {{ currentStepNumber }} of 4</span>
<div class="bar3"></div> <div class="bars ms-2">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</button> </button>
</div> </div>
<div <div
@ -18,47 +22,45 @@
tabindex="-1" tabindex="-1"
aria-labelledby="footerModalLabel" aria-labelledby="footerModalLabel"
aria-hidden="true" aria-hidden="true"
v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }"> v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }"
@click.self="closeModal">
<div class="modal-dialog modal-fullscreen"> <div class="modal-dialog modal-fullscreen">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header visually-hidden"> <div class="modal-header visually-hidden">
<h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5> <h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
</div> </div>
<div class="modal-body d-flex flex-column"> <div class="modal-body d-flex flex-column">
<textLink <div class="step-grid">
linkType="newWindowLink" <div class="bar-container">
text="Terms of service" <progress-bar class="bar-dots" :page="$route.name" :vertical="true" />
href="//www.safelite.com/terms-of-service" <span class="dot1"></span>
target="_blank" /> <span class="dot2"></span>
<textLink <span class="dot3"></span>
linkType="newWindowLink" <span class="dot4"></span>
text="Your privacy choices" </div>
href="//www.safelite.com/privacy-center" <div class="d-flex flex-column justify-content-between">
target="_blank"> <div class="step-containers">
<template v-slot:after-text> <span class="step-number">Step 1 of 4</span>
<img <br />
class="ccpa-icon" <span class="step-name">Vehicle</span>
src="~@/assets/img/icons/ccpa-icon.svg" </div>
alt="Your privacy choices" /> <div class="step-containers">
</template> <span class="step-number">Step 2 of 4</span>
</textLink> <br />
<textLink <span class="step-name">Quote</span>
linkType="navigation" </div>
text="Cookie preferences" <div class="step-containers">
href="javascript:OneTrust.ToggleInfoDisplay();" /> <span class="step-number">Step 3 of 4</span>
<textLink <br />
linkType="newWindowLink" <span class="step-name">Schedule</span>
text="Warranty" </div>
href="//www.safelite.com/national-lifetime-warranty" <div class="step-containers">
target="_blank" /> <span class="step-number">Step 4 of 4</span>
<textLink <br />
linkType="newWindowLink" <span class="step-name">Review</span>
text="Notice at collection" </div>
href="https://www.safelite.com/ccpa-privacy-policy" </div>
target="_blank" /> </div>
</div>
<div class="modal-footer d-flex justify-content-start">
&copy; {{ new Date().getFullYear() }} Safelite Group
</div> </div>
</div> </div>
</div> </div>
@ -66,8 +68,9 @@
</template> </template>
<script> <script>
import textLink from "@/ux-components/text-link/text-link";
import { Modal } from "bootstrap"; import { Modal } from "bootstrap";
import { getProgressBarStep } from "@/constants/progress-bar-mapper";
import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
import baseMixin from "@/mixins/base-mixin.js"; import baseMixin from "@/mixins/base-mixin.js";
export default { export default {
@ -100,8 +103,13 @@ export default {
self.isActive = false; self.isActive = false;
}, },
}, },
computed: {
currentStepNumber() {
return getProgressBarStep(this.$route.name);
},
},
components: { components: {
textLink, progressBar,
}, },
}; };
</script> </script>
@ -111,49 +119,92 @@ export default {
button { button {
border: none; border: none;
&.menu-button { &.menu-button {
width: 1.5rem; width: auto;
height: 1.5rem; height: auto;
border-radius: 50%; border-radius: 1.5rem;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
background-color: $white; background-color: $white;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0; //Required to prevent 'squish' on iPhone padding: 0.15rem 0.5rem; //Required to prevent 'squish' on iPhone
z-index: 1050; z-index: 1050;
.bar1, @include media-breakpoint-up(md) {
.bar2, padding: 0.25rem 1rem;
.bar3 {
width: 14px;
height: 2px;
background-color: $blue;
margin: 1px 0;
transition: 0.25s;
} }
&.active .bar1 { &.active .bar1 {
transform: rotate(-45deg) translate(-3px, 3px); transform: rotate(-45deg) translate(-3px, 8px);
} }
&.active .bar2 { &.active .bar2 {
opacity: 0; opacity: 0;
} }
&.active .bar3 { &.active .bar3 {
transform: rotate(45deg) translate(-3px, -3px); transform: rotate(45deg) translate(-3px, -8px);
}
.bars {
width: 1.5rem;
height: 1.5rem;
display: flex;
justify-content: space-around;
flex-direction: column;
scale: 0.75;
.bar1,
.bar2,
.bar3 {
width: 1.5rem;
height: 2px;
background-color: $blue;
margin: 1px 0;
transition: 0.25s;
}
}
.step-numbers {
font-size: 0.875rem;
margin-right: 0.5rem;
@include media-breakpoint-up(md) {
font-size: 1rem;
}
} }
} }
} }
} }
.modal { .modal {
&.menu-modal { &.menu-modal {
//left: auto; .modal-dialog {
height: calc(100% - 56px); position: fixed;
top: 56px; bottom: 0;
right: 0;
height: calc(100% - 68px);
width: 100vw; // or set a max-width if you want a drawer effect
max-width: 294px;
margin: 0;
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1050;
@include media-breakpoint-up(md) {
height: calc(100% - 102px);
top: 102px;
}
}
&.show .modal-dialog {
transform: translateX(0);
}
background-color: rgba(0, 0, 0, 0.5);
height: calc(100% - 68px);
top: 68px;
border-top: 1px solid $gray-300; border-top: 1px solid $gray-300;
overflow-x: visible; overflow-x: visible;
overflow-y: visible; overflow-y: visible;
@include media-breakpoint-up(md) {
height: calc(100% - 102px);
top: 102px;
}
.modal-body { .modal-body {
padding: 2rem; padding: 2rem;
display: flex;
align-items: center;
.ccpa-icon { .ccpa-icon {
width: 2.0625rem; width: 2.0625rem;
height: 1rem; height: 1rem;
@ -162,6 +213,48 @@ export default {
:deep(.navigation-link) { :deep(.navigation-link) {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.step-grid {
display: grid;
max-width: 140px;
grid-template-columns: 1fr 1fr;
.step-containers {
line-height: 1;
}
.bar-container {
width: 24px;
position: relative;
.dot1,
.dot2,
.dot3,
.dot4 {
position: absolute;
width: 22px;
height: 22px;
background-color: $white;
border-radius: 50rem;
border: 1px solid $gray;
left: 1px;
}
.dot1 {
top: 1px;
}
.dot2 {
top: 114px;
}
.dot3 {
top: 227px;
}
.dot4 {
top: 332px;
}
}
.step-number {
font-size: 0.75rem;
}
.step-name {
font-size: 1.25rem;
}
}
} }
.modal-fullscreen { .modal-fullscreen {
width: 100vw; width: 100vw;
@ -190,23 +283,30 @@ export default {
align-items: center; align-items: center;
padding: 0; //Required to prevent 'squish' on iPhone padding: 0; //Required to prevent 'squish' on iPhone
z-index: 1056; z-index: 1056;
.bar1, .bars {
.bar2, width: 1.5rem;
.bar3 { height: 1.5rem;
width: 14px; display: flex;
height: 2px; justify-content: space-around;
background-color: $blue; flex-direction: column;
margin: 1px 0; .bar1,
transition: 0.25s; .bar2,
} .bar3 {
&.active .bar1 { width: 1.5rem;
transform: rotate(-45deg) translate(-3px, 3px); height: 2px;
} background-color: $blue;
&.active .bar2 { margin: 1px 0;
opacity: 0; transition: 0.25s;
} }
&.active .bar3 { &.active .bar1 {
transform: rotate(45deg) translate(-3px, -3px); transform: rotate(-45deg) translate(-3px, 8px);
}
&.active .bar2 {
opacity: 0;
}
&.active .bar3 {
transform: rotate(45deg) translate(-3px, -8px);
}
} }
} }
} }

82
src/fmg-components/funnel-header/progress-bar/progress-bar.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="progress-bar-outer"> <div :class="barClass">
<div class="progress-bar-inner" :style="progressStyle"></div> <div class="progress-bar-inner" :style="progressStyle"></div>
</div> </div>
</template> </template>
@ -18,6 +18,10 @@ export default {
type: String, type: String,
required: true, required: true,
}, },
vertical: {
type: Boolean,
default: false,
},
}, },
data() { data() {
return { return {
@ -45,9 +49,20 @@ export default {
}, },
computed: { computed: {
progressStyle() { progressStyle() {
return { if (this.vertical) {
width: this.displayedProgress + "%", return {
}; height: this.displayedProgress + "%",
width: "100%",
};
} else {
return {
width: this.displayedProgress + "%",
height: "100%",
};
}
},
barClass() {
return this.vertical ? "progress-bar-outer-vertical" : "progress-bar-outer";
}, },
}, },
}; };
@ -55,50 +70,43 @@ export default {
<style lang="scss"> <style lang="scss">
.progress-bar-outer { .progress-bar-outer {
background: $blue-100; background: $blue-100;
height: 10px; height: 5px;
position: relative; position: relative;
border-radius: 10px; border-radius: 0;
width: 100%; width: 100%;
margin-top: 1rem; margin-top: 0;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
.progress-bar-inner { .progress-bar-inner {
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth width transition */ transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
will-change: width; will-change: width;
height: 10px; height: 100%;
background-color: $blue; background-color: $red;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
border-radius: 10px; border-radius: 0;
} }
}
progress { .progress-bar-outer-vertical {
height: 10px; background: $blue-100;
width: 24px;
height: 356px;
position: relative;
border-radius: 0;
margin-top: 0;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
overflow: hidden;
border-radius: 50rem;
.progress-bar-inner {
transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
will-change: height !important;
width: 100%; width: 100%;
background-color: $red;
/* Firefox */ position: absolute;
appearance: none; left: 0;
background-color: $blue-100; top: 0;
border: 0; border-radius: 50rem;
border-radius: $border-radius-pill;
box-shadow: $box-shadow-inset;
&::-moz-progress-bar {
background-color: $blue;
border-radius: $border-radius-pill;
}
/* Webkit */
-webkit-appearance: none;
&::-webkit-progress-bar {
background-color: $blue-100;
border-radius: $border-radius-pill;
box-shadow: $box-shadow-inset;
}
&::-webkit-progress-value {
background-color: $blue;
border-radius: $border-radius-pill;
}
} }
} }
</style> </style>

30
src/fmg-components/funnel-sub-header/funnel-sub-header.vue
View file

@ -1,9 +1,7 @@
<template> <template>
<div class="funnel-sub-header"> <div class="funnel-sub-header">
<div <div class="d-flex align-items-center overflow-hidden">
class="d-flex align-items-center container-fluid overflow-hidden" <h5 class="fw-normal mb-0" :class="headerColor">
:class="[textAlignment]">
<h5 class="text-center fw-normal mb-0" :class="headerColor">
<span> <span>
{{ text }} {{ text }}
</span> </span>
@ -13,13 +11,9 @@
@click-event="clickEvent" /> @click-event="clickEvent" />
</h5> </h5>
</div> </div>
<div <div v-if="subText" class="d-flex align-self-center overflow-hidden mt-1">
v-if="subText" <p class="small fw-normal sub-text">
class="d-flex align-items-center justify-content-center container-fluid overflow-hidden mt-1"> <span v-html="boldedSubHeaderText"></span>
<p class="text-center small fw-normal sub-text">
<span>
{{ subText }}
</span>
</p> </p>
</div> </div>
</div> </div>
@ -37,21 +31,17 @@ export default {
type: String, type: String,
default: "dark-header", default: "dark-header",
}, },
leftAlignHeader: {
type: Boolean,
default: false,
},
}, },
components: { components: {
buttonBack, buttonBack,
}, },
computed: { computed: {
boldedSubHeaderText() {
return this.getCmsContent(this.cmsWidgetName, "HeaderSubText");
},
text() { text() {
return this.getCmsContent(this.cmsWidgetName, "HeaderText"); return this.getCmsContent(this.cmsWidgetName, "HeaderText");
}, },
textAlignment() {
return this.leftAlignHeader ? "justify-content-start" : "justify-content-center";
},
subText() { subText() {
return this.getCmsContent(this.cmsWidgetName, "HeaderSubText"); return this.getCmsContent(this.cmsWidgetName, "HeaderSubText");
}, },
@ -68,8 +58,12 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.bolded-words) {
font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
}
h5 { h5 {
line-height: 32px; line-height: 32px;
font-size: 1.25rem;
button { button {
color: inherit; color: inherit;

32
src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
View file

@ -1,31 +1,15 @@
<template> <template>
<div :class="`questions-page`"> <div :class="`questions-page`">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container page-container-grouped-styles">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row">
<div class="col-md-6 col-xl-4"> <div class="col-12 col-md-10 col-lg-8 col-xl-7 question-chain-wrapper">
<alert
ref="alertFewMoreQuestions"
cmsWidgetName="alertWidget"
class="my-5"
alertClass="alert-warning"
:manualHeadline="alertFewMoreQuestionsHeader"
:manualCopy="alertFewMoreQuestionsCopy"
v-bind:isDismissible="false" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 question-chain-wrapper">
<div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key"> <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
<questionChain <questionChain
ref="questionChain" ref="questionChain"
@ -54,7 +38,6 @@
<script> <script>
// Components // Components
import funnelHeader from "@/fmg-components/funnel-header/funnel-header"; import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import alert from "@/ux-components/alert/alert";
import questionChain from "@/digital-components/question-chain/question-chain"; import questionChain from "@/digital-components/question-chain/question-chain";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header"; import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import navbar from "@/fmg-components/nav-bar/nav-bar"; import navbar from "@/fmg-components/nav-bar/nav-bar";
@ -96,7 +79,6 @@ export default {
}, },
components: { components: {
funnelHeader, funnelHeader,
alert,
questionChain, questionChain,
funnelSubHeader, funnelSubHeader,
navbar, navbar,
@ -114,7 +96,7 @@ export default {
} }
.questions-page { .questions-page {
.question-text { .question-text {
margin-bottom: 0.5rem; margin-bottom: 1.5rem;
span { span {
text-align: left; text-align: left;

22
src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
View file

@ -118,13 +118,14 @@ export default {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
order: 2; order: 2;
text-align: center; text-align: center;
background: $blue-100; background: $gray-100;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 3rem; height: 3rem;
border-radius: 0.5rem; border-radius: 0.5rem;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
&.progress-saved { &.progress-saved {
background: none; background: none;
@ -135,14 +136,13 @@ export default {
position: relative; position: relative;
color: $blue; color: $blue;
border: none; border: none;
font-weight: 900; font-family: UrbanistSemibold;
font-size: 0.875rem; font-size: 0.875rem;
text-align: center; text-align: left;
display: inline-block; display: inline-block;
width: auto; width: auto;
height: auto; height: auto;
text-decoration: underline; text-decoration: none;
text-underline-offset: 0.25rem;
line-height: 1rem; line-height: 1rem;
padding: 1rem; padding: 1rem;
margin: 0 auto; margin: 0 auto;
@ -154,7 +154,6 @@ export default {
&.btn { &.btn {
&.btn-secondary { &.btn-secondary {
font-weight: 900;
border: none; border: none;
&:hover, &:hover,
&:active, &:active,
@ -183,6 +182,17 @@ export default {
// fixes flicker while transitioning between states // fixes flicker while transitioning between states
transition: background 0s 0s ease-in-out; transition: background 0s 0s ease-in-out;
} }
&.open-save-progress-button {
span {
color: $gray-600;
font-family: UrbanistRegular;
.highlighted-words {
font-family: UrbanistSemibold;
color: $blue;
}
}
}
} }
.modal.modal-component .modal-dialog .modal-content { .modal.modal-component .modal-dialog .modal-content {

17
src/layouts/address-lookup/address-lookup.vue
View file

@ -5,15 +5,14 @@
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
autocomplete="off"> autocomplete="off">
<div class="container-fluid page-container-grouped-styles" id="address-lookup"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container page-container-grouped-styles">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div> <funnelSubHeader
</div> cmsWidgetName="FunnelSubHeaderWidget"
<div class="row justify-content-center"> ref="funnelSubHeader"
<div class="col-md-6 col-xl-4 mt-4"> class="mb-7" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
<customerQuestions <customerQuestions
ref="customerQuestions" ref="customerQuestions"

16
src/layouts/customer-details/customer-details.vue
View file

@ -1,13 +1,9 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="container-fluid"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container page-container-grouped-styles">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4 mb-5" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4 mb-5" />
<textboxQuestion <textboxQuestion
isRequired isRequired
@ -47,8 +43,6 @@
cmsWidgetName="TextMeQuestionWidget" cmsWidgetName="TextMeQuestionWidget"
v-model="isSmsOptIn" /> v-model="isSmsOptIn" />
<techNotes v-model="techNotes" :textAreaLabelCopy="textAreaLabelCopy" />
<navbar <navbar
cmsWidgetName="FunnelFooterWidget" cmsWidgetName="FunnelFooterWidget"
ref="navbar" ref="navbar"
@ -74,7 +68,6 @@ import textboxQuestion from "@/digital-components/textbox-question/textbox-quest
import phoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question"; import phoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question";
import textBlock from "@/digital-components/text-block/text-block"; import textBlock from "@/digital-components/text-block/text-block";
import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question"; import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
import techNotes from "@/layouts/customer-details/tech-notes/tech-notes";
//Supporting files //Supporting files
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";
@ -219,7 +212,6 @@ export default {
textBlock, textBlock,
phoneNumberQuestion, phoneNumberQuestion,
checkboxQuestion, checkboxQuestion,
techNotes,
}, },
}; };
</script> </script>

42
src/layouts/estimate/estimate.vue
View file

@ -1,17 +1,16 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container page-container-grouped-styles estimate">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
<div> <div>
<div class="vinlookupquestion" v-html="this.VinLookupQuestionText"></div> <div class="vinlookupquestion" v-html="this.VinLookupQuestionText"></div>
<div v-html="this.VinLookupQuestionBodyText2"></div>
<div
class="select-an-option"
v-html="this.VinLookupQuestionFooterText"></div>
<buttonQuestion <buttonQuestion
cmsWidgetName="VinLookupMethod" cmsWidgetName="VinLookupMethod"
:answers="answersFromCms" :answers="answersFromCms"
@ -29,6 +28,8 @@
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction" @back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" /> @ForwardClicked="forwardButtonAction" />
<div class="text-center" v-html="this.VinLookupQuestionFooterText2"></div>
</div> </div>
</div> </div>
</div> </div>
@ -39,7 +40,6 @@
// Components // Components
import funnelHeader from "@/fmg-components/funnel-header/funnel-header"; import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar"; import navbar from "@/fmg-components/nav-bar/nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import buttonQuestion from "@/digital-components/button-question/button-question"; import buttonQuestion from "@/digital-components/button-question/button-question";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue"; import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
@ -229,10 +229,18 @@ export default {
VinLookupQuestionText() { VinLookupQuestionText() {
return this.getCmsContent("VinLookupQuestion", "BodyText"); return this.getCmsContent("VinLookupQuestion", "BodyText");
}, },
VinLookupQuestionBodyText2() {
return this.getCmsContent("VinLookupQuestion", "BodyText2");
},
VinLookupQuestionFooterText() {
return this.getCmsContent("VinLookupQuestion", "FooterText");
},
VinLookupQuestionFooterText2() {
return this.getCmsContent("VinLookupQuestion", "FooterText2");
},
}, },
components: { components: {
funnelHeader, funnelHeader,
funnelSubHeader,
navbar, navbar,
buttonQuestion, buttonQuestion,
Form, Form,
@ -243,14 +251,12 @@ export default {
<style lang="scss"> <style lang="scss">
.vinlookupquestion p { .vinlookupquestion p {
margin-bottom: 0; font-size: 1.25rem;
} }
.vinlookupquestion strong {
font-weight: 500; .select-an-option {
color: $black; font-family: UrbanistSemibold;
} font-weight: 600;
.vinlookupquestion p:nth-child(2) {
font-size: 0.875rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
</style> </style>

12
src/layouts/insurance-company/insurance-company.vue
View file

@ -1,14 +1,10 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container page-container-grouped-styles">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
<div v-if="originalList.length > 0"> <div v-if="originalList.length > 0">

12
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -1,13 +1,9 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="container-fluid page-container-grouped-styles"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container page-container-grouped-styles">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<textboxQuestion <textboxQuestion

1
src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue
View file

@ -112,6 +112,7 @@ export default {
border: 1px solid $gray-500; border: 1px solid $gray-500;
width: 100%; width: 100%;
outline: none; outline: none;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
span { span {
&.small { &.small {

34
src/layouts/payment-method/payment-method.vue
View file

@ -1,14 +1,10 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal notFullScreen ref="loadingModal" /> <loadingModal notFullScreen ref="loadingModal" />
<div class="container-fluid payment-method"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container payment-method">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
<hr class="my-0" /> <hr class="my-0" />
@ -57,7 +53,7 @@
<div <div
v-if="isRecalibrationOnOrder && shouldHideRecalibration" v-if="isRecalibrationOnOrder && shouldHideRecalibration"
class="questions-about-service my-5"> class="questions-about-service mt-5">
<textBlock <textBlock
cmsWidgetName="QuestionsAboutYourServiceWidget" cmsWidgetName="QuestionsAboutYourServiceWidget"
justifyText="left" justifyText="left"
@ -67,7 +63,7 @@
<div class="d-flex flex-row checkbox-group"> <div class="d-flex flex-row checkbox-group">
<checkboxQuestion <checkboxQuestion
cmsWidgetName="RecalConfirmWidget" cmsWidgetName="RecalConfirmWidget"
class="mb-5" class="mb-3"
isRequired="true" isRequired="true"
v-model="isRecalAckOptIn" v-model="isRecalAckOptIn"
validationRules="recal-ack-required" validationRules="recal-ack-required"
@ -82,13 +78,6 @@
:isInsurance="isInsurance" :isInsurance="isInsurance"
validationRules="payment-method-required" /> validationRules="payment-method-required" />
<alert
v-if="showHavePaymentReadyAlert"
:isDismissible="false"
alertClass="alert-info"
cmsWidgetName="NoPiaDisclaimerWidget"
shouldScrollToOnMount="false" />
<navbar <navbar
cmsWidgetName="FunnelFooterWidget" cmsWidgetName="FunnelFooterWidget"
ref="navbar" ref="navbar"
@ -770,11 +759,6 @@ export default {
return false; return false;
}, },
showHavePaymentReadyAlert() {
return (
!this.showPaymentMethodQuestions && !this.forwardClicked && this.totalAmountDue > 0
);
},
totalAmountDue() { totalAmountDue() {
return getAmountDue(this.lineItems); return getAmountDue(this.lineItems);
}, },
@ -907,6 +891,12 @@ export default {
margin: 0; margin: 0;
} }
.payment-method { .payment-method {
:deep(.almost-done) {
font-family: UrbanistSemibold;
}
:deep(h5) {
margin-bottom: 1rem;
}
.recal-modal { .recal-modal {
:deep(.modal-body) { :deep(.modal-body) {
display: flex; display: flex;

6
src/layouts/payment-method/review-dropdown/review-dropdown.vue
View file

@ -157,11 +157,11 @@ export default {
&:after { &:after {
content: ""; content: "";
transition: all 0.5s ease; transition: all 0.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-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230070D1' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm6.113 11.28-5.52 5.52a.84.84 0 0 1-1.186 0l-5.52-5.52a.843.843 0 1 1 1.186-1.2L12 15.012l4.927-4.932a.843.843 0 1 1 1.186 1.2Z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right center; background-position: right center;
width: 16px; width: 24px;
height: 9px; height: 24px;
display: inline-flex; display: inline-flex;
position: relative; position: relative;
right: 0.75rem; right: 0.75rem;

2
src/layouts/payment/payment.spec.js
View file

@ -577,7 +577,7 @@ describe("payment.vue", () => {
// Arrange // Arrange
const wrapper = setupMocks({}); const wrapper = setupMocks({});
const outerDiv = wrapper.find(".container-fluid"); const outerDiv = wrapper.find(".container");
const clickFn = jest.fn(); const clickFn = jest.fn();
outerDiv.element.addEventListener("click", clickFn); outerDiv.element.addEventListener("click", clickFn);

13
src/layouts/payment/payment.vue
View file

@ -1,15 +1,10 @@
<template> <template>
<Form> <Form>
<loadingModal notFullScreen ref="loadingModal" /> <loadingModal notFullScreen ref="loadingModal" />
<div class="container-fluid"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 p-0">
<div> <div>
<alert <alert
ref="piaCCErrorAlert" ref="piaCCErrorAlert"

5
src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
View file

@ -169,9 +169,8 @@ export default {
max-width: 32rem; max-width: 32rem;
} }
} }
& .alert-heading {
#afterpay-learnmore { font-size: 0.875rem;
white-space: nowrap;
} }
} }
</style> </style>

40
src/layouts/quote/quote.vue
View file

@ -4,13 +4,12 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container quote position-relative"> <div class="container quote position-relative">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 col-md-10"> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4"> <div class="col-md-6">
<funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
<cashOrInsuranceQuestion <cashOrInsuranceQuestion
ref="cashOrInsurance" ref="cashOrInsurance"
cmsWidgetName="CashOrInsuranceQuestionWidget" cmsWidgetName="CashOrInsuranceQuestionWidget"
@ -68,7 +67,7 @@
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-8 col-xl-6">
<contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" /> <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
<contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" /> <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
<contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" /> <contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
@ -89,9 +88,8 @@
<textBlock <textBlock
cmsWidgetName="quoteDisclaimer" cmsWidgetName="quoteDisclaimer"
justifyText="center"
typeStyle="caption" typeStyle="caption"
class="mb-5 quote-disclaimer" /> class="mb-5 quote-disclaimer text-left text-md-center" />
</div> </div>
</div> </div>
@ -894,6 +892,31 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// Unique to quote page for 2.0/Heritage parity
.quote {
padding-bottom: 2rem;
:deep(.nav-bar) {
position: initial;
button {
width: 100%;
justify-content: center;
}
a.navigation-link {
position: absolute;
left: 1rem;
bottom: 1rem;
@include media-breakpoint-up(lg) {
left: 6rem;
}
}
.col-auto {
width: -webkit-fill-available;
}
.col-auto {
width: -moz-available;
}
}
}
.quote-page.show-save-progress-popup .row.justify-content-center { .quote-page.show-save-progress-popup .row.justify-content-center {
display: none; display: none;
@ -914,6 +937,11 @@ export default {
.text-block { .text-block {
display: block; display: block;
} }
:deep(.container .funnel-sub-header) {
display: flex;
align-items: center;
flex-direction: column;
}
:deep(.promo-modal-question a) { :deep(.promo-modal-question a) {
@include responsive-font-size-md(0.875rem, 1rem); @include responsive-font-size-md(0.875rem, 1rem);
} }

11
src/layouts/return-user/return-user.vue
View file

@ -2,15 +2,12 @@
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="return-user small-question-text"> <div class="return-user small-question-text">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container page-container-grouped-styles">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6"> <div class="col-12 col-md-10 col-lg-8 col-xl-7 return-user-spacing">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
</div>
</div>
<div class="row justify-content-center return-user-spacing">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader <funnelSubHeader
class="justify-content-center d-flex"
ref="funnelSubHeader" ref="funnelSubHeader"
cmsWidgetName="FunnelSubHeaderWidget" /> cmsWidgetName="FunnelSubHeaderWidget" />
</div> </div>

12
src/layouts/schedule/schedule.vue
View file

@ -1,14 +1,10 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles page-schedule"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container page-container-grouped-styles">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
<serviceZipModalQuestion <serviceZipModalQuestion
editScreenReaderTextCmsWidgetName="ScreenReaderZipEditWidget" editScreenReaderTextCmsWidgetName="ScreenReaderZipEditWidget"

1
src/layouts/schedule/time-slot-modal-question/time-slot-modal-list-button/time-slot-modal-list-button.vue
View file

@ -94,6 +94,7 @@ export default {
border: 1px solid $gray-500; border: 1px solid $gray-500;
width: 100%; width: 100%;
outline: none; outline: none;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
span.premium-appointment-price { span.premium-appointment-price {
position: absolute; position: absolute;

39
src/layouts/service-location/service-location.vue
View file

@ -1,14 +1,10 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container page-container-grouped-styles">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<serviceZipModalQuestion <serviceZipModalQuestion
@ -69,8 +65,8 @@
alertClass="alert-success" /> alertClass="alert-success" />
</div> </div>
</div> </div>
<div class="row justify-content-center appointment-type"> <div class="row appointment-type">
<div class="col-md-6"> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
<appointmentTypeQuestion <appointmentTypeQuestion
v-model="selectedAppointmentType" v-model="selectedAppointmentType"
v-show="isAppointmentTypeDisplayed" v-show="isAppointmentTypeDisplayed"
@ -87,21 +83,8 @@
labelBold="true" /> labelBold="true" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row">
<div class="col-md-6 col-xl-4"> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
<button-question
v-if="selectedAppointmentType == appointmentTypeStrings.IN_SHOP"
class="shop-question-button"
ref="buttonQuestion"
:answers="selectedShopAnswer"
:modelValue="selectedProvider?.providerNumber"
:isMultiSelect="false"
:readonly="true"
:questionText="questionText"
buttonTypeString="shopListButton"
:buttonTypeObject="shopListButton"
groupName="chooseShop"
textPosition="text-start" />
<div class="text-center"> <div class="text-center">
<textBlock <textBlock
v-if="mobileFeeApplies && isMobileSelected" v-if="mobileFeeApplies && isMobileSelected"
@ -149,7 +132,6 @@ import alert from "@/ux-components/alert/alert";
import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question"; import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question"; import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
import shopQuestionPopup from "@/layouts/service-location/shop-question/shop-question-popup"; import shopQuestionPopup from "@/layouts/service-location/shop-question/shop-question-popup";
import buttonQuestion from "@/digital-components/button-question/button-question.vue";
import shopListButton from "@/layouts/service-location/shop-question/shop-list-button/shop-list-button"; import shopListButton from "@/layouts/service-location/shop-question/shop-list-button/shop-list-button";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header"; import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
@ -900,7 +882,6 @@ export default {
loadingModal, loadingModal,
contentGroupModal, contentGroupModal,
shopQuestionPopup, shopQuestionPopup,
buttonQuestion,
textBlock, textBlock,
}, },
}; };
@ -913,10 +894,6 @@ export default {
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
padding: 0 0.75rem; padding: 0 0.75rem;
} }
@include media-breakpoint-up(xl) {
width: 33.3333333%;
flex: 0 0 auto;
}
} }
} }
} }

2
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="text-center"> <div class="text-left">
<div class="update-zip-text-link"> <div class="update-zip-text-link">
<textLink <textLink
id="serviceZipLinkPromptId" id="serviceZipLinkPromptId"

9
src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
View file

@ -2,11 +2,11 @@
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<baseInputButton <baseInputButton
v-bind="$props" v-bind="$props"
buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2" buttonWrapperClasses="list-group base-input-button rounded-pill list-button d-flex flex-column w-100 mb-2"
v-model="selectedValue"> v-model="selectedValue">
<div <div
:aria-label="buttonLabel" :aria-label="buttonLabel"
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4 p-md-4"> class="button-content list-button-content rounded-pill d-flex flex-column justify-content-center py-3 px-4 p-md-4">
<div class="row-one"> <div class="row-one">
<span class="m-0 button-label-copy text-truncate" :class="textPosition"> <span class="m-0 button-label-copy text-truncate" :class="textPosition">
{{ buttonLabel }} {{ buttonLabel }}
@ -174,10 +174,10 @@ export default {
position: relative; position: relative;
background: $white; background: $white;
transition: all 150ms linear; transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500; border: 1px solid $gray-500;
width: 100%; width: 100%;
outline: none; outline: none;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
span { span {
&.small { &.small {
@ -193,6 +193,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 1.5rem; line-height: 1.5rem;
justify-content: center;
.button-label-copy { .button-label-copy {
font-weight: 500; font-weight: 500;
@ -262,7 +263,7 @@ export default {
} }
.row-two { .row-two {
text-align: left; text-align: center;
} }
} }
</style> </style>

2
src/layouts/service-location/shop-question/shop-question.vue
View file

@ -16,7 +16,7 @@
:questionText="questionText" :questionText="questionText"
:answers="answers" :answers="answers"
groupName="chooseShop" groupName="chooseShop"
textPosition="text-start" textPosition="text-center"
v-model="selectedProviderNumber" v-model="selectedProviderNumber"
isRequired isRequired
validationRules="option-required" /> validationRules="option-required" />

15
src/layouts/service-zip/service-zip.vue
View file

@ -1,14 +1,10 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
<div> <div>
<textboxQuestion <textboxQuestion
@ -359,9 +355,6 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.vinlookupquestion p {
margin-bottom: 0;
}
.vinlookupquestion strong { .vinlookupquestion strong {
font-weight: 500; font-weight: 500;
color: $black; color: $black;

24
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -1,14 +1,10 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="container-fluid page-container-grouped-styles vehicle-damage"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mb-7" />
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<alert <alert
ref="vehicleChangeAlert" ref="vehicleChangeAlert"
v-if="shouldDisplayVehicleChangeAlert" v-if="shouldDisplayVehicleChangeAlert"
@ -18,7 +14,7 @@
:isDismissible="false" /> :isDismissible="false" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<damageLocationQuestion <damageLocationQuestion
ref="damageLocation" ref="damageLocation"
@ -27,8 +23,8 @@
groupName="DamageLocationQuestion" /> groupName="DamageLocationQuestion" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row">
<div class="col-md-6 col-xl-4"> <div class="col-md-6">
<windshieldOptions <windshieldOptions
class="windshield-options" class="windshield-options"
ref="windshieldOptions" ref="windshieldOptions"
@ -61,8 +57,8 @@
validationRules="replace-options-required" /> validationRules="replace-options-required" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row">
<div class="col-md-6 col-xl-4"> <div class="col-md-6">
<navbar <navbar
cmsWidgetName="FunnelFooterWidget" cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!isContinueEnabled" :isForwardActionDisabled="!isContinueEnabled"

30
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -2,30 +2,18 @@
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="vehicle-parts small-question-text"> <div class="vehicle-parts small-question-text">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container page-container-grouped-styles">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader <funnelSubHeader
ref="funnelSubHeader" ref="funnelSubHeader"
cmsWidgetName="FunnelSubHeaderWidget" /> cmsWidgetName="FunnelSubHeaderWidget"
class="mb-7" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row">
<div class="col-md-6 col-xl-4 my-5"> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
<alert
class="rounded border-0 shadow-sm"
alertClass="alert-warning"
cmsWidgetName="AlertWidget"
:isDismissible="false" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div v-for="(item, i) in PartsOrQuestions" :key="i"> <div v-for="(item, i) in PartsOrQuestions" :key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) --> <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<hr v-if="i > 0" /> <hr v-if="i > 0" />
@ -63,7 +51,6 @@ import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass
import funnelHeader from "@/fmg-components/funnel-header/funnel-header"; import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header"; import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import navbar from "@/fmg-components/nav-bar/nav-bar"; import navbar from "@/fmg-components/nav-bar/nav-bar";
import alert from "@/ux-components/alert/alert";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue"; import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question"; import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
// Supporting Files // Supporting Files
@ -244,7 +231,6 @@ export default {
funnelHeader, funnelHeader,
funnelSubHeader, funnelSubHeader,
navbar, navbar,
alert,
loadingModal, loadingModal,
saveProgressModalQuestion, saveProgressModalQuestion,
}, },

12
src/layouts/vehicle/vehicle.vue
View file

@ -1,13 +1,9 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="container-fluid"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" />
<vehicleQuestion <vehicleQuestion
ref="vehicleYearQuestion" ref="vehicleYearQuestion"

6
src/layouts/vin-lookup/vin-information/vin-information.vue
View file

@ -63,12 +63,12 @@ export default {
&:after { &:after {
content: ""; content: "";
transition: all 0.5s ease; transition: all 0.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-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230070D1' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm6.113 11.28-5.52 5.52a.84.84 0 0 1-1.186 0l-5.52-5.52a.843.843 0 1 1 1.186-1.2L12 15.012l4.927-4.932a.843.843 0 1 1 1.186 1.2Z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right center; background-position: right center;
margin-left: 0.5rem; margin-left: 0.5rem;
width: 16px; width: 24px;
height: 9px; height: 24px;
display: inline-flex; display: inline-flex;
} }
&.active:after { &.active:after {

12
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -1,14 +1,10 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container page-container-grouped-styles">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<textboxQuestion <textboxQuestion
class="mb-2 mt-5" class="mb-2 mt-5"

8
src/styles/common-error-styles.scss
View file

@ -202,21 +202,21 @@ html {
.form-test-invalid { .form-test-invalid {
&.btn.btn-primary { &.btn.btn-primary {
color: $gray-600; color: $white;
background: $gray-200; background: $red;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
} }
&.btn.btn-primary:hover, &.btn.btn-primary:hover,
&.btn.btn-primary:focus { &.btn.btn-primary:focus {
background: $gray-200; background: $red;
box-shadow: none; box-shadow: none;
} }
&.btn.btn-primary:focus-visible { &.btn.btn-primary:focus-visible {
box-shadow: box-shadow:
0 0 0 3px $white, 0 0 0 3px $white,
0 0 0 5.5px $gray-700; 0 0 0 5.5px $red;
} }
} }
} }

13
src/styles/common-styles.scss
View file

@ -8,13 +8,10 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100dvh; min-height: 100dvh;
form { }
> .container-fluid { .container {
margin-bottom: -1rem; @include media-breakpoint-up(xl) {
@media screen and (min-width: 1090px) { max-width: 1020px;
margin-bottom: -5rem;
}
}
} }
} }
.container-fluid { .container-fluid {
@ -90,7 +87,7 @@ body {
} }
} }
.modal-open:not(.prevent-modal-scroll) { .modal-open:not(.prevent-modal-scroll) {
.container-fluid { .container {
&.page-container-grouped-styles { &.page-container-grouped-styles {
overflow: hidden; overflow: hidden;
height: auto; height: auto;

19
src/styles/shared-input-button-styles.scss
View file

@ -1,3 +1,22 @@
.base-input-button {
&.rounded-pill {
&:not(.has-error):hover {
cursor: pointer;
&.list-button,
&.list-button-horizontal,
&.list-card {
&:not(.selected) {
position: relative;
z-index: 5;
@include box-shadow-hover($blue-300);
border-radius: 50rem;
}
}
}
}
}
.base-input-button { .base-input-button {
&:not(.has-error):hover { &:not(.has-error):hover {
cursor: pointer; cursor: pointer;

1
src/styles/ux-variables.scss
View file

@ -204,6 +204,7 @@ $enable-important-utilities: false;
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
md: 768px, md: 768px,
lg: 992px,
xl: 1200px, xl: 1200px,
xxl: 1440px, xxl: 1440px,
); );

45
src/ux-components/button-main/button-main.vue
View file

@ -1,14 +1,14 @@
<template> <template>
<button <button
:aria-disabled="isDisabled" :aria-disabled="isDisabled"
class="btn d-flex align-items-center justify-content-center py-3 px-4 delay" class="btn rounded-pill d-flex align-items-center justify-content-center py-3 px-6 delay"
:class="[ :class="[
isPrimary ? 'btn-primary' : 'btn-secondary', isPrimary ? 'btn-primary' : 'btn-secondary',
isFloat ? 'float-end' : '', isFloat ? 'float-end' : '',
isLoaderDisplayed && !suppressLoader ? 'has-loader' : '', isLoaderDisplayed && !suppressLoader ? 'has-loader' : '',
]" ]"
@click="clicked"> @click="clicked">
<span class="m-0">{{ this.buttonText }}</span> <span class="m-0" v-html="buttonText"></span>
<loader <loader
class="ms-2" class="ms-2"
v-if="isLoaderDisplayed && !suppressLoader" v-if="isLoaderDisplayed && !suppressLoader"
@ -63,21 +63,23 @@ export default {
<style lang="scss"> <style lang="scss">
.btn { .btn {
&:first-child:active {
background-color: $red;
}
&.btn-primary { &.btn-primary {
position: relative; position: relative;
background: linear-gradient(270deg, $blue 0%, $blue-800 100%); background: $red;
border: none; border: none;
border-radius: $border-radius-lg;
color: $white; color: $white;
justify-content: center; justify-content: center;
font-weight: 500; font-weight: 500;
@media (hover: hover) { @media (hover: hover) {
background: linear-gradient(270deg, $blue 0%, $blue-800 100%); background: $red;
} }
&:focus { &:focus {
box-shadow: box-shadow:
0 0 0 3px, 0 0 0 3px,
0 0 0 5.5px $blue-700; 0 0 0 5.5px $red;
} }
&:focus, // Mouse, touch, stylus focus &:focus, // Mouse, touch, stylus focus
&:focus-visible { &:focus-visible {
@ -85,27 +87,26 @@ export default {
outline: none; outline: none;
box-shadow: box-shadow:
0 0 0 3px, 0 0 0 3px,
0 0 0 5.5px $blue-700; 0 0 0 5.5px $red;
color: $white; color: $white;
background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%); background: $red;
} }
&:disabled { &:disabled {
background: $gray-200 !important; background: $gray-200 !important;
background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important; background: $red !important;
color: $gray-600 !important; color: $white !important;
font-weight: 400; font-weight: 400;
height: 48px; height: 48px;
border: none; border: none;
border-radius: $border-radius-lg;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
} }
&.has-loader { &.has-loader {
color: $white; color: $white;
background: $blue-700; background: $red;
box-shadow: box-shadow:
0 0 0 3px, 0 0 0 3px,
0 0 0 5.5px $blue-700; 0 0 0 5.5px $red;
pointer-events: auto; pointer-events: auto;
} }
&.delay { &.delay {
@ -116,15 +117,13 @@ export default {
&.btn-secondary { &.btn-secondary {
position: relative; position: relative;
background: transparent; background: transparent;
border: 1px solid $blue; border: 1px solid $red;
border-radius: $border-radius-lg; color: $red;
color: $blue;
font-weight: 500; font-weight: 500;
transition: all 150ms linear; transition: all 150ms linear;
height: 3rem; height: 3rem;
&:hover { &:hover {
color: $white; color: $white;
@include blue-gradient;
} }
&:focus, // Mouse, touch, stylus focus &:focus, // Mouse, touch, stylus focus
&:focus-visible { &:focus-visible {
@ -132,23 +131,20 @@ export default {
outline: none; outline: none;
box-shadow: box-shadow:
0 0 0 3px $white, 0 0 0 3px $white,
0 0 0 5.5px $blue-700; 0 0 0 5.5px $red;
color: $white; color: $white;
@include blue-gradient;
} }
&:disabled { &:disabled {
background: transparent; background: transparent;
color: $gray-550 !important; color: $red !important;
font-weight: 400; font-weight: 400;
height: 48px; height: 48px;
border: 1px solid $gray-550; border: 1px solid $red;
border-radius: $border-radius-lg;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
} }
&.has-loader { &.has-loader {
color: $white; color: $white;
@include blue-gradient;
pointer-events: none; pointer-events: none;
} }
&.delay { &.delay {
@ -160,7 +156,6 @@ export default {
position: relative; position: relative;
background: $green-100; background: $green-100;
border: 1px solid $green-400; border: 1px solid $green-400;
border-radius: $border-radius-lg;
color: $black; color: $black;
font-weight: 500; font-weight: 500;
transition: all 150ms linear; transition: all 150ms linear;
@ -185,13 +180,11 @@ export default {
font-weight: 400; font-weight: 400;
height: 48px; height: 48px;
border: 1px solid $gray-550; border: 1px solid $gray-550;
border-radius: $border-radius-lg;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
} }
&.has-loader { &.has-loader {
color: $white; color: $white;
@include blue-gradient;
pointer-events: none; pointer-events: none;
} }
&.delay { &.delay {

1
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -43,6 +43,7 @@ export default {
<style lang="scss"> <style lang="scss">
.list-button-horizontal { .list-button-horizontal {
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
position: absolute; position: absolute;

5
src/ux-components/list-button/list-button.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<baseInputButton <baseInputButton
v-bind="$props" v-bind="$props"
buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2" buttonWrapperClasses="list-group base-input-button list-button rounded-pill d-flex flex-column w-100 mb-2"
v-model="selectedValue"> v-model="selectedValue">
<div <div
:aria-label="buttonLabel" :aria-label="buttonLabel"
@ -102,10 +102,11 @@ export default {
position: relative; position: relative;
background: $white; background: $white;
transition: all 150ms linear; transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500; border: 1px solid $gray-500;
width: 100%; width: 100%;
outline: none; outline: none;
border-radius: 50rem;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
span { span {
&.small { &.small {

1
src/ux-components/list-card/list-card.vue
View file

@ -76,6 +76,7 @@ export default {
} }
.list-card { .list-card {
border: 1px solid $gray-500; border: 1px solid $gray-500;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
&.has-error { &.has-error {
input[type="checkbox"], input[type="checkbox"],

8
src/ux-components/text-link/text-link.vue
View file

@ -64,10 +64,9 @@ export default {
<style lang="scss"> <style lang="scss">
a { a {
color: $blue; color: $blue;
text-underline-offset: 4px; //Per Devyn. This can't be documented in Figma so there is a comment with the Prototype mocks on the Quote page in Figma text-decoration: none;
line-height: 2; line-height: 2;
padding: 0 0 4px 0; padding: 0 0 4px 0;
font-weight: 500;
max-width: fit-content; max-width: fit-content;
&:hover { &:hover {
color: $blue-700; color: $blue-700;
@ -81,10 +80,13 @@ a {
&.navigation-link, &.navigation-link,
&.new-window-link { &.new-window-link {
font-size: 0.875rem; font-size: 0.875rem;
color: $black; color: $blue;
line-height: 26px; line-height: 26px;
white-space: nowrap; white-space: nowrap;
align-items: center; align-items: center;
font-family: UrbanistSemibold;
font-weight: 600;
text-decoration: none;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
font-size: 1rem; font-size: 1rem;
} }