Merge pull request #155 from Safelite/feature/CSR-186_add-logic-to-question-vue

Feature/csr 186 add logic to question vue

package-lock.json

@@ -15,11 +15,13 @@
         "core-js": "^3.6.5",
         "http-status-codes": "^2.1.4",
         "jest-junit": "^13.0.0",
+        "vee-validate": "^4.5.7",
         "vue": "^3.0.0",
         "vue-plugin-load-script": "^2.1.0",
         "vue-router": "^4.0.11",
         "vuex": "^4.0.2",
-        "vuex-persistedstate": "^4.1.0"
+        "vuex-persistedstate": "^4.1.0",
+        "yup": "^0.32.11"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~4.5.0",
@@ -1632,7 +1634,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
       "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -4166,6 +4167,11 @@
       "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.178",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.178.tgz",
+      "integrity": "sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw=="
+    },
     "node_modules/@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -16453,8 +16459,12 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-      "dev": true
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
@@ -16974,6 +16984,11 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/nanoclone": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
+      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
+    },
     "node_modules/nanoid": {
       "version": "3.1.30",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
@@ -18974,6 +18989,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/property-expr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
+      "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA=="
+    },
     "node_modules/proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -19352,8 +19372,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
-      "dev": true
     },
     "node_modules/regenerator-transform": {
       "version": "0.14.5",
@@ -22340,6 +22359,17 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vee-validate": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.5.7.tgz",
+      "integrity": "sha512-EcpvOikBP5LlRIKwULfwRDeyIaERuOJztZUPWRmSIeWpeQWD6hs9qQ8A3CmVVteqEohbUM07gV/ea8lPXCfCJQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.15"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vendors": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
@@ -24319,6 +24349,28 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
       "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
       "dev": true
+    },
+    "node_modules/yup": {
+      "version": "0.32.11",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
+      "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
+      "dependencies": {
+        "@babel/runtime": "^7.15.4",
+        "@types/lodash": "^4.14.175",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "nanoclone": "^0.2.1",
+        "property-expr": "^2.0.4",
+        "toposort": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yup/node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
     }
   },
   "dependencies": {
@@ -25421,7 +25473,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
       "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -27496,6 +27547,11 @@
       "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
       "dev": true
     },
+    "@types/lodash": {
+      "version": "4.14.178",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.178.tgz",
+      "integrity": "sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw=="
+    },
     "@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -37445,8 +37501,12 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-      "dev": true
+    },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -37888,6 +37948,11 @@
       "dev": true,
       "optional": true
     },
+    "nanoclone": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
+      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
+    },
     "nanoid": {
       "version": "3.1.30",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
@@ -39538,6 +39603,11 @@
         "sisteransi": "^1.0.5"
       }
     },
+    "property-expr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
+      "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA=="
+    },
     "proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -39856,8 +39926,7 @@
     "regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
-      "dev": true
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -42300,6 +42369,14 @@
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
       "dev": true
     },
+    "vee-validate": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.5.7.tgz",
+      "integrity": "sha512-EcpvOikBP5LlRIKwULfwRDeyIaERuOJztZUPWRmSIeWpeQWD6hs9qQ8A3CmVVteqEohbUM07gV/ea8lPXCfCJQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.15"
+      }
+    },
     "vendors": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
@@ -43914,6 +43991,27 @@
           "dev": true
         }
       }
+    },
+    "yup": {
+      "version": "0.32.11",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
+      "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
+      "requires": {
+        "@babel/runtime": "^7.15.4",
+        "@types/lodash": "^4.14.175",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "nanoclone": "^0.2.1",
+        "property-expr": "^2.0.4",
+        "toposort": "^2.0.2"
+      },
+      "dependencies": {
+        "toposort": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+          "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
+        }
+      }
     }
   }
 }

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

@@ -1,29 +1,38 @@
 <template>
-  <div class="button_question">
+  <div :class="isVehicleQuestion ? 'button_question' : ''">
-    <div class="mt-6 mb-4 d-flex">
+    <div v-if="questionText" class="mt-6 mb-4 d-flex">
       <span class="text-center fs-6 fw-bold w-100">{{
         questionText
       }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
-      <fieldset class="overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
+      <fieldset class="w-100" :class="isVehicleQuestion ? vehicleQuestionClasses : ''" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
         <legend class="sr-only">{{groupName}}</legend>
-          <listButton v-for="answer in answers" :key="answer"
+          <div :class="isRow ? 'row g-2' : isColumn ? columnClasses : 'w-100'">
-            :buttonID="answer"
+            <component :is="buttonType" v-for="answer in answers" :key="answer"
-            @mouseup="chooseAnswer(answer)"
+              :buttonID="answer.Name ? answer.Name : answer"
-            @keyup.space="chooseAnswer(answer)"
+              @mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
-            :loaderEnabled="true"
+              @keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
-            loaderColor="blue"
+              :loaderEnabled="loaderEnabled"
-            loaderPosition="right"
+              :loaderColor="loaderColor"
-            sizeInRem="1.5"
+              :loaderPosition="loaderPosition"
+              :sizeInRem="sizeInRem"
               data-test="button"
               :groupName="groupName"
-            textPosition="text-start"
+              :textPosition="textPosition"
-            :isRequired="true"
-            :value="modelValue"
               screenReaderOnlyText="(opens new window)"
               :isMultiSelect="isMultiSelect"
+              :isHorizontal="isHorizontal"
+              :ariaLabelBy="ariaLabelBy"
+              :isRequired="isRequired"
+              :buttonImage="answer.AnswerImageUrl"
+              :buttonImageId="answer.ImageId"
+              :buttonLabel="answer.Text ? answer.Text : answer"
+              :altText="altText"
+              :buttonLabelSubCopy="answer.SubText"
+              :value="modelValue"
             />
+          </div>
       </fieldset>
     </div>
   </div>
@@ -31,14 +40,55 @@
 
 <script>
 import listButton from "@/ux-components/list-button/list-button";
+import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
+import listCard from "@/ux-components/list-card/list-card";
+
 export default {
   name: "buttonQuestion",
   props: {
+    buttonType: {
+      type: String, 
+      default: 'listButton'
+    },
     isMultiSelect: Boolean,
     questionText: String,
     answers: Array,
+    textPosition: {
+      type: String,
+      default: 'text-center'
+    },
+    loaderEnabled: Boolean,
+    loaderColor: {
+      type: String,
+      default: 'blue'
+    },
+    loaderPosition: {
+      type: String, 
+      default: 'right'
+    },
+    sizeInRem: {
+      type: [String, Number], 
+      default: 1.5
+    },
     modelValue: String,
-    groupName: String
+    groupName: String,
+    ariaLabelBy: String,
+    isRequired: Boolean,
+    isVehicleQuestion: Boolean,
+    isHorizontal: Boolean,
+    isColumn: Boolean,
+    isRow: Boolean,
+    buttonImage: String,
+    buttonImageId: String,
+    buttonLabel: String,
+    altText: String,
+    buttonLabelSubCopy: String,
+  },
+  data() {
+    return {
+      vehicleQuestionClasses: 'container-fluid overflow-scroll position-absolute px-5 pt-1 py-0',
+      columnClasses: 'd-flex flex-row p-0'
+    };
   },
   methods: {
     chooseAnswer(answer) {
@@ -47,6 +97,8 @@ export default {
   },
   components: {
     listButton,
+    listButtonHorizontal,
+    listCard
   },
 };
 </script>

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

@@ -53,7 +53,6 @@
     <fieldset>
       <legend class="sr-only">Functioning as Checkbox</legend>
       <div class="row g-2">
-        <div class="col-4">
         <listCard
         isMultiSelect
         buttonImage="windshield-damage.svg"
@@ -63,8 +62,6 @@
         groupID="checkbox-demo-1"
         buttonLabelSubCopy="Description"
         />
-        </div>
-        <div class="col-4">
         <listCard
         isMultiSelect
         buttonImage="side-window-damage-right-all.svg"
@@ -74,8 +71,6 @@
         groupID="checkbox-demo-1"
         buttonLabelSubCopy="Description with more than one line"
         />
-        </div>
-        <div class="col-4">
         <listCard
         isMultiSelect
         buttonImage="windshield-damage.svg"
@@ -86,7 +81,6 @@
         buttonLabelSubCopy=""
         />
       </div>
-      </div>
     </fieldset>
     <div class="row my-4">
       <div class="col">
@@ -167,7 +161,8 @@
         <fieldset>
           <legend class="sr-only">Horizontal Checkbox</legend>
           <listCard
-          isMultiSelectHorizontal
+          isMultiSelect
+          isHorizontal
           buttonImage="windshield-damage.svg"
           buttonLabel="Windshield"
           altText=""
@@ -184,7 +179,8 @@
         <fieldset>
           <legend class="sr-only">Checkbox no Description</legend>
           <listCard
-          isMultiSelectHorizontal
+          isMultiSelect
+          isHorizontal
           buttonImage="side-window-damage-right-all.svg"
           buttonLabel="Side Window"
           altText=""
@@ -201,7 +197,7 @@
         <fieldset>
           <legend class="sr-only">Horizontal Radio Button</legend>
           <listCard
-          isRadioHorizontal
+          isHorizontal
           buttonImage="back-glass-damage.svg"
           buttonLabel="Rear Window"
           altText=""
@@ -218,7 +214,7 @@
         <fieldset>
           <legend class="sr-only">Radio Button no Description</legend>
           <listCard
-          isRadioHorizontal
+          isHorizontal
           buttonImage="windshield-damage.svg"
           buttonLabel="Windshield"
           altText=""
@@ -247,6 +243,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2021"
+        buttonLabel="2021"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -259,6 +256,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2020"
+        buttonLabel="2020"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -271,6 +269,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2019"
+        buttonLabel="2019"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -290,6 +289,7 @@
         groupName="demo-1-checkbox"
         ariaLabelBy="vehicle-year"
         buttonID="2018"
+        buttonLabel="2018"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -301,6 +301,7 @@
         groupName="demo-1-checkbox"
         ariaLabelBy="vehicle-year"
         buttonID="2017"
+        buttonLabel="2017"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -312,6 +313,7 @@
         groupName="demo-1-checkbox"
         ariaLabelBy="vehicle-year"
         buttonID="2016"
+        buttonLabel="2016"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -337,6 +339,7 @@
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Chevrolet"
+        buttonLabel="Chevrolet"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -349,6 +352,7 @@
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Dodge"
+        buttonLabel="Dodge"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -361,6 +365,7 @@
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Ford"
+        buttonLabel="Ford"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -380,6 +385,7 @@
         groupName="demo-2-checkbox"
         ariaLabelBy="vehicle-make"
         buttonID="Honda"
+        buttonLabel="Honda"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -391,6 +397,7 @@
         groupName="demo-2-checkbox"
         ariaLabelBy="vehicle-make"
         buttonID="Acura"
+        buttonLabel="Acura"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -402,6 +409,7 @@
         groupName="demo-2-checkbox"
         ariaLabelBy="vehicle-make"
         buttonID="Infiniti"
+        buttonLabel="Infiniti"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -427,6 +435,7 @@
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="Corvette"
+        buttonLabel="Corvette"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -439,6 +448,7 @@
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="Testarosa"
+        buttonLabel="Testarosa"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -451,6 +461,7 @@
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="S600"
+        buttonLabel="S600"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -470,6 +481,7 @@
         groupName="demo-3-checkbox"
         ariaLabelBy="vehicle-model"
         buttonID="Accord"
+        buttonLabel="Accord"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -481,6 +493,7 @@
         groupName="demo-3-checkbox"
         ariaLabelBy="vehicle-model"
         buttonID="Civic"
+        buttonLabel="Civic"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -492,6 +505,7 @@
         groupName="demo-3-checkbox"
         ariaLabelBy="vehicle-model"
         buttonID="Ridgeline"
+        buttonLabel="Ridgeline"
         buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -519,6 +533,7 @@
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="1"
+        buttonLabel="1"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -532,6 +547,7 @@
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="2"
+        buttonLabel="2"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -545,6 +561,7 @@
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="3"
+        buttonLabel="3"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -567,6 +584,7 @@
         groupName="demo-4-checkbox"
         ariaLabelBy="vehicle-model"
         buttonID="4"
+        buttonLabel="4"
         textPosition="text-center"
         loaderEnabled=true
         loaderColor="blue"
@@ -580,6 +598,7 @@
         groupName="demo-4-checkbox"
         ariaLabelBy="vehicle-model"
         buttonID="5"
+        buttonLabel="5"
         textPosition="text-center"
         loaderEnabled=true
         loaderColor="blue"
@@ -593,6 +612,7 @@
         groupName="demo-4-checkbox"
         ariaLabelBy="vehicle-model"
         buttonID="6"
+        buttonLabel="6"
         textPosition="text-center"
         loaderEnabled=true
         loaderColor="blue"
@@ -760,6 +780,100 @@
         />
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+        <h4 class="m-0 p-2 bg-light rounded">Button Question</h4>
+      </div>
+    </div>
+    <buttonQuestion
+    :answers="checkboxAnswers"
+    :isMultiSelect="true"
+    ariaLabelBy="checkbox"
+    groupName="checkbox-list"
+    questionText="List Button as checkbox"
+   />
+   <buttonQuestion
+    :answers="radioAnswers"
+    ariaLabelBy="radio"
+    groupName="radio-list"
+    questionText="List Button as radio"
+   />
+    <buttonQuestion
+    :answers="horizontalCheckboxAnswers"
+    buttonType="listButtonHorizontal"
+    :isMultiSelect="true"
+    isColumn
+    ariaLabelBy="checkbox"
+    groupName="checkbox-list-horizontal"
+    questionText="List Button Horizontal as checkbox"
+   />
+   <buttonQuestion
+    :answers="horizontalRadioAnswers"
+    buttonType="listButtonHorizontal"
+    isColumn
+    ariaLabelBy="radio"
+    groupName="radio-list-horizontal"
+    questionText="List Button Horizontal as radio"
+    sizeInRem="1"
+   />
+   <buttonQuestion
+    :answers="listCardCheckBox"
+    buttonType="listCard"
+    isMultiSelect
+    ariaLabelBy="check_card"
+    groupName="check-list-card"
+    questionText="List Card as checkbox"
+   />
+   <buttonQuestion
+    :answers="listCardRadio"
+    buttonType="listCard"
+    ariaLabelBy="radio_card"
+    groupName="radio-card"
+    questionText="List Card as radio"
+   />
+   <buttonQuestion
+    isMultiSelect
+    isHorizontal
+    :answers="listCardCheckBoxHorizontal"
+    buttonType="listCard"
+    ariaLabelBy="horizontal_check_card"
+    groupName="horizontal_check-card"
+    questionText="List Card Horizontal as checkbox"
+   />
+   <buttonQuestion
+    isMultiSelect
+    isHorizontal
+    :answers="listCardCheckBoxHorizontalSubText"
+    buttonType="listCard"
+    ariaLabelBy="horizontal_check_card-st"
+    groupName="horizontal_check-card-st"
+    questionText="With Subtext"
+   />
+   <buttonQuestion
+    isHorizontal
+    :answers="listRadioHorizontal"
+    buttonType="listCard"
+    ariaLabelBy="horizontal_radio_card"
+    groupName="horizontal_cradio-card"
+    questionText="List Card Horizontal as radio"
+   />
+   <buttonQuestion
+    isHorizontal
+    :answers="listRadioHorizontalSubText"
+    buttonType="listCard"
+    ariaLabelBy="horizontal_radio_card-st"
+    groupName="horizontal_cradio-card-st"
+    questionText="With Subtext"
+   />
+   <buttonQuestion
+    isMultiSelect
+    isRow
+    :answers="listCardGroup"
+    buttonType="listCard"
+    ariaLabelBy="horizontal_radio_card-group"
+    groupName="horizontal_cradio-card-group"
+    questionText="In column layout"
+   />
   </div>
 </template>
 
@@ -774,6 +888,7 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import checkbox from "@/ux-components/checkbox/checkbox";
+import buttonQuestion from "@/common-components/button-question/button-question"
 export default {
   name: "App",
   components: {
@@ -787,10 +902,75 @@ export default {
     listButtonHorizontal,
     checkbox,
     funnelHeader,
+    buttonQuestion
   },
   data() {
     return {
       years: [2023, 2022, 2021, 2020],
+      checkboxAnswers: ['Checkbox Answer 1', 'Checkbox Answer 2', 'Checkbox Answer 3'],
+      radioAnswers: ['Radio Answer 1', 'Radio Answer 2', 'Radio Answer 3'],
+      horizontalCheckboxAnswers: ['HCB Answer 1', 'HCB Answer 2', 'HCB Answer 3'],
+      horizontalRadioAnswers: ['HR Answer 1', 'HR Answer 2', 'HR Answer 3'],
+      listCardCheckBox: [{
+        Name: 'List-Card-CB',
+        Text: "List Card CB",
+        SubText: "checkbox",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
+      listCardRadio: [{
+        Name: 'List-Card-R',
+        Text: "List Card R",
+        SubText: "Radio",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
+      listCardCheckBoxHorizontalSubText: [{
+        Name: 'List-Card-CBHst',
+        Text: "List Card CBHst",
+        SubText: "With Subtext",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
+      listCardCheckBoxHorizontal: [{
+        Name: 'List-Card-CBH',
+        Text: "List Card CBH",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
+      listRadioHorizontalSubText: [{
+        Name: 'List-Card-RHst',
+        Text: "List Card RHst",
+        SubText: "With Subtext",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
+      listRadioHorizontal: [{
+        Name: 'List-Card-RH',
+        Text: "List Card RH",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
+      listCardGroup: [{
+        Name: 'Side-Window-1',
+        Text: "Side Window",
+        SubText: "With Subtext",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      },
+      {
+        Name: 'Side-Window-2',
+        Text: "Side Window",
+        SubText: "With Subtext that is more than one line",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      },
+      {
+        Name: 'Side-Window-3',
+        Text: "Side Window",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
     };
   },
 };

src/layouts/form-test/form-test.vue

@@ -25,6 +25,7 @@
         groupName="demo"
         aria-required="true"
         buttonID="1"
+        buttonLabel="1"
         value="1"
         buttonLabelSubCopy=""
         textPosition="text-center"
@@ -37,6 +38,7 @@
         groupName="demo"
         aria-required="true"
         buttonID="2"
+        buttonLabel="2"
         value="2"
         buttonLabelSubCopy=""
         textPosition="text-center"
@@ -49,6 +51,7 @@
         groupName="demo"
         aria-required="true"
         buttonID="3"
+        buttonLabel="3"
         value="3"
         buttonLabelSubCopy=""
         textPosition="text-center"
@@ -71,18 +74,21 @@
         <listButton
           isMultiSelect
           buttonID="Single Windshield"
+          buttonLabel="Single Windshield"
           value="Single Windshield"
           groupName="demo2"
         />
         <listButton
           isMultiSelect
           buttonID="Driver Side"
+          buttonLabel="Driver Side"
           value="Driver Side"
           groupName="demo2"
         />
         <listButton
           isMultiSelect
           buttonID="Passenger Side"
+          buttonLabel="Passenger Side"
           value="Passenger Side"
           groupName="demo2"
         />

src/layouts/vehicle-make/make-question/make-question.vue

@@ -3,6 +3,9 @@
     :questionText="questionText"
     :answers="makes"
     groupName="Choose Vehicle Make"
+    textPosition="text-start"
+    :isVehicleQuestion="true"
+    :loaderEnabled="true"
     v-model="modelValue"
   />
 </template>

src/layouts/vehicle-model/model-question/model-question.vue

@@ -3,6 +3,9 @@
     :questionText="questionText"
     :answers="models"
     groupName="Choose Vehicle Model"
+    textPosition="text-start"
+    :isVehicleQuestion="true"
+    :loaderEnabled="true"
     v-model="modelValue"
   />
 </template>

src/layouts/vehicle-style/style-question/style-question.vue

@@ -3,6 +3,9 @@
     :questionText="questionText"
     :answers="styles"
     groupName="Choose Vehicle Style"
+    textPosition="text-start"
+    :isVehicleQuestion="true"
+    :loaderEnabled="true"
     v-model="modelValue"
   />
 </template>

src/layouts/vehicle-year/year-question/year-question.vue

@@ -3,6 +3,9 @@
     :questionText="questionText"
     :answers="years"
     groupName="Choose Vehicle Year"
+    :isVehicleQuestion="true"
+    textPosition="text-start"
+    :loaderEnabled="true"
     v-model="modelValue"
   />
 </template>

src/ux-components/list-button-horizontal/list-button-horizontal.spec.js

@@ -183,37 +183,4 @@ describe("list-button-horizontal.vue", () => {
 
   });
 
-  it("Should return first item if first item in group", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      propsData: {
-        positionInGroup: 1
-      },
-    });
-
-    // Assert
-
-    const label = wrapper.find("label");
-
-    expect(label.attributes('class')).toContain("first-item");
-
-  });
-
-  it("Should return last item if last item in group", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      propsData: {
-        positionInGroup: 3,
-        totalInGroup: 3
-      },
-    });
-
-    // Assert
-
-    const label = wrapper.find("label");
-
-    expect(label.attributes('class')).toContain("last-item");
-
-  });
-
 });

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

@@ -1,53 +1,11 @@
-<!-- See the component-test.vue page for example implementation -->
 <template>
-  <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
+  <div class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
-  <div
+    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName" />
-    v-if="isMultiSelect"
+    <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
-    class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
+      <span class="m-0" :class="textPosition">{{buttonLabel}}</span>
-  >
+      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{buttonLabelSubCopy}}</span>
-    <input
-      type="checkbox"
-      :id="buttonID"
-      :name="groupName"
-      :value="buttonID"
-      :aria-required="isRequired"
-      @click="handleClick(value)"
-      :data-focus-target="groupName"
-    />
-    <label
-      tabindex="-1"
-      :for="buttonID"
-      :aria-labelledby="buttonID"
-      class="d-flex flex-column justify-content-center py-3 px-4"
-      :class="isFirstOrLastButton"
-    >
-      <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
-    </label>
+      <loader v-if="isLoaderDisplayed && !isMultiSelect" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[loaderColor, loaderPosition]" />
-  </div>
-  <div
-    v-else
-    class="col list-group list-button-horizontal d-flex flex-column mb-2"
-  >
-    <input
-      type="radio"
-      :id="buttonID"
-      :name="groupName"
-      :value="buttonID"
-      :aria-required="isRequired"
-      @click="handleClick(value)"
-      :data-focus-target="groupName"
-    />
-    <label
-      tabindex="-1"
-      :for="buttonID"
-      :aria-labelledby="buttonID"
-      class="d-flex flex-column justify-content-center py-3 px-4"
-      :class="isFirstOrLastButton"
-    >
-      <span class="m-0" :class="textPosition">{{buttonID}}</span>
-      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
-      <loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[loaderColor, loaderPosition]" />
     </label>
   </div>
 </template>
@@ -60,17 +18,17 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButtonHorizontal",
   props: {
-    isMultiSelect: Boolean, /* Defines use as checkbox */
+    isMultiSelect: Boolean,
-    groupName: String, /* Required, unique for each button GROUP */
+    groupName: String,
-    buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
+    buttonID: String,
-    screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
+    buttonLabel: String,
-    textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
+    buttonLabelSubCopy: String,
-    loaderEnabled: Boolean, /* Optional, need to include this for loader to be used at all */
+    screenReaderOnlyText: String,
-    loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
+    textPosition: String,
-    loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
+    loaderEnabled: Boolean,
-    sizeInRem: Number, /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
+    loaderColor: String,
-    totalInGroup: Number, /* Required, total number of buttons in group. Used to tell first and last in group to apply border radius. */
+    loaderPosition: String,
-    positionInGroup: Number, /* Required, position of button in group. Example, 1,2,3 */
+    sizeInRem: [Number, String],
     isRequired: Boolean,
     value: { // Field initial value
       type: String,
@@ -87,24 +45,15 @@ export default {
       this.isLoaderDisplayed = true;
     },
     handleClick(value) {
-      this.loaderEnabled && this.displayLoader();
+      if(this.loaderEnabled){
+        this.displayLoader();
+      }
       this.handleChange(value);
     }
   },
   components: {
     loader,
   },
-  computed: {
-    isFirstOrLastButton() {
-      let className = "";
-      if (this.positionInGroup == this.totalInGroup) {
-        className = "last-item";
-      } else if (this.positionInGroup == 1) {
-        className = "first-item";
-      }
-      return className;
-    },
-  },
   setup(props) {
     const { groupName, value } = toRefs(props);
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
@@ -118,6 +67,7 @@ export default {
       errorMessage,
     };
   },
+
 };
 </script>
 
@@ -156,11 +106,15 @@ export default {
     + p {
       display: none;
     }
-    &.first-item {
+  }
+  &:first-of-type {
+    label {
       border-bottom-left-radius: 0.5rem;
       border-top-left-radius: 0.5rem;
     }
-    &.last-item {
+  }
+  &:last-of-type {
+    label {
       border-bottom-right-radius: 0.5rem;
       border-top-right-radius: 0.5rem;
     }

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

@@ -1,48 +1,13 @@
 <template>
-  <!-- See the component-test.vue page for example implementation -->
+  <div class="list-group list-button d-flex flex-column w-100 mb-2">
-  <div v-if="isMultiSelect" class="list-group list-button d-flex flex-column w-100 mb-2">
+    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName">
-    <input
+    <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
-      type="checkbox"
+      <span class="m-0" :class="textPosition">{{ buttonLabel }}</span>
-      :id="buttonID"
+      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{buttonLabelSubCopy}}</span>
-      :name="groupName"
+      <span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
-      :value="buttonID"
+      <loader v-if="isLoaderDisplayed && !isMultiSelect" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
-      :aria-required="isRequired"
-      @click="handleClick(value)"
-      :data-focus-target="groupName"
-    >
-    <label
-      tabindex="-1"
-      :for="buttonID"
-      :aria-labelledby="buttonID"
-      class="d-flex flex-column justify-content-center py-3 px-4"
-    >
-      <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
-      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
-      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
     </label>
   </div>
-  <div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
-    <input
-      type="radio"
-      :id="buttonID"
-      :name="groupName"
-      :value="buttonID"
-      :aria-required="isRequired"
-      @click="handleClick(value)"
-      :data-focus-target="groupName"
-    >
-    <label
-      tabindex="-1"
-      :for="buttonID"
-      :aria-labelledby="buttonID"
-      class="d-flex flex-column justify-content-center py-3 px-4"
-    >
-      <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
-      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
-      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
-    <loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
-  </label>
-</div>
 </template>
 
 <script>
@@ -52,17 +17,18 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
   props: {
-    isMultiSelect: Boolean, /* Defines use as checkbox */
+    isMultiSelect: Boolean,
-    groupName: String, /* Required, unique for each button GROUP */
+    groupName: String,
-    buttonID: [Number,String], /* Required, unique for each button. Used for button id, label and <label for> */
+    buttonLabel: [Number,String],
-    isRequired: Boolean, /* Optional, default is false */
+    buttonID: [Number,String],
-    screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
+    isRequired: Boolean,
-    buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
+    textPosition: String,
-    textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
+    buttonLabelSubCopy: String,
-    loaderEnabled: Boolean, /* Optional, need to include this for loader to be used at all */
+    screenReaderOnlyText: String,
-    loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
+    loaderEnabled: Boolean,
-    loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
+    loaderColor: String,
-    sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
+    loaderPosition: String,
+    sizeInRem: [Number,String],
     value: { // Field initial value
       type: String,
       default: ""
@@ -78,7 +44,9 @@ export default {
       this.isLoaderDisplayed = true;
     },
     handleClick(value) {
-      this.loaderEnabled && this.displayLoader();
+      if(this.loaderEnabled){
+        this.displayLoader();
+      }
       this.handleChange(value);
     }
   },

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

@@ -22,65 +22,6 @@ describe("list-card.vue", () => {
     expect(input.attributes().type).toEqual("checkbox");
   });
 
-  it("Should return input type radio if isRadio is true", async () => {
-    // Act
-    const wrapper = shallowMount(listCard, {
-      propsData: {
-        isRadio: true,
-        buttonLabel: "Windshield",
-        buttonID: "List Card Checkbox",
-        groupID: "radio-demo-1",
-        groupName: "radio 1",
-        buttonImage: "windshield-damage.svg",
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-
-    expect(input.attributes().type).toEqual("radio");
-  });
-
-  it("Should return input type checkbox if isMultiSelectHorizontal is true", async () => {
-    // Act
-    const wrapper = shallowMount(listCard, {
-      propsData: {
-        isMultiSelectHorizontal: true,
-        buttonLabel: "Windshield",
-        buttonID: "List Card Checkbox",
-        groupID: "radio-demo-1",
-        groupName: "radio 1",
-        buttonImage: "windshield-damage.svg"
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-
-    expect(input.attributes().type).toEqual("checkbox");
-
-  });
-
-  it("Should return input type radio if isRadioHorizontal is true", async () => {
-    // Act
-    const wrapper = shallowMount(listCard, {
-      propsData: {
-        isRadioHorizontal: true,
-        buttonLabel: "Windshield",
-        buttonID: "List Card Checkbox",
-        groupID: "radio-demo-1",
-        groupName: "radio 1",
-        buttonImage: "windshield-damage.svg"
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-
-    expect(input.attributes().type).toEqual("radio");
-
-  });
-
   it("Should return primary label text", async () => {
     // Act
     const wrapper = shallowMount(listCard, {

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

@@ -1,90 +1,18 @@
 <template>
   <!-- Heavily documented below -->
-  <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center h-100">
+  <div class="col">
-    <input
+    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isHorizontal ? 'horizontal' : ''">
-      type="checkbox"
+      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleChange(value)" :data-focus-target="groupName" />
-      :id="buttonID"
+      <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="[isHorizontal ? rowClasses : columnClasses,isHorizontal && buttonLabelSubCopy ? 'checkboxTop' : '']" tabindex="-1">
-      :name="groupName"
+        <img :id="buttonImageId" :class="!isHorizontal ? 'order-1' : 'ms-auto order-3'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
-      :value="buttonLabel"
+        <p v-if="!isHorizontal" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
-      :aria-required="isRequired"
+        <p v-if="buttonLabelSubCopy && !isHorizontal" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
-      @click="handleChange(value)"
+        <div v-if="isHorizontal" class="order-2">
-      :data-focus-target="groupName"
-    />
-    <label
-      :for="buttonID"
-      class="d-flex flex-column w-100 align-items-center pt-4 pb-2 px-2 h-100"
-      tabindex="-1"
-    >
-      <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
-      <p class="small m-0 order-3">{{buttonLabel}}</p>
-      <p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
-    </label>
-  </div>
-  <div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center h-100">
-    <input
-      type="radio"
-      :id="buttonID"
-      :name="groupName"
-      :value="buttonID"
-      :aria-required="isRequired" 
-      @click="handleChange(value)"
-      :data-focus-target="groupName"
-    />
-    <label
-      :for="buttonID"
-      class="d-flex flex-column w-100 align-items-center pt-4 pb-2 px-2 h-100"
-      tabindex="-1"
-    >
-      <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
-      <p class="small mt-2 mb-0 order-2">{{buttonLabel}}</p>
-      <p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-3">{{buttonLabelSubCopy}}</p>
-    </label>
-  </div>
-  <div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center h-100">
-    <input
-      type="checkbox"
-      :id="buttonID"
-      :name="groupName"
-      :value="buttonLabel"
-      :aria-required="isRequired"
-      @click="handleChange(value)"
-      :data-focus-target="groupName"
-    />
-    <label
-      :for="buttonID"
-      class="d-flex flex-row w-100 align-items-center py-r ps-3 pe-8 px-2 h-100"
-      tabindex="-1"
-      :class="{'checkboxTop': buttonLabelSubCopy}"
-    >
-      <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
-      <div class="order-2">
           <p class="m-0 small">{{buttonLabel}}</p>
           <p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
         </div>
       </label>
     </div>
-  <div v-else-if="isRadioHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center h-100">
-    <input
-      type="radio"
-      :id="buttonID"
-      :name="groupName"
-      :value="buttonLabel"
-      :aria-required="isRequired"
-      @click="handleChange(value)"
-      :data-focus-target="groupName"
-    />
-    <label
-      :for="buttonID"
-      class="d-flex flex-row w-100 align-items-center py-r ps-3 pe-8 px-2 h-100"
-      tabindex="-1"
-      :class="{'checkboxTop': buttonLabelSubCopy}"
-    >
-      <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
-      <div class="order-2">
-        <p class="m-0 small">{{buttonLabel}}</p>
-        <p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
-      </div>
-    </label>
   </div>
 </template>
 
@@ -97,11 +25,10 @@ export default {
   props: {
     //Must choose one of the following four options
     isMultiSelect: Boolean, //Defines use as checkbox
-    isRadio: Boolean, //Defines use as radio button
+    isHorizontal: Boolean,
-    isMultiSelectHorizontal: Boolean, //Defines use as horizontal checkbox
-    isRadioHorizontal: Boolean, //Defines use as horizontal radio button
     //end must choose
     buttonImage: String,//Required: File name of image
+    buttonImageId: String,
     buttonLabel: String,//Required: Label text
     isRequired: Boolean, //Required: is aria-required required or not?
     altText: String,//Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
@@ -113,26 +40,19 @@ export default {
       default: ""
     }
   },
+  data(){
+    return {
+      columnClasses: "flex-column pt-4 pb-2",
+      rowClasses: "flex-row py-r ps-3 pe-8"
+    }
+  },
   setup(props) {
     const { groupName, value } = toRefs(props);
-    const inputType = () => { // TODO: refactor props to streamline this logic for the whole component
+    const inputType = props.isMultiSelect ? "checkbox" : "radio";
-      if (props.isMultiSelect) {
-        return "checkbox";
-      } else if (props.isRadio) {
-        return "radio";
-      } else if (props.isMultiSelectHorizontal) {
-        return "checkbox";
-      } else if (props.isRadioHorizontal) {
-        return "radio";
-      }
-    }
-    
-    props.isMultiSelect ? "checkbox" : "radio";
     const { checked, handleChange } = useField(groupName, undefined, {
-      type: inputType(),
+      type: inputType,
       checkedValue: value,
     });
-
     return {
       checked,
       handleChange,