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;
}
@media (min-width: 500px) {
.form-group {
width: 80%;
}
}
@media (min-width: 800px) {
.form-group {
width: 60%;
}
}
.list-group {
margin-bottom: 20px;
padding-left: 0;

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

@ -188,17 +188,6 @@
margin-bottom: 2px;
}
@media (min-width: 500px) {
.form-group {
width: 80%;
}
}
@media (min-width: 800px) {
.form-group {
width: 60%;
}
}
.list-group {
margin-bottom: 20px;
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
v-if="questionText && answers && answers.length > 0"
class="question-text d-flex"
class="question-text"
:class="{ 'small-question-text': isSmallQuestionText }">
<span class="fw-bold w-100" :class="[labelBold ? 'span-bold' : '']">
{{ questionText }}
@ -83,10 +83,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
</div>
</fieldset>
</div>
<div
id="form-test-error"
class="row form-test-error"
:class="isErrorCentered ? 'text-center' : ''">
<div id="form-test-error" class="row form-test-error">
<error-message
role="comment"
aria-atomic="true"
@ -261,12 +258,6 @@ export default {
return classes;
},
isErrorCentered() {
if (this.buttonTypeString == "listCard" && this.buttonsInfo.length <= 2) {
return true;
}
return false;
},
buttonsInfo() {
return (Array.isArray(this.answers) ? this.answers : [])?.map((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-radius: 0.5rem;
min-height: 3rem;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
@include media-breakpoint-up(md) {
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-primary {
position: relative;
background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
background: $red;
border: none;
border-radius: $border-radius-lg;
color: $white;
justify-content: center;
font-weight: 500;
@media (hover: hover) {
background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
background: $red;
}
&:focus {
box-shadow:
0 0 0 3px,
0 0 0 5.5px $blue-700;
0 0 0 5.5px $red;
}
&:focus, // Mouse, touch, stylus focus
&:focus-visible {
@ -86,27 +85,26 @@ export default {
outline: none;
box-shadow:
0 0 0 3px,
0 0 0 5.5px $blue-700;
0 0 0 5.5px $red;
color: $white;
background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
background: $red;
}
&:disabled {
background: $gray-200 !important;
background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important;
background: $red !important;
color: $gray-600 !important;
font-weight: 400;
height: 48px;
border: none;
border-radius: $border-radius-lg;
cursor: pointer;
pointer-events: all;
}
&.has-loader {
color: $white;
background: $blue-700;
background: $red;
box-shadow:
0 0 0 3px,
0 0 0 5.5px $blue-700;
0 0 0 5.5px $red;
pointer-events: none;
}
&.delay {
@ -117,8 +115,7 @@ export default {
&.btn-secondary {
position: relative;
background: transparent;
border: 1px solid $blue;
border-radius: $border-radius-lg;
border: 1px solid $red;
color: $blue;
font-weight: 500;
transition: all 150ms linear;
@ -133,7 +130,7 @@ export default {
outline: none;
box-shadow:
0 0 0 3px $white,
0 0 0 5.5px $blue-700;
0 0 0 5.5px $red;
color: $white;
@include blue-gradient;
}
@ -142,14 +139,12 @@ export default {
color: $gray-550 !important;
font-weight: 400;
height: 48px;
border: 1px solid $gray-550;
border-radius: $border-radius-lg;
border: 1px solid $red;
cursor: pointer;
pointer-events: all;
}
&.has-loader {
color: $white;
@include blue-gradient;
pointer-events: none;
}
&.delay {

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

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

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

@ -1286,11 +1286,11 @@ export default {
&:after {
content: "";
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-position: right center;
width: 16px;
height: 9px;
width: 24px;
height: 24px;
display: inline-flex;
position: relative;
right: 0.75rem;

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

@ -1,15 +1,5 @@
<template>
<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">
<textLink
linkType="newWindowLink"
@ -64,13 +54,6 @@ export default {
margin-top: auto;
padding: 0 0 2rem 0;
.skyline {
height: 96px;
}
.neighborhood {
height: 48px;
}
p {
font-size: 0.875rem;
margin-top: 0.25rem;
@ -93,12 +76,16 @@ export default {
:deep(a) {
text-decoration: none;
&.new-window-link {
font-family: Urbanist, Arial, Helvetica, sans-serif;
margin: 0 0.75rem;
color: $gray-600;
font-weight: 400;
}
&.navigation-link {
font-family: Urbanist, Arial, Helvetica, sans-serif;
margin: 0 0.75rem;
color: $gray-600;
font-weight: 400;
}
}

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

@ -1,8 +1,16 @@
<template>
<div class="funnel-header" v-if="imageSrc">
<div class="d-flex justify-content-between align-items-center">
<div class="button-container">
<span class="webchat">
<div class="d-flex w-100">
<progress-bar :page="$route.name" />
</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
v-show="shouldShowWebchatButton"
v-on:click="webchatClicked"
@ -10,18 +18,10 @@
class="chat-button"></button>
</span>
</div>
<div class="site-logo">
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
</div>
<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 />
<!-- // 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 class="d-flex w-100">
<progress-bar :page="$route.name" />
</div>
</div>
<template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
<transition name="fade" mode="out-in">
@ -197,23 +197,39 @@ export default {
<style lang="scss" scoped>
.funnel-header {
.container {
padding: 1rem 0.75rem;
display: flex;
align-items: center;
@include media-breakpoint-up(md) {
padding: 2rem 0.75rem;
}
}
position: relative;
padding: 1rem 0;
padding: 0 0 1rem 0;
.button-container {
width: 1.5rem;
height: 1.625rem;
&.webchat {
margin-right: 1rem;
@include media-breakpoint-up(md) {
margin-right: 2rem;
}
}
}
.site-logo {
margin-right: auto;
}
.logo-image {
width: auto;
height: 1.1875rem;
width: 100px;
height: 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 {
.chat-button {
width: 1.5rem;

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

@ -6,9 +6,13 @@
:class="[isActive ? 'active' : '']"
@click="toggleModal"
aria-label="Hamburger Menu (modal window)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<span v-if="isActive">Close</span>
<span v-else>Step {{ currentStepNumber }} of 4</span>
<div class="bars ms-2">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</button>
</div>
<div
@ -18,47 +22,45 @@
tabindex="-1"
aria-labelledby="footerModalLabel"
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-content">
<div class="modal-header visually-hidden">
<h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
</div>
<div class="modal-body d-flex flex-column">
<textLink
linkType="newWindowLink"
text="Terms of service"
href="//www.safelite.com/terms-of-service"
target="_blank" />
<textLink
linkType="newWindowLink"
text="Your privacy choices"
href="//www.safelite.com/privacy-center"
target="_blank">
<template v-slot:after-text>
<img
class="ccpa-icon"
src="~@/assets/img/icons/ccpa-icon.svg"
alt="Your privacy choices" />
</template>
</textLink>
<textLink
linkType="navigation"
text="Cookie preferences"
href="javascript:OneTrust.ToggleInfoDisplay();" />
<textLink
linkType="newWindowLink"
text="Warranty"
href="//www.safelite.com/national-lifetime-warranty"
target="_blank" />
<textLink
linkType="newWindowLink"
text="Notice at collection"
href="https://www.safelite.com/ccpa-privacy-policy"
target="_blank" />
</div>
<div class="modal-footer d-flex justify-content-start">
&copy; {{ new Date().getFullYear() }} Safelite Group
<div class="step-grid">
<div class="bar-container">
<progress-bar class="bar-dots" :page="$route.name" :vertical="true" />
<span class="dot1"></span>
<span class="dot2"></span>
<span class="dot3"></span>
<span class="dot4"></span>
</div>
<div class="d-flex flex-column justify-content-between">
<div class="step-containers">
<span class="step-number">Step 1 of 4</span>
<br />
<span class="step-name">Vehicle</span>
</div>
<div class="step-containers">
<span class="step-number">Step 2 of 4</span>
<br />
<span class="step-name">Quote</span>
</div>
<div class="step-containers">
<span class="step-number">Step 3 of 4</span>
<br />
<span class="step-name">Schedule</span>
</div>
<div class="step-containers">
<span class="step-number">Step 4 of 4</span>
<br />
<span class="step-name">Review</span>
</div>
</div>
</div>
</div>
</div>
</div>
@ -66,8 +68,9 @@
</template>
<script>
import textLink from "@/ux-components/text-link/text-link";
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";
export default {
@ -100,8 +103,13 @@ export default {
self.isActive = false;
},
},
computed: {
currentStepNumber() {
return getProgressBarStep(this.$route.name);
},
},
components: {
textLink,
progressBar,
},
};
</script>
@ -111,49 +119,92 @@ export default {
button {
border: none;
&.menu-button {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
width: auto;
height: auto;
border-radius: 1.5rem;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
background-color: $white;
position: relative;
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: 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;
.bar1,
.bar2,
.bar3 {
width: 14px;
height: 2px;
background-color: $blue;
margin: 1px 0;
transition: 0.25s;
@include media-breakpoint-up(md) {
padding: 0.25rem 1rem;
}
&.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, -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 {
&.menu-modal {
//left: auto;
height: calc(100% - 56px);
top: 56px;
.modal-dialog {
position: fixed;
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;
overflow-x: visible;
overflow-y: visible;
@include media-breakpoint-up(md) {
height: calc(100% - 102px);
top: 102px;
}
.modal-body {
padding: 2rem;
display: flex;
align-items: center;
.ccpa-icon {
width: 2.0625rem;
height: 1rem;
@ -162,6 +213,48 @@ export default {
:deep(.navigation-link) {
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 {
width: 100vw;
@ -190,23 +283,30 @@ export default {
align-items: center;
padding: 0; //Required to prevent 'squish' on iPhone
z-index: 1056;
.bar1,
.bar2,
.bar3 {
width: 14px;
height: 2px;
background-color: $blue;
margin: 1px 0;
transition: 0.25s;
}
&.active .bar1 {
transform: rotate(-45deg) translate(-3px, 3px);
}
&.active .bar2 {
opacity: 0;
}
&.active .bar3 {
transform: rotate(45deg) translate(-3px, -3px);
.bars {
width: 1.5rem;
height: 1.5rem;
display: flex;
justify-content: space-around;
flex-direction: column;
.bar1,
.bar2,
.bar3 {
width: 1.5rem;
height: 2px;
background-color: $blue;
margin: 1px 0;
transition: 0.25s;
}
&.active .bar1 {
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>
<div class="progress-bar-outer">
<div :class="barClass">
<div class="progress-bar-inner" :style="progressStyle"></div>
</div>
</template>
@ -18,6 +18,10 @@ export default {
type: String,
required: true,
},
vertical: {
type: Boolean,
default: false,
},
},
data() {
return {
@ -45,9 +49,20 @@ export default {
},
computed: {
progressStyle() {
return {
width: this.displayedProgress + "%",
};
if (this.vertical) {
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">
.progress-bar-outer {
background: $blue-100;
height: 10px;
height: 5px;
position: relative;
border-radius: 10px;
border-radius: 0;
width: 100%;
margin-top: 1rem;
margin-top: 0;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
.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;
height: 10px;
background-color: $blue;
height: 100%;
background-color: $red;
position: absolute;
top: 0;
left: 0;
border-radius: 10px;
border-radius: 0;
}
}
progress {
height: 10px;
.progress-bar-outer-vertical {
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%;
/* Firefox */
appearance: none;
background-color: $blue-100;
border: 0;
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;
}
background-color: $red;
position: absolute;
left: 0;
top: 0;
border-radius: 50rem;
}
}
</style>

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

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

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

@ -1,31 +1,15 @@
<template>
<div :class="`questions-page`">
<loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container page-container-grouped-styles">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<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 class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7 question-chain-wrapper">
<div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
<questionChain
ref="questionChain"
@ -54,7 +38,6 @@
<script>
// Components
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 funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
@ -96,7 +79,6 @@ export default {
},
components: {
funnelHeader,
alert,
questionChain,
funnelSubHeader,
navbar,
@ -114,7 +96,7 @@ export default {
}
.questions-page {
.question-text {
margin-bottom: 0.5rem;
margin-bottom: 1.5rem;
span {
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;
order: 2;
text-align: center;
background: $blue-100;
background: $gray-100;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 3rem;
border-radius: 0.5rem;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
&.progress-saved {
background: none;
@ -135,14 +136,13 @@ export default {
position: relative;
color: $blue;
border: none;
font-weight: 900;
font-family: UrbanistSemibold;
font-size: 0.875rem;
text-align: center;
text-align: left;
display: inline-block;
width: auto;
height: auto;
text-decoration: underline;
text-underline-offset: 0.25rem;
text-decoration: none;
line-height: 1rem;
padding: 1rem;
margin: 0 auto;
@ -154,7 +154,6 @@ export default {
&.btn {
&.btn-secondary {
font-weight: 900;
border: none;
&:hover,
&:active,
@ -183,6 +182,17 @@ export default {
// fixes flicker while transitioning between states
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 {

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

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

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

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

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

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

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

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

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

@ -1,13 +1,9 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="container-fluid page-container-grouped-styles">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container page-container-grouped-styles">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<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;
width: 100%;
outline: none;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
span {
&.small {

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

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

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

@ -157,11 +157,11 @@ export default {
&:after {
content: "";
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-position: right center;
width: 16px;
height: 9px;
width: 24px;
height: 24px;
display: inline-flex;
position: relative;
right: 0.75rem;

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

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

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

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

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

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

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

@ -4,13 +4,12 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container quote position-relative">
<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" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
<div class="col-md-6">
<cashOrInsuranceQuestion
ref="cashOrInsurance"
cmsWidgetName="CashOrInsuranceQuestionWidget"
@ -68,7 +67,7 @@
</div>
</div>
<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="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
<contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
@ -89,9 +88,8 @@
<textBlock
cmsWidgetName="quoteDisclaimer"
justifyText="center"
typeStyle="caption"
class="mb-5 quote-disclaimer" />
class="mb-5 quote-disclaimer text-left text-md-center" />
</div>
</div>
@ -894,6 +892,31 @@ export default {
</script>
<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 {
display: none;
@ -914,6 +937,11 @@ export default {
.text-block {
display: block;
}
:deep(.container .funnel-sub-header) {
display: flex;
align-items: center;
flex-direction: column;
}
:deep(.promo-modal-question a) {
@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">
<div class="return-user small-question-text">
<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="col-md-6">
<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">
<div class="col-12 col-md-10 col-lg-8 col-xl-7 return-user-spacing">
<funnelSubHeader
class="justify-content-center d-flex"
ref="funnelSubHeader"
cmsWidgetName="FunnelSubHeaderWidget" />
</div>

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

@ -1,14 +1,10 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles page-schedule">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container page-container-grouped-styles">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
<serviceZipModalQuestion
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;
width: 100%;
outline: none;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
span.premium-appointment-price {
position: absolute;

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

@ -1,14 +1,10 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container page-container-grouped-styles">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<serviceZipModalQuestion
@ -69,8 +65,8 @@
alertClass="alert-success" />
</div>
</div>
<div class="row justify-content-center appointment-type">
<div class="col-md-6">
<div class="row appointment-type">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<appointmentTypeQuestion
v-model="selectedAppointmentType"
v-show="isAppointmentTypeDisplayed"
@ -87,21 +83,8 @@
labelBold="true" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<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="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<div class="text-center">
<textBlock
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 appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
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 funnelHeader from "@/fmg-components/funnel-header/funnel-header";
@ -900,7 +882,6 @@ export default {
loadingModal,
contentGroupModal,
shopQuestionPopup,
buttonQuestion,
textBlock,
},
};
@ -913,10 +894,6 @@ export default {
@include media-breakpoint-up(md) {
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>
<div class="text-center">
<div class="text-left">
<div class="update-zip-text-link">
<textLink
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">
<baseInputButton
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">
<div
: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">
<span class="m-0 button-label-copy text-truncate" :class="textPosition">
{{ buttonLabel }}
@ -174,10 +174,10 @@ export default {
position: relative;
background: $white;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;
width: 100%;
outline: none;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
span {
&.small {
@ -193,6 +193,7 @@ export default {
display: flex;
align-items: center;
line-height: 1.5rem;
justify-content: center;
.button-label-copy {
font-weight: 500;
@ -262,7 +263,7 @@ export default {
}
.row-two {
text-align: left;
text-align: center;
}
}
</style>

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

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

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

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

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

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

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

@ -2,30 +2,18 @@
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="vehicle-parts small-question-text">
<loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container page-container-grouped-styles">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader
ref="funnelSubHeader"
cmsWidgetName="FunnelSubHeaderWidget" />
cmsWidgetName="FunnelSubHeaderWidget"
class="mb-7" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 my-5">
<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 class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<div v-for="(item, i) in PartsOrQuestions" :key="i">
<!-- Render horizontal lines if there is multi-glass (aka 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 funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
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 saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
// Supporting Files
@ -244,7 +231,6 @@ export default {
funnelHeader,
funnelSubHeader,
navbar,
alert,
loadingModal,
saveProgressModalQuestion,
},

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

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

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

@ -63,12 +63,12 @@ export default {
&:after {
content: "";
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-position: right center;
margin-left: 0.5rem;
width: 16px;
height: 9px;
width: 24px;
height: 24px;
display: inline-flex;
}
&.active:after {

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

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

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

@ -202,21 +202,21 @@ html {
.form-test-invalid {
&.btn.btn-primary {
color: $gray-600;
background: $gray-200;
color: $white;
background: $red;
cursor: pointer;
pointer-events: all;
font-weight: $font-weight-normal;
}
&.btn.btn-primary:hover,
&.btn.btn-primary:focus {
background: $gray-200;
background: $red;
box-shadow: none;
}
&.btn.btn-primary:focus-visible {
box-shadow:
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;
flex-direction: column;
min-height: 100dvh;
form {
> .container-fluid {
margin-bottom: -1rem;
@media screen and (min-width: 1090px) {
margin-bottom: -5rem;
}
}
}
.container {
@include media-breakpoint-up(xl) {
max-width: 1020px;
}
}
.container-fluid {
@ -90,7 +87,7 @@ body {
}
}
.modal-open:not(.prevent-modal-scroll) {
.container-fluid {
.container {
&.page-container-grouped-styles {
overflow: hidden;
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 {
&:not(.has-error):hover {
cursor: pointer;

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

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

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

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

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

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

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

@ -1,7 +1,7 @@
<template>
<baseInputButton
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">
<div
:aria-label="buttonLabel"
@ -102,10 +102,11 @@ export default {
position: relative;
background: $white;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;
width: 100%;
outline: none;
border-radius: 50rem;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
span {
&.small {

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

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

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

@ -64,10 +64,9 @@ export default {
<style lang="scss">
a {
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;
padding: 0 0 4px 0;
font-weight: 500;
max-width: fit-content;
&:hover {
color: $blue-700;
@ -81,10 +80,13 @@ a {
&.navigation-link,
&.new-window-link {
font-size: 0.875rem;
color: $black;
color: $blue;
line-height: 26px;
white-space: nowrap;
align-items: center;
font-family: UrbanistSemibold;
font-weight: 600;
text-decoration: none;
@include media-breakpoint-up(md) {
font-size: 1rem;
}