question page layout updates

src/iss-components/questions-page-layout/questions-page-layout.spec.js

@@ -19,60 +19,6 @@ jest.mock('@/helpers/cms-content-helper', () => ({
 }));
 
 function setupMocks() {
-    // TODO: Use or delete these
-    const unused1 = () => ({
-        partsOrQuestions: [
-            {
-                parts: null,
-                partQuestions: [
-                    {
-                        questionSequence: 1,
-                        questionText:
-                            'Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?',
-                        answers: [
-                            {
-                                answerResult: '',
-                                answerText: 'Yes',
-                                nextQuestionSequence: 2
-                            },
-                            {
-                                answerResult: '',
-                                answerText: 'No',
-                                nextQuestionSequence: 3
-                            }
-                        ]
-                    }
-                ],
-                glassLocation: 'Windshield',
-                glassName: 'Single',
-                answerKey: 'Windshield-Single',
-                answerData: null
-            }
-        ]
-    });
-    const unused2 = () => ({
-        partsQuestionAnswers: [
-            {
-                glassLocation: 'Windshield',
-                glassName: 'Single',
-                result: 'FW04848',
-                answeredQuestions: [
-                    {
-                        questionText:
-                            'Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?',
-                        selectedAnswerText: 'Yes',
-                        questionNum: 1
-                    },
-                    {
-                        questionText:
-                            'Is your vehicle equipped with a heated windshield that melts snow and ice from underneath the windshield wiper blades?',
-                        selectedAnswerText: 'Yes',
-                        questionNum: 2
-                    }
-                ]
-            }
-        ]
-    });
     const mountOptions = getMountOptions({
         mixins: [baseMixin, vehicleQuestionsMixin]
     });

src/iss-components/questions-page-layout/questions-page-layout.vue

@@ -1,18 +1,13 @@
 <template>
-    <div class="container-fluid fade-on-route-transition">
+    <div class="fade-on-route-transition">
-        <div class="row justify-content-center">
+        <div class="justify-content-center">
-            <div class="col-md-6 px-0 px-md-2">
+            <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <loadingModal ref="loadingModal" :textSlides="loadingText" />
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-            </div>
         </div>
-        <div class="row justify-content-center">
+        <div class="iss-heritage-container-width">
-            <div class="col-md-6 col-xl-4">
+            <div class="questions-page-layout-container iss-heritage-content-container-width">
-                <vehicleBanner
+                <siteSubHeader
-                    class="mt-2 mb-4"
+                    class="mt-4"
-                    cmsWidgetName="VehicleBannerWidget"
+                    cmsWidgetName="SiteSubHeaderWidget" />
-                    :displayGenericVehicleImage="false" />
-                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
                 <alert
                     ref="alertFewMoreQuestions"
                     cmsWidgetName="alertWidget"
@@ -48,23 +43,19 @@
 <script>
 // Components
 import siteHeader from '@/iss-components/site-header/site-header.vue';
-import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import alert from '@/ux-components/alert/alert.vue';
 import questionChain from '@/digital-components/question-chain/question-chain.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
 
 export default {
     name: 'questions-page',
     components: {
         siteHeader,
-        vehicleBanner,
         alert,
         questionChain,
         siteSubHeader,
-        siteFooter,
+        siteFooter
-        loadingModal,
     },
     props: {
         isMetaValid: Boolean,
@@ -74,7 +65,7 @@ export default {
         validationRules: String,
         modelValue: Object,
         loadingText: Array,
-        index: Number,
+        index: Number
     },
     emits: ['update:modelValue', 'forwardButtonAction', 'back-click'],
     computed: {
@@ -84,16 +75,16 @@ export default {
             },
             set(newValue) {
                 this.$emit('update:modelValue', newValue);
-            },
+            }
-        },
+        }
     },
     methods: {
         showThisQuestionChain(glass, i) {
             // return false if no questions or if suppressed
             if (
-                !glass.questions ||
+                !glass.questions
-                glass.questions?.length < 1 ||
+                || glass.questions?.length < 1
-                glass.isSuppressedPart
+                || glass.isSuppressedPart
             ) {
                 return false;
             }
@@ -106,15 +97,21 @@ export default {
         },
         handleBackButtonAction() {
             this.$emit('back-click');
-        },
+        }
-        showLoadingModal() {
+    }
-            this.$refs.loadingModal.showModal();
-        },
-    },
 };
 </script>
 
 <style lang="scss" scoped>
+.iss-heritage-container-width {
+    .questions-page-layout-container {
+        position: relative;
+        min-height: 1px;
+        padding-left: .9375rem;
+        padding-right: .9375rem;
+    }
+}
+
 .questions-page {
     .question-text {
         margin-bottom: 0.5rem;