Merge pull request #162 from Safelite/CSR-266-link-component

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>
-        <br><br>
-        <a class="small" href="#">Text Link Small</a> <span>(.small)</span>
-        <br><br>
-        <a class="footer-link" href="#">Footer Link</a> <span>(.footer-link)</span>
-        <br><br>
-        <a class="navigation-link" href="#">Navigation Link</a> <span>(.navigation-link)</span>
+        <textLink
+          navigation=true
+          text="Navigation Link"
+        /><br><br>
+        <textLink
+          text="Default Link"
+        /><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/checkbox/checkbox.spec.js

@@ -1 +1,85 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import checkbox from "./checkbox";
+import { nextTick } from "vue";
+
+describe("checkbox.vue", () => {
+
+  it("Should return checkbox name", async () => {
+    // Act
+    const wrapper = shallowMount(checkbox, {
+      propsData: {
+        checkboxName: "Checkbox"
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().name).toEqual("Checkbox");
+
+  });
+
+  it("Should return checkbox id", async () => {
+    // Act
+    const wrapper = shallowMount(checkbox, {
+      propsData: {
+        buttonID: "Checkbox ID"
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().id).toEqual("Checkbox ID");
+
+  });
+
+  it("Should return tabindex value", async () => {
+    // Act
+    const wrapper = shallowMount(checkbox, {
+      propsData: {
+        tabIndex: "1"
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().tabindex).toEqual("1");
+
+  });
+
+  it("Should return label text", async () => {
+    // Act
+    const wrapper = shallowMount(checkbox, {
+      propsData: {
+        checkboxLabel: "label text"
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("p");
+
+    expect(paragraph.text()).toEqual("label text");
+
+  });
+
+  it("Should return label text", async () => {
+    // Act
+    const wrapper = shallowMount(checkbox, {
+      propsData: {
+        screenReaderOnlyText: "screenreader text"
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("span");
+
+    expect(paragraph.text()).toEqual("screenreader text");
+
+  });
+
+});

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

@@ -0,0 +1,68 @@
+import { shallowMount } from "@vue/test-utils";
+import textLink from "./text-link";
+import { nextTick } from "vue";
+
+describe("text-link.vue", () => {
+
+  it("Should return text-link type is navigation if prop navigation is true", async () => {
+    // Act
+    const wrapper = shallowMount(textLink, {
+      propsData: {
+        navigation: true,
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("a");
+
+    // Expect
+    expect(paragraph.attributes('class')).toContain("navigation-link");
+  });
+
+  it("Should return text-link type is footer if prop footer is true", async () => {
+    // Act
+    const wrapper = shallowMount(textLink, {
+      propsData: {
+        footer: true,
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("a");
+
+    // Expect
+    expect(paragraph.attributes('class')).toContain("footer-link");
+  });
+
+  it("Should return text-link type is textSmall if prop textSmall is true", async () => {
+    // Act
+    const wrapper = shallowMount(textLink, {
+      propsData: {
+        textSmall: true,
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("a");
+
+    // Expect
+    expect(paragraph.attributes('class')).toContain("small");
+  });
+
+  it("Should return text for href", async () => {
+    // Act
+    const wrapper = shallowMount(textLink, {
+      propsData: {
+        text: "This is link text"
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("a");
+
+    // Expect
+    expect(paragraph.text()).toEqual("This is link text");
+
+  });
+
+});

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>