daily
This commit is contained in:
Jason Wheeler
parent
f2e4fc3d97
commit
55efa1f27f
3 changed files with 151 additions and 10 deletions
|
|
@ -7,19 +7,38 @@
|
|||
<h5 class="text-center mb-4">{{ModalHeadline}}</h5>
|
||||
<div>
|
||||
<div class="mb-4" v-html="ModalBodyText"></div>
|
||||
<div v-if="ModalSubBodyText" v-html="ModalSubBodyText"></div>
|
||||
<tpaRecalToggle cmsWidgetName="TPARecalModalToggle"/>
|
||||
<div>
|
||||
<checkBox
|
||||
checkboxName="tpaAcknowledgement"
|
||||
buttonID="tpaAcknowledgement"
|
||||
:tabIndex="0"
|
||||
:checkboxLabel="ModalSubBodyText"
|
||||
:screenReaderOnlyText="ModalSubBodyText"
|
||||
isRequired
|
||||
ref="tpaAcknowledgement"
|
||||
v-model="acknowledged"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import modal from "@/digital-components/modal/modal";
|
||||
import tpaRecalToggle from "@/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue"
|
||||
import checkBox from "@/ux-components/checkbox/checkbox.vue"
|
||||
|
||||
export default {
|
||||
name: "content-group-modal",
|
||||
props: {
|
||||
cmsWidgetName: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
acknowledged: false,
|
||||
};
|
||||
},
|
||||
emits: ["buttonClick"],
|
||||
computed: {
|
||||
ModalName() {
|
||||
|
|
@ -28,21 +47,15 @@ export default {
|
|||
ModalHeadline() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "HeaderText");
|
||||
},
|
||||
ModalSubheadertext() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
|
||||
},
|
||||
ModalBodyText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "BodyText");
|
||||
},
|
||||
},
|
||||
ModalSubBodyText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "BodyText2");
|
||||
},
|
||||
ModalImage() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "Image");
|
||||
},
|
||||
ModalCloseButtonText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "FooterText");
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openModal() {
|
||||
|
|
@ -50,12 +63,22 @@ export default {
|
|||
},
|
||||
|
||||
footerButtonClick() {
|
||||
//check if acked, if not show error
|
||||
this.$refs[this.ModalName].closeModal();
|
||||
this.$emit("buttonClick");
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
acknowledged(newValue){
|
||||
//enable/disable footer based on value
|
||||
//need to update modal to accept prop for this
|
||||
console.log(newValue);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
modal,
|
||||
tpaRecalToggle,
|
||||
checkBox
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<div class="tpa-recal-toggle mt-2 mb-3">
|
||||
<div
|
||||
class="tpa-toggle"
|
||||
:class="[isDetailVisible ? 'active' : '']"
|
||||
@click="handleClickToggle"
|
||||
>
|
||||
<textLink
|
||||
linkType="text"
|
||||
href="#!"
|
||||
:text="textForToggle"
|
||||
/>
|
||||
</div>
|
||||
<Transition>
|
||||
<div
|
||||
v-show="isDetailVisible"
|
||||
id="tpa-recal-detail-wrapper"
|
||||
class="mt-2"
|
||||
>
|
||||
<div
|
||||
v-html="detailContent"
|
||||
id="tpa-recal-detail-content"
|
||||
class="mb-2"
|
||||
/>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import textLink from '@/ux-components/text-link/text-link.vue';
|
||||
|
||||
export default {
|
||||
name: 'tpa-recal-toggle',
|
||||
props: {
|
||||
cmsWidgetName: String,
|
||||
},
|
||||
components: {
|
||||
textLink,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isDetailVisible: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
textForToggle() {
|
||||
return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
|
||||
},
|
||||
detailContent() {
|
||||
return this.getCmsContent(this.cmsWidgetName, 'BodyText');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleClickToggle() {
|
||||
this.isDetailVisible = !this.isDetailVisible;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.tpa-recal-toggle {
|
||||
.tpa-toggle {
|
||||
&::after {
|
||||
content: "";
|
||||
transition: all 0.5s ease;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
margin-left: 0.5rem;
|
||||
width: 16px;
|
||||
height: 9px;
|
||||
display: inline-block;
|
||||
}
|
||||
&.active::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
a {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#tpa-recal-detail-wrapper {
|
||||
// START - Vue Transition
|
||||
&.v-enter-active,
|
||||
&.v-leave-active {
|
||||
transition: opacity 250ms ease-in;
|
||||
}
|
||||
|
||||
&.v-enter-from,
|
||||
&.v-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
// END - Vue Transition
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
#tpa-recal-detail-content {
|
||||
font-size: 1rem;
|
||||
p {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
ol {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -8,7 +8,10 @@
|
|||
:name="checkboxName"
|
||||
:id="buttonID"
|
||||
:tabindex="tabIndex"
|
||||
:aria-required="isRequired" />
|
||||
:aria-required="isRequired"
|
||||
@change="handleCheckChange"
|
||||
:ref="checkboxName"
|
||||
/>
|
||||
<label class="d-flex align-items-start" :for="buttonID">
|
||||
<p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
|
||||
|
|
@ -28,6 +31,11 @@ export default {
|
|||
isRequired: Boolean,
|
||||
hasError: Boolean,
|
||||
},
|
||||
methods: {
|
||||
handleCheckChange() {
|
||||
this.$emit("update:modelValue", this.$refs[this.checkboxName].checked);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue