Merge pull request #192 from Safelite/CSR-257-funnel-footer-updates

CSR-257 update how button and text link wrap and stack.

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

@@ -5,9 +5,17 @@ describe("funnel-footer.vue", () => {
 
   it("Should return footer-link class", async () => {
     // Act
-    try {
+
+      const r = {
+        test:"testing",
+        clientHeight: 10,
+        classList: {
+          add: jest.fn(() => ''),
+          remove: jest.fn()
+        },
+      };
       global.document.getElementById = jest.fn().mockImplementation(()=> {
-        return {}
+        return r;
       });
 
       const wrapper = mount(funnelFooter, {
@@ -22,9 +30,8 @@ describe("funnel-footer.vue", () => {
       // Expect
       expect(link.attributes('class')).toContain("footer-link");
       expect(global.document.getElementById).toBeCalled();
-    } catch(error) {
+      expect(r.classList.add).toBeCalledWith("justify-content-end");
-      console.log(error);
+      expect(r.classList.remove).toBeCalledWith("justify-content-start");
-    }
 
   });
 
@@ -57,4 +64,32 @@ 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");
+  });
+
 });

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

@@ -26,15 +26,16 @@
     </div>
   </div>
   <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
-    <div class="row">
+    <div class="row d-flex flex-row-reverse align-items-center">
-      <div class="col">
+      <div class="col d-flex justify-content-end" id="stacked">
         <buttonMain
         isPrimary
-        buttonText="Review Appointment Details"
+        buttonText="Button test"
         loaderColor="white"
         sizeInRem="1"
-        isFloat
         />
+      </div>
+      <div class="col">
         <textLink
         navigation=true
         text="back"
@@ -68,6 +69,7 @@ export default {
     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);
@@ -75,7 +77,28 @@ export default {
   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);
+      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");
+      }
     }
   }
 };
 </script>
+
+<style lang="scss">
+  button {
+    min-width: 200px;
+    width: 100%;
+  }
+</style>

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

@@ -76,7 +76,7 @@
       <div class="row g-2">
         <listCard
           isMultiSelect
-          buttonImage="windshield-damage.svg"
+          buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
           buttonLabel="Windshield"
           altText=""
           buttonID="List Card Checkbox 1"
@@ -94,7 +94,7 @@
         />
         <listCard
           isMultiSelect
-          buttonImage="windshield-damage.svg"
+          buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
           buttonLabel="Windshield"
           altText=""
           buttonID="List Card Checkbox 3"
@@ -115,7 +115,7 @@
           <legend class="sr-only">Functioning as Checkbox</legend>
           <listCard
             isMultiSelect
-            buttonImage="windshield-damage.svg"
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
             altText=""
             buttonID="List Card Checkbox"
@@ -132,7 +132,7 @@
           <legend class="sr-only">Checkbox no Description</legend>
           <listCard
             isMultiSelect
-            buttonImage="windshield-damage.svg"
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
             altText=""
             buttonID="List Card Checkbox b"
@@ -149,7 +149,7 @@
           <legend class="sr-only">Functioning as Radio Button</legend>
           <listCard
             isRadio
-            buttonImage="windshield-damage.svg"
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
             altText=""
             buttonID="List Card Radio Button"
@@ -166,7 +166,7 @@
           <legend class="sr-only">Radio Button no Description</legend>
           <listCard
             isRadio
-            buttonImage="windshield-damage.svg"
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
             altText=""
             buttonID="List Card Radio Button b"
@@ -184,7 +184,7 @@
           <listCard
             isMultiSelect
             isWide
-            buttonImage="windshield-damage.svg"
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
             altText=""
             buttonID="List Card Horizontal Checkbox"
@@ -219,7 +219,7 @@
           <legend class="sr-only">Horizontal Radio Button</legend>
           <listCard
             isWide
-            buttonImage="back-glass-damage.svg"
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Rear Window"
             altText=""
             buttonID="List Card Horizontal Radio Button"
@@ -236,7 +236,7 @@
           <legend class="sr-only">Radio Button no Description</legend>
           <listCard
             isWide
-            buttonImage="windshield-damage.svg"
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
             altText=""
             buttonID="List Card Horizontal Radio Button b"

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

@@ -50,7 +50,7 @@ export default {
     border-radius: $border-radius-lg;
     color: $white;
     transition: all 150ms linear;
-    white-space: nowrap;
+    justify-content: center;
     &:hover {
       background: linear-gradient(
         270deg,

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

@@ -29,8 +29,7 @@ export default {
 <style lang="scss">
 a {
   color: $blue;
-  text-decoration: none;
+  text-underline-offset: 0.5em;
-  border-bottom: 1px solid $blue;
   line-height: 26px;
   padding: 0 0 4px 0;
   font-weight: 500;
@@ -45,7 +44,6 @@ a {
   }
   &.navigation-link {
     color: $black;
-    border-bottom: 1px solid $black;
     line-height: 26px;
     display: inline-flex;
     text-transform: capitalize;
@@ -54,14 +52,13 @@ a {
   &.footer-link {
     color: $gray-600;
     text-decoration: none;
-    border-bottom: 1px solid transparent;
     line-height: 20px;
     padding: 0 0 2px 0;
     font-weight: 400;
     font-size: 0.75rem;
     &:hover {
-      border-bottom: 1px solid $gray-500;
       padding: 0 0 2px 0;
+      text-decoration: underline;
     }
   }
 }