From e6a5648a59979f2deecefa525af3db05a8136ad3 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 3 Feb 2022 13:06:58 -0500
Subject: [PATCH] CSR-257 update how button and text link wrap and stack.

---
 .../funnel-footer/funnel-footer.vue           | 30 ++++++++++++++++---
 src/layouts/component-test/component-test.vue | 18 +++++------
 src/ux-components/button-main/button-main.vue |  3 +-
 src/ux-components/text-link/text-link.vue     |  7 ++---
 4 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 05c184b5c..fa09e90af 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/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="col">
+    <div class="row d-flex flex-row-reverse align-items-center">
+      <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"
@@ -75,7 +76,28 @@ export default {
   methods: {
     onResize() {
       this.paddingHeight = document.getElementById("infoBox").offsetHeight;
+      this.checkHeight();
+    },
+    checkHeight() {
+      const parentHeight = document.getElementById('infoBox').clientHeight;
+      const wrapper = document.getElementById('stacked');
+      const goWide = document.getElementById('go-wide');
+      if (parentHeight > 80) {
+        wrapper.classList.add("justify-content-start");
+        wrapper.classList.remove("justify-content-end");
+        wrapper.classList.add("justify-content-start");
+        wrapper.classList.remove("justify-content-end");
+      } else {
+        wrapper.classList.add("justify-content-end");
+        wrapper.classList.remove("justify-content-start");
+      }
     }
   }
 };
 </script>
+
+<style lang="scss">
+  button {
+    min-width: 200px;
+  }
+</style>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 0b8ec119b..6c7df5de1 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/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"
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index c8888c310..ceda521b8 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -50,7 +50,8 @@ export default {
     border-radius: $border-radius-lg;
     color: $white;
     transition: all 150ms linear;
-    white-space: nowrap;
+    justify-content: center;
+    // white-space: nowrap;
     &:hover {
       background: linear-gradient(
         270deg,
diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue
index de7affe6f..abd12a2c6 100644
--- a/src/ux-components/text-link/text-link.vue
+++ b/src/ux-components/text-link/text-link.vue
@@ -29,8 +29,7 @@ export default {
 <style lang="scss">
 a {
   color: $blue;
-  text-decoration: none;
-  border-bottom: 1px solid $blue;
+  text-underline-offset: 0.5em;
   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;
     }
   }
 }