commit

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

@@ -0,0 +1,111 @@
+import { shallowMount } from "@vue/test-utils";
+import radio from "./radio";
+
+describe("radio.vue", () => {
+  it("Should return group name", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        groupName: "radio-button-test",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().name).toEqual("radio-button-test");
+  });
+
+  it("Should return checkbox id", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        buttonID: "Radio ID",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().id).toEqual("Radio ID");
+  });
+
+  it("Should return label text", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        buttonLabel: "label text",
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("p");
+
+    expect(paragraph.text()).toEqual("label text");
+  });
+
+  it("Should return label text", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      propsData: {
+        screenReaderOnlyText: "screenreader text",
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("span");
+
+    expect(paragraph.text()).toEqual("screenreader text");
+  });
+
+  it("Should emit button value on click", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      global: {
+        mocks: {
+          '$route': { query: { issPage: 'page-name' } },
+        }
+      },
+      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: false}]);;
+    expect(wrapper.vm.pushEventToGA).toHaveBeenCalled();
+  });
+
+  it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
+    // Act
+    const wrapper = shallowMount(radio, {
+      global: {
+        mocks: {
+          '$route': { query: { issPage: 'page-name' } },
+        }
+      },
+      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

@@ -0,0 +1,139 @@
+<template>
+    <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
+    <div class="ui-radio form-check" :class="[(errors.length > 0 || hasError) ? 'has-error' : '']">
+      <input
+        type="radio"
+        class="form-check-input"
+        aria-checked="false"
+        :name="groupName"
+        :id="buttonID"
+        :aria-required="isRequired"
+        :value="value"
+        :v-model="checkValue"
+        @change="handleCheckChange"
+        :checked="checkValue"
+        :validationRules="validationRules"
+        />
+      <label class="d-flex align-items-start form-check-label" :for="buttonID">
+        <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
+        <span v-if="screenReaderOnlyText" class="sr-only">{{
+          screenReaderOnlyText
+        }}</span>
+      </label>
+    </div>
+  </template>
+  
+  <script>
+  import { useField } from "vee-validate";
+  
+  export default {
+    name: "radio",
+    props: {
+      groupName: String,
+      buttonLabel: String,
+      buttonID: String,
+      isRequired: Boolean,
+      value: {
+        type: [String, Number],
+        default: "",
+      },
+      screenReaderOnlyText: String,
+      selectedValues: String,
+      hasError: Boolean,
+      validationRules: String,
+      valueToLogType: String,
+    },
+    data() {
+      return {
+        checkValue: Boolean,
+      };
+    },
+    created() {
+      if (this.selectedValues) {
+        this.checkValue = this.selectedValues === this.value;
+        this.handleCheckChange();
+      } else{
+        this.checkValue = false;
+      }
+    },
+    methods: {
+      handleCheckChange() {
+        this.handleChange(this.value);
+        const emitEvent = {
+          checkValue: this.checkValue,
+          value: this.value.toString(),
+          buttonID: this.buttonID && this.buttonID.toString(),
+        };
+  
+        this.$emit("isCheckedChanged", emitEvent);
+        this.$emit("update:modelValue", emitEvent);
+  
+      },
+    },
+    setup(props) {
+      const inputType = "radio";
+      const {
+          value: inputValue,
+          handleChange,
+          errors,
+      } = useField(props.groupName, props.validationRules,
+      {
+        type: inputType,
+        checkedValue: props.value,
+      });
+      return {
+        handleChange,
+        errors,
+      };
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .form-check {
+    position: relative;
+  
+    .form-check-input {
+      border: 1px solid $gray-500;
+      border-radius: 50%;
+      margin-right: 0.5rem;
+  
+      &:checked {
+        background-color: $white;
+        background-size: 71%;
+        background-position: center;
+        border: 1px solid $blue;
+        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
+        + label {
+          p {
+            font-weight: 500;
+            font-size: .875rem;
+            color: $black;
+          }
+        }
+      }
+      &:focus {
+        box-shadow: 0 0 0 2.5px $blue;
+      }
+  
+      &, & + label {
+        margin-top: 0;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+  
+    &:hover {
+      .form-check-input {
+        box-shadow: 0 0 0 4px $blue-300;
+      }
+    }
+    p {
+      font-weight: 400;
+      font-size: .875rem;
+      color: $gray-600;
+    }
+  }
+  </style>
+