Merge pull request #1812 from Safelite/CSR-1944-link-open-in-new-tab

Update navigation links to open in new window.

src/fmg-components/funnel-header/menu-modal/menu-modal.vue

@@ -41,12 +41,12 @@
                 </div>
                 <div class="modal-body d-flex flex-column">
                     <textLink
-                        linkType="navigation"
+                        linkType="newWindowLink"
                         text="Terms of use"
                         href="//www.safelite.com/terms-of-use"
                         target="_blank" />
                     <textLink
-                        linkType="navigation"
+                        linkType="newWindowLink"
                         text="Your privacy choices"
                         href="//www.safelite.com/privacy-center"
                         target="_blank">
@@ -58,12 +58,12 @@
                         </template>
                     </textLink>
                     <textLink
-                        linkType="navigation"
+                        linkType="newWindowLink"
                         text="Warranty"
                         href="//www.safelite.com/national-lifetime-warranty"
                         target="_blank" />
                     <textLink
-                        linkType="navigation"
+                        linkType="newWindowLink"
                         text="Notice at collection"
                         href="https://www.safelite.com/ccpa-privacy-policy"
                         target="_blank" />
@@ -177,9 +177,6 @@ export default {
         .modal-fullscreen {
             width: 100vw;
         }
-        .navigation-link {
-            margin-bottom: 1.5rem;
-        }
         .modal-footer {
             border-top: none;
             padding: 2rem;

src/ux-components/text-link/text-link.spec.js

@@ -18,11 +18,11 @@ describe("text-link.vue", () => {
         expect(paragraph.attributes("class")).toContain("navigation-link");
     });
 
-    it("Should return class footer", async () => {
+    it("Should return class new-window-link", async () => {
         // Act
         const wrapper = shallowMount(textLink, {
             propsData: {
-                linkType: "footer",
+                linkType: "newWindowLink",
             },
         });
 
@@ -30,7 +30,7 @@ describe("text-link.vue", () => {
         const paragraph = wrapper.find("a");
 
         // Expect
-        expect(paragraph.attributes("class")).toContain("footer");
+        expect(paragraph.attributes("class")).toContain("new-window-link");
     });
 
     it("Should return class text-small", async () => {

src/ux-components/text-link/text-link.vue

@@ -4,9 +4,9 @@
         >{{ text }}<slot name="after-text"></slot
     ></a>
     <a
-        v-else-if="linkType === 'footer'"
+        v-else-if="linkType === 'newWindowLink'"
         @click="handleClick"
-        class="footer-link"
+        class="new-window-link"
         :href="href"
         target="_blank"
         >{{ text }}<slot name="after-text"></slot
@@ -74,23 +74,15 @@ a {
             color: $blue-700;
         }
     }
-    &.navigation-link {
+    &.navigation-link,
+    &.new-window-link {
         color: $black;
         line-height: 26px;
         white-space: nowrap;
         align-items: center;
     }
-    &.footer-link {
-        color: $gray-600;
-        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;
-        }
+    &.new-window-link {
+        margin-bottom: 1.5rem;
     }
 }
 </style>