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

modals WIP

Browse source
This commit is contained in:
Katie Kroell 2026-02-25 12:33:26 -05:00
parent 4643ec65cb
commit a50e9b8e55
2 changed files with 62 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/layouts/coverage-statement/coverage-statement.vue
View file

@ -355,7 +355,7 @@ export default {
watch: {
nextStepsBody(newValue, oldValue) {
if (newValue !== oldValue) {
setupModalLink(this, RECAL_MODAL_REF_NAME);
setupModalLink(this, 'RecalModal');
}
}
},

139
src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
View file

@ -1,53 +1,56 @@
<template>
<modal
:ref="ModalName"
:modalId="ModalName"
:footerButtonText="ModalCloseButtonText"
:isButtonDisabled="isButtonDisabled"
@footerButtonEvent="footerButtonClick">
<div class="form-test-invalid">
<h5 class="text-center mb-4">
{{ ModalHeadline }}
</h5>
<div>
<div
class="mb-4"
v-html="ModalBodyText"></div>
<tpaRecalToggle
class="mb-5"
cmsWidgetName="TPARecalModalToggle" />
<buttonQuestion
ref="tpaRecalQuestion"
v-model="tpaRecalAnswer"
class="radioQuestion safelite-or-tpa-question windshield-chip-count-question mb-4"
:cmsWidgetName="buttonCmsWidgetName"
:questionText="tpaRecalQuestionText"
:answers="tpaRecalAnswersFromCms"
groupName="tpaRecalQuestion"
buttonID="tpaRecalQuestion"
buttonTypeString="listButtonHorizontal"
isRequired></buttonQuestion>
<checkBox
v-if="showAcknowledgementCheckbox"
ref="tpaAcknowledgement"
v-model="acknowledged"
class="mb-2"
:class="showAcknowledgementError && ' has-error'"
:validationRules="rules.optionRequired"
checkboxName="tpaAcknowledgement"
buttonID="tpaAcknowledgement"
:tabIndex="0"
:checkboxLabel="ModalSubBodyText"
:screenReaderOnlyText="ModalSubBodyText"
isRequired />
<div
v-if="showAcknowledgementError || showNoSelectionError"
class="row form-test-error mt-1">
<p>{{ errorMessage }}</p>
<div class="tpa-recal-modal-container">
<modal
:ref="ModalName"
:modalId="ModalName"
:footerButtonText="ModalCloseButtonText"
:isButtonDisabled="isButtonDisabled"
@footerButtonEvent="footerButtonClick">
<div class="form-test-invalid">
<h5 class="text-center mb-4">
{{ ModalHeadline }}
</h5>
<div>
<div
class="mb-4"
v-html="ModalBodyText"></div>
<tpaRecalToggle
class="mb-5"
cmsWidgetName="TPARecalModalToggle" />
<buttonQuestion
ref="tpaRecalQuestion"
v-model="tpaRecalAnswer"
class="tpa-recal-question"
:cmsWidgetName="buttonCmsWidgetName"
:questionText="tpaRecalQuestionText"
:answers="tpaRecalAnswersFromCms"
groupName="tpaRecalQuestion"
buttonID="tpaRecalQuestion"
buttonTypeString="listButtonHorizontal"
isRequired>
</buttonQuestion>
<checkBox
v-if="showAcknowledgementCheckbox"
ref="tpaAcknowledgement"
v-model="acknowledged"
class="mb-2"
:class="showAcknowledgementError && ' has-error'"
:validationRules="rules.optionRequired"
checkboxName="tpaAcknowledgement"
buttonID="tpaAcknowledgement"
:tabIndex="0"
:checkboxLabel="ModalSubBodyText"
:screenReaderOnlyText="ModalSubBodyText"
isRequired />
<div
v-if="showAcknowledgementError || showNoSelectionError"
class="row form-test-error mt-1">
<p>{{ errorMessage }}</p>
</div>
</div>
</div>
</div>
</modal>
</modal>
</div>
</template>
<script>
@ -152,39 +155,19 @@ export default {
</script>
<style lang="scss" scoped>
.modal {
&.modal-component {
.modal-dialog {
.modal-content {
.modal-body {
.modal-sub-body {
color: $gray-600;
}
ul {
margin-bottom: 0;
}
p {
&:last-child {
margin-bottom: 0;
}
margin-bottom: .5rem;
}
}
}
:deep(.modal) {
.modal-body {
color: #4d4e53;
}
.modal-footer {
padding-top: 20px;
button {
background-color: $green;
color: $white;
}
}
.safelite-or-tpa-question {
:deep(.question-text) {
span {
font-weight: 500;
}
}
}
}
.form-test-error {
p {
font-weight: 500;
.tpa-recal-question > div:first-of-type {
margin-bottom: 20px;
}
}
</style>