Merge pull request #178 from Safelite/CSR-257-footer-component

Csr 257 footer component

src/common-components/funnel-footer/funnel-footer.spec.js

@@ -0,0 +1,30 @@
+import { mount } from "@vue/test-utils";
+import funnelFooter from "./funnel-footer";
+
+describe("funnel-footer.vue", () => {
+
+  it("Should return footer-link class", async () => {
+    // Act
+    try {
+      global.document.getElementById = jest.fn().mockImplementation(()=> {
+        return {}
+      });
+
+      const wrapper = mount(funnelFooter, {
+        propsData: {
+          footer: true
+        },
+      });
+
+      // Assert
+      const link = wrapper.find("a");
+
+      // Expect
+      expect(link.attributes('class')).toContain("footer-link");
+      expect(global.document.getElementById).toBeCalled();
+    } catch(error) {
+      console.log(error);
+    }
+    
+  });
+});

src/common-components/funnel-footer/funnel-footer.vue

@@ -0,0 +1,81 @@
+<template>
+  <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>
+    <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>
+  </div>
+  <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
+    <div class="row">
+      <div class="col">
+        <buttonMain
+        isPrimary
+        buttonText="Review Appointment Details"
+        loaderColor="white"
+        sizeInRem="1"
+        isFloat
+        />
+        <textLink
+        navigation=true
+        text="back"
+        />
+      </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);
+    })
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.onResize);
+  },
+  methods: {
+    onResize() {
+      this.paddingHeight = document.getElementById("infoBox").offsetHeight;
+    }
+  }
+};
+setTimeout(function(){ // Give it a moment to set the date
+  document.getElementById('years').innerHTML += new Date().getFullYear();
+}, 100);
+</script>

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

@@ -40,6 +40,31 @@
         <buttonBack backButtonAccessibleText="Back button label" />
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+        <h4 class="m-0 p-2 bg-light rounded">Links</h4>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3">
+        <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">List Card</h4>
@@ -806,95 +831,109 @@
         <h4 class="m-0 p-2 bg-light rounded">Button Question</h4>
       </div>
     </div>
-    <buttonQuestion
+    <div class="row">
-      :answers="checkboxAnswers"
+      <div class="col">
-      :isMultiSelect="true"
+        <buttonQuestion
-      ariaLabelBy="checkbox"
+        :answers="checkboxAnswers"
-      groupName="checkbox-list"
+        :isMultiSelect="true"
-      questionText="List Button as checkbox"
+        ariaLabelBy="checkbox"
-    />
+        groupName="checkbox-list"
-    <buttonQuestion
+        questionText="List Button as checkbox"
-      :answers="radioAnswers"
+        />
-      ariaLabelBy="radio"
+        <buttonQuestion
-      groupName="radio-list"
+        :answers="radioAnswers"
-      questionText="List Button as radio"
+        ariaLabelBy="radio"
-    />
+        groupName="radio-list"
-    <buttonQuestion
+        questionText="List Button as radio"
-      :answers="horizontalCheckboxAnswers"
+        />
-      buttonType="listButtonHorizontal"
+        <buttonQuestion
-      :isMultiSelect="true"
+        :answers="horizontalCheckboxAnswers"
-      isColumn
+        buttonType="listButtonHorizontal"
-      ariaLabelBy="checkbox"
+        :isMultiSelect="true"
-      groupName="checkbox-list-horizontal"
+        isColumn
-      questionText="List Button Horizontal as checkbox"
+        ariaLabelBy="checkbox"
-    />
+        groupName="checkbox-list-horizontal"
-    <buttonQuestion
+        questionText="List Button Horizontal as checkbox"
-      :answers="horizontalRadioAnswers"
+        />
-      buttonType="listButtonHorizontal"
+        <buttonQuestion
-      isColumn
+        :answers="horizontalRadioAnswers"
-      ariaLabelBy="radio"
+        buttonType="listButtonHorizontal"
-      groupName="radio-list-horizontal"
+        isColumn
-      questionText="List Button Horizontal as radio"
+        ariaLabelBy="radio"
-      sizeInRem="1"
+        groupName="radio-list-horizontal"
-    />
+        questionText="List Button Horizontal as radio"
-    <buttonQuestion
+        sizeInRem="1"
-      :answers="listCardCheckBox"
+        />
-      buttonType="listCard"
+        <buttonQuestion
-      isMultiSelect
+        :answers="listCardCheckBox"
-      ariaLabelBy="check_card"
+        buttonType="listCard"
-      groupName="check-list-card"
+        isMultiSelect
-      questionText="List Card as checkbox"
+        ariaLabelBy="check_card"
-    />
+        groupName="check-list-card"
-    <buttonQuestion
+        questionText="List Card as checkbox"
-      :answers="listCardRadio"
+        />
-      buttonType="listCard"
+        <buttonQuestion
-      ariaLabelBy="radio_card"
+        :answers="listCardRadio"
-      groupName="radio-card"
+        buttonType="listCard"
-      questionText="List Card as radio"
+        ariaLabelBy="radio_card"
-    />
+        groupName="radio-card"
-    <buttonQuestion
+        questionText="List Card as radio"
-      isMultiSelect
+        />
-      isWide
+        <buttonQuestion
-      :answers="listCardCheckBoxHorizontal"
+        isMultiSelect
-      buttonType="listCard"
+        isWide
-      ariaLabelBy="horizontal_check_card"
+        :answers="listCardCheckBoxHorizontal"
-      groupName="horizontal_check-card"
+        buttonType="listCard"
-      questionText="List Card Horizontal as checkbox"
+        ariaLabelBy="horizontal_check_card"
-    />
+        groupName="horizontal_check-card"
-    <buttonQuestion
+        questionText="List Card Horizontal as checkbox"
-      isMultiSelect
+        />
-      isWide
+        <buttonQuestion
-      :answers="listCardCheckBoxHorizontalSubText"
+        isMultiSelect
-      buttonType="listCard"
+        isWide
-      ariaLabelBy="horizontal_check_card-st"
+        :answers="listCardCheckBoxHorizontalSubText"
-      groupName="horizontal_check-card-st"
+        buttonType="listCard"
-      questionText="With Subtext"
+        ariaLabelBy="horizontal_check_card-st"
-    />
+        groupName="horizontal_check-card-st"
-    <buttonQuestion
+        questionText="With Subtext"
-      isWide
+        />
-      :answers="listRadioHorizontal"
+        <buttonQuestion
-      buttonType="listCard"
+        isWide
-      ariaLabelBy="horizontal_radio_card"
+        :answers="listRadioHorizontal"
-      groupName="horizontal_cradio-card"
+        buttonType="listCard"
-      questionText="List Card Horizontal as radio"
+        ariaLabelBy="horizontal_radio_card"
-    />
+        groupName="horizontal_cradio-card"
-    <buttonQuestion
+        questionText="List Card Horizontal as radio"
-      isWide
+        />
-      :answers="listRadioHorizontalSubText"
+        <buttonQuestion
-      buttonType="listCard"
+        isWide
-      ariaLabelBy="horizontal_radio_card-st"
+        :answers="listRadioHorizontalSubText"
-      groupName="horizontal_cradio-card-st"
+        buttonType="listCard"
-      questionText="With Subtext"
+        ariaLabelBy="horizontal_radio_card-st"
-    />
+        groupName="horizontal_cradio-card-st"
-    <buttonQuestion
+        questionText="With Subtext"
-      isMultiSelect
+        />
-      isRow
+        <buttonQuestion
-      :answers="listCardGroup"
+        isMultiSelect
-      buttonType="listCard"
+        isRow
-      ariaLabelBy="horizontal_radio_card-group"
+        :answers="listCardGroup"
-      groupName="horizontal_cradio-card-group"
+        buttonType="listCard"
-      questionText="In column layout"
+        ariaLabelBy="horizontal_radio_card-group"
-    />
+        groupName="horizontal_cradio-card-group"
+        questionText="In column layout"
+        />
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+        <h4 class="m-0 p-2 bg-light rounded">Funnel Footer</h4>
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <funnelFooter/>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -910,6 +949,7 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
 import checkbox from "@/ux-components/checkbox/checkbox";
 import buttonQuestion from "@/common-components/button-question/button-question";
 import textLink from "@/ux-components/text-link/text-link";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 export default {
   name: "App",
   components: {
@@ -924,6 +964,7 @@ export default {
     funnelHeader,
     buttonQuestion,
     textLink,
+    funnelFooter
   },
   data() {
     return {

src/ux-components/button-main/button-main.vue

@@ -1,11 +1,5 @@
 <template>
-  <button
+  <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-4" :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']" @click="clicked()">
-    :disabled="isDisabled"
-    :aria-disabled="isDisabled"
-    class="btn d-flex align-items-center py-3 px-4"
-    :class="isPrimary ? 'btn-primary' : 'btn-secondary'"
-    @click="clicked()"
-  >
     <span class="m-0">{{ this.buttonText }}</span>
     <loader
       class="ms-2"
@@ -27,6 +21,7 @@ export default {
     loaderColor: String,
     loaderPosition: String,
     sizeInRem: [Number, String],
+    isFloat: Boolean
   },
   data() {
     return {
@@ -55,6 +50,7 @@ export default {
     border-radius: $border-radius-lg;
     color: $white;
     transition: all 150ms linear;
+    white-space: nowrap;
     &:hover {
       background: linear-gradient(
         270deg,

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -141,6 +141,7 @@ export default {
     background: $white;
     transition: all 150ms linear;
     border: 1px solid $gray-500;
+    border-radius: 0;
     width: 100%;
     &:hover {
       box-shadow: 0 0 0 4px $blue-100;

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

@@ -1,27 +1,8 @@
 <template>
-  <!-- Navigation Text Link -->
+  <a v-if="navigation" @click="handleClick" class="navigation-link" :href="href">{{text}}</a>
-  <a
+  <a v-else-if="footer" @click="handleClick" class="footer-link" :href="href" target="_blank">{{text}}</a>
-    v-if="navigation"
+  <a v-else-if="textSmall" @click="handleClick" class="small" :href="href">{{text}}</a>
-    @click="handleClick"
+  <a v-else @click="handleClick" :href="href">{{text}}</a>
-    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>
@@ -66,9 +47,12 @@ a {
     color: $black;
     border-bottom: 1px solid $black;
     line-height: 26px;
+    display: inline-flex;
+    text-transform: capitalize;
+    white-space: nowrap;
   }
   &.footer-link {
-    color: $gray-500;
+    color: $gray-600;
     text-decoration: none;
     border-bottom: 1px solid transparent;
     line-height: 20px;