jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-1729 add label copy for textarea.

Browse source
This commit is contained in:
Bryan Mauger 2023-12-06 10:37:18 -05:00
parent 21a03aed8c
commit 8b7229608c
2 changed files with 20 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/digital-components/textarea-question/textarea-question.vue
View file

@ -1,12 +1,13 @@
<template> <template>
<div class="textarea-question"> <div class="textarea-question">
<div class="label-wrapper mb-1" :aria-label="questionText"> <div class="label-wrapper d-flex flex-column mb-1" :aria-label="questionText">
<!-- Wrap label and span because v-html prevents v-if from displaying if v-if <span> is inside <label>--> <!-- Wrap label and span because v-html prevents v-if from displaying if v-if <span> is inside <label>-->
<label for="textarea-question" class="fw-bold" v-html="questionText"></label> <div class="d-flex mb-1">
<span v-if="!isRequired" class="fw-normal ms-1">(Optional)</span> <label :for="textAreaLabelCopy" class="fw-bold" v-html="questionText"></label>
</div> <span v-if="!isRequired" class="fw-normal ms-1">(Optional)</span>
<textarea </div>
id="textareaQuestion" <textarea
:id="textAreaLabelCopy"
ref="textarea" ref="textarea"
v-model="value" v-model="value"
v-maska="mask" v-maska="mask"
@ -18,13 +19,14 @@
:aria-required="isRequired"> :aria-required="isRequired">
</textarea> </textarea>
<p <p
tabindex="-1" tabindex="-1"
class="caption mt-2 mb-0" class="caption mt-2 mb-0 w-100"
id="charactersRemaining" id="charactersRemaining"
:class="[urgentCountdown ? 'urgent-countdown' : '']"> :class="[urgentCountdown ? 'urgent-countdown' : '']">
{{ remainingCount }}/{{ maxLength }} characters remaining {{ remainingCount }}/{{ maxLength }} characters remaining
</p> </p>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -38,6 +40,10 @@ export default {
default: 150, default: 150,
}, },
modelValue: String, modelValue: String,
textAreaLabelCopy: {
type: String,
default: "text area",
},
}, },
// TODO: At some point in the future we should probably add the tie in to validation here in case the field must be populated for some other use cases // TODO: At some point in the future we should probably add the tie in to validation here in case the field must be populated for some other use cases
setup() {}, setup() {},
@ -83,7 +89,6 @@ export default {
} }
.label-wrapper { .label-wrapper {
display: flex; display: flex;
align-items: center;
label { label {
span { span {
color: $gray-500; color: $gray-500;

1
src/layouts/customer-details/customer-details.vue
View file

@ -48,6 +48,7 @@
class="mb-4" class="mb-4"
v-model="techNotes" v-model="techNotes"
cmsWidgetName="TextAreaContentWidget" cmsWidgetName="TextAreaContentWidget"
textAreaLabelCopy="Customer Comments"
maxLength="150" /> maxLength="150" />
<textBlock cmsWidgetName="DisclaimerCopyWidget" typeStyle="caption" /> <textBlock cmsWidgetName="DisclaimerCopyWidget" typeStyle="caption" />