Update slot to use image. Name slot.

This commit is contained in:
Bryan Mauger 2022-11-18 09:58:45 -05:00
parent d3e6325db0
commit 6f6d122e10
3 changed files with 12 additions and 4 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

@ -22,7 +22,11 @@
</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="Your privacy choices" href="" target="_blank"><span class="ccpa-icon" aria-label="Your privacy choices"></span></textLink>
<textLink linkType="navigation" text="Your privacy choices" href="https://www.safelite.com/privacy-center" target="_blank">
<template v-slot:ccpa>
<img class="ccpa-icon" src="~@/assets/img/icons/ccpa-icon.svg" alt="Your privacy choices"/>
</template>
</textLink>
<textLink linkType="navigation" text="Warranty" href="" 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>
@ -113,8 +117,6 @@ export default {
.modal-body {
padding: 2rem;
.ccpa-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 30 14' viewBox='0 0 30 14'%3E%3Cpath 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:%23fff'/%3E%3Cpath 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:%2306f'/%3E%3Cpath 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:%23fff'/%3E%3Cpath 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:%2306f'/%3E%3C/svg%3E");
background-repeat: no-repeat;
width: 2.0625rem;
height: 1rem;
margin-left: .5rem;

View file

@ -1,5 +1,5 @@
<template>
<a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href">{{text}}<slot/></a>
<a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href">{{text}}<slot name="ccpa"></slot></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>