Merge pull request #1812 from Safelite/CSR-1944-link-open-in-new-tab
Update navigation links to open in new window.
This commit is contained in:
commit
ee7e624025
3 changed files with 13 additions and 24 deletions
|
|
@ -41,12 +41,12 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body d-flex flex-column">
|
<div class="modal-body d-flex flex-column">
|
||||||
<textLink
|
<textLink
|
||||||
linkType="navigation"
|
linkType="newWindowLink"
|
||||||
text="Terms of use"
|
text="Terms of use"
|
||||||
href="//www.safelite.com/terms-of-use"
|
href="//www.safelite.com/terms-of-use"
|
||||||
target="_blank" />
|
target="_blank" />
|
||||||
<textLink
|
<textLink
|
||||||
linkType="navigation"
|
linkType="newWindowLink"
|
||||||
text="Your privacy choices"
|
text="Your privacy choices"
|
||||||
href="//www.safelite.com/privacy-center"
|
href="//www.safelite.com/privacy-center"
|
||||||
target="_blank">
|
target="_blank">
|
||||||
|
|
@ -58,12 +58,12 @@
|
||||||
</template>
|
</template>
|
||||||
</textLink>
|
</textLink>
|
||||||
<textLink
|
<textLink
|
||||||
linkType="navigation"
|
linkType="newWindowLink"
|
||||||
text="Warranty"
|
text="Warranty"
|
||||||
href="//www.safelite.com/national-lifetime-warranty"
|
href="//www.safelite.com/national-lifetime-warranty"
|
||||||
target="_blank" />
|
target="_blank" />
|
||||||
<textLink
|
<textLink
|
||||||
linkType="navigation"
|
linkType="newWindowLink"
|
||||||
text="Notice at collection"
|
text="Notice at collection"
|
||||||
href="https://www.safelite.com/ccpa-privacy-policy"
|
href="https://www.safelite.com/ccpa-privacy-policy"
|
||||||
target="_blank" />
|
target="_blank" />
|
||||||
|
|
@ -177,9 +177,6 @@ export default {
|
||||||
.modal-fullscreen {
|
.modal-fullscreen {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
}
|
}
|
||||||
.navigation-link {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
.modal-footer {
|
.modal-footer {
|
||||||
border-top: none;
|
border-top: none;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
|
|
|
||||||
|
|
@ -18,11 +18,11 @@ describe("text-link.vue", () => {
|
||||||
expect(paragraph.attributes("class")).toContain("navigation-link");
|
expect(paragraph.attributes("class")).toContain("navigation-link");
|
||||||
});
|
});
|
||||||
|
|
||||||
it("Should return class footer", async () => {
|
it("Should return class new-window-link", async () => {
|
||||||
// Act
|
// Act
|
||||||
const wrapper = shallowMount(textLink, {
|
const wrapper = shallowMount(textLink, {
|
||||||
propsData: {
|
propsData: {
|
||||||
linkType: "footer",
|
linkType: "newWindowLink",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -30,7 +30,7 @@ describe("text-link.vue", () => {
|
||||||
const paragraph = wrapper.find("a");
|
const paragraph = wrapper.find("a");
|
||||||
|
|
||||||
// Expect
|
// Expect
|
||||||
expect(paragraph.attributes("class")).toContain("footer");
|
expect(paragraph.attributes("class")).toContain("new-window-link");
|
||||||
});
|
});
|
||||||
|
|
||||||
it("Should return class text-small", async () => {
|
it("Should return class text-small", async () => {
|
||||||
|
|
|
||||||
|
|
@ -4,9 +4,9 @@
|
||||||
>{{ text }}<slot name="after-text"></slot
|
>{{ text }}<slot name="after-text"></slot
|
||||||
></a>
|
></a>
|
||||||
<a
|
<a
|
||||||
v-else-if="linkType === 'footer'"
|
v-else-if="linkType === 'newWindowLink'"
|
||||||
@click="handleClick"
|
@click="handleClick"
|
||||||
class="footer-link"
|
class="new-window-link"
|
||||||
:href="href"
|
:href="href"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
>{{ text }}<slot name="after-text"></slot
|
>{{ text }}<slot name="after-text"></slot
|
||||||
|
|
@ -74,23 +74,15 @@ a {
|
||||||
color: $blue-700;
|
color: $blue-700;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.navigation-link {
|
&.navigation-link,
|
||||||
|
&.new-window-link {
|
||||||
color: $black;
|
color: $black;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
&.footer-link {
|
&.new-window-link {
|
||||||
color: $gray-600;
|
margin-bottom: 1.5rem;
|
||||||
text-decoration: none;
|
|
||||||
line-height: 20px;
|
|
||||||
padding: 0 0 2px 0;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
&:hover {
|
|
||||||
padding: 0 0 2px 0;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue