From 8de2948bcf429ea54c562646e66ed70a516caddf Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 20 Dec 2021 12:25:16 -0500
Subject: [PATCH 1/2] CSR-222: revised button to be button markup, not link

---
 src/ux-components/button-back/button-back.spec.js |  9 +++++----
 src/ux-components/button-back/button-back.vue     | 15 +++++----------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/ux-components/button-back/button-back.spec.js b/src/ux-components/button-back/button-back.spec.js
index b753f4376..7f6ff19e6 100644
--- a/src/ux-components/button-back/button-back.spec.js
+++ b/src/ux-components/button-back/button-back.spec.js
@@ -3,19 +3,20 @@ import buttonBack from "./button-back";
 
 describe("back button", () => {
 
-  test("renders a link", () => {
+  test("renders a button", () => {
     // Arrange
+    const myFunction = () => {};
 
     // Act
     const wrapper = shallowMount(buttonBack, {
       propsData: {
-        backButtonUrl: "#",
+        backButtonAction: myFunction,
         backButtonAccessibleText: "something",
       },
     });
     
     // Assert
-    expect(wrapper.find("a").exists()).toBe(true);
+    expect(wrapper.find("button").exists()).toBe(true);
     wrapper.unmount();
   });
 
@@ -32,7 +33,7 @@ describe("back button", () => {
     });
     const handleClickMethod = jest.spyOn(wrapper.vm, "handleClick");
 
-    await wrapper.find("a").trigger("click");
+    await wrapper.find("button").trigger("click");
     
     // Assert
     expect(handleClickMethod).toHaveBeenCalled();
diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index 808c1f6cc..922ec29f8 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -1,7 +1,6 @@
 <template>
-  <a 
-    v-if="backButtonUrl || backButtonAction" 
-    :href="backButtonUrl || '#'" 
+  <button 
+    v-if="backButtonAction" 
     @click="handleClick($event)" 
     class="back-button-wrapper d-flex p-0" 
     :aria-label="backButtonAccessibleText"
@@ -10,17 +9,13 @@
       <div class="arrow-left"></div>
       <div class="box"></div>
     </div>
-  </a>
+  </button>
 </template>
 
 <script>
 export default {
   name: "buttonBack",
   props: {
-    backButtonUrl: {
-      type: String,
-      default: "",
-    },
     backButtonAccessibleText: {
       type: String,
       required: true,
@@ -28,12 +23,12 @@ export default {
     backButtonAction: {
       type: Function,
       default: null,
+      required: true,
     }
   },
   methods: {
-    handleClick: function (event) {
+    handleClick: function () {
       if (this.backButtonAction) {
-        event.preventDefault();
         this.backButtonAction();
       }
     },

From d393d12bec58708239dd6fb92bf9c66f20fcbac2 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 20 Dec 2021 14:58:04 -0500
Subject: [PATCH 2/2] CSR-222: include header as link; updates

---
 .../funnel-sub-header.spec.js                 | 15 ++++++++++++++
 .../funnel-sub-header/funnel-sub-header.vue   | 15 +++++++++++++-
 .../button-back/button-back.spec.js           | 20 -------------------
 src/ux-components/button-back/button-back.vue | 11 ++--------
 4 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
index e2b5c4d28..417081350 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
@@ -14,4 +14,19 @@ describe("FunnelSubHeader.vue", () => {
     expect(wrapper.find("h2").text()).toContain("FunnelSubHeader Content");
     wrapper.unmount();
   });
+  it("Should render the button inside of header if backButtonAction provided", () => {
+    // Act
+    const testFn = () => {}
+    const wrapper = shallowMount(FunnelSubHeader, {
+      propsData: {
+        text: "FunnelSubHeader Content",
+        hasBackButton: true,
+        backButtonAction: testFn,
+      },
+    });
+
+    // Assert
+    expect(wrapper.find("h2").find("button").text()).toContain("FunnelSubHeader Content");
+    wrapper.unmount();
+  });
 });
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 5e3bcc7e3..d05a9ea4d 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -1,7 +1,14 @@
 <template>
   <div class="current_car_info-text">
     <div class="d-flex align-items-center justify-content-center">
-      <h2 class="text-center fs-5 d-block fw-normal mb-0">{{ text }}</h2>
+      <h2 class="text-center fs-5 d-block fw-normal mb-0">
+        <button v-if="hasBackButton && backButtonAction" @click="backButtonAction">
+          {{ text }}
+        </button>
+        <span v-else>
+          {{ text }}
+        </span>
+      </h2>
       <buttonBack
         v-if="hasBackButton"
         :backButtonAccessibleText="backButtonAccessibleText"
@@ -32,6 +39,12 @@ export default {
 <style lang="scss">
   h2 {
     color: $gray-550;
+
+    button {
+      border: none;
+      background: none;
+      color: inherit;
+    }
   }
   .back-button-wrapper {
     margin-left: .25rem;
diff --git a/src/ux-components/button-back/button-back.spec.js b/src/ux-components/button-back/button-back.spec.js
index 7f6ff19e6..b8bc3256d 100644
--- a/src/ux-components/button-back/button-back.spec.js
+++ b/src/ux-components/button-back/button-back.spec.js
@@ -20,24 +20,4 @@ describe("back button", () => {
     wrapper.unmount();
   });
 
-  test("should execute handleClick function if it is clicked on", async () => {
-    // Arrange
-    const myFunction = () => {};
-    
-    // Act
-    const wrapper = shallowMount(buttonBack, {
-        propsData: {
-            backButtonAction: myFunction,
-            backButtonAccessibleText: "something",
-        },
-    });
-    const handleClickMethod = jest.spyOn(wrapper.vm, "handleClick");
-
-    await wrapper.find("button").trigger("click");
-    
-    // Assert
-    expect(handleClickMethod).toHaveBeenCalled();
-    wrapper.unmount();
-  });
-
 });
diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index 922ec29f8..92145ac87 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -1,7 +1,7 @@
 <template>
   <button 
     v-if="backButtonAction" 
-    @click="handleClick($event)" 
+    @click="backButtonAction" 
     class="back-button-wrapper d-flex p-0" 
     :aria-label="backButtonAccessibleText"
   >
@@ -19,20 +19,13 @@ export default {
     backButtonAccessibleText: {
       type: String,
       required: true,
+      default: "",
     },
     backButtonAction: {
       type: Function,
       default: null,
-      required: true,
     }
   },
-  methods: {
-    handleClick: function () {
-      if (this.backButtonAction) {
-        this.backButtonAction();
-      }
-    },
-  },
 };
 </script>