diff --git a/src/digital-components/textarea-question/textarea-question.vue b/src/digital-components/textarea-question/textarea-question.vue index 4e26ff048..b5bbbf89f 100644 --- a/src/digital-components/textarea-question/textarea-question.vue +++ b/src/digital-components/textarea-question/textarea-question.vue @@ -19,7 +19,7 @@ tabindex="0" class="caption mt-2 mb-0" id="charactersremaining" - :style="{ color: countdownColor }"> + :class="[urgentCountdown ? 'urgent-countdown' : '']"> {{ remainingCount }}/{{ maxLength }} characters remaining

@@ -74,10 +74,9 @@ export default { remainingCount() { return this.maxLength - this.value.length; }, - countdownColor() { - // Chanage text color to red when 10% of max remain - return this.remainingCount <= this.maxLength * 0.1 ? "red" : ""; - }, + urgentCountdown() { + return this.remainingCount <= this.maxLength * 0.1 ? true : false; + } }, methods: { updateCount() { @@ -119,6 +118,9 @@ export default { } p { color: $gray-500; + &.urgent-countdown { + color: $red; + } } } diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue index 4ee30eb66..73ea57153 100644 --- a/src/layouts/customer-details/customer-details.vue +++ b/src/layouts/customer-details/customer-details.vue @@ -28,8 +28,12 @@ cmsWidgetName="phoneNumberQuestionWidget" v-model="phoneNumber" isRequired - validationRules="phone-number-required" - /> + validationRules="phone-number-required" /> +