From 31d787d62d8231d08878efeafb79ca4fd670b899 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 3 Feb 2023 10:55:12 -0500
Subject: [PATCH] Refactor method, add prop.

---
 .../button-question/button-question.vue       | 39 +++++++++++++++----
 .../glass-part-question.vue                   |  1 +
 src/layouts/vehicle-parts/vehicle-parts.vue   |  2 +-
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index ec73b348b..7e32f6f08 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -5,7 +5,10 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
         :class="
             isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'
         ">
-        <div v-if="questionText && answers && answers.length > 0" class="question-text d-flex">
+        <div
+            v-if="questionText && answers && answers.length > 0"
+            class="question-text d-flex"
+            :class="{ 'small-question-text': isSmallQuestionText }">
             <span class="fw-bold w-100">{{ questionText }}</span>
         </div>
 
@@ -123,6 +126,7 @@ export default {
         useTextForValue: Boolean,
         valueToLogType: String,
         additionalButtonStyling: String,
+        isSmallQuestionText: Boolean,
     },
     beforeMount() {
         if (this.buttonTypeObject) {
@@ -136,13 +140,15 @@ export default {
     },
     computed: {
         getFieldSetClasses() {
-            if (this.isOverflowScrollable) {
-                return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
-            } else if (this.buttonTypeString == "listCard") {
-                return "w-100";
-            } else {
-                return "";
-            }
+            const baseClasses = this.isOverflowScrollable
+                ? "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0"
+                : this.buttonTypeString == "listCard"
+                ? "w-100"
+                : "";
+            const withSmallQuestionClass = this.isSmallQuestionText
+                ? baseClasses + " small-question-text"
+                : baseClasses;
+            return withSmallQuestionClass;
         },
         getComponentLoopWrapperClasses() {
             let classes;
@@ -255,4 +261,21 @@ export default {
         text-align: center;
     }
 }
+.small-question-text {
+    &.question-text {
+        span {
+            font-size: 0.875rem;
+            text-align: left;
+            margin: 1rem 0 0.5rem 0;
+        }
+    }
+    &.question-text {
+        margin: 0;
+    }
+    & fieldset {
+        .ui-radio {
+            margin: 0;
+        }
+    }
+}
 </style>
diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
index a6f5e3f0a..7317b743d 100644
--- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
+++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
@@ -25,6 +25,7 @@
                                 textPosition="text-start"
                                 :loaderEnabled="false"
                                 isRequired
+                                isSmallQuestionText
                                 :groupName="`${glassLocation}-${glassName}-${selectedTint}`"
                                 :validationRules="partValidationRules" />
                         </div>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 5723cd0a8..56ac2ed15 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -1,6 +1,6 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        <div class="page-container-grouped-styles vehicle-parts">
+        <div class="page-container-grouped-styles vehicle-parts small-question-text">
             <loadingModal ref="loadingModal" />
             <funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
             <vehicleBanner