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:
bmauger 2024-03-27 10:41:55 -04:00 committed by GitHub
commit ee7e624025
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 13 additions and 24 deletions

View file

@ -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;

View file

@ -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 () => {

View file

@ -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>