CSR-257 WIP do not merge.

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

@@ -1,28 +1,30 @@
 <template>
-<div class="container-fluid g-2 footer">
+  <div class="footer pt-4">
-    <div class="row">
+    <div class="container-fluid g-2">
+      <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
+          &copy;&nbsp;<span id="years"></span>&nbsp;Safelite Group
         </div>
-    </div>
+      </div>
-    <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
+      <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
         <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="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="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" />
+          <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>
+    <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
-<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="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" />
+          <buttonMain isPrimary :buttonText="buttonText" loaderColor="white" sizeInRem="1" @click-event="buttonClick"/>
         </div>
         <div class="col">
-            <textLink linkType="navigation" text="back" />
+          <textLink linkType="navigation" :text="backLink" @click-event="linkClick"/>
         </div>
+      </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
@@ -30,53 +32,70 @@ import textLink from "@/ux-components/text-link/text-link";
 import buttonMain from "@/ux-components/button-main/button-main";
 
 export default {
-    name: "funnelFooter",
+  name: "funnelFooter",
-    components: {
+  components: {
-        textLink,
+    textLink,
-        buttonMain
+    buttonMain
-    },
+  },
-    data() {
+  data() {
-        return {
+    return {
-            paddingHeight: 0
+      paddingHeight: 0,
-        }
+      backLink: "",
-    },
+      buttonText: "",
-    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");
-            }
-        }
     }
+  },
+  mounted() {
+    this.paddingHeight = document.getElementById("infoBox").offsetHeight + 24;
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.onResize);
+    })
+    this.$nextTick(function () { // Give it a moment to set the date
+      document.getElementById('years').innerHTML += new Date().getFullYear();
+      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');
+      console.log(parentHeight);
+
+      if (parentHeight > 80) {
+        wrapper2.classList.add("justify-content-start","w-100");
+        wrapper2.classList.remove("justify-content-end","w-auto");
+      } else {
+        wrapper2.classList.add("justify-content-end");
+        wrapper2.classList.remove("justify-content-start");
+      }
+    },
+    initializeComponent(cmsContent) {
+      this.buttonText = cmsContent.BackButtonText;
+      this.backLink = cmsContent.ForwardButtonText;
+    },
+    buttonClick() {
+      this.$emit("forwardClicked");
+    },
+    linkClick() {
+      this.$emit("backClicked");
+    },
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-button {
+.footer {
-    min-width: 200px;
+  display: flex;
+  margin-top: auto;
+  button {
+    min-width: 135px;
     width: 100%;
+  }
 }
 </style>

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -1,16 +1,18 @@
 <template>
-    <div class="container-fluid shadow rounded-3 p-2 position-relative">
+    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
         <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
         <replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
+        <funnelFooter ref="funnelFooter" />
     </div>
 </template>
 
 <script>
 // Components
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
@@ -65,6 +67,9 @@ export default {
       vm.$refs.damageLocation.initializeComponent(
         resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
       );
+      vm.$refs.funnelFooter.initializeComponent(
+        resultMap.cmsContent.FunnelFooterWidget
+      );
     });
   },
   data(){
@@ -84,6 +89,7 @@ export default {
   },
   components: {
     funnelHeader,
+    funnelFooter,
     vehicleBanner,
     funnelSubHeader,
     replaceOptionsQuestion,

src/layouts/vehicle-make/vehicle-make.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0 position-relative">
+  <div class="container-fluid shadow rounded-3 p-0 position-relative make-tall">
     <funnelHeader ref="funnelHeader" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=true />
-        <funnelSubHeader 
+        <funnelSubHeader
             ref="funnelSubHeader"
             :hasBackButton="true"
             backButtonAccessibleText="Change Vehicle Year"

src/layouts/vehicle-year/vehicle-year.vue

@@ -73,7 +73,7 @@ export default {
 
   watch: {
     selectedYear(year) {
-      
+
       this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
       this.$router.navigateAfterSave(
         this.navigationScenarios.SELECTED_YEAR,

src/styles/common-styles.scss

@@ -9,6 +9,11 @@ body {
     &.container-shadow {
       box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
     }
+    &.make-tall {
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
   }
   .pointer {
     cursor: pointer;

src/ux-components/list-card/list-card.vue

@@ -131,6 +131,7 @@ export default {
     height: auto;
     width: 6.5rem;
     margin-bottom: 3rem;
+    max-width: 100%;
   }
   &:hover {
     box-shadow: 0px 0px 0px 6px $blue-100;