Merge pull request #109 from Safelite/brm-back-button-update

Update back button to remove text as link.

src/common-components/funnel-sub-header/funnel-sub-header.spec.js

@@ -14,19 +14,4 @@ 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();
-  });
 });

src/common-components/funnel-sub-header/funnel-sub-header.vue

@@ -2,18 +2,16 @@
   <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">
-        <button v-if="hasBackButton && backButtonAction" @click="backButtonAction">
+        <p class="m-0" v-if="hasBackButton">
           {{ text }}
-        </button>
+        </p>
         <span v-else>
           {{ text }}
         </span>
       </h2>
       <buttonBack
         v-if="hasBackButton"
-        :backButtonAccessibleText="backButtonAccessibleText"
         :backButtonAction="backButtonAction"
-        :backButtonUrl="backButtonUrl"
       />
     </div>
   </div>
@@ -48,6 +46,6 @@ export default {
     }
   }
   .back-button-wrapper {
-    margin-left: .25rem;
+    margin-left: 0;
   }
 </style>

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

@@ -39,7 +39,7 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonBack 
+        <buttonBack
           backButtonUrl="#"
           backButtonAccessibleText="Back button label"
         />
@@ -618,7 +618,6 @@ export default {
     alert,
     vehicleBanner,
     listButtonHorizontal,
-    siteHeader,
     checkbox,
     funnelHeader,
   },

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

@@ -1,8 +1,8 @@
 <template>
-  <button 
-    v-if="backButtonAction" 
-    @click="backButtonAction" 
-    class="back-button-wrapper d-flex p-0" 
+  <button
+    v-if="backButtonAction"
+    @click="backButtonAction"
+    class="back-button-wrapper d-flex p-3" 
     :aria-label="backButtonAccessibleText"
   >
     <div class="button-back">