Adjustments

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

@@ -29,6 +29,7 @@
               :altText="answer.Name ? answer.Name : answer"
               screenReaderOnlyText="(opens new window)"
               :value="modelValue"
+              :colLength="this.answers.length < 3 ? '' : '-4'"
               data-test="button"
             />
           </div>
@@ -89,7 +90,7 @@ export default {
           classes = 'd-flex flex-row p-0'
           break;
         case 'listCard':
-          classes = 'row g-2'
+          classes = 'row justify-content-center g-2'
           break;
       }
       return classes;

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

@@ -867,7 +867,6 @@
    />
    <buttonQuestion
     isMultiSelect
-    isRow
     :answers="listCardGroup"
     buttonType="listCard"
     ariaLabelBy="horizontal_radio_card-group"

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -1,8 +1,12 @@
 <template>
     <div class="replace-options-question">
-        <buttonQestion
-            v-if="isAvailable"
+        <buttonQuestion
+            v-if="isAvailable && answersToDisplay.length > 1"
+            :questionText="questionText"
             :isMultiSelect="isMultiSelect"
+            :answers="answersToDisplay"
+            :groupName="groupName"
+            buttonType="listCard"
             v-model="modelValue"
          />
     </div>
@@ -10,6 +14,7 @@
 
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
+import store from "@/store";
 
 export default ({
     name: "replaceOptionsQuestion",
@@ -17,22 +22,31 @@ export default ({
         return {
             questionText: String,
             answersFromCms: Array,
-            replaceOptions: Array
+            answersToDisplay: Array,
+            replaceOptions: Array,
+            groupName: String,
         }
     },
     props: {
         isMultiSelect: Boolean,
         isAvailable: Boolean,
         filterByVehicleCategory: Boolean,
-        modelValue: String,ewe3d
+        modelValue: String,
     },
     methods: {
         initializeComponent(cmsContent, replaceOptions){
+            this.groupName = cmsContent.Name;
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
         }
     },
+    mounted(){
+        this.answersToDisplay = this.answersFromCms.filter(ans => {
+            const name = ans.Name.split('-');
+            return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category : name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]);
+        });
+    },
     watch: {
         modelValue(val) {
         this.$emit("update:modelValue", val);

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -1,10 +1,11 @@
 <template>
-    <div class="container-fluid shadow rounded-3 p-0 position-relative">
+    <div class="container-fluid shadow rounded-3 p-2 position-relative">
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" />
         <funnelSubHeader 
             ref="funnelSubHeader"
         />
+        <replaceOptionsQuestion ref="replaceOptionsQuestion" isAvailable />
     </div>
 </template>
 
@@ -13,6 +14,7 @@
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question"
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -52,8 +54,11 @@ export default ({
       vm.$refs.funnelSubHeader.initializeComponent(
         resultMap.cmsContent.FunnelSubHeaderWidget
       );
-      // use resultMap.damageOptions for damage options
-      console.log(resultMap.damageOptions)
+      vm.$refs.replaceOptionsQuestion.initializeComponent(
+        resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
+      );
+
+      console.log(resultMap)
     });
     
   },
@@ -61,6 +66,7 @@ export default ({
     funnelHeader,
     vehicleBanner,
     funnelSubHeader,
+    replaceOptionsQuestion,
   },
 });
 </script>

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

@@ -1,10 +1,10 @@
 <template>
   <!-- Heavily documented below -->
-  <div class="col">
-    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
+  <div :class="'col' + colLength">
+    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''" @mouseup="handleChange(value)" @keyup.space="handleChange(value)">
       <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" />
       <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="getLabelClasses" tabindex="-1">
-        <img :id="buttonImageId" :class="!isWide ? 'order-1' : 'ms-auto order-3'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
+        <img :id="buttonImageId" :class="!isWide ? 'order-1' : 'ms-auto order-3'" :src="buttonImage" :alt="altText" />
         <p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
         <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
         <div v-if="isWide" class="order-2">
@@ -38,7 +38,8 @@ export default {
     value: { // Field initial value
       type: String,
       default: ""
-    }
+    },
+    colLength: String,
   },
   computed: {
     getLabelClasses(){