From 3276c013da4dbf9f45655c1e682f3a54243b1168 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 18 Apr 2024 13:17:23 -0400
Subject: [PATCH] WIP update modal positioning and text-link styles.

---
 .../site-header/menu-modal/menu-modal.vue     | 100 +++++++++--------
 src/ux-components/text-link/text-link.vue     | 102 +++++++++---------
 2 files changed, 102 insertions(+), 100 deletions(-)

diff --git a/src/iss-components/site-header/menu-modal/menu-modal.vue b/src/iss-components/site-header/menu-modal/menu-modal.vue
index 3d6c6661..cc506b49 100644
--- a/src/iss-components/site-header/menu-modal/menu-modal.vue
+++ b/src/iss-components/site-header/menu-modal/menu-modal.vue
@@ -5,7 +5,21 @@
             type="button"
             :class="[isActive ? 'active' : '']"
             aria-label="Hamburger Menu (modal window)"
-            @click="toggle()">
+            @click="toggleModal">
+            <div class="bar1"></div>
+            <div class="bar2"></div>
+            <div class="bar3"></div>
+        </button>
+    </div>
+    <div class="menu-modal-container">
+        <button
+            aria-hidden="true"
+            tabindex="-1"
+            class="menu-button"
+            type="button"
+            :class="[isActive ? 'active' : '']"
+            aria-label="Hamburger Menu (modal window)"
+            @click="toggleModal">
             <div class="bar1"></div>
             <div class="bar2"></div>
             <div class="bar3"></div>
@@ -18,19 +32,8 @@
         data-bs-backdrop="false"
         tabindex="-1"
         aria-labelledby="footerModalLabel"
-        aria-hidden="true">
-        <div class="menu-modal-container">
-            <button
-                class="menu-button"
-                type="button"
-                :class="[isActive ? 'active' : '']"
-                aria-label="Hamburger Menu (modal window)"
-                @click="toggle()">
-                <div class="bar1"></div>
-                <div class="bar2"></div>
-                <div class="bar3"></div>
-            </button>
-        </div>
+        aria-hidden="true"
+        v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }">
         <div class="modal-dialog modal-fullscreen">
             <div class="modal-content">
                 <div class="modal-header visually-hidden">
@@ -40,30 +43,29 @@
                 </div>
                 <div class="modal-body d-flex flex-column">
                     <textLink
-                        linkType="navigation"
-                        text="Terms of service"
+                        linkType="newWindowLink"
+                        text="Terms of use"
                         href="//www.safelite.com/terms-of-use"
                         target="_blank" />
                     <textLink
-                        linkType="navigation"
+                        linkType="newWindowLink"
                         text="Your privacy choices"
                         href="//www.safelite.com/privacy-center"
                         target="_blank">
                         <template #after-text>
                             <img
                                 class="ccpa-icon"
-                                data-id="ccpa-icon"
                                 src="~@/assets/img/icons/ccpa-icon.svg"
                                 alt="Your privacy choices" />
                         </template>
                     </textLink>
                     <textLink
-                        linkType="navigation"
+                        linkType="newWindowLink"
                         text="Warranty"
                         href="//www.safelite.com/national-lifetime-warranty"
                         target="_blank" />
                     <textLink
-                        linkType="navigation"
+                        linkType="newWindowLink"
                         text="Notice at collection"
                         href="https://www.safelite.com/ccpa-privacy-policy"
                         target="_blank" />
@@ -77,8 +79,9 @@
 </template>
 
 <script>
-import textLink from '@/ux-components/text-link/text-link.vue';
+import textLink from '@/ux-components/text-link/text-link';
 import { Modal } from 'bootstrap';
+import baseMixin from '@/mixins/base-mixin.js';
 
 export default {
     name: 'menu-modal',
@@ -88,33 +91,32 @@ export default {
     data() {
         return {
             isActive: false,
-            currentFooterAndHeaderHeight: 0,
         };
     },
     methods: {
-        toggle() {
+        toggleModal() {
             if (this.isActive) {
-                // hide modal
-                this.isActive = false;
-                const modal = Modal.getInstance(
-                    document.getElementById('footerModal')
-                );
-                modal?.hide();
+                this.closeModal();
             } else {
-                // show modal
-                this.currentFooterAndHeaderHeight =
-                    this.getFooterInfoBoxHeight() + 56;
-                this.isActive = true;
-                const modal = Modal.getOrCreateInstance(
-                    document.getElementById('footerModal')
-                );
-                modal?.show();
-                document.querySelector('.fade-on-route-transition').scrollTo({
-                    top: 0,
-                    behavior: 'instant',
-                });
+                this.openModal();
             }
         },
+        openModal() {
+            Modal.getOrCreateInstance(
+                document.getElementById('footerModal')
+            ).show();
+        },
+        closeModal() {
+            Modal.getInstance(document.getElementById('footerModal')).hide();
+        },
+        show() {
+            this.isActive = true;
+            window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+        },
+        hide() {
+            const self = this;
+            self.isActive = false;
+        },
     },
 };
 </script>
@@ -122,7 +124,7 @@ export default {
 <style lang="scss" scoped>
 .menu-modal-container {
     position: absolute;
-    padding: 1.47rem 1rem 1.47rem 1.47rem;
+    padding: 1.47rem 0.5rem 1.47rem 1.47rem;
     right: 0;
     button {
         border: none;
@@ -138,6 +140,7 @@ export default {
             justify-content: center;
             align-items: center;
             padding: 0; //Required to prevent 'squish' on iPhone
+            z-index: 1050;
             .bar1,
             .bar2,
             .bar3 {
@@ -161,14 +164,12 @@ export default {
 }
 .modal {
     &.menu-modal {
-        max-width: 100%;
         left: auto;
         height: calc(100% - 56px);
         top: 56px;
         border-top: 1px solid $gray-300;
         overflow-x: visible;
         overflow-y: visible;
-        z-index: 3;
         .modal-body {
             padding: 2rem;
             .ccpa-icon {
@@ -180,18 +181,15 @@ export default {
         .modal-fullscreen {
             width: 100vw;
         }
-        .navigation-link {
-            margin-bottom: 1.5rem;
-        }
         .modal-footer {
             border-top: none;
             padding: 2rem;
         }
         .menu-modal-container {
             position: absolute;
-            padding: 1.47rem 1rem 1.47rem 1.47rem;
-            right: 0.5rem;
-            top: -4.5rem;
+            padding: 1.47rem 0 1.47rem 1.47rem;
+            right: 0;
+            top: -5rem;
             button {
                 border: none;
                 &.menu-button {
@@ -201,8 +199,6 @@ export default {
                     box-shadow: none;
                     background-color: $white;
                     position: relative;
-                    right: -0.5rem;
-                    top: 0.5rem;
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue
index 5932256a..9f98e285 100644
--- a/src/ux-components/text-link/text-link.vue
+++ b/src/ux-components/text-link/text-link.vue
@@ -1,33 +1,38 @@
 <template>
     <a
-      v-if="linkType === 'navigation'"
-      class="navigation-link"
-      :href="href"
-      @click="handleClick">
-      {{ text }}<slot name="after-text"></slot>
+        v-if="linkType === 'navigation'"
+        class="navigation-link"
+        :href="href"
+        @click="handleClick">
+        {{ text }}<slot name="after-text"></slot>
     </a>
     <a
-      v-else-if="linkType === 'footer'"
-      class="footer-link"
-      :href="href"
-      target="_blank"
-      @click="handleClick">
-      {{ text }}<slot name="after-text"></slot>
+        v-else-if="linkType === 'footer'"
+        class="footer-link"
+        :href="href"
+        target="_blank"
+        @click="handleClick">
+        {{ text }}<slot name="after-text"></slot>
     </a>
     <a
-      v-else-if="linkType === 'textSmall'"
-      class="small"
-      :href="href"
-      @click="handleClick">
-      {{ text }}<slot name="after-text"></slot>
+        v-else-if="linkType === 'textSmall'"
+        class="small"
+        :href="href"
+        @click="handleClick">
+        {{ text }}<slot name="after-text"></slot>
+    </a>
+    <a v-else-if="linkType === 'text'" :href="href" @click="handleClick">
+        {{ text }}<slot name="after-text"></slot>
     </a>
     <a
-      v-else-if="linkType === 'text'"
-      :href="href"
-      @click="handleClick">
-      {{ text }}<slot name="after-text"></slot>
-    </a>
-  </template>
+        v-else-if="linkType === 'newWindowLink'"
+        class="new-window-link"
+        :href="href"
+        target="_blank"
+        @click="handleClick"
+        >{{ text }}<slot name="after-text"></slot
+    ></a>
+</template>
 
 <script>
 export default {
@@ -36,8 +41,8 @@ export default {
         linkType: String,
         text: String,
         href: {
-            type: String
-        }
+            type: String,
+        },
     },
     emits: ['click-event'],
     methods: {
@@ -49,13 +54,13 @@ export default {
                 true
             );
             this.$emit('click-event');
-        }
-    }
+        },
+    },
 };
 </script>
 
 <style lang="scss" scoped>
-  a {
+a {
     color: $blue;
     text-underline-offset: 5px;
     line-height: 2;
@@ -63,31 +68,32 @@ export default {
     font-weight: 500;
     max-width: fit-content;
     &:hover {
-      color: $blue-700;
+        color: $blue-700;
     }
     &.small {
-      line-height: 24px;
-      &:hover {
-        color: $blue-700;
-      }
+        line-height: 24px;
+        &:hover {
+            color: $blue-700;
+        }
     }
-    &.navigation-link {
-      color: $black;
-      line-height: 26px;
-      white-space: nowrap;
-      align-items: center;
+    &.navigation-link,
+    &.new-window-link {
+        color: $black;
+        line-height: 26px;
+        white-space: nowrap;
+        align-items: center;
     }
     &.footer-link {
-      color: $gray-600;
-      text-decoration: none;
-      line-height: 20px;
-      padding: 0 0 2px 0;
-      font-weight: 400;
-      font-size: 0.75rem;
-      &:hover {
+        color: $gray-600;
+        text-decoration: none;
+        line-height: 20px;
         padding: 0 0 2px 0;
-        text-decoration: underline;
-      }
+        font-weight: 400;
+        font-size: 0.75rem;
+        &:hover {
+            padding: 0 0 2px 0;
+            text-decoration: underline;
+        }
     }
-  }
-  </style>
+}
+</style>