Add v-model functionality, rename and move component.

src/digital-components/checkbox-question/checkbox-question.vue

@@ -2,6 +2,7 @@
     <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
     <div class="form-check ui-checkbox" :class="[hasError ? 'has-error' : '']">
         <input
+            v-model="value"
             class="form-check-input"
             type="checkbox"
             aria-checked="false"
@@ -10,7 +11,7 @@
             :tabindex="tabIndex"
             :aria-required="isRequired" />
         <label class="d-flex align-items-start" :for="buttonID">
-            <p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
+            <p v-html="checkboxLabelCopy" class="m-0"></p>
             <span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
         </label>
     </div>
@@ -18,15 +19,48 @@
 
 <script>
 export default {
-    name: "checkbox",
+    name: "checkboxQuestion",
+    setup(props) {
+        const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;
+
+        const propsClone = Object.assign({}, props);
+        const modelValue = propsClone.modelValue;
+        let initialValue;
+
+        switch (typeof modelValue) {
+            case "checked":
+                initialValue = modelValue;
+                break;
+            default:
+                initialValue = modelValue && modelValue.checked === false ? modelValue : "";
+                break;
+        }
+
+        const fieldOptions = {
+            type: "checkbox",
+            value: modelValue,
+            initialValue: initialValue,
+        };
+    },
+    data() {
+        return {
+            value: [],
+        };
+    },
+    computed: {
+        checkboxLabelCopy() {
+            return this.getCmsContent("TextMeQuestionWidget", "QuestionText");
+        },
+    },
     props: {
+        cmsWidgetName: String,
         checkboxName: String,
         buttonID: String,
         tabIndex: Number,
-        checkboxLabel: String,
         screenReaderOnlyText: String,
         isRequired: Boolean,
         hasError: Boolean,
+        modelValue: Boolean,
     },
 };
 </script>

src/digital-components/textarea-question/textarea-question.vue

@@ -76,7 +76,7 @@ export default {
         },
         urgentCountdown() {
             return this.remainingCount <= this.maxLength * 0.1 ? true : false;
-        }
+        },
     },
     methods: {
         updateCount() {

src/layouts/customer-details/customer-details.vue

@@ -29,11 +29,10 @@
                 v-model="phoneNumber"
                 isRequired
                 validationRules="phone-number-required" />
-            <checkbox
+            <checkboxQuestion
                 class="mb-5"
                 cmsWidgetName="TextMeQuestionWidget"
-                :checkboxLabel="checkboxLabelCopy"
-                v-model="textMeUpdates"/>
+                v-model="textMeUpdates" />
             <textareaQuestion
                 class="mb-4"
                 v-model="techNotes"
@@ -58,7 +57,7 @@ import textareaQuestion from "@/digital-components/textarea-question/textarea-qu
 import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
 import phoneNumberQuestion from "@/digital-components/phonenumber-question/phonenumber-question";
 import textBlock from "@/digital-components/text-block/text-block";
-import checkbox from "@/ux-components/checkbox/checkbox";
+import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
 //Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -117,9 +116,6 @@ export default {
         textAreaLabelCopy() {
             return this.getCmsContent("TextAreaContentWidget", "QuestionText");
         },
-        checkboxLabelCopy() {
-            return this.getCmsContent("TextMeQuestionWidget", "QuestionText");
-        },
     },
     components: {
         funnelHeader,
@@ -130,7 +126,7 @@ export default {
         Form,
         textBlock,
         phoneNumberQuestion,
-        checkbox
+        checkboxQuestion,
     },
 };
 </script>