Merge pull request #200 from Safelite/CSR-266-add-prop

CSR-266 update props.
2022-02-08 09:05:40 -05:00 · 2022-02-08 09:05:40 -05:00 · 5f9917e16a
commit 5f9917e16a
parent 112072b450 9581dcc974
5 changed files with 78 additions and 115 deletions
--- a/src/common-components/funnel-footer/funnel-footer.spec.js
+++ b/src/common-components/funnel-footer/funnel-footer.spec.js
@ -14,18 +14,17 @@ describe("funnel-footer.vue", () => {
          remove: jest.fn()
        },
      };
+
      global.document.getElementById = jest.fn().mockImplementation(()=> {
        return r;
      });

      const wrapper = mount(funnelFooter, {
-        propsData: {
-          footer: true
-        },
      });

      // Assert
      const link = wrapper.find("a");
+      console.log(wrapper.html());

      // Expect
      expect(link.attributes('class')).toContain("footer-link");
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@ -1,104 +1,82 @@
 <template>
-  <div class="container-fluid g-2 footer">
+<div class="container-fluid g-2 footer">
    <div class="row">
-      <div class="col-12 d-flex justify-content-center pb-2 fs-7">
-        &copy;&nbsp;<span id="years"></span>&nbsp;Safelite Group
-      </div>
+        <div class="col-12 d-flex justify-content-center pb-2 fs-7">
+            &copy;&nbsp;<span id="years"></span>&nbsp;Safelite Group
+        </div>
    </div>
    <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
-      <div class="col d-flex justify-content-center justify-content-around text-center">
-        <textLink
-        footer=true
-        text="Terms of use"
-        href="https://www.safelite.com/terms-of-use"
-        />
-        <textLink
-        footer=true
-        text="Privacy policy"
-        href="https://www.safelite.com/safelite-group-privacy-policy"
-        />
-        <textLink
-        footer=true
-        text="Do not sell my information"
-        href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html"
-        />
-      </div>
+        <div class="col d-flex justify-content-center justify-content-around text-center">
+            <textLink linkType="footer" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
+            <textLink linkType="footer" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
+            <textLink linkType="footer" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" />
+        </div>
    </div>
-  </div>
-  <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
+</div>
+<div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
    <div class="row d-flex flex-row-reverse align-items-center">
-      <div class="col d-flex justify-content-end" id="stacked">
-        <buttonMain
-        isPrimary
-        buttonText="Button test"
-        loaderColor="white"
-        sizeInRem="1"
-        />
-      </div>
-      <div class="col">
-        <textLink
-        navigation=true
-        text="back"
-        />
-      </div>
+        <div class="col d-flex justify-content-end" id="stacked">
+            <buttonMain isPrimary buttonText="Button test" loaderColor="white" sizeInRem="1" />
+        </div>
+        <div class="col">
+            <textLink linkType="navigation" text="back" />
+        </div>
    </div>
-  </div>
+</div>
 </template>

 <script>
-
 import textLink from "@/ux-components/text-link/text-link";
 import buttonMain from "@/ux-components/button-main/button-main";

 export default {
-  name: "funnelFooter",
-  components: {
-    textLink,
-    buttonMain
-  },
-  data() {
-    return {
-      paddingHeight: 0
-    }
-  },
-  mounted() {
-    this.paddingHeight = document.getElementById("infoBox").offsetHeight;
-    this.$nextTick(() => {
-      window.addEventListener('resize', this.onResize);
-    })
-    setTimeout(function(){ // Give it a moment to set the date
-      document.getElementById('years').innerHTML += new Date().getFullYear();
-    }, 100);
-    this.checkHeight();
-  },
-  beforeUnmount() {
-    window.removeEventListener('resize', this.onResize);
-  },
-  methods: {
-    onResize() {
-      this.paddingHeight = document.getElementById("infoBox").offsetHeight;
-      this.checkHeight();
+    name: "funnelFooter",
+    components: {
+        textLink,
+        buttonMain
    },
-    checkHeight() {
-      const parentHeight = document.getElementById('infoBox').clientHeight;
-      const wrapper2 = document.getElementById('stacked');
-      console.log(parentHeight);
-      console.log(wrapper2);
-      if (parentHeight > 80) {
-        wrapper2.classList.add("justify-content-start");
-        wrapper2.classList.remove("justify-content-end");
-      } else {
-        wrapper2.classList.add("justify-content-end");
-        wrapper2.classList.remove("justify-content-start");
-      }
+    data() {
+        return {
+            paddingHeight: 0
+        }
+    },
+    mounted() {
+        this.paddingHeight = document.getElementById("infoBox").offsetHeight;
+        this.$nextTick(() => {
+            window.addEventListener('resize', this.onResize);
+        })
+        setTimeout(function () { // Give it a moment to set the date
+            document.getElementById('years').innerHTML += new Date().getFullYear();
+        }, 100);
+        this.checkHeight();
+    },
+    beforeUnmount() {
+        window.removeEventListener('resize', this.onResize);
+    },
+    methods: {
+        onResize() {
+            this.paddingHeight = document.getElementById("infoBox").offsetHeight;
+            this.checkHeight();
+        },
+        checkHeight() {
+            const parentHeight = document.getElementById('infoBox').clientHeight;
+            const wrapper2 = document.getElementById('stacked');
+
+            if (parentHeight > 80) {
+                wrapper2.classList.add("justify-content-start");
+                wrapper2.classList.remove("justify-content-end");
+            } else {
+                wrapper2.classList.add("justify-content-end");
+                wrapper2.classList.remove("justify-content-start");
+            }
+        }
    }
-  }
 };
 </script>

 <style lang="scss" scoped>
-  button {
+button {
    min-width: 200px;
    width: 100%;
-  }
+}
 </style>
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@ -48,18 +48,19 @@
    <div class="row">
      <div class="col my-3">
        <textLink
-        navigation=true
+        linkType=navigation
        text="Navigation Link"
        /><br><br>
        <textLink
+        linkType="text"
        text="Default Link"
        /><br><br>
        <textLink
-        textSmall=true
+        linkType=textSmall
        text="Small Link"
        /><br><br>
        <textLink
-        footer=true
+        linkType=footer
        text="Footer Link"
        href="https://google.com"
        />
--- a/src/ux-components/text-link/text-link.spec.js
+++ b/src/ux-components/text-link/text-link.spec.js
@ -3,11 +3,12 @@ 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 () => {
+
+  it("Should return class navigation-link", async () => {
    // Act
    const wrapper = shallowMount(textLink, {
      propsData: {
-        navigation: true,
+        linkType: "navigation",
      },
    });

@ -18,11 +19,11 @@ describe("text-link.vue", () => {
    expect(paragraph.attributes("class")).toContain("navigation-link");
  });

-  it("Should return text-link type is footer if prop footer is true", async () => {
+  it("Should return class footer", async () => {
    // Act
    const wrapper = shallowMount(textLink, {
      propsData: {
-        footer: true,
+        linkType: "footer",
      },
    });

@ -30,14 +31,14 @@ describe("text-link.vue", () => {
    const paragraph = wrapper.find("a");

    // Expect
-    expect(paragraph.attributes("class")).toContain("footer-link");
+    expect(paragraph.attributes("class")).toContain("footer");
  });

-  it("Should return text-link type is textSmall if prop textSmall is true", async () => {
+  it("Should return class text-small", async () => {
    // Act
    const wrapper = shallowMount(textLink, {
      propsData: {
-        textSmall: true,
+        linkType: "textSmall",
      },
    });

@ -48,18 +49,4 @@ describe("text-link.vue", () => {
    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");
-  });
 });
--- a/src/ux-components/text-link/text-link.vue
+++ b/src/ux-components/text-link/text-link.vue
@ -1,17 +1,15 @@
 <template>
-  <a v-if="navigation" @click="handleClick" class="navigation-link" :href="href">{{text}}</a>
-  <a v-else-if="footer" @click="handleClick" class="footer-link" :href="href" target="_blank">{{text}}</a>
-  <a v-else-if="textSmall" @click="handleClick" class="small" :href="href">{{text}}</a>
-  <a v-else @click="handleClick" :href="href">{{text}}</a>
+  <a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href">{{text}}</a>
+  <a v-else-if="linkType === 'footer'" @click="handleClick" class="footer-link" :href="href" target="_blank">{{text}}</a>
+  <a v-else-if="linkType === 'textSmall'" @click="handleClick" class="small" :href="href">{{text}}</a>
+  <a v-else-if="linkType === 'text'" @click="handleClick" :href="href">{{text}}</a>
 </template>

 <script>
 export default {
  name: "textLink",
  props: {
-    navigation: Boolean,
-    footer: Boolean,
-    textSmall: Boolean,
+    linkType: String,
    text: String,
    href: {
      type: String,