Merge branch 'develop' into feature/INSR-8093
This commit is contained in:
Jeremy-Z
commit
864cfd5e8d
5 changed files with 17 additions and 308 deletions
|
|
@ -24,8 +24,6 @@
|
|||
"
|
||||
:aria-disabled="disableForwardAction || isForwardActionDisabled"
|
||||
:isDisabled="disableForwardAction || isForwardActionDisabled"
|
||||
data-bs-target="#footerModal"
|
||||
data-bs-dismiss="modal"
|
||||
data-test-id="site-footer-main-button"
|
||||
@clickEvent="buttonClick" />
|
||||
</div>
|
||||
|
|
@ -36,8 +34,6 @@
|
|||
linkType="navigation"
|
||||
:text="backLink"
|
||||
href="javascript:void(0)"
|
||||
data-bs-target="#footerModal"
|
||||
data-bs-dismiss="modal"
|
||||
data-test-id="site-footer-back-button"
|
||||
@clickEvent="linkClick" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,50 +0,0 @@
|
|||
import { mount, shallowMount } from '@vue/test-utils';
|
||||
import menuModal from '@/iss-components/site-header/menu-modal/menu-modal.vue';
|
||||
|
||||
describe('menu-modal.vue', () => {
|
||||
it('Should return text Footer Navigation', async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(menuModal);
|
||||
|
||||
// Assert
|
||||
const footerModalLabel = wrapper.find('h5');
|
||||
|
||||
// Expect
|
||||
expect(footerModalLabel.text()).toContain('Footer Navigation');
|
||||
});
|
||||
|
||||
it('Should return footer text as Safelite Group', async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(menuModal);
|
||||
|
||||
// Assert
|
||||
const modalFooter = wrapper.find('div.modal-footer');
|
||||
|
||||
// Expect
|
||||
expect(modalFooter.text()).toContain('Safelite Group');
|
||||
});
|
||||
|
||||
it('Should return Terms of use text link text', async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(menuModal);
|
||||
|
||||
// Expect
|
||||
expect(wrapper.html()).toContain('Terms of service');
|
||||
});
|
||||
|
||||
it('Should return "Your privacy choices" text link text', async () => {
|
||||
// Act
|
||||
const wrapper = mount(menuModal);
|
||||
|
||||
// Expect
|
||||
expect(wrapper.html()).toContain('Your privacy choices');
|
||||
});
|
||||
|
||||
it('Should return Warranty text link text', async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(menuModal);
|
||||
|
||||
// Expect
|
||||
expect(wrapper.html()).toContain('Warranty');
|
||||
});
|
||||
});
|
||||
|
|
@ -1,232 +0,0 @@
|
|||
<template>
|
||||
<div class="menu-modal-container">
|
||||
<button
|
||||
class="menu-button"
|
||||
type="button"
|
||||
:class="[isActive ? 'active' : '']"
|
||||
aria-label="Hamburger Menu (modal window)"
|
||||
@click="toggleModal">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="menu-modal-container">
|
||||
<button
|
||||
aria-hidden="true"
|
||||
tabindex="-1"
|
||||
class="menu-button"
|
||||
type="button"
|
||||
:class="[isActive ? 'active' : '']"
|
||||
aria-label="Hamburger Menu (modal window)"
|
||||
@click="toggleModal">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div
|
||||
id="footerModal"
|
||||
class="modal menu-modal fade"
|
||||
data-bs-backdrop="false"
|
||||
tabindex="-1"
|
||||
aria-labelledby="footerModalLabel"
|
||||
aria-hidden="true"
|
||||
v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }">
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header visually-hidden">
|
||||
<h5 id="footerModalLabel" class="modal-title">
|
||||
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-use"
|
||||
target="_blank" />
|
||||
<textLink
|
||||
linkType="newWindowLink"
|
||||
text="Your privacy choices"
|
||||
href="//www.safelite.com/privacy-center"
|
||||
target="_blank">
|
||||
<template #after-text>
|
||||
<img
|
||||
class="ccpa-icon"
|
||||
src="~@/assets/img/icons/ccpa-icon.svg"
|
||||
alt="Your privacy choices" />
|
||||
</template>
|
||||
</textLink>
|
||||
<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">
|
||||
© {{ new Date().getFullYear() }} Safelite Group
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import textLink from '@/ux-components/text-link/text-link';
|
||||
import { Modal } from 'bootstrap';
|
||||
import baseMixin from '@/mixins/base-mixin.js';
|
||||
|
||||
export default {
|
||||
name: 'menu-modal',
|
||||
components: {
|
||||
textLink,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleModal() {
|
||||
if (this.isActive) {
|
||||
this.closeModal();
|
||||
} else {
|
||||
this.openModal();
|
||||
}
|
||||
},
|
||||
openModal() {
|
||||
Modal.getOrCreateInstance(
|
||||
document.getElementById('footerModal')
|
||||
).show();
|
||||
},
|
||||
closeModal() {
|
||||
Modal.getInstance(document.getElementById('footerModal')).hide();
|
||||
},
|
||||
show() {
|
||||
this.isActive = true;
|
||||
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
|
||||
},
|
||||
hide() {
|
||||
const self = this;
|
||||
self.isActive = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-modal-container {
|
||||
position: absolute;
|
||||
padding: 1.47rem 0.5rem 1.47rem 1.47rem;
|
||||
right: 0;
|
||||
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);
|
||||
background-color: $white;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0; //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;
|
||||
}
|
||||
&.active .bar1 {
|
||||
transform: rotate(-45deg) translate(-3px, 3px);
|
||||
}
|
||||
&.active .bar2 {
|
||||
opacity: 0;
|
||||
}
|
||||
&.active .bar3 {
|
||||
transform: rotate(45deg) translate(-3px, -3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal {
|
||||
&.menu-modal {
|
||||
left: auto;
|
||||
height: calc(100% - 56px);
|
||||
top: 56px;
|
||||
border-top: 1px solid $gray-300;
|
||||
overflow-x: visible;
|
||||
overflow-y: visible;
|
||||
.modal-body {
|
||||
padding: 2rem;
|
||||
.ccpa-icon {
|
||||
width: 2.0625rem;
|
||||
height: 1rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
.modal-fullscreen {
|
||||
width: 100vw;
|
||||
}
|
||||
.modal-footer {
|
||||
border-top: none;
|
||||
padding: 2rem;
|
||||
}
|
||||
.menu-modal-container {
|
||||
position: absolute;
|
||||
padding: 1.47rem 0 1.47rem 1.47rem;
|
||||
right: 0;
|
||||
top: -5rem;
|
||||
button {
|
||||
border: none;
|
||||
&.menu-button {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 50%;
|
||||
box-shadow: none;
|
||||
background-color: $white;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//.modal-backdrop styles are in common-styles.scss
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -297,7 +297,7 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.iss-heritage-container-width {
|
||||
.policy-vehicles-container {
|
||||
position: relative;
|
||||
|
|
@ -305,28 +305,17 @@ export default {
|
|||
padding-left: .9375rem;
|
||||
padding-right: .9375rem;
|
||||
|
||||
.subheader-secondary p {
|
||||
:deep(.subheader-secondary p) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:deep(span.small) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
:deep(.form-test-error) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.policy-vehicles {
|
||||
.button-question {
|
||||
.question-text {
|
||||
margin: 1rem 0;
|
||||
span {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-button-content {
|
||||
span.small {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
cmsWidgetName="SiteSubHeader"
|
||||
class="mb-0 mt-4 text-center" />
|
||||
<div
|
||||
class="mt-4 mb-5"
|
||||
class="mt-4 mb-5 strong-text-override"
|
||||
v-html="scheduleWithSafeliteText"></div>
|
||||
<buttonMain
|
||||
ref="buttonMain"
|
||||
|
|
@ -210,6 +210,12 @@ export default {
|
|||
}
|
||||
|
||||
.provider-preference {
|
||||
:deep(.strong-text-override) {
|
||||
strong {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
#sub-header span {
|
||||
color: $black;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue