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 
+            <component
-              :is="buttonType" 
+              :is="buttonType"
-              v-for="answer in answers" 
+              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"
+          groupName="radio-demo-2"
-          buttonID="radio-1"
+          buttonLabel="I'm a radio button!"
-          tabIndex="1"
+          buttonID="radio-button-a"
-          checkboxLabel="I'm a radio button"
+          isRequired
+          value="I'm a radio button!"
+          modelValue="Model Value 1"
+          screenReaderOnlyText="Model Value 1"
         />
       </div>
       <div class="col">
         <radio
-          checkboxName="demo radio"
+          groupName="radio-demo-2"
-          buttonID="radio-2"
+          buttonLabel="I'm also a radio button!"
-          tabIndex="1"
+          buttonID="radio-button-b"
-          checkboxLabel="I'm a radio button"
+          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/radio/radio.vue

@@ -1,16 +1,16 @@
 <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"
+      :name="groupName"
       :id="buttonID"
-      :tabindex="tabIndex"
       :aria-required="isRequired"
+      :value="value"
     />
     <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>
@@ -22,12 +22,13 @@
 export default {
   name: "radio",
   props: {
-    checkboxName: String,
+    groupName: String,
+    buttonLabel: String,
     buttonID: String,
-    tabIndex: Number,
-    checkboxLabel: String,
-    screenReaderOnlyText: String,
     isRequired: Boolean,
+    value: String,
+    modelValue: String,
+    screenReaderOnlyText: String,
   },
 };
 </script>