Merge pull request #209 from Safelite/CSR-341-radio

CSR-341 WIP

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

@@ -7,9 +7,9 @@
       <fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
         <legend class="sr-only">{{groupName}}</legend>
           <div :class="getComponentWrapperClasses">
-            <component 
-              :is="buttonType" 
-              v-for="answer in answers" 
+            <component
+              :is="buttonType"
+              v-for="answer in answers"
               :key="answer.Name ? answer.Name : answer"
               @isCheckedChanged="handleCheckedChanged"
               :buttonID="answer.Name ? answer.Name : answer"
@@ -43,6 +43,7 @@
 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";
+import radio from "@/ux-components/radio/radio";
 
 export default {
   name: "buttonQuestion",
@@ -95,6 +96,9 @@ export default {
         case 'listCard':
           classes = 'row justify-content-center g-2'
           break;
+        case 'radio':
+          classes = 'ui-radio d-flex'
+          break;
       }
       return classes;
     },
@@ -130,6 +134,7 @@ export default {
     listButton,
     listButtonHorizontal,
     listCard,
+    radio,
   },
 };
 </script>

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

@@ -18,24 +18,30 @@
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
-        <p>Sample radio button group</p>
+        <p class="m-0">Sample radio button group</p>
       </div>
     </div>
     <div class="row">
       <div class="col">
         <radio
-          checkboxName="demo radio"
-          buttonID="radio-1"
-          tabIndex="1"
-          checkboxLabel="I'm a radio button"
+          groupName="radio-demo-2"
+          buttonLabel="I'm a radio button!"
+          buttonID="radio-button-a"
+          isRequired
+          value="I'm a radio button!"
+          modelValue="Model Value 1"
+          screenReaderOnlyText="Model Value 1"
         />
       </div>
       <div class="col">
         <radio
-          checkboxName="demo radio"
-          buttonID="radio-2"
-          tabIndex="1"
-          checkboxLabel="I'm a radio button"
+          groupName="radio-demo-2"
+          buttonLabel="I'm also a radio button!"
+          buttonID="radio-button-b"
+          isRequired
+          value="I'm also a radio button!"
+          modelValue="Model Value 2"
+          screenReaderOnlyText="Model Value 2"
         />
       </div>
     </div>
@@ -74,14 +80,17 @@
         <textLink
         linkType=navigation
         text="Navigation Link"
+        href="#!"
         /><br><br>
         <textLink
         linkType="text"
         text="Default Link"
+        href="#!"
         /><br><br>
         <textLink
         linkType=textSmall
         text="Small Link"
+        href="#!"
         /><br><br>
         <textLink
         linkType=footer

src/ux-components/checkbox/checkbox.vue

@@ -52,7 +52,7 @@ export default {
       content: "";
       position: relative;
       display: inline-block;
-      margin-right: 10px;
+      margin-right: 8px;
       width: 16px;
       height: 16px;
       background: white;

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

@@ -1 +1,63 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import radio from "./radio";
+import { nextTick } from "vue";
+
+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");
+  });
+});

src/ux-components/radio/radio.vue

@@ -1,16 +1,18 @@
 <template>
-  <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
+  <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
   <div class="ui-radio d-flex">
     <input
-      type="radio"
-      aria-checked="false"
-      :name="checkboxName"
-      :id="buttonID"
-      :tabindex="tabIndex"
-      :aria-required="isRequired"
+    type="radio"
+    aria-checked="false"
+    :name="groupName"
+    :id="buttonID"
+    :aria-required="isRequired"
+    :value="value"
+    :v-model="checkValue"
+    @change="handleCheckChanged"
     />
     <label class="d-flex align-items-center" :for="buttonID">
-      <p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
+      <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
       <span v-if="screenReaderOnlyText" class="sr-only">{{
         screenReaderOnlyText
       }}</span>
@@ -19,15 +21,58 @@
 </template>
 
 <script>
+import { toRefs } from "vue";
+import { useField } from "vee-validate";
 export default {
   name: "radio",
   props: {
-    checkboxName: String,
+    groupName: String,
+    buttonLabel: String,
     buttonID: String,
-    tabIndex: Number,
-    checkboxLabel: String,
-    screenReaderOnlyText: String,
     isRequired: Boolean,
+    value: {
+      type: [String, Number],
+      default: "",
+    },
+    modelValue: String,
+    screenReaderOnlyText: String,
+  },
+  data() {
+    return {
+      checkValue: Boolean,
+    };
+  },
+  created(){
+    if(this.selectedButtonIDs){
+      this.checkValue = this.selectedButtonIDs[0];
+    }
+  },
+  methods: {
+    handleClick(value) {
+      this.handleChange(value);
+    },
+    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>
@@ -52,7 +97,7 @@ export default {
       content: "";
       position: relative;
       display: inline-block;
-      margin-right: 10px;
+      margin-right: 8px;
       width: 16px;
       height: 16px;
       background: white;