Merge branch 'develop' into feature/animations-adjustments

src/ux-components/radio/radio.spec.js

@@ -60,4 +60,42 @@ describe("radio.vue", () => {
 
     expect(paragraph.text()).toEqual("screenreader text");
   });
+
+  it("Should emit button value on click", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        buttonLabel: "Windshield",
+        value: "List Card Checkbox",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        isRequired: true,
+        isWide: false,
+        modelValue: ["List Card Checkbox"],
+      },
+    });
+    wrapper.vm.handleCheckChange();
+    // Assert
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: Boolean}]);
+  });
+
+  it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        modelValue: ["List Card Checkbox"],
+        value: "Car-Front",
+        selectedValues: ["Car-Front"]
+      },
+    });
+    // Assert
+    expect(wrapper.componentVM.checkValue).toEqual(true);
+  });
 });

src/ux-components/radio/radio.vue

@@ -10,7 +10,8 @@
     :aria-required="isRequired"
     :value="value"
     :v-model="checkValue"
-    @change="handleCheckChanged()"
+    @change="handleCheckChange()"
+    :checked="checkValue"
     />
     <label class="d-flex align-items-start form-check-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
@@ -36,6 +37,7 @@ export default {
       default: "",
     },
     screenReaderOnlyText: String,
+    selectedValues: [Array, String],
     hasError: Boolean,
   },
   data() {
@@ -44,15 +46,15 @@ export default {
     };
   },
   created() {
-    if (this.selectedButtonIDs) {
-      this.checkValue = this.selectedButtonIDs[0];
+    if (this.selectedValues) {
+      this.checkValue = this.selectedValues[0] === this.value;
     }
   },
   methods: {
     handleClick(value) {
       this.handleChange(value);
     },
-    handleCheckChanged(newValue, oldValue) {
+    handleCheckChange(newValue, oldValue) {
       const isInitialization = typeof oldValue === "function";
       if (!isInitialization) {
 
@@ -68,19 +70,19 @@ export default {
     },
   },
   setup(props) {
-    const { groupName, value } = toRefs(props);
-    const { checked, handleChange, errorMessage } = useField(
-      groupName,
-      undefined,
-      {
-        type: "radio",
-        checkedValue: value,
-      }
-    );
+    const inputType = "radio";
+    const {
+        value: inputValue,
+        handleChange,
+        errors,
+    } = useField(props.groupName, props.validationRules,
+    {
+      type: inputType,
+      checkedValue: props.value,
+    });
     return {
-      checked,
       handleChange,
-      errorMessage,
+      errors,
     };
   },
 };