Added v-models and catch emit function

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

@@ -1,7 +1,7 @@
 <template>
   <div :class="isOverflowScrollable ? 'button_question' : ''">
-    <div v-if="questionText" class="mt-6 mb-4 d-flex">
+    <div v-if="questionText" class="d-flex">
-      <span class="text-center fs-6 fw-bold w-100">{{ questionText }}</span>
+      <span :class="[buttonType === 'radio' ? ['mb-0', 'text-left', 'mt-2' ] : ['mb-4', 'mt-6', 'text-center'], 'fs-6 fw-bold w-100' ]">{{ questionText }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
       <fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">

src/constants/dynamictext-mapper.js

@@ -0,0 +1,48 @@
+// Used to support custom (non-state) related dynamic text.
+// Example: {custom:glassName}, each key in the array is the value after custom:, like 'glassname'
+// Please use lowercase only so that we don't have to worry about case sensitivity.
+
+const customMappings = {
+    glassname: [
+        { key: 'Single Windshield', transformedValue: 'windshield' },
+        { key: 'Driver split windshield', transformedValue: 'driver side split windshield' },
+        { key: 'Passenger split windshield', transformedValue: 'passenger side split windshield' },
+        { key: 'Stationary backglass', transformedValue: 'rear window' },
+        { key: 'Sliding backglass', transformedValue: 'rear window' },
+        { key: 'Driver front door', transformedValue: 'driver side front door' },
+        { key: 'Driver back door ', transformedValue: 'driver side back door' },
+        { key: 'Driver vent', transformedValue: 'driver side vent glass' },
+        { key: 'Driver quarter', transformedValue: 'driver side quarter panel' },
+        { key: 'Driver sliding door', transformedValue: 'driver side sliding door' },
+        { key: 'Passenger front door', transformedValue: 'passenger side front door' },
+        { key: 'Passenger back door', transformedValue: 'passenger side back door' },
+        { key: 'Passenger vent', transformedValue: 'passenger side vent glass' },
+        { key: 'Passenger quarter', transformedValue: 'passenger side quarter panel' },
+        { key: 'Passenger sliding door', transformedValue: 'passenger side sliding door' },
+    ]
+}
+
+export function getCustomTransformValue(type, key) {
+    const transformArray = customMappings[type.toLowerCase()];
+    
+    if(transformArray === undefined) {
+        return '';
+    }
+
+    const transformValue = transformArray.find(map => map.key === key.toLowerCase());
+
+    return transformValue === undefined ? '' : transformValue;
+}
+
+export function getCustomTransformKey(value) {
+    const regexExp = new RegExp("{(.*?):(.*?)}", "g");
+    const matches = [...value.matchAll(regexExp)];
+
+    if (matches.length === 0) {
+        return '';
+    }
+
+    const key = matches[0][2];
+
+    return key;
+}

src/constants/tint-mapper.js

@@ -34,7 +34,7 @@ const tintMap = {
         { name: "no shade, no tint", src: "BackGlass-NoShade-NoTint.svg" }, // ???
     ],
 
-    windhshield: [
+    windshield: [
         // Blue Shade
         { name: "blue shade, blue tint", src: "Windshield-BlueShade-BlueTint.svg" },
         { name: "blue shade, brown tint", src: "Windshield-BlueShade-BrownTint.svg" },
@@ -72,5 +72,10 @@ const tintMap = {
 }
 
 export function getTintImage(glassType, colorString) {
+    
+    if(tintMap[glassType.toLowerCase()] === undefined) {
+        return '';
+    }
+
     return tintMap[glassType.toLowerCase()].find(item => item.name == colorString.toLowerCase())
 }

src/layouts/nested-radio-poc/nested-radio.vue

@@ -1,77 +1,53 @@
 <template>
-
+<div class="container-fluid nested-radio">
-  <div class="container-fluid nested-radio">
     <div class="row mb-1">
-      <div class="col">
+        <div class="col">
-        <listCard
+            <listCard groupName="listcard1" isWide="true" buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3" buttonLabel="Green Tint, Blue Shade" buttonID="radio1" />
-        groupName="listcard1"
+        </div>
-        isWide="true"
-        buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
-        buttonLabel="Green Tint, Blue Shade"
-        buttonID="radio1"
-        />
-      </div>
     </div>
     <div class="row mb-1">
-      <div class="col">
+        <div class="col">
-        <p class="mb-0 fw-bold">Ok, select the features</p>
+            <buttonQuestion buttonType="radio" groupName="Demo Group" buttonID="button1" isRequired value="test button" screenReaderOnlyText="rain sensor, solar, 3rd visor band" :answers="demoArray" questionText="ok now select your features" />
-        <buttonQuestion
+        </div>
-          buttonType="radio"
-          groupName="Demo Group"
-          buttonID="button1"
-          isRequired
-          value="test button"
-          screenReaderOnlyText="rain sensor, solar, 3rd visor band"
-          :answers="demoArray"
-        />
-      </div>
     </div>
     <div class="row mb-2">
-      <div class="col">
+        <div class="col">
-        <listCard
+            <listCard groupName="listcard1" isWide="true" buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3" buttonLabel="Green Tint" buttonID="radio2" />
-        groupName="listcard1"
+        </div>
-        isWide="true"
-        buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
-        buttonLabel="Green Tint"
-        buttonID="radio2"
-        />
-      </div>
     </div>
-  </div>
+</div>
-
 </template>
 
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import listCard from "@/ux-components/list-card/list-card";
-import radio from "@/ux-components/radio/radio";
 
 export default {
-  name: "nestedRadio",
+    name: "nestedRadio",
-  components: {
+    components: {
-    buttonQuestion,
+        buttonQuestion,
-    radio,
+        listCard,
-    listCard,
+    },
-  },
+    data() {
-  data() {
+        return {
-    return {
+            demoArray: [
-      demoArray: [
+                "rain sensor, solar, 3rd visor band",
-        "rain sensor, solar, 3rd visor band",
+                "rain sensor, heated glass, solar, 3rd visor band",
-        "rain sensor, heated glass, solar, 3rd visor band",
+            ]
-      ]
+        }
     }
-  }
 };
 </script>
 
 <style lang="scss">
 .nested-radio {
-  .ui-radio {
+    .ui-radio {
-    flex-direction: column;
+        flex-direction: column;
-    margin: .25rem 0;
+        margin: .25rem 0;
-  }
+    }
-  p {
+
-    font-size: .875rem;
+    p {
-  }
+        font-size: .875rem;
+    }
 }
 </style>

src/layouts/vehicle-parts/part-question/part-question.vue

@@ -1,22 +1,40 @@
 <template>
-<p>Select your current {{ colorQuestionText }} color:</p>
+<div class="container">
-
+    <div class="row">
-<div v-for="(value, name, index) in featureListData" :key="index">
+        <p>Select your current {{ glassName }} color:</p>
-    <listCard isRadio isWide :buttonImage="require(`@/assets/img/tints/${getTintImage(glassName, name)}`)" :buttonLabel="name" altText="" :buttonID="`${name}-${index}`" groupName="test" />
+    </div>
-
-    <buttonQuestion v-model="inputParams['question'+index]" buttonType="radio" class="radioQuestion" questionText="ok now select your features" :answers="value" textPosition="text-start" :loaderEnabled=false isRequired=true  :groupName="name" />
-
 </div>
 
+<div class="container nested-radio" v-for="(value, name, index) in featureListData" :key="index">
+    <div class="row my-2">
+        <div class="col">
+            {{ selectedTint }}
+            <listCard v-model="selectedTint[name]" isRadio=true isWide=true :buttonImage="require(`@/assets/img/tints/${getTintImage(glassName, name)}`)" :buttonLabel="name" altText="" :buttonID="`${glassName}-${name}`" :groupName="`${glassName}`" @isCheckedChanged="TestMethod(name, $event)" />
+        </div>
+    </div>
+    <div v-show="selectedTint[name] != undefined && selectedTint[name].isChecked === `${glassName}-${name}`" class="row my-2">
+        <div class="col">
+            {{ selectedPart }}
+            <buttonQuestion v-model="selectedPart[glassName]" buttonType="radio" class="radioQuestion" questionText="ok now select your features" :answers="value" textPosition="text-start" :loaderEnabled=false isRequired=true :groupName="`${glassName}-${name}`" />
+        </div>
+    </div>
+
+</div>
 </template>
 
 <script>
+// Components
 import listCard from "@/ux-components/list-card/list-card";
 import buttonQuestion from "@/common-components/button-question/button-question";
 
+// Supporting files
 import {
     getTintImage
 } from "@/constants/tint-mapper";
+import {
+    getCustomTransformValue,
+    getCustomTransformKey
+} from '@/constants/dynamictext-mapper';
 
 export default {
     name: "part-question",
@@ -24,7 +42,8 @@ export default {
         return {
             glassColorQuestion: String,
             glassFeatureQuestion: String,
-            inputParams: []
+            selectedPart: {}, // v-model for the radio button selections
+            selectedTint: {} // v-model for the list card selections
         };
     },
     props: {
@@ -43,6 +62,10 @@ export default {
             return this.createFeatureListMap(this.colorAnswers);
         },
     },
+    mounted() {
+        const s = getCustomTransformKey('Select your current {custom:glassName} color')
+        const r = getCustomTransformValue(s, this.glassName);
+    },
     methods: {
         initializeComponent(cmsContent, initialData) {
             this.glassColorQuestion = cmsContent.ColorQuestion;
@@ -77,7 +100,24 @@ export default {
             const tintObject = getTintImage(glassType, tintColor);
 
             return tintObject === undefined ? "" : tintObject.src;
-        }
+        },
+
+        TestMethod(name, event) {
+            this.selectedTint[name] = event;
+        },
     },
 };
 </script>
+
+<style lang="scss">
+.nested-radio {
+    .ui-radio {
+        flex-direction: column;
+        margin: .25rem 0;
+    }
+
+    p {
+        font-size: .875rem;
+    }
+}
+</style>

src/layouts/vehicle-parts/response.json

@@ -1,96 +0,0 @@
-{
-    "partsOrQuestions": [
-      {
-        "glassName": "Backglass",
-        "parts": [
-          {
-            "partNumber": "DB12209GTYN",
-            "description": "heated glass, solar, 1 hole",
-            "color": "Green Tint",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          },
-          {
-            "partNumber": "DB12209YPYN",
-            "description": "heated glass, solar, 1 hole",
-            "color": "Gray Tint Privacy",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          }
-        ],
-        "partQuestions": null
-      },
-      {
-        "glassName": "DriverRearQuarterGlass",
-        "parts": [
-          {
-            "partNumber": "DQ12204GTYNOEM",
-            "description": "solar, driver side, encap",
-            "color": "Green Tint",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          },
-          {
-            "partNumber": "DQ12204YPYNOEM",
-            "description": "solar, driver side, encap",
-            "color": "Gray Tint Privacy",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          },
-          {
-            "partNumber": "DQ12205GTYNOEM",
-            "description": "solar, antenna, driver side, encap",
-            "color": "Green Tint",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          },
-          {
-            "partNumber": "DQ12205YPYNOEM",
-            "description": "solar, antenna, driver side, encap",
-            "color": "Gray Tint Privacy",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          },
-          {
-            "partNumber": "DQ12207GTYN",
-            "description": "solar, driver side, encap, chrome molding",
-            "color": "Green Tint",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          },
-          {
-            "partNumber": "DQ12207YPYNOEM",
-            "description": "solar, driver side, encap, chrome molding",
-            "color": "Gray Tint Privacy",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          },
-          {
-            "partNumber": "DQ12208GTYNOEM",
-            "description": "solar, antenna, driver side, encap, chrome molding",
-            "color": "Green Tint",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          },
-          {
-            "partNumber": "DQ12208YPYNOEM",
-            "description": "solar, antenna, driver side, encap, chrome molding",
-            "color": "Gray Tint Privacy",
-            "requiresRecalibration": false,
-            "requiresCapabilityQuestions": false,
-            "childParts": null
-          }
-        ],
-        "partQuestions": null
-      }
-    ]
-  }

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -12,38 +12,72 @@ export default {
     name: "vehicle-parts",
     data() {
         return {
-            Parts: [{
+            Parts: [
-                glassName: 'Backglass',
+                {
-                colorAnswers: [{
+                    glassName: 'Backglass',
-                        ColorAnswerText: 'Green Tint',
+                    colorAnswers: [{
-                        FeatureAnswers: [{
+                            ColorAnswerText: 'Green Tint',
-                            FeatureAnswerText: 'heated glass, solar, 1 hole',
+                            FeatureAnswers: [{
-                            PartNumber: 'DB12209GTYN'
+                                FeatureAnswerText: 'Backglass - heated glass, solar, 1 hole',
-                        }]
+                                PartNumber: 'test-backglass-green-tint-1-hole',
-                    },
+                            }]
-                    {
+                        },
-                        ColorAnswerText: 'Green Tint',
+                        {
-                        FeatureAnswers: [{
+                            ColorAnswerText: 'Green Tint',
-                            FeatureAnswerText: 'heated glass, solar, 3 hole',
+                            FeatureAnswers: [{
-                            PartNumber: 'DB12209XXXX'
+                                FeatureAnswerText: 'Backglass - heated glass, solar, 2 hole',
-                        }]
+                                PartNumber: 'test-backglass-green-tint-2-hole'
-                    },
+                            }]
-                    {
+                        },
-                        ColorAnswerText: 'Gray Tint Privacy',
+                        {
-                        FeatureAnswers: [{
+                            ColorAnswerText: 'Gray Tint Privacy',
-                            FeatureAnswerText: 'heated glass, solar, 1 hole',
+                            FeatureAnswers: [{
-                            PartNumber: 'DB12209YPYN'
+                                FeatureAnswerText: 'Backglass - heated glass, solar, 3 hole',
-                        }]
+                                PartNumber: 'test-backglass-gray-tint-privacy-3-hole'
-                    },
+                            }]
-                    {
+                        },
-                        ColorAnswerText: 'Gray Tint Privacy',
+                        {
-                        FeatureAnswers: [{
+                            ColorAnswerText: 'Gray Tint Privacy',
-                            FeatureAnswerText: 'heated glass, solar, 5 hole',
+                            FeatureAnswers: [{
-                            PartNumber: 'DB12209YZZZ'
+                                FeatureAnswerText: 'Backglass - heated glass, solar, 4 hole',
-                        }]
+                                PartNumber: 'test-backglass-blue-tint-4-hole'
-                    },
+                            }]
-                ]
+                        },
-            }]
+                    ]
+                },
+                {
+                    glassName: 'Windshield',
+                    colorAnswers: [{
+                            ColorAnswerText: 'Blue Tint',
+                            FeatureAnswers: [{
+                                FeatureAnswerText: 'Windshield - heated glass, solar, 1 hole',
+                                PartNumber: 'test-windshield-blue-tint-1-hole'
+                            }]
+                        },
+                        {
+                            ColorAnswerText: 'Blue Tint',
+                            FeatureAnswers: [{
+                                FeatureAnswerText: 'Windshield -heated glass, solar, 2 hole',
+                                PartNumber: 'test-blue-tint-windshield-2-hole'
+                            }]
+                        },
+                        {
+                            ColorAnswerText: 'Gray Tint Privacy',
+                            FeatureAnswers: [{
+                                FeatureAnswerText: 'Windshield -heated glass, solar, 3 hole',
+                                PartNumber: 'test-gray-tint-privacy-windshield-3-hole'
+                            }]
+                        },
+                        {
+                            ColorAnswerText: 'Gray Tint Privacy',
+                            FeatureAnswers: [{
+                                FeatureAnswerText: 'Windshield -heated glass, solar, 4 hole',
+                                PartNumber: 'test-brown-tint-windshield-4-hole'
+                            }]
+                        },
+                    ]
+                },
+            ]
         }
     },
     components: {

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

@@ -1,266 +1,268 @@
 <template>
-  <div :class="'col' + colLength">
+<div :class="'col' + colLength">
-    <div
+    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']">
-      class="list-card w-100 rounded-3 d-flex align-items-center h-100"
+        <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" @click="handleChange(value)" v-model="checkValue" @change="handleCheckChange()" />
-      :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
+        <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'" :src="buttonImage" :alt="altText" />
-      <input
+            <p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">
-        :type="isMultiSelect ? 'checkbox' : 'radio'"
+                {{buttonLabel}}
-        :id="buttonID"
+            </p>
-        :name="groupName"
+            <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
-        :value="buttonID"
+                {{buttonLabelSubCopy}}
-        :aria-required="isRequired"
+            </p>
-        :data-focus-target="groupName"
+            <div v-if="isWide" class="order-2">
-        @click="handleChange(value)"
+                <p class="m-0 small">{{ buttonLabel }}</p>
-        v-model="checkValue"
+                <p v-if="buttonLabelSubCopy" class="m-0 fs-7 sub-copy">
-        @change="handleCheckChange()"
+                    {{ buttonLabelSubCopy }}
-      />
+                </p>
-      <label
+            </div>
-        :for="buttonID"
+        </label>
-        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'"
-          :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 sub-copy">
-          {{buttonLabelSubCopy}}
-        </p>
-        <div v-if="isWide" class="order-2">
-          <p class="m-0 small">{{ buttonLabel }}</p>
-          <p v-if="buttonLabelSubCopy" class="m-0 fs-7 sub-copy">
-            {{ buttonLabelSubCopy }}
-          </p>
-        </div>
-      </label>
     </div>
-  </div>
+</div>
 </template>
 
 <script>
-import { useField } from "vee-validate";
+import {
+    useField
+} from "vee-validate";
 
 export default {
-  name: "listCard",
+    name: "listCard",
-  props: {
+    props: {
-    isMultiSelect: Boolean, //Defines use as checkbox
+        isMultiSelect: Boolean, //Defines use as checkbox
-    isWide: Boolean,
+        isWide: Boolean,
-    buttonImage: String, //Required: File name of image
+        buttonImage: String, //Required: File name of image
-    buttonImageId: String,
+        buttonImageId: String,
-    buttonLabel: String, //Required: Label text
+        buttonLabel: String, //Required: Label text
-    isRequired: Boolean, //Required: is aria-required required or not?
+        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.
+        altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
-    buttonID: String, //Required: Unique
+        buttonID: String, //Required: Unique
-    groupName: String, //Rquired: Unique
+        groupName: String, //Rquired: Unique
-    buttonLabelSubCopy: String, //Optional: sub text
+        buttonLabelSubCopy: String, //Optional: sub text
-    value: {
+        value: {
-      // Field initial value
+            // Field initial value
-      type: String,
+            type: String,
-      default: "",
+            default: "",
+        },
+        colLength: String,
+        validationRules: String,
+        selectedButtonIDs: [Array, String],
+        hasError: Boolean,
     },
-    colLength: String,
+    data() {
-    validationRules: String,
+        return {
-    selectedButtonIDs: [Array, String],
+            checkValue: Boolean,
-    hasError: Boolean,
-  },
-  data(){
-    return {
-      checkValue: Boolean,
-    }
-  },
-  created(){
-    if(this.selectedButtonIDs){
-      this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
-    }
-  },
-  computed: {
-    getLabelClasses() {
-      if (this.isWide) {
-        let classes = "flex-row py-r ps-3 pe-8";
-        if (this.buttonLabelSubCopy) {
-          classes += " checkboxTop";
         }
-        return classes;
-      } else {
-        return "flex-column pt-4 pb-2";
-      }
     },
-  },
+    created() {
-  methods: {
+        if (this.selectedButtonIDs) {
-    handleCheckChange(newValue, oldValue){
+            this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
-      const isInitialization = typeof(oldValue) === 'function';
+        }
-      if (!isInitialization) {
+    },
-        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
+    computed: {
-      }
+        getLabelClasses() {
-    }
+            if (this.isWide) {
-  },
+                let classes = "flex-row py-r ps-3 pe-8";
-  setup(props) {
+                if (this.buttonLabelSubCopy) {
-    const inputType = props.isMultiSelect ? "checkbox" : "radio";
+                    classes += " checkboxTop";
+                }
+                return classes;
+            } else {
+                return "flex-column pt-4 pb-2";
+            }
+        },
+    },
+    methods: {
+        handleCheckChange() {
+            this.$emit('isCheckedChanged', {
+                isChecked: this.checkValue,
+                buttonId: this.buttonID.toString()
+            });
+        }
+    },
+    setup(props) {
+        const inputType = props.isMultiSelect ? "checkbox" : "radio";
 
-    const {
+        const {
-        value: inputValue,
+            value: inputValue,
-        handleChange,
+            handleChange,
-        errors,
+            errors,
-    } = useField(props.groupName, props.validationRules,
+        } = useField(props.groupName, props.validationRules, {
-    {
+            type: inputType,
-      type: inputType,
+            checkedValue: props.value,
-      checkedValue: props.value,
+        });
-    });
+        return {
-    return {
+            handleChange,
-      handleChange,
+            errors,
-      errors,
+        };
-    };
+    },
-  },
 };
 </script>
 
 <style lang="scss">
 .list-card {
-  border: 1px solid $gray-500;
+    border: 1px solid $gray-500;
-  &.invalid {
+
-    //Red border if invalid
+    &.invalid {
-    border: 1px solid $red;
+        //Red border if invalid
-  }
+        border: 1px solid $red;
-  img {
-    // svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
-    height: auto;
-    width: 6.5rem;
-    margin-bottom: 3rem;
-    max-width: 100%;
-  }
-  &:hover {
-    box-shadow: 0px 0px 0px 4px $blue-300;
-    border: 1px solid transparent;
-  }
-  input[type="checkbox"],
-  input[type="radio"] {
-    opacity: 0;
-    width: 0;
-    height: 0;
-    + label {
-      display: block;
-      position: relative;
-      &:hover {
-        cursor: pointer;
-      }
-      p {
-        color: $gray-600;
-        text-align: center;
-        &.sub-copy {
-          color: $gray-550;
-        }
-      }
     }
-    &:focus + label {
+
-      box-shadow: 0 0 0 2.5px $blue;
-      border-radius: 0.5rem;
-    }
-    &:checked + label {
-      background: $blue-100;
-      box-shadow: 0 0 0 1px $blue;
-      border-radius: 0.5rem;
-    }
-    &:checked + label {
-      p {
-        color: $black;
-        font-weight: 500;
-      }
-      .sub-copy {
-        color: $gray-600;
-      }
-    }
-    + label::before {
-      content: "";
-      position: absolute;
-      display: flex;
-      margin: 0 auto;
-      width: 1rem;
-      height: 1rem;
-      margin: 3rem 0 0 0;
-      background: white;
-      border: 1px solid $gray-500;
-      border-radius: 2px;
-      order: 2;
-      flex-shrink: 0;
-      color: $gray-600;
-    }
-    + label.checkboxTop::before {
-      margin: -1.25rem 0.5rem 0 0 !important;
-    }
-    + label.checkboxTop::after {
-      margin: -1.5rem 0.5rem 0 0 !important;
-    }
-    &:checked + label::before {
-      background: $blue;
-    }
-    &:checked + label::after {
-      content: "";
-      position: absolute;
-      margin: 3.2rem 0 0 0;
-      border-left: 2px solid $white;
-      border-bottom: 2px solid $white;
-      height: 6px;
-      width: 11px;
-      transform: rotate(-45deg);
-    }
-  }
-  input[type="radio"] {
-    + label::before {
-      content: "";
-      display: none;
-    }
-    + label::after {
-      content: "";
-      display: none;
-    }
-    + label {
-      img {
-        margin-bottom: 0;
-      }
-    }
-  }
-  &.horizontal {
     img {
-      margin-bottom: 0;
+        // svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
-      width: 5.5rem;
+        height: auto;
+        width: 6.5rem;
+        margin-bottom: 3rem;
+        max-width: 100%;
     }
+
+    &:hover {
+        box-shadow: 0px 0px 0px 4px $blue-300;
+        border: 1px solid transparent;
+    }
+
     input[type="checkbox"],
     input[type="radio"] {
-      + label::before {
+        opacity: 0;
-        content: "";
+        width: 0;
-        position: relative;
+        height: 0;
-        margin: 0 0.5rem 0 0;
+
-        order: 1;
+        +label {
-      }
+            display: block;
-      &:checked + label::after {
+            position: relative;
-        content: "";
+
-        margin: -0.25rem 0 0 0;
+            &:hover {
-        left: 0.875rem;
+                cursor: pointer;
-      }
+            }
-      + label {
+
-        min-height: 48px;
+            p {
-        color: $gray-600;
+                color: $gray-600;
-        img {
+                text-align: center;
-          margin-bottom: 0;
+
+                &.sub-copy {
+                    color: $gray-550;
+                }
+            }
         }
-        p {
+
-          text-align: left;
+        &:focus+label {
-          &.sub-copy {
+            box-shadow: 0 0 0 2.5px $blue;
-            color: $gray-550;
+            border-radius: 0.5rem;
-          }
+        }
+
+        &:checked+label {
+            background: $blue-100;
+            box-shadow: 0 0 0 1px $blue;
+            border-radius: 0.5rem;
+        }
+
+        &:checked+label {
+            p {
+                color: $black;
+                font-weight: 500;
+            }
+
+            .sub-copy {
+                color: $gray-600;
+            }
+        }
+
+        +label::before {
+            content: "";
+            position: absolute;
+            display: flex;
+            margin: 0 auto;
+            width: 1rem;
+            height: 1rem;
+            margin: 3rem 0 0 0;
+            background: white;
+            border: 1px solid $gray-500;
+            border-radius: 2px;
+            order: 2;
+            flex-shrink: 0;
+            color: $gray-600;
+        }
+
+        +label.checkboxTop::before {
+            margin: -1.25rem 0.5rem 0 0 !important;
+        }
+
+        +label.checkboxTop::after {
+            margin: -1.5rem 0.5rem 0 0 !important;
+        }
+
+        &:checked+label::before {
+            background: $blue;
+        }
+
+        &:checked+label::after {
+            content: "";
+            position: absolute;
+            margin: 3.2rem 0 0 0;
+            border-left: 2px solid $white;
+            border-bottom: 2px solid $white;
+            height: 6px;
+            width: 11px;
+            transform: rotate(-45deg);
+        }
+    }
+
+    input[type="radio"] {
+        +label::before {
+            content: "";
+            display: none;
+        }
+
+        +label::after {
+            content: "";
+            display: none;
+        }
+
+        +label {
+            img {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    &.horizontal {
+        img {
+            margin-bottom: 0;
+            width: 5.5rem;
+        }
+
+        input[type="checkbox"],
+        input[type="radio"] {
+            +label::before {
+                content: "";
+                position: relative;
+                margin: 0 0.5rem 0 0;
+                order: 1;
+            }
+
+            &:checked+label::after {
+                content: "";
+                margin: -0.25rem 0 0 0;
+                left: 0.875rem;
+            }
+
+            +label {
+                min-height: 48px;
+                color: $gray-600;
+
+                img {
+                    margin-bottom: 0;
+                }
+
+                p {
+                    text-align: left;
+
+                    &.sub-copy {
+                        color: $gray-550;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 </style>

src/ux-components/radio/radio.vue

@@ -10,7 +10,7 @@
     :aria-required="isRequired"
     :value="value"
     :v-model="checkValue"
-    @change="handleCheckChanged()"
+    @change="handleCheckChanged"
     />
     <label class="d-flex align-items-start form-check-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
@@ -18,66 +18,70 @@
         screenReaderOnlyText
       }}</span>
     </label>
-  </div>
+</div>
 </template>
 
 <script>
-import { toRefs } from "vue";
+import {
-import { useField } from "vee-validate";
+    toRefs
+} from "vue";
+import {
+    useField
+} from "vee-validate";
 export default {
-  name: "radio",
+    name: "radio",
-  props: {
+    props: {
-    groupName: String,
+        groupName: String,
-    buttonLabel: String,
+        buttonLabel: String,
-    buttonID: String,
+        buttonID: String,
-    isRequired: Boolean,
+        isRequired: Boolean,
-    value: {
+        value: {
-      type: [String, Number],
+            type: [String, Number],
-      default: "",
+            default: "",
+        },
+        screenReaderOnlyText: String,
     },
-    screenReaderOnlyText: String,
+    data() {
-    hasError: Boolean,
+        return {
-  },
+            checkValue: Boolean,
-  data() {
+        };
-    return {
+    },
-      checkValue: Boolean,
+    methods: {
-    };
+        handleCheckChanged(newValue, oldValue) {
-  },
+            const isInitialization = typeof oldValue === "function";
-  created(){
+
-    if(this.selectedButtonIDs){
+            if (!isInitialization) {
-      this.checkValue = this.selectedButtonIDs[0];
+                this.$emit("isCheckedChanged", {
-    }
+                    isChecked: newValue.target.checked,
-  },
+                    buttonId: this.buttonID.toString(),
-  methods: {
+                });
-    handleClick(value) {
+            }
-      this.handleChange(value);
+        },
+    },
+    setup(props) {
+        const {
+            groupName,
+            value
+        } = toRefs(props);
+        const {
+            checked,
+            handleChange,
+            errorMessage
+        } = useField(
+            groupName,
+            undefined, {
+                type: "radio",
+                checkedValue: value,
+            }
+        );
+        return {
+            checked,
+            handleChange,
+            errorMessage,
+        };
     },
-    handleCheckChange(newValue, oldValue){
-      const isInitialization = typeof(oldValue) === 'function';
-      if (!isInitialization) {
-        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
-      }
-    }
-  },
-  setup(props) {
-    const { groupName, value } = toRefs(props);
-    const { checked, handleChange, errorMessage } = useField(
-      groupName,
-      undefined,
-      {
-        type: "radio",
-        checkedValue: value,
-      }
-    );
-    return {
-      checked,
-      handleChange,
-      errorMessage,
-    };
-  },
 };
 </script>
-
 <style lang="scss" scoped>
 .form-check {
   .form-check-input {
@@ -100,4 +104,4 @@ export default {
     }
   }
 }
-</style>
+</style>