From 1a8a5a73e69d83e945a114b12781f68a419dd91f Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 4 Feb 2022 15:53:10 -0500
Subject: [PATCH 01/19] Remove unneeded code.

---
 src/layouts/component-test/component-test.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index ed8318673..0e28d345a 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -948,7 +948,6 @@ 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 textLink from "@/ux-components/text-link/text-link";
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 export default {
@@ -963,7 +962,6 @@ export default {
     listButtonHorizontal,
     checkbox,
     funnelHeader,
-    buttonQuestion,
     textLink,
     funnelFooter
   },

From 06c312d6c62ced8a43f0d17ded4dafae1fc2bbee Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Fri, 4 Feb 2022 16:25:03 -0500
Subject: [PATCH 02/19] CSR-78 switch prop to computed

---
 .../funnel-sub-header/funnel-sub-header.vue          | 12 ++++++++++--
 .../vehicle-banner/vehicle-banner.vue                |  1 -
 src/layouts/vehicle-damage/vehicle-damage.vue        |  2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 72b9c21cb..35a56a12d 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -35,12 +35,20 @@ export default {
   },
   props: {
     hasBackButton: Boolean,
-    backButtonAccessibleText: String,
-    hasSubText: Boolean
+    backButtonAccessibleText: String
   },
   components: {
     buttonBack,
   },
+  computed: {
+    hasSubText(){
+      if (this.subText.length > 0){
+        return true;
+      }  
+
+      return false;
+    }
+  },
   methods: {
     clickEvent() {
       this.$emit("click-event");
diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue
index 0c164717c..0409c1903 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.vue
+++ b/src/common-components/vehicle-banner/vehicle-banner.vue
@@ -19,7 +19,6 @@ export default {
   },
   data() {
     return {
-      vehicleImageSrc: '',
       genericVehicleImage: '',
       carUnmatchedVehicleIcon: '',
       truckUnmatchedVehicleIcon: '',
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index daa11a248..c5b8df783 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -2,7 +2,7 @@
     <div class="container-fluid shadow rounded-3 p-2 position-relative">
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
-        <funnelSubHeader ref="funnelSubHeader" :hasSubText=true />
+        <funnelSubHeader ref="funnelSubHeader" />
         <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
         <replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
     </div>

From 8d3d0d9d744df283535eb34f609d7a65c9f124bb Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Fri, 4 Feb 2022 16:27:10 -0500
Subject: [PATCH 03/19] CSR-78 simplify if stmt

---
 .../funnel-sub-header/funnel-sub-header.vue                 | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 35a56a12d..937109111 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -42,11 +42,7 @@ export default {
   },
   computed: {
     hasSubText(){
-      if (this.subText.length > 0){
-        return true;
-      }  
-
-      return false;
+      return this.subText.length > 0;
     }
   },
   methods: {

From 5210141567de13a703863432312ee2778604eb38 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 7 Feb 2022 09:02:31 -0500
Subject: [PATCH 04/19] CSR-338 fix text color and add opacity: 0 to input.

---
 .../list-button-horizontal.vue                | 49 ++++++++++---------
 src/ux-components/list-button/list-button.vue | 45 ++++++++---------
 src/ux-components/list-card/list-card.vue     |  2 +
 3 files changed, 50 insertions(+), 46 deletions(-)

diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index e3e7c3891..0751e3bca 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,34 +1,34 @@
 <template>
-  <div 
-    class="list-group list-button-horizontal d-flex flex-column w-100 mb-2" 
-    @mouseup="handleClick(value)" 
+  <div
+    class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
+    @mouseup="handleClick(value)"
     @keyup.space="handleClick(value)"
   >
-    <input 
-      :type="isMultiSelect ? 'checkbox' : 'radio'" 
-      :id="buttonID" 
-      :name="groupName" 
-      :value="buttonID" 
-      :aria-required="isRequired" 
-      :data-focus-target="groupName" 
-      v-model="checkValue" 
+    <input
+      :type="isMultiSelect ? 'checkbox' : 'radio'"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonID"
+      :aria-required="isRequired"
+      :data-focus-target="groupName"
+      v-model="checkValue"
       @change="handleCheckChange"
     />
-    <label 
-      tabindex="-1" 
-      :for="buttonID" 
-      :aria-labelledby="buttonID" 
+    <label
+      tabindex="-1"
+      :for="buttonID"
+      :aria-labelledby="buttonID"
       class="d-flex flex-column justify-content-center py-3 px-4"
     >
-      <span 
-        class="m-0" 
+      <span
+        class="m-0"
         :class="textPosition"
       >
         {{buttonLabel}}
       </span>
-      <span 
-        v-if="buttonLabelSubCopy" 
-        class="m-0 small" 
+      <span
+        v-if="buttonLabelSubCopy"
+        class="m-0 small"
         :class="textPosition"
       >
         {{buttonLabelSubCopy}}
@@ -36,10 +36,10 @@
       <span v-if="screenReaderOnlyText" class="sr-only">
         {{screenReaderOnlyText}}
       </span>
-      <loader 
-        v-if="isLoaderDisplayed && !isMultiSelect" 
-        :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" 
-        :class="[loaderColor, loaderPosition]" 
+      <loader
+        v-if="isLoaderDisplayed && !isMultiSelect"
+        :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+        :class="[loaderColor, loaderPosition]"
       />
     </label>
   </div>
@@ -151,6 +151,7 @@ export default {
     border: 1px solid $gray-500;
     border-radius: 0;
     width: 100%;
+    color: $gray-600;
     &:hover {
       box-shadow: 0 0 0 4px $blue-100;
       cursor: pointer;
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 823bfc313..d56f02d44 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,40 +1,40 @@
 <template>
-  <div 
-    class="list-group list-button d-flex flex-column w-100 mb-2" 
-    @mouseup="handleClick(value)" 
+  <div
+    class="list-group list-button d-flex flex-column w-100 mb-2"
+    @mouseup="handleClick(value)"
     @keyup.space="handleClick(value)"
   >
-    <input 
-      :type="isMultiSelect ? 'checkbox' : 'radio'" 
-      :id="buttonID" 
-      :name="groupName" 
-      :value="buttonID" 
-      :aria-required="isRequired" 
-      :data-focus-target="groupName" 
+    <input
+      :type="isMultiSelect ? 'checkbox' : 'radio'"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonID"
+      :aria-required="isRequired"
+      :data-focus-target="groupName"
       v-model="checkValue"
       @change="handleCheckChange"
     >
-    <label 
-      tabindex="-1" 
-      :for="buttonID" 
-      :aria-labelledby="buttonID" 
+    <label
+      tabindex="-1"
+      :for="buttonID"
+      :aria-labelledby="buttonID"
       class="d-flex flex-column justify-content-center py-3 px-4"
     >
-      <span 
-        class="m-0" 
+      <span
+        class="m-0"
         :class="textPosition"
       >
         {{ buttonLabel }}
       </span>
-      <span 
-        v-if="buttonLabelSubCopy" 
-        class="m-0 small" 
+      <span
+        v-if="buttonLabelSubCopy"
+        class="m-0 small"
         :class="textPosition"
       >
         {{ buttonLabelSubCopy }}
       </span>
-      <span 
-        v-if="screenReaderOnlyText" 
+      <span
+        v-if="screenReaderOnlyText"
         class="sr-only"
       >
         {{ screenReaderOnlyText }}
@@ -67,7 +67,7 @@ export default {
     loaderColor: String,
     loaderPosition: String,
     sizeInRem: [Number,String],
-    value: { 
+    value: {
     // Field initial value
       type: [String, Number],
       default: "",
@@ -132,6 +132,7 @@ export default {
     input[type="checkbox"] {
       position: static; //override bootstrap
       height: 0;
+      opacity: 0;
     }
     &:focus-visible + label {
       box-shadow: 0 0 0 2.5px $blue inset;
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 6d4805de5..caba00d0a 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -173,6 +173,7 @@ export default {
       border-radius: 2px;
       order: 2;
       flex-shrink: 0;
+      color: $gray-600;
     }
     + label.checkboxTop::before {
       margin: -1.25rem 0.5rem 0 0 !important;
@@ -229,6 +230,7 @@ export default {
       }
       + label {
         min-height: 48px;
+        color: $gray-600;
         img {
           margin-bottom: 0;
         }

From 35469f51cde2b8df42ad964f93b84e17ed68520b Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 7 Feb 2022 09:21:56 -0500
Subject: [PATCH 05/19] Latest updates to POC for CSR-231

---
 src/layouts/address-poc/address-poc.vue | 212 +++++++++++++++++++-----
 1 file changed, 166 insertions(+), 46 deletions(-)

diff --git a/src/layouts/address-poc/address-poc.vue b/src/layouts/address-poc/address-poc.vue
index 31a5e66ee..a7be68d02 100644
--- a/src/layouts/address-poc/address-poc.vue
+++ b/src/layouts/address-poc/address-poc.vue
@@ -7,16 +7,79 @@
     </div>
     <div class="row my-4">
       <div class="col">
-        <label for="autocomplete">Home address</label>
+        <label for="autocomplete">Street address</label>
         <input ref="autocomplete" 
             id="autocomplete"
             placeholder="Search" 
             class="form-control search-location"
-            onfocus="value = ''" 
             type="text" />
       </div>
-    </div>          
-  </div>  
+    </div>
+    <div v-show="showAddressFields" class="row my-4">
+      <div class="col">
+        <label for="city">City</label>
+        <input ref="city" 
+            id="city"
+            class="form-control"
+            type="text" />
+      </div>
+    </div> 
+    <div v-show="showAddressFields" class="row my-4">
+      <div class="col-6">
+        <label for="state">State</label>
+        <input ref="state" 
+            id="state"
+            class="form-control"
+            type="text" />
+      </div>
+      <div class="col-6">
+        <label for="zip">Zip</label>
+        <input ref="zip" 
+            id="zip"
+            class="form-control"
+            type="text" />
+      </div>      
+    </div> 
+
+    <div v-show="displayVerificationWarning" class="row my-4">
+      <div class="col">
+        <span style="color: red;">An accurate match may not have have been located. Please verify your address before continuing</span>
+      </div>
+    </div>
+    <div v-show="displayNoMatchWarning" class="row my-4">
+      <div class="col">
+        <span style="color: red;">An accurate match could not be located. Please re-enter your street address before continuing</span>
+      </div>
+    </div>      
+    <div class="row my-4">
+      <div class="col">
+        <label for="firstName">First name</label>
+        <input ref="firstName" 
+            id="firstName"
+            class="form-control"
+            type="text" />
+      </div>
+    </div> 
+    <div class="row my-4">
+      <div class="col">
+        <label for="lastName">Last name</label>
+        <input ref="lastName" 
+            id="lastName"
+            class="form-control"
+            type="text" />
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+        <label for="email">Email address</label>
+        <input ref="email" 
+            id="email"
+            class="form-control"
+            type="text" />
+      </div>
+    </div>            
+  </div>
+
 </template>
 
 <script>
@@ -27,16 +90,26 @@ export default {
   components: {
     vehicleBanner
   },
-
+  data() {
+    return {
+      showAddressFields: false,
+      displayVerificationWarning: false,
+      displayNoMatchWarning: false    
+    };
+  },
   mounted() {
     this.$refs.vehicleBanner.initializeComponent({GenericVehicleImage: 'https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3'});
 
+    let addressField1 = document.getElementById("autocomplete");
     let self = this;
-//AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo - localhost:8080
-//AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w
-    this.$loadScript("https://maps.googleapis.com/maps/api/js?key=AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w&libraries=places")
+
+    let apiKey = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; // localhost:8080
+    //let apiKey = "AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above
+
+    this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
       .then(() => {
-        // Script is loaded, do something
+
+        // Script is loaded, initialize the autocomplete textbox
         self.autocomplete = new window.google.maps.places.Autocomplete(
           (self.$refs.autocomplete),
           { 
@@ -46,54 +119,101 @@ export default {
           }
         );
 
-        self.autocomplete.addListener('place_changed', () => {
-          let place = self.autocomplete.getPlace();
-          let address1 = "";
-          let postcode = "";
+        self.autocomplete.addListener('place_changed', fillInAddress);
+        
+        addressField1.onblur = function() {
+            var hover = document.querySelector(".pac-container .pac-item:hover");
 
-          let input = document.getElementById("autocomplete");
+            // if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
+            if (hover === null) {
+                var item = document.querySelector(".pac-container .pac-item");
+                if (item != null) {
+                  var firstResult = item.textContent;
+                  var geocoder = new window.google.maps.Geocoder();
+                  geocoder.geocode({
+                      address: firstResult
+                  }, function (results, status) {
+                      if (status === window.google.maps.GeocoderStatus.OK) {
+                          fillInAddress(results[0]);
+                          self.displayVerificationWarning = true;
+                          self.displayNoMatchWarning = false;
+                      }
+                  });
+                }
+                else {
+                  let city = document.querySelector("#city");
+                  let state = document.querySelector("#state");
+                  let zip = document.querySelector("#zip");   
 
-          for (const component of place.address_components) {
-            const componentType = component.types[0];
+                  city.value = "";
+                  state.value = "";
+                  zip.value = "";      
 
-            switch (componentType) {
-              case "street_number": {
-                address1 = `${component.long_name} ${address1}`;
-                break;
-              }
-
-              case "route": {
-                address1 += component.short_name;
-                break;
-              }
-              case "locality":
-                address1 += ', ' + component.long_name;
-                break;
-              case "administrative_area_level_1": {
-                address1 += ', ' +  component.short_name;
-                break;
-              }
-              case "postal_code": {
-                postcode = `${component.long_name}${postcode}`;
-                break;
-              }
-
-              case "postal_code_suffix": {
-                postcode = `${postcode}-${component.long_name}`;
-                break;
-              }
+                  self.displayVerificationWarning = false;
+                  self.displayNoMatchWarning = true;
+                }
 
+                
             }
+        };
 
-            let addressField1 = document.querySelector("#autocomplete");
-            addressField1.value = address1 + ' ' + postcode;
-          }      
-        }); 
+        function fillInAddress(place) {
+          if (!place) {
+              place = self.autocomplete.getPlace();
+          }
+
+          if (place && place.address_components) {
+            let address1 = "";
+            let city = document.querySelector("#city");
+            let state = document.querySelector("#state");
+            let zip = document.querySelector("#zip");
+            self.showAddressFields = true;
+
+            for (const component of place.address_components) {
+              const componentType = component.types[0];
+
+              switch (componentType) {
+                case "street_number": {
+                  address1 = `${component.long_name} ${address1}`;
+                  break;
+                }
+
+                case "route": {
+                  address1 += component.short_name;
+                  break;
+                }
+                case "locality": {
+                  city.value = component.long_name;
+                  break;
+                }
+                case "administrative_area_level_1": {
+                  state.value = component.short_name;
+                  break;
+                }
+                case "postal_code": {
+                  zip.value = component.long_name;
+                  break;
+                }
+
+              }
+
+              addressField1.value = address1;
+              self.displayVerificationWarning = false;
+              self.displayNoMatchWarning = false;
+            }   
+          } 
+          else {
+            self.displayVerificationWarning = true;
+            self.displayNoMatchWarning = false;
+          }       
+        }
       })
       .catch(() => {
         // Failed to fetch script
         console.log("Unable to load Google Places API script")
       });
+
+
   },
 
 };

From bd25366d9ec7ac4670c3a69fc67bdf4907e93162 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 7 Feb 2022 15:14:46 -0500
Subject: [PATCH 06/19] CSR-266 update props.

---
 src/layouts/component-test/component-test.vue |  7 ++++---
 src/ux-components/text-link/text-link.vue     | 12 +++++-------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 0e28d345a..fdb92ab23 100644
--- 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"
         />
diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue
index abd12a2c6..2297b9c71 100644
--- 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,

From f5c981e670804dedc35f142a8a436357b76698b5 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 7 Feb 2022 15:27:28 -0500
Subject: [PATCH 07/19] Update unit test.

---
 src/ux-components/text-link/text-link.spec.js | 29 +++++--------------
 1 file changed, 8 insertions(+), 21 deletions(-)

diff --git a/src/ux-components/text-link/text-link.spec.js b/src/ux-components/text-link/text-link.spec.js
index 87e9dec77..de414fd05 100644
--- 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");
-  });
 });

From f99c3b7f50e576a8e9d9917598d7e9f3c8f3fc2a Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 8 Feb 2022 08:11:36 -0500
Subject: [PATCH 08/19] Switching to DEV API Key

---
 src/layouts/address-poc/address-poc.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/address-poc/address-poc.vue b/src/layouts/address-poc/address-poc.vue
index 9d5d6bbe8..fff528604 100644
--- a/src/layouts/address-poc/address-poc.vue
+++ b/src/layouts/address-poc/address-poc.vue
@@ -105,8 +105,8 @@ export default {
     let addressField1 = document.getElementById("autocomplete");
     let self = this;
 
-    let apiKey = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; // localhost:8080
-    //let apiKey = "AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above
+    //let apiKey = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; // localhost:8080
+    let apiKey = "AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above
 
     this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
       .then(() => {

From 9581dcc97479840443d585304d475b358d8ede79 Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Tue, 8 Feb 2022 08:59:24 -0500
Subject: [PATCH 09/19] small changes

---
 .../funnel-footer/funnel-footer.spec.js       |   5 +-
 .../funnel-footer/funnel-footer.vue           | 140 ++++++++----------
 2 files changed, 61 insertions(+), 84 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/common-components/funnel-footer/funnel-footer.spec.js
index 791cd0961..a4c127a3e 100644
--- 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");
diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 302936c47..37879d2cf 100644
--- 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>

From a70cb96e22b6866fdf0479012731dbe97857dcfc Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Tue, 8 Feb 2022 13:45:32 -0500
Subject: [PATCH 10/19] CSR-339 correct tab / focus issue

---
 src/ux-components/list-button/list-button.vue | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index d56f02d44..3256906e3 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -133,21 +133,22 @@ export default {
       position: static; //override bootstrap
       height: 0;
       opacity: 0;
-    }
-    &:focus-visible + label {
-      box-shadow: 0 0 0 2.5px $blue inset;
-    }
-    &:focus + label {
-      box-shadow: 0 0 0 2.5px $blue inset;
-    }
-    &:checked + label {
-      color: $black;
-      font-weight: 500;
-      background: $blue-100;
-      box-shadow: 0 0 0 1px $blue;
-    }
-    &:checked + label p:first-child {
-      font-weight: 500;
+    
+      &:focus-visible + label {
+        box-shadow: 0 0 0 2.5px $blue inset;
+      }
+      &:focus + label {
+        box-shadow: 0 0 0 2.5px $blue inset;
+      }
+      &:checked + label {
+        color: $black;
+        font-weight: 500;
+        background: $blue-100;
+        box-shadow: 0 0 0 1px $blue;
+      }
+      &:checked + label p:first-child {
+        font-weight: 500;
+      }
     }
   }
   label {

From bb161ee97f6978123ccebeadb072a6517e0c7cfa Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 8 Feb 2022 17:44:42 -0500
Subject: [PATCH 11/19] CSR-257 WIP do not merge.

---
 .../funnel-footer/funnel-footer.vue           | 131 ++++++++++--------
 src/layouts/vehicle-damage/vehicle-damage.vue |   8 +-
 src/layouts/vehicle-make/vehicle-make.vue     |   4 +-
 src/layouts/vehicle-year/vehicle-year.vue     |   2 +-
 src/styles/common-styles.scss                 |   5 +
 src/ux-components/list-card/list-card.vue     |   1 +
 6 files changed, 91 insertions(+), 60 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 37879d2cf..b3f75d4c7 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -1,28 +1,30 @@
 <template>
-<div class="container-fluid g-2 footer">
-    <div class="row">
+  <div class="footer pt-4">
+    <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 class="row" :style="`padding-bottom: ${paddingHeight}px`">
+      </div>
+      <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="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="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>
-<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="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" />
+          <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",
-    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();
-        },
-        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");
-            }
-        }
+  name: "funnelFooter",
+  components: {
+    textLink,
+    buttonMain
+  },
+  data() {
+    return {
+      paddingHeight: 0,
+      backLink: "",
+      buttonText: "",
     }
+  },
+  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 {
-    min-width: 200px;
+.footer {
+  display: flex;
+  margin-top: auto;
+  button {
+    min-width: 135px;
     width: 100%;
+  }
 }
 </style>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index c5b8df783..b59798e2e 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/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,
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index 023d24023..c91379318 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/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"
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 1b10fba92..e8e69c29a 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/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,
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index a4915049b..ae409dd36 100644
--- a/src/styles/common-styles.scss
+++ b/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;
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index caba00d0a..c3f399404 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/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;

From 18ead1be275d61f6a635fcde3a5e85b07c767466 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 9 Feb 2022 09:35:27 -0500
Subject: [PATCH 12/19] CSR-257 WIP

---
 .../funnel-footer/funnel-footer.vue                | 14 ++++++--------
 src/styles/common-styles.scss                      |  1 +
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index b3f75d4c7..56e483b6d 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -3,7 +3,7 @@
     <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;{{new Date().getFullYear()}}&nbsp;Safelite Group
         </div>
       </div>
       <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
@@ -16,10 +16,10 @@
     </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">
+        <div class="col-auto d-flex justify-content-end" id="stacked">
           <buttonMain isPrimary :buttonText="buttonText" loaderColor="white" sizeInRem="1" @click-event="buttonClick"/>
         </div>
-        <div class="col">
+        <div class="col py-1">
           <textLink linkType="navigation" :text="backLink" @click-event="linkClick"/>
         </div>
       </div>
@@ -42,15 +42,13 @@ export default {
       paddingHeight: 0,
       backLink: "",
       buttonText: "",
+      currentYear: new Date().getFullYear(),
     }
   },
   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();
     })
   },
@@ -76,8 +74,8 @@ export default {
       }
     },
     initializeComponent(cmsContent) {
-      this.buttonText = cmsContent.BackButtonText;
-      this.backLink = cmsContent.ForwardButtonText;
+      this.backLink = cmsContent.BackButtonText;
+      this.buttonText = cmsContent.ForwardButtonText;
     },
     buttonClick() {
       this.$emit("forwardClicked");
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index ae409dd36..8d7133884 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -6,6 +6,7 @@ body {
 
   .container-fluid {
     max-width: 576px; //Remove once desktop app is complete
+    // min-width: 360px;
     &.container-shadow {
       box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
     }

From 4b33452fe55c9bfbd1cce625e29563932b88ac3e Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 9 Feb 2022 11:19:50 -0500
Subject: [PATCH 13/19] Added autocomplete='off' to all fields

---
 src/layouts/address-poc/address-poc.vue | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/layouts/address-poc/address-poc.vue b/src/layouts/address-poc/address-poc.vue
index fff528604..cc7950b9a 100644
--- a/src/layouts/address-poc/address-poc.vue
+++ b/src/layouts/address-poc/address-poc.vue
@@ -12,7 +12,8 @@
             id="autocomplete"
             placeholder="Search" 
             class="form-control search-location"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
       </div>
     </div>
     <div v-show="showAddressFields" class="row my-4">
@@ -21,7 +22,8 @@
         <input ref="city" 
             id="city"
             class="form-control"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
       </div>
     </div> 
     <div v-show="showAddressFields" class="row my-4">
@@ -30,14 +32,16 @@
         <input ref="state" 
             id="state"
             class="form-control"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
       </div>
       <div class="col-6">
         <label for="zip">Zip</label>
         <input ref="zip" 
             id="zip"
             class="form-control"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
       </div>      
     </div> 
 
@@ -57,7 +61,8 @@
         <input ref="firstName" 
             id="firstName"
             class="form-control"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
       </div>
     </div> 
     <div class="row my-4">
@@ -66,7 +71,8 @@
         <input ref="lastName" 
             id="lastName"
             class="form-control"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
       </div>
     </div>
     <div class="row my-4">
@@ -75,7 +81,8 @@
         <input ref="email" 
             id="email"
             class="form-control"
-            type="text" />
+            type="text" 
+            autocomplete="off" />
       </div>
     </div>            
   </div>

From a3fd891d16867fe09c5b51c0eb633807686bcaa8 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 9 Feb 2022 12:50:45 -0500
Subject: [PATCH 14/19] Update unit test.

---
 .../funnel-footer/funnel-footer.spec.js       | 38 +------------------
 .../funnel-footer/funnel-footer.vue           | 27 ++++++-------
 .../vehicle-damage/vehicle-damage.spec.js     | 13 ++++++-
 src/styles/common-styles.scss                 |  1 -
 src/ux-components/button-main/button-main.vue |  2 +-
 5 files changed, 29 insertions(+), 52 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/common-components/funnel-footer/funnel-footer.spec.js
index a4c127a3e..b6833ef7e 100644
--- a/src/common-components/funnel-footer/funnel-footer.spec.js
+++ b/src/common-components/funnel-footer/funnel-footer.spec.js
@@ -9,10 +9,7 @@ describe("funnel-footer.vue", () => {
       const r = {
         test:"testing",
         clientHeight: 10,
-        classList: {
-          add: jest.fn(() => ''),
-          remove: jest.fn()
-        },
+        offsetHeight: 24,
       };
 
       global.document.getElementById = jest.fn().mockImplementation(()=> {
@@ -27,10 +24,7 @@ describe("funnel-footer.vue", () => {
       console.log(wrapper.html());
 
       // Expect
-      expect(link.attributes('class')).toContain("footer-link");
-      expect(global.document.getElementById).toBeCalled();
-      expect(r.classList.add).toBeCalledWith("justify-content-end");
-      expect(r.classList.remove).toBeCalledWith("justify-content-start");
+      expect(link.attributes('class')).toContain("footer");
 
   });
 
@@ -63,32 +57,4 @@ describe("funnel-footer.vue", () => {
     expect(input.attributes("class")).toContain("btn-primary");
   });
 
-  it("Should return class justify-content-end if paddingHeight < 80px", async () => {
-
-    global.document.getElementById = jest.fn().mockImplementation(()=> {
-      return {
-        test:"testing",
-        clientHeight: 10,
-        classList: {
-          add: jest.fn(),
-          remove: jest.fn()
-        }
-      }
-    });
-
-    // Act
-      const wrapper = mount(funnelFooter, {
-        propsData: {
-          footer: true
-        },
-      });
-      const infoBox = document.getElementById('infoBox');
-      // Assert
-      const stacked = wrapper.find("#stacked");
-      wrapper.vm.paddingHeight = 100;
-
-      // Expect
-      expect(stacked.attributes('class')).toContain("justify-content-end");
-  });
-
 });
diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 56e483b6d..424e524fc 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -16,10 +16,10 @@
     </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-auto d-flex justify-content-end" id="stacked">
+        <div class="col-12 button-col d-flex justify-content-end" id="stacked">
           <buttonMain isPrimary :buttonText="buttonText" loaderColor="white" sizeInRem="1" @click-event="buttonClick"/>
         </div>
-        <div class="col py-1">
+        <div class="col-12 link-col py-1">
           <textLink linkType="navigation" :text="backLink" @click-event="linkClick"/>
         </div>
       </div>
@@ -63,15 +63,6 @@ export default {
     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.backLink = cmsContent.BackButtonText;
@@ -91,9 +82,19 @@ export default {
 .footer {
   display: flex;
   margin-top: auto;
-  button {
-    min-width: 135px;
+  .button-col,
+  .link-col,
+  .btn-primary {
     width: 100%;
   }
+  @media only screen and (min-width: 340px) {
+    .button-col,
+    .link-col {
+      width: 50% !important;
+    }
+    .btn-primary {
+      width: auto;
+    }
+  }
 }
 </style>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 49df756c2..949f4811b 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -1,6 +1,7 @@
 // Components
 import vehicleDamage from "@/layouts/vehicle-damage/vehicle-damage.vue";
 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";
@@ -144,7 +145,7 @@ describe("vehicle-damage.vue", () => {
 
 describe("vehicle-damage.vue", () => {
   test("Call invalidation, ResetPartsAndDeps should be called", async () => {
-    
+
     //Arrange
     const { wrapper } = setupMocks({});
 
@@ -221,6 +222,10 @@ function setupMocks({
 
   damageLocationQuestion.methods = {
     initializeComponent: jest.fn(),
+  };
+
+  funnelFooter.methods = {
+    initializeComponent: jest.fn(),
   }
 
   const mountOptions = getMountOptions(mountOptionsMockData);
@@ -252,5 +257,11 @@ function setupMocks({
   damageLocationQuestionWrapper.vm.initializeComponent =
   damageLocationQuestion.methods.initializeComponent;
 
+  const funnelFooterWrapper = wrapper.findComponent({
+    name: "funnelFooter",
+  });
+
+  funnelFooterWrapper.vm.initializeComponent = funnelFooter.methods.initializeComponent;
+
   return { wrapper, apiPromise };
 }
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 8d7133884..ae409dd36 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -6,7 +6,6 @@ body {
 
   .container-fluid {
     max-width: 576px; //Remove once desktop app is complete
-    // min-width: 360px;
     &.container-shadow {
       box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
     }
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index e44550c30..2a4a68366 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -1,5 +1,5 @@
 <template>
-  <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()">
+  <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-2" :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']" @click="clicked()">
     <span class="m-0">{{ this.buttonText }}</span>
     <loader
       class="ms-2"

From 4abd97ece16e6164526619dd12403d30951563b9 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 9 Feb 2022 14:36:14 -0500
Subject: [PATCH 15/19] WIP suppress Chrome Autocomplete

---
 src/layouts/address-poc/address-poc.vue | 85 +++++++++++++------------
 1 file changed, 45 insertions(+), 40 deletions(-)

diff --git a/src/layouts/address-poc/address-poc.vue b/src/layouts/address-poc/address-poc.vue
index cc7950b9a..5f092d043 100644
--- a/src/layouts/address-poc/address-poc.vue
+++ b/src/layouts/address-poc/address-poc.vue
@@ -5,46 +5,51 @@
         <vehicleBanner ref="vehicleBanner"  :displayGenericVehicleImage=true />
       </div>
     </div>
-    <div class="row my-4">
-      <div class="col">
-        <label for="autocomplete">Street address</label>
-        <input ref="autocomplete" 
-            id="autocomplete"
-            placeholder="Search" 
-            class="form-control search-location"
-            type="text" 
-            autocomplete="off" />
+    <form>
+      <div class="row my-4">
+        <div class="col">
+          <label for="autocomplete">Street address</label>
+          <input ref="autocomplete" 
+              id="autocomplete"
+              placeholder="Search" 
+              class="form-control search-location"
+              type="text" 
+              autocomplete="off" />
+        </div>
       </div>
-    </div>
-    <div v-show="showAddressFields" class="row my-4">
-      <div class="col">
-        <label for="city">City</label>
-        <input ref="city" 
-            id="city"
-            class="form-control"
-            type="text" 
-            autocomplete="off" />
+    </form>
+    <form>
+      <div v-show="showAddressFields" class="row my-4">
+        <div class="col">
+          <label for="city">City</label>
+          <input ref="city" 
+              id="city"
+              class="form-control"
+              type="text" 
+              autocomplete="off" />
+        </div>
       </div>
-    </div> 
-    <div v-show="showAddressFields" class="row my-4">
-      <div class="col-6">
-        <label for="state">State</label>
-        <input ref="state" 
-            id="state"
-            class="form-control"
-            type="text" 
-            autocomplete="off" />
-      </div>
-      <div class="col-6">
-        <label for="zip">Zip</label>
-        <input ref="zip" 
-            id="zip"
-            class="form-control"
-            type="text" 
-            autocomplete="off" />
-      </div>      
-    </div> 
-
+    </form> 
+    <form>
+      <div v-show="showAddressFields" class="row my-4">
+        <div class="col-6">
+          <label for="state">State</label>
+          <input ref="state" 
+              id="state"
+              class="form-control"
+              type="text" 
+              autocomplete="off" />
+        </div>
+        <div class="col-6">
+          <label for="zip">Zip</label>
+          <input ref="zip" 
+              id="zip"
+              class="form-control"
+              type="text" 
+              autocomplete="off" />
+        </div>      
+      </div> 
+    </form>
     <div v-show="displayVerificationWarning" class="row my-4">
       <div class="col">
         <span style="color: red;">An accurate match may not have have been located. Please verify your address before continuing</span>
@@ -112,8 +117,8 @@ export default {
     let addressField1 = document.getElementById("autocomplete");
     let self = this;
 
-    //let apiKey = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; // localhost:8080
-    let apiKey = "AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above
+    let apiKey = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; // localhost:8080
+    //let apiKey = "AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above
 
     this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
       .then(() => {

From 1eff8b58a9648be269b6c5c88861bcc7cc50d381 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 9 Feb 2022 14:55:13 -0500
Subject: [PATCH 16/19] CSR-241 QA color updates.

---
 src/layouts/component-test/component-test.vue | 27 +------------------
 .../list-button-horizontal.vue                |  2 +-
 src/ux-components/list-button/list-button.vue |  4 +--
 src/ux-components/list-card/list-card.vue     | 12 ++++++---
 4 files changed, 13 insertions(+), 32 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index fdb92ab23..e20892105 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -674,19 +674,6 @@
         />
       </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">Typography</h4>
@@ -926,16 +913,6 @@
         />
       </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>
 
@@ -950,7 +927,6 @@ 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 textLink from "@/ux-components/text-link/text-link";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 export default {
   name: "App",
   components: {
@@ -963,8 +939,7 @@ export default {
     listButtonHorizontal,
     checkbox,
     funnelHeader,
-    textLink,
-    funnelFooter
+    textLink
   },
   data() {
     return {
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 0751e3bca..034f97c07 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -153,7 +153,7 @@ export default {
     width: 100%;
     color: $gray-600;
     &:hover {
-      box-shadow: 0 0 0 4px $blue-100;
+      box-shadow: 0 0 0 4px $blue-300;
       cursor: pointer;
       z-index: 2;
     }
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 3256906e3..fcf4ae799 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -133,7 +133,7 @@ export default {
       position: static; //override bootstrap
       height: 0;
       opacity: 0;
-    
+
       &:focus-visible + label {
         box-shadow: 0 0 0 2.5px $blue inset;
       }
@@ -162,7 +162,7 @@ export default {
 
     &:hover {
       @include media-breakpoint-up(sm) {
-        box-shadow: 0 0 0 4px $blue-100;
+        box-shadow: 0 0 0 4px $blue-300;
       }
       cursor: pointer;
     }
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index c3f399404..95f886d5a 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -32,12 +32,12 @@
         >
           {{buttonLabel}}
         </p>
-        <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">
+        <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
           {{buttonLabelSubCopy}}
         </p>
         <div v-if="isWide" class="order-2">
           <p class="m-0 small">{{ buttonLabel }}</p>
-          <p v-if="buttonLabelSubCopy" class="m-0 fs-7">
+          <p v-if="buttonLabelSubCopy" class="m-0 fs-7 sub-copy">
             {{ buttonLabelSubCopy }}
           </p>
         </div>
@@ -134,7 +134,7 @@ export default {
     max-width: 100%;
   }
   &:hover {
-    box-shadow: 0px 0px 0px 6px $blue-100;
+    box-shadow: 0px 0px 0px 4px $blue-300;
     border: 1px solid transparent;
   }
   input[type="checkbox"],
@@ -150,6 +150,9 @@ export default {
       }
       p {
         text-align: center;
+        &.sub-copy {
+          color: $gray-550;
+        }
       }
     }
     &:focus + label {
@@ -237,6 +240,9 @@ export default {
         }
         p {
           text-align: left;
+          &.sub-copy {
+            color: $gray-550;
+          }
         }
       }
     }

From ce6d1008d2e0e001cb66595d176efe6c8444ed68 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 9 Feb 2022 14:57:00 -0500
Subject: [PATCH 17/19] Set to APIKEY for dev

---
 src/layouts/address-poc/address-poc.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/address-poc/address-poc.vue b/src/layouts/address-poc/address-poc.vue
index 5f092d043..8bb42a659 100644
--- a/src/layouts/address-poc/address-poc.vue
+++ b/src/layouts/address-poc/address-poc.vue
@@ -117,8 +117,8 @@ export default {
     let addressField1 = document.getElementById("autocomplete");
     let self = this;
 
-    let apiKey = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; // localhost:8080
-    //let apiKey = "AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above
+    //let apiKey = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; // localhost:8080
+    let apiKey = "AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above
 
     this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
       .then(() => {

From 827c5e6d5861e1712f37fe6f2431bdaec8777731 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 9 Feb 2022 15:59:57 -0500
Subject: [PATCH 18/19] CSR-257 code updates.

---
 src/common-components/funnel-footer/funnel-footer.vue | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 424e524fc..47dff7b5a 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -42,14 +42,12 @@ export default {
       paddingHeight: 0,
       backLink: "",
       buttonText: "",
-      currentYear: new Date().getFullYear(),
     }
   },
   mounted() {
-    this.paddingHeight = document.getElementById("infoBox").offsetHeight + 24;
+    this.paddingHeight = document.querySelector(".footer #infoBox").offsetHeight + 24;
     this.$nextTick(() => {
       window.addEventListener('resize', this.onResize);
-      this.checkHeight();
     })
   },
   beforeUnmount() {
@@ -57,12 +55,7 @@ export default {
   },
   methods: {
     onResize() {
-      this.paddingHeight = document.getElementById("infoBox").offsetHeight;
-      this.checkHeight();
-    },
-    checkHeight() {
-      const parentHeight = document.getElementById('infoBox').clientHeight;
-      const wrapper2 = document.getElementById('stacked');
+      this.paddingHeight = document.querySelector(".footer #infoBox").offsetHeight;
     },
     initializeComponent(cmsContent) {
       this.backLink = cmsContent.BackButtonText;

From 66503b78500577c941ade34afc0713685e92978b Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 9 Feb 2022 16:07:17 -0500
Subject: [PATCH 19/19] Update unit test.

---
 src/common-components/funnel-footer/funnel-footer.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/common-components/funnel-footer/funnel-footer.spec.js
index b6833ef7e..1c173b6be 100644
--- a/src/common-components/funnel-footer/funnel-footer.spec.js
+++ b/src/common-components/funnel-footer/funnel-footer.spec.js
@@ -12,7 +12,7 @@ describe("funnel-footer.vue", () => {
         offsetHeight: 24,
       };
 
-      global.document.getElementById = jest.fn().mockImplementation(()=> {
+      global.document.querySelector = jest.fn().mockImplementation(()=> {
         return r;
       });