Merge pull request #822 from Safelite/CSR-947-privacy-policy-menu-updates

WIP Update privacy links and add slot for icon.
This commit is contained in:
bmauger 2022-11-22 08:51:02 -05:00 committed by GitHub
commit 899c3c561e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 7 deletions

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 30 14" viewBox="0 0 30 14">
<path d="M7.4 12.8h6.8l3.1-11.6H7.4C4.2 1.2 1.6 3.8 1.6 7s2.6 5.8 5.8 5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"/>
<path d="M22.6 0H7.4c-3.9 0-7 3.1-7 7s3.1 7 7 7h15.2c3.9 0 7-3.1 7-7s-3.2-7-7-7zm-21 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4c-3.2 0-5.8-2.6-5.8-5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#06f"/>
<path d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0l-2.2-2.2-2.2 2.2c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0z" style="fill:#fff"/>
<path d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0z" style="fill:#06f"/>
</svg>

After

Width:  |  Height:  |  Size: 865 B

View file

@ -21,9 +21,14 @@
<h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
</div>
<div class="modal-body d-flex flex-column">
<textLink linkType="navigation" text="Terms of use" href="https://www.safelite.com/terms-of-use" target="_blank" />
<textLink linkType="navigation" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" target="_blank" />
<textLink linkType="navigation" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" target="_blank" />
<textLink linkType="navigation" text="Terms of use" href="//www.safelite.com/terms-of-use" target="_blank" />
<textLink linkType="navigation" 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="Warranty" href="//www.safelite.com/national-lifetime-warranty" target="_blank" />
<textLink linkType="navigation" text="Notice at collection" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" target="_blank" />
</div>
<div class="modal-footer d-flex justify-content-start">
&copy; {{new Date().getFullYear()}} Safelite Group
@ -111,6 +116,11 @@ export default {
overflow-y: visible;
.modal-body {
padding: 2rem;
.ccpa-icon {
width: 2.0625rem;
height: 1rem;
margin-left: .5rem;
}
}
.modal-fullscreen {
width: 100vw;

View file

@ -1,8 +1,8 @@
<template>
<a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href">{{text}}</a>
<a v-else-if="linkType === 'footer'" @click="handleClick" class="footer-link" :href="href" target="_blank">{{text}}</a>
<a v-else-if="linkType === 'textSmall'" @click="handleClick" class="small" :href="href">{{text}}</a>
<a v-else-if="linkType === 'text'" @click="handleClick" :href="href">{{text}}</a>
<a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href">{{text}}<slot name="after-text"></slot></a>
<a v-else-if="linkType === 'footer'" @click="handleClick" class="footer-link" :href="href" target="_blank">{{text}}<slot name="after-text"></slot></a>
<a v-else-if="linkType === 'textSmall'" @click="handleClick" class="small" :href="href">{{text}}<slot name="after-text"></slot></a>
<a v-else-if="linkType === 'text'" @click="handleClick" :href="href">{{text}}<slot name="after-text"></slot></a>
</template>
<script>
@ -32,6 +32,7 @@ a {
line-height: 26px;
padding: 0 0 4px 0;
font-weight: 500;
max-width: fit-content;
&:hover {
color: $blue-700;
}
@ -45,6 +46,7 @@ a {
color: $black;
line-height: 26px;
white-space: nowrap;
align-items: center;
}
&.footer-link {
color: $gray-600;