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

SSR-158

Browse source 
Modify link text.
Add CCPA icon. 
Modify components to match CF project.
This commit is contained in:
Johan Gunawan 2022-12-06 15:59:34 -05:00
parent 7aeb7a7a3b
commit fcd7aa7dec
4 changed files with 68 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/assets/img/icons/ccpa-icon.svg Normal file
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>
Side by side

After

Width:  |  Height:  |  Size: 865 B

24
src/common-components/site-header/menu-modal/menu-modal.spec.js
View file

@ -1,4 +1,4 @@
import { shallowMount } from "@vue/test-utils";
import { mount, shallowMount } from "@vue/test-utils";
import menuModal from "./menu-modal";
describe("menu-modal.vue", () => {
@ -32,12 +32,28 @@ describe("menu-modal.vue", () => {
expect(wrapper.html()).toContain("Terms of use");
});
it("Should return Privacy policy text link text", async () => {
it('Should return "Your privacy choices" text link text', async () => {
// Act
const wrapper = shallowMount(menuModal);
const wrapper = mount(menuModal);
// Expect
expect(wrapper.html()).toContain("Privacy policy");
expect(wrapper.html()).toContain("Your privacy choices");
});
test('Icon for link to "Privacy Policies" page is displayed with the correct alternate text', () => {
// NOTE: We need a way to target a specific <textLink> component so we can be sure that
// an icon is coming from a specific <textLink> component.
// That requires an additional prop in the <textLink> component. Will hold off on adding the prop
// until there is more clarity on how we handle shared components.
// For now the test is below is the best we can do.
// Arrange
const wrapper = mount(menuModal);
// Expect
const icon = wrapper.find('[data-id="ccpa-icon"]');
expect(icon.isVisible()).toBe(true);
expect(icon.attributes('alt')).toBe('Your privacy choices');
});
it("Should returnDo not sell my information text link text", async () => {

22
src/common-components/site-header/menu-modal/menu-modal.vue
View file

@ -28,7 +28,21 @@
</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="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"
data-id="ccpa-icon"
/>
</template>
</textLink>
<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" />
</div>
<div class="modal-footer d-flex justify-content-start">
@ -118,6 +132,11 @@
overflow-y: visible;
.modal-body {
padding: 2rem;
.ccpa-icon {
width: 2.0625rem;
height: 1rem;
margin-left: 0.5rem;
}
}
.modal-fullscreen {
width: 100vw;
@ -175,4 +194,3 @@
}
}
</style>

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

@ -1,9 +1,24 @@
<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 === 'dashedUnderline'" @click="handleClick" class="dashed-underline" :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 === 'dashedUnderline'" @click="handleClick" class="dashed-underline" :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 +47,7 @@
line-height: 26px;
padding: 0 0 4px 0;
font-weight: 500;
max-width: fit-content;
&:hover {
color: $blue-700;
}
@ -45,6 +61,7 @@
color: $black;
line-height: 26px;
white-space: nowrap;
align-items: center;
}
&.footer-link {
color: $gray-600;