WIP

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

@@ -1,6 +1,6 @@
 <template>
     <div class="textarea-question">
-        <label for="textarea-comments" class="fw-bold mb-1">{{ labelText }} <span class="fw-normal">{{ labelTextOptional }}</span></label>
+        <label for="textarea-comments" class="fw-bold mb-1">{{ labelText }} <span v-if="isRequired" class="fw-normal">(Optional)</span></label>
         <textarea
             id="textarea-comments"
             class="p-4"
@@ -9,8 +9,8 @@
             contenteditable="true"
             aria-multiline="true"
             aria-required="false"></textarea>
-        <p tabindex="0" v-show="footerText" class="caption mt-2 mb-0" id="charactersremaining">
-            {{ textAreaFooterText }}
+        <p tabindex="0" class="caption mt-2 mb-0" id="charactersremaining">
+            250/250 characters remaining
         </p>
     </div>
 </template>
@@ -19,6 +19,10 @@
 export default {
     name: "textareaquestion",
     props: {
+        cmsWidgetName: String,
+        isRequired: Boolean,
+        maxLength: Number,
+        modelValue: String,
         labelText: String,
         labelTextOptional: String,
         textAreaFooterText: String,

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

@@ -1,11 +1,10 @@
 <template>
     <textareaquestion
         cmsWidgetName="CustomerDetailsTextAreaLabelText"
-        :labelText=textAreaLabelCopy
-        :labelTextOptional=textAreaLabelCopyOptional
+        :labelText="textAreaLabelCopy"
+        :labelTextOptional="textAreaLabelCopyOptional"
         textAreaLabelText
-        textAreaFooterText="250/250 characters remaining"
-        footerText
+        isRequired
      />
 </template>
 
@@ -43,10 +42,7 @@ export default {
     computed: {
         textAreaLabelCopy() {
             return this.getCmsContent("CustomerDetailsTextAreaLabelText", "HeaderText");
-        },
-        textAreaLabelCopyOptional() {
-            return this.getCmsContent("CustomerDetailsTextAreaLabelText", "SubheaderText");
-        },
+        }
     }
 };
 </script>