daily

src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue

@@ -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>

src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue

@@ -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>
+  

src/ux-components/checkbox/checkbox.vue

@@ -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>