@worksafevictoria/wcl7.5 1.1.0-beta.73 → 1.1.0-beta.74

package/src/components/Global/DirectoryFilters/SingleTaxonomy/index.vue

@@ -9,77 +9,78 @@
       <span>{{ data.name }}</span>
       <span v-if="numberOfItems > 0">({{ numberOfItems }})</span>
     </filter-button>
-    <div v-if="showMyModal" class="modal fade show wcl-directory-filters__single-tax__modal"
-      tabindex="-1" aria-labelledby="exampleModalLabel" aria-modal="true" role="dialog"
-      style="display: block;">
-      <div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered">
-        <div class="modal-content">
-            <div class="modal-body">
-              <fieldset>
-                <legend>Filter by {{ data.name }}</legend>
-                <div v-for="term in data.terms" :key="term.tid" class="option">
-                  <input
-                    :id="`term_${term.tid}`"
-                    v-model="selectedFilters[`${data.record_id}`]"
-                    type="checkbox"
-                    :name="term.name"
-                    :value="term"
-                    :disabled="term.preselected"
-                    @keyup.enter="(e) => e.target.click()"
-                  />
-                  <label :for="`term_${term.tid}`">{{ term.name }}</label>
-                </div>
-              </fieldset>
-            </div>
-            <div class="modal-footer">
-                <cta-button
-                  v-if="!loading && results !== 0"
-                  :type="'dark'"
-                  :rtl="false"
-                  :focus-outline="'light'"
-                  :workwell="false"
-                  @clicked="showMyModal = !showMyModal"
-                  >Show <span>{{ results }}</span> {{ resultString }}
-                </cta-button>
-                <strong v-else><span v-show="!loading">No results found</span></strong>
-            </div>
+    <b-modal v-model="showMyModal" size="xl" centered no-header scrollable>
+      <template #default>
+        <fieldset>
+          <legend>Filter by {{ data.name }}</legend>
+          <div v-for="term in data.terms" :key="term.tid" class="option">
+            <input
+              :id="`term_${term.tid}`"
+              v-model="selectedFilters[`${data.record_id}`]"
+              type="checkbox"
+              :name="term.name"
+              :value="term"
+              :disabled="term.preselected"
+              @keyup.enter="(e) => e.target.click()"
+            />
+            <label :for="`term_${term.tid}`">{{ term.name }}</label>
+          </div>
+        </fieldset>
+      </template>
+      <template #footer="{ close }">
+        <div>
+          <cta-button
+            v-if="!loading && results !== 0"
+            :type="'dark'"
+            :rtl="false"
+            :focus-outline="'light'"
+            :workwell="false"
+            @clicked="close"
+            >Show <span>{{ results }}</span> {{ resultString }}
+          </cta-button>
+          <strong v-else
+            ><span v-show="!loading">No results found</span></strong
+          >
         </div>
-    </div>
-  </div>
+      </template>
+    </b-modal>
   </div>
 </template>
 <script>
 import CtaButton from '../../../SubComponents/CtaButton/index.vue'
 import FilterButton from '../../../Common/FilterButton/index.vue'
+import { BModal, BButton } from 'bootstrap-vue-next'
 
 export default {
   components: {
     CtaButton,
-    FilterButton
+    FilterButton,
+    'b-modal': BModal,
+    'b-button': BButton,
   },
   props: {
     data: {
       type: Object,
-      required: true
+      required: true,
     },
     results: {
       type: Number,
-      required: true
+      required: true,
     },
     loading: {
       type: Boolean,
-      required: false
-    }
+      required: false,
+    },
   },
   data() {
     return {
       selectedFilters: {
         [this.data.record_id]: this.data.terms.filter(
-          (term) => term.preselected
-        )
+          (term) => term.preselected,
+        ),
       },
       hasReset: false,
-      showMyModal: false
+      showMyModal: false,
     }
   },
   computed: {
@@ -90,7 +91,7 @@ export default {
       let s = 's'
       this.results === 1 ? (s = '') : false
       return 'Result' + s + ' '
-    }
+    },
   },
   watch: {
     selectedFilters: {
@@ -98,8 +99,8 @@ export default {
       deep: true,
       handler() {
         this.emitSelectedValues()
-      }
-    }
+      },
+    },
   },
   methods: {
     emitSelectedValues() {
@@ -113,91 +114,61 @@ export default {
       this.selectedFilters[this.data.record_id] = this.selectedFilters[
         this.data.record_id
       ].filter((item) => item.preselected)
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss">
-  //
-// Global non scoped scss!
-// Modal inner overrides only
-//
-// Component styles add in scoped
-// block below
-//
-.wcl-directory-filters__single-tax {
-  // !!keep empty!! //
-  &__caret {
-    padding-left: 8px;
-  }
-
-  .modal {
-    background: rgba(0,0,0,0.5);
-  }
-  .modal-backdrop {
-    display: none;
-  }
-
-  &__modal {
-    .modal-content {
-      border-radius: 8px;
-    }
-
-    .modal-xl {
-      max-width: 920px;
-    }
-    
-    .modal-header {
-      position: absolute;
-      width: 100%;
-      left: 0;
-      right: 0;
-      padding: 32px;
-      border: none;
-      .close {
-        z-index: 1;
+// Putting all modal styling in one place
+// Not working from modal.scss
+.modal-dialog {
+  .modal-content {
+    .modal-body {
+      .section-group__block {
+        max-width: 100%;
       }
     }
-    .modal-body {
-      padding: 0px 32px 0px;
-      margin-top: 16px;
-      fieldset {
+    border-radius: 8px;
+  }
+  .modal-body {
+    padding: 32px;
+    fieldset {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      legend {
+        font-size: 28px;
+        font-weight: 700;
+        line-height: 32px;
+        letter-spacing: 0px;
+        margin-bottom: 32px;
+      }
+      .option {
+        margin-bottom: 32px;
+        flex-basis: 50%;
         display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        legend {
-          font-size: 28px;
-          font-weight: 700;
-          line-height: 32px;
-          letter-spacing: 0px;
-          margin-bottom: 32px;
+        @media screen and (max-width: 600px) {
+          flex-basis: 100%;
         }
-        .option {
-          margin-bottom: 32px;
-          flex-basis: 50%;
-          display: flex;
-          @media screen and (max-width: 600px) {
-            flex-basis: 100%;
-          }
-          input[type='checkbox'] {
-            height: 24px;
-            border: 1px solid #bababa;
-            width: 24px;
-            cursor: pointer;
-          }
-          label {
-            margin: 0px;
-            width: 80%;
-            position: relative;
-            left: 16px;
-            cursor: pointer;
-          }
+        input[type='checkbox'] {
+          height: 24px;
+          border: 1px solid #bababa;
+          width: 24px;
+          cursor: pointer;
+        }
+        label {
+          margin: 0px;
+          width: 80%;
+          position: relative;
+          left: 16px;
+          cursor: pointer;
         }
       }
     }
-    .modal-footer {
-      border: none;
-    }
+  }
+  .modal-footer,
+  .modal-header {
+    border: none;
   }
 }
 </style>

package/src/components/Global/GlobalNotice/index.vue

@@ -1,68 +1,69 @@
 <template>
-    <div 
-    v-if="displayGlobal"
-    id="global-notice-modal"
-    ref="globalNoticeModal"
-    class="modal show"
+  <b-modal
+    v-model="displayGlobal"
     aria-labelledby="global-notice-modal"
-    role="dialog"
-    tabindex="-1"
-    aria-modal="true"
-    style="display: block;">
-
-    <div class="modal-dialog modal-dialog-centered">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="btn-close" @click="setCookie(), displayGlobal = !displayGlobal" aria-label="close"></button>
+    no-close-on-backdrop
+    centered
+    no-footer
+    size="md"
+    @close="setCookie"
+  >
+    <template #default="{ close }">
+      <div>
+        <div class="modal-title">
+          Understand changes to the 2023-24 WorkCover premium
         </div>
-        <div class="modal-body">
-          <div class="modal-heading">
-            Understand changes to the 2023-24 WorkCover premium
-          </div>
+        <div>
+          Information for employers on changes to premium rates, how premium is
+          calculated and key dates.
+        </div>
+        <div class="notice-buttons">
           <div>
-            Information for employers on changes to premium rates, how premium is
-            calculated and key dates.
+            <button
+              id="open_page"
+              type="button"
+              role="button"
+              class="notice-buttons isWiderYellow hasIcon justify-content-start"
+              style="order: 1"
+              aria-label="Open information about premium changes"
+              @click="
+                () => {
+                  goToPage('/2023-24-workcover-premium-changes')
+                  close()
+                }
+              "
+            >
+              2023-24 premium FAQs
+            </button>
           </div>
-          <div class="modal-buttons">
-            <div>
-              <button
-                id="open_page"
-                type="button"
-                role="button"
-                class="modal-buttons isWiderYellow hasIcon justify-content-start "
-                style="order: 1"
-                aria-label="Open information about premium changes"
-                @click="setCookie(), goToPage('/2023-24-workcover-premium-changes'), displayGlobal = !displayGlobal"
-              >
-                2023-24 premium FAQs
-              </button>
-            </div>
-            <div>
-              <button
-                id="modal_close"
-                type="button"
-                role="button"
-                class="modal-buttons isWiderGray hasIcon justify-content-start "
-                style="order: 2"
-                data-bs-dismiss="global-notice-modal"
-                aria-label="Close modal and go to WorkSafe website"
-                @click="setCookie(), displayGlobal = !displayGlobal"
-              >
-                Continue to WorkSafe
-              </button>
-            </div>
+          <div>
+            <button
+              id="modal_close"
+              type="button"
+              role="button"
+              class="notice-buttons isWiderGray hasIcon justify-content-start"
+              style="order: 2"
+              data-bs-dismiss="global-notice-modal"
+              aria-label="Close modal and go to WorkSafe website"
+              @click="close"
+            >
+              Continue to WorkSafe
+            </button>
           </div>
         </div>
-        <div style="display: none;" class="modal-footer"></div>
       </div>
-    </div>  
-  </div>
+    </template>
+  </b-modal>
 </template>
 
 <script>
+import { BModal } from 'bootstrap-vue-next'
 
 export default {
   name: 'GlobalNotice',
+  components: {
+    'b-modal': BModal,
+  },
   data() {
     return {
       currentURL: '',
@@ -73,7 +74,7 @@ export default {
     showGlobalNotice() {
       //Check first if SHOW_GLOBAL_NOTICE have been turned on in the environment variable
       return process.env.SHOW_GLOBAL_NOTICE === false ? false : true
-    }
+    },
   },
   mounted() {
     window.addEventListener('load', this.checkPage())
@@ -83,8 +84,12 @@ export default {
       localStorage.setItem('globalModalHidden', 'true')
     },
     goToPage(link) {
-     if (process.env.IS_STORYBOOK === 'TRUE') {
-        alert('Will go to: ' + link + ' and close notice - clear local storage and refresh to redisplay')
+      if (process.env.IS_STORYBOOK === 'TRUE') {
+        alert(
+          'Will go to: ' +
+            link +
+            ' and close notice - clear local storage and refresh to redisplay',
+        )
       } else {
         window.open(link, '_self')
       }
@@ -95,63 +100,32 @@ export default {
         this.setCookie()
         this.displayGlobal = false
       } else if (typeof window !== 'undefined') {
-        
         this.displayGlobal =
           this.showGlobalNotice === true &&
           !localStorage.getItem('globalModalHidden')
       } else {
         this.displayGlobal = process.env.SHOW_GLOBAL_NOTICE === true
       }
-      
-    }
-  }
+    },
+  },
 }
 </script>
-<style lang="scss">
-@import '../../../assets/styles/generated-icons.scss';
-@import '../../../includes/scss/all';
-
-// modal and modal backdrop styles required in order to display the overlay behind the modal
-#global-notice-modal {
-  .modal-dialog-centered {
-    border-radius: 6px !important;
-    // box-shadow: 0 0 16px 8px rgba(0, 0, 0, 0.24) !important;
-    left: 50%;
-    margin-left: -200px;
-    margin-top: -370px;
-    top: 50%;
-    width: 400px !important;
-  }
-}
-
-.modal {
-  background: rgba(0,0,0,0.5)
-}
-
-.modal-backdrop {
-  display: none;
-}
-
-.modal-header {
-  border: none;
-}
-
-.modal-heading {
+<style lang="scss" scoped>
+:deep(.modal-title) {
   font-size: 26px;
   font-weight: 700;
   line-height: 30px;
   letter-spacing: 0px;
   margin-bottom: 16px;
+  display: flex;
+  justify-content: flex-end !important;
 }
+</style>
+<style lang="scss">
+@import '../../../assets/styles/generated-icons.scss';
+@import '../../../includes/scss/all';
 
-.modal-content {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 24px;
-  padding: 16px;
-}
-  
-.modal-buttons {
+.notice-buttons {
   position: relative;
   text-decoration: none;
   font-style: normal;