CSR-266 create text link variations.

src/layouts/component-test/component-test.vue

@@ -631,18 +631,27 @@
     </div>
     <div class="row">
       <div class="col my-3">
-        <a href="#">Text Link</a> <span>(default text link behavior)</span>
+        <textLink
-        <br><br>
+          navigation=true
-        <a class="small" href="#">Text Link Small</a> <span>(.small)</span>
+          text="Navigation Link"
-        <br><br>
+        /><br><br>
-        <a class="footer-link" href="#">Footer Link</a> <span>(.footer-link)</span>
+        <textLink
-        <br><br>
+          text="Default Link"
-        <a class="navigation-link" href="#">Navigation Link</a> <span>(.navigation-link)</span>
+        /><br><br>
+        <textLink
+          textSmall=true
+          text="Small Link"
+        /><br><br>
+        <textLink
+          footer=true
+          text="Footer Link"
+          href="https://google.com"
+        />
       </div>
     </div>
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Typogrophy</h4>
+        <h4 class="m-0 p-2 bg-light rounded">Typography</h4>
       </div>
     </div>
     <div class="row my-2">
@@ -888,7 +897,8 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import checkbox from "@/ux-components/checkbox/checkbox";
-import buttonQuestion from "@/common-components/button-question/button-question"
+import buttonQuestion from "@/common-components/button-question/button-question";
+import textLink from "@/ux-components/text-link/text-link";
 export default {
   name: "App",
   components: {
@@ -902,7 +912,8 @@ export default {
     listButtonHorizontal,
     checkbox,
     funnelHeader,
-    buttonQuestion
+    buttonQuestion,
+    textLink
   },
   data() {
     return {

src/styles/common-styles.scss

@@ -10,41 +10,6 @@ body {
       box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
     }
   }
-  a {
-    color: $blue;
-    text-decoration: none;
-    border-bottom: 1px solid $blue;
-    line-height: 26px;
-    padding: 0 0 4px 0;
-    font-weight: 500;
-    &:hover {
-      color: $blue-700;
-    }
-    &.small {
-      line-height: 24px;
-      &:hover {
-        color: $blue-700;
-      }
-    }
-    &.navigation-link {
-      color: $black;
-      border-bottom: 1px solid $black;
-      line-height: 26px;
-    }
-    &.footer-link {
-      color: $gray-500;
-      text-decoration: none;
-      border-bottom: 1px solid transparent;
-      line-height: 20px;
-      padding: 0 0 2px 0;
-      font-weight: 400;
-      font-size: .75rem;
-      &:hover {
-        border-bottom: 1px solid $gray-500;
-        padding: 0 0 2px 0;
-      }
-    }
-  }
   .pointer {
     cursor: pointer;
   }

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

@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

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

@@ -0,0 +1,69 @@
+<template>
+  <!-- Navigation Text Link -->
+  <a v-if="navigation" @click="handleClick" class="navigation-link" :href="href">{{text}}</a>
+  <!-- Footer Text Link -->
+  <a v-else-if="footer" @click="handleClick" class="footer-link" :href="href" target="_blank">{{text}}</a>
+  <!-- Small Text Link -->
+  <a v-else-if="textSmall" @click="handleClick" class="small" :href="href">{{text}}</a>
+  <!-- Default Text Link -->
+  <a v-else @click="handleClick" :href="href">{{text}}</a>
+</template>
+
+<script>
+export default {
+  name: "textLink",
+  props: {
+    navigation: Boolean,
+    footer: Boolean,
+    textSmall: Boolean,
+    text: String,
+    href: {
+      type: String,
+      default: `javascript:void(0)`//Prevents page jump when value is empty or #
+    }
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click-event');
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+a {
+  color: $blue;
+  text-decoration: none;
+  border-bottom: 1px solid $blue;
+  line-height: 26px;
+  padding: 0 0 4px 0;
+  font-weight: 500;
+  &:hover {
+    color: $blue-700;
+  }
+  &.small {
+    line-height: 24px;
+    &:hover {
+      color: $blue-700;
+    }
+  }
+  &.navigation-link {
+    color: $black;
+    border-bottom: 1px solid $black;
+    line-height: 26px;
+  }
+  &.footer-link {
+    color: $gray-500;
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    line-height: 20px;
+    padding: 0 0 2px 0;
+    font-weight: 400;
+    font-size: .75rem;
+    &:hover {
+      border-bottom: 1px solid $gray-500;
+      padding: 0 0 2px 0;
+    }
+  }
+}
+</style>