From af80ae6f22a35cd6de29402f8a1b0c0189e1df84 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Thu, 3 Nov 2022 09:33:37 -0400
Subject: [PATCH] CSR-918 Edit hover styling

---
 src/App.vue                                        |  1 +
 src/router/index.js                                |  5 +++++
 src/styles/common-error-styles.scss                | 13 ++++++++-----
 src/styles/mixins/customMixins.scss                |  4 ++++
 src/styles/shared-input-button-styles.scss         |  7 +++++++
 .../list-button-horizontal.vue                     | 14 +-------------
 src/ux-components/list-button/list-button.vue      | 12 +-----------
 src/ux-components/list-card/list-card.vue          | 13 +------------
 src/ux-components/radio/radio.vue                  |  2 +-
 9 files changed, 29 insertions(+), 42 deletions(-)
 create mode 100644 src/styles/shared-input-button-styles.scss

diff --git a/src/App.vue b/src/App.vue
index 75e80355f..aef77fcb0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,4 +23,5 @@ export default {
 @import "@/styles/common-typography-styles.scss";
 @import "@/styles/common-error-styles.scss";
 @import "@/styles/common-animations.scss";
+@import "@/styles/shared-input-button-styles.scss";
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index 6350edf5d..02e0def4c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -289,6 +289,11 @@ function navigateToUrl(url, optionalQuery = {}) {
         externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
     }
 
+    externalUrl.searchParams.append(
+        "experiments",
+        "ConceptFunnel=ConceptFunnel_V1=ConceptFunnel_TEST=true"
+    );
+
     window.location.assign(externalUrl);
 }
 
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index d497ae6ce..9befb1eb0 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -37,11 +37,14 @@ html {
         }
         &.list-button-horizontal {
             color: $red;
-            label {
-                border: 1px solid $red;
-                &:hover {
-                    box-shadow: 0px 0px 0px 4px $red-200;
-                }
+            // label {
+            //     border: 1px solid $red;
+            //     &:hover {
+            //         @include box-shadow-lg-hover($red-200);
+            //     }
+            // }
+            &:hover {
+                @include box-shadow-lg-hover($red-200);
             }
             input[type="checkbox"]:focus + label,
             input[type="radio"]:focus + label {
diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss
index 8620968f0..e9954b2a2 100644
--- a/src/styles/mixins/customMixins.scss
+++ b/src/styles/mixins/customMixins.scss
@@ -4,3 +4,7 @@
 @mixin blue-gradient {
     background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
 }
+
+@mixin box-shadow-lg-hover($color) {
+    box-shadow: 0 0 0 4px $color;
+}
diff --git a/src/styles/shared-input-button-styles.scss b/src/styles/shared-input-button-styles.scss
new file mode 100644
index 000000000..e64faee71
--- /dev/null
+++ b/src/styles/shared-input-button-styles.scss
@@ -0,0 +1,7 @@
+.base-input-button {
+    &:hover {
+        cursor: pointer;
+        @include box-shadow-lg-hover($blue-300);
+        border: 1px solid transparent;
+    }
+}
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 1b4232c4c..4537ce5bb 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -2,7 +2,7 @@
     <baseInputButton
         v-bind="$props"
         :buttonWrapperClasses="[
-            'list-group list-button-horizontal d-flex flex-column w-100',
+            'list-group list-button-horizontal d-flex flex-column w-100 base-input-button',
             { 'radio-fancy': isCashOrInsurance },
         ]"
         v-model="selectedValue">
@@ -86,18 +86,6 @@ export default {
         width: 100%;
         color: $gray-600;
 
-        &:hover {
-            @include media-breakpoint-up(sm) {
-                box-shadow: 0 0 0 4px $blue-300;
-                cursor: pointer;
-                z-index: 4 !important;
-            }
-        }
-
-        + p {
-            display: none;
-        }
-
         span {
             font-size: 0.875rem;
         }
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 4f7d34ae9..031805509 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,7 +1,7 @@
 <template>
     <baseInputButton
         v-bind="$props"
-        buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
+        buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
         v-model="selectedValue">
         <div
             :aria-label="buttonLabel"
@@ -111,16 +111,6 @@ export default {
                 color: $gray-550;
             }
         }
-
-        &:hover {
-            @include media-breakpoint-up(sm) {
-                box-shadow: 0 0 0 4px $blue-300;
-            }
-            cursor: pointer;
-        }
-        + p {
-            display: none;
-        }
     }
 }
 </style>
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 426509384..ed70705c9 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -2,7 +2,7 @@
     <baseInputButton
         v-bind="$props"
         :buttonWrapperClasses="[
-            'list-card w-100 rounded-3 d-flex align-items-center h-100',
+            'list-card w-100 rounded-3 d-flex align-items-center h-100 base-input-button',
             { horizontal: isWide },
         ]"
         v-model="selectedValue">
@@ -88,13 +88,6 @@ export default {
         max-width: 100%;
     }
 
-    &:hover {
-        @include media-breakpoint-up(sm) {
-            box-shadow: 0px 0px 0px 4px $blue-300;
-            border: 1px solid transparent;
-        }
-    }
-
     input[type="checkbox"],
     input[type="radio"] {
         position: absolute;
@@ -104,10 +97,6 @@ export default {
             display: block;
             position: relative;
 
-            &:hover {
-                cursor: pointer;
-            }
-
             p {
                 color: $gray-600;
                 text-align: center;
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 4deb97222..28e1ef022 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -1,7 +1,7 @@
 <template>
     <baseInputButton
         v-bind="$props"
-        buttonWrapperClasses="ui-radio form-check"
+        buttonWrapperClasses="ui-radio form-check base-input-button"
         inputClasses="form-check-input"
         v-model="selectedValue">
         <div class="d-flex align-items-start form-check-label">