Merge branch 'develop' into feature/CSR-335

src/common-components/button-question/button-question.vue

@@ -1,8 +1,8 @@
 <!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
 <template>
-  <div :class="isOverflowScrollable ? 'button_question' : ''">
+  <div :class="isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'">
     <div v-if="questionText" class="mt-5 mb-4 d-flex">
-      <span class="text-center fs-5 fw-bold w-100">{{ questionText }}</span>
+      <span class="fs-5 fw-bold w-100" :class="this.buttonType === 'radio' ? 'text-start' : 'text-center'">{{ questionText }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
       <fieldset class="w-100" :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
@@ -153,8 +153,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.button_question {
-  color: $black;
+.button-question-overflow {
   height: calc(100vh - 280px);
 
   .overflow-scroll {
@@ -163,4 +162,7 @@ export default {
     -webkit-overflow-scrolling: touch;
   }
 }
+.button-question {
+  color: $black;
+}
 </style>

src/common-components/textbox-question/textbox-question.vue

@@ -20,7 +20,6 @@ export default {
     isRequired: Boolean,
     hasIcon: Boolean,// If input has an icon
     iconRight: Boolean,// Place icon on right side of text input, otherwise default is left if hasIcon prop is used
-    iconURL: String,
     hasError: Boolean,
   }
 };

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

@@ -33,7 +33,6 @@
             placeholderText="Text Input Label"
             inputID="test-text-input"
             hasIcon
-            imgUrl="~@/assets/img/icons/spinner.svg"
           />
         </div>
       </div>
@@ -46,7 +45,6 @@
             inputID="test-text-input"
             hasIcon
             iconRight
-            imgUrl="~@/assets/img/icons/spinner.svg"
           />
         </div>
       </div>

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -157,9 +157,11 @@ export default {
     width: 100%;
     color: $gray-600;
     &:hover {
-      box-shadow: 0 0 0 4px $blue-300;
-      cursor: pointer;
-      z-index: 4 !important;
+      @include media-breakpoint-up(sm) {
+        box-shadow: 0 0 0 4px $blue-300;
+        cursor: pointer;
+        z-index: 4 !important;
+      }
     }
     + p {
       display: none;

src/ux-components/list-card/list-card.spec.js

@@ -188,7 +188,7 @@ describe("list-card.vue", () => {
 
     // Assert
     const label = wrapper.find("label");
-    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-2"]);
+    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-3"]);
   });
 
   it("Should emit button value on click", async () => {

src/ux-components/list-card/list-card.vue

@@ -91,7 +91,7 @@ export default {
         }
         return classes;
       } else {
-        return "flex-column pt-4 pb-2";
+        return "flex-column pt-4 pb-3";
       }
     },
   },
@@ -139,8 +139,10 @@ export default {
     max-width: 100%;
   }
   &:hover {
-    box-shadow: 0px 0px 0px 4px $blue-300;
-    border: 1px solid transparent;
+    @include media-breakpoint-up(sm) {
+      box-shadow: 0px 0px 0px 4px $blue-300;
+      border: 1px solid transparent;
+    }
   }
   input[type="checkbox"],
   input[type="radio"] {