@worksafevictoria/wcl7.5 1.0.0 → 1.1.0-beta.10

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

@@ -17,12 +17,14 @@
           </div>
         </div>
       </column>
+      <!-- Cookie buttons displayed when not xs -->
       <column class="cookie-container__col  hidden-on-xs">
         <div class="cookie-buttons mt-md-3">
           <button
             id="moreBtn"
-            v-b-modal.cookieModal
+            type="button"
             role="button"
+            @click="showCookieModal = !showCookieModal"
             class="cookieBtn moreOptions"
             aria-label="More cookie options"
           >
@@ -34,10 +36,7 @@
             class="cookieBtn yellow hasIcon"
             style="order:1;"
             aria-label="Accept all cookies"
-            @click="
-              clickedCookie('accept')
-              fireGTM()
-            "
+            @click="clickedCookie('accept'), fireGTM()"
           >
             Accept all
           </button>
@@ -47,162 +46,148 @@
             class="cookieBtn black hasIcon"
             style="order:2;"
             aria-label="Reject all cookies"
-            @click="
-              clickedCookie('reject')
-              fireGTM()
-              checkCookie()
-            "
+            @click="clickedCookie('reject'), fireGTM(), checkCookie()"
           >
             Reject all
           </button>
         </div>
       </column>
+      <!-- Cookie buttons displayed when xs -->
       <row class="cookie-links col mt-3 display-on-xs">
         <div>
-          <a id="moreLink" href="#" @click="$bvModal.show('cookieModal')"
+          <a id="moreLink" href="#" @click="showCookieModal = !showCookieModal"
             >More options</a
           >
           <a
             id="acceptAllLink"
             href="#"
-            @click="
-              clickedCookie('accept')
-              fireGTM()
-            "
+            @click="clickedCookie('accept'), fireGTM()"
             >Accept all</a
           >
           <a
             id="rejectAllLink"
             href="#"
-            @click="
-              clickedCookie('reject')
-              fireGTM()
-              checkCookie()
-            "
+            @click="clickedCookie('reject'), fireGTM(), checkCookie()"
             >Reject all</a
           >
         </div>
       </row>
     </row>
-
-    <b-modal
-      id="cookieModal"
-      refs="cookieModal"
-      :visible="visible"
-      role="dialog"
-      scrollable
-      @hidden="reset"
-    >
-      <div slot="modal-title" class="modal-heading">
-        {{ cookieContent.modal.heading }}
-      </div>
-      <div class="modal-content">
-        <fieldset>
-          <row>
-            <column>
-              <h5>{{ cookieContent.modal.functional.heading }}</h5>
-            </column>
-            <column>
-              <label for="modal1CB" class="option"
-                >Necessary<span class="sr-only">functional label</span>
-                <input
-                  id="modal1CB"
-                  type="checkbox"
-                  value="functional"
-                  checked
-                  disabled
-              /></label>
-            </column>
-          </row>
-          <row>
-            <column class="modal-description">{{
-              cookieContent.modal.functional.description
-            }}</column>
-          </row>
-          <hr />
-          <row>
-            <column>
-              <h5>{{ cookieContent.modal.analytics.heading }}</h5>
-            </column>
-            <column>
-              <label for="modal2CB" class="option"
-                ><span class="sr-only">analytics checkbox</span>
-                <input
-                  id="modal2CB"
-                  type="checkbox"
-                  name="modal2CB"
-                  value="analytics"
-              /></label>
-            </column>
-          </row>
-          <row>
-            <column class="modal-description">{{
-              cookieContent.modal.analytics.description
-            }}</column>
-          </row>
-          <hr />
-          <row>
-            <column>
-              <h5>{{ cookieContent.modal.marketing.heading }}</h5>
-            </column>
-            <column text-align="right">
-              <label for="modal3CB" class="option"
-                ><span class="sr-only">marketing checkbox</span>
-                <input
-                  id="modal3CB"
-                  type="checkbox"
-                  name="modal3CB"
-                  value="marketing"
-              /></label>
-            </column>
-          </row>
-          <row>
-            <column class="modal-description">{{
-              cookieContent.modal.marketing.description
-            }}</column>
-          </row>
-        </fieldset>
-      </div>
-      <div slot="modal-footer">
-        <button
-          id="modal_save"
-          type="button"
-          role="button"
-          class="cookieBtn yellow hasIcon"
-          style="order:1;"
-          aria-label="Save cookie settings"
-          @click="
-            clickedCookie('save')
-            fireGTM()
-            checkCookie()
-            $bvModal.hide('cookieModal')
-          "
-        >
-          Save
-        </button>
-        <button
-          id="modal_accept"
-          type="button"
-          role="button"
-          class="cookieBtn black hasIcon"
-          style="order:2;"
-          data-bs-dismiss="cookieModal"
-          aria-label="Accept all cookies"
-          @click="
-            clickedCookie('accept')
-            fireGTM()
-            $bvModal.hide('cookieModal')
-          "
-        >
-          Accept all
-        </button>
-      </div>
-    </b-modal>
+    <!-- Modal -->
+    <div v-if="showCookieModal" class="modal fade show" tabindex="-1" aria-modal="true" role="dialog" style="display: block;">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <div class="modal-heading-text">
+              {{ cookieContent.modal.heading }}
+            </div>
+            <button type="button" class="btn-close" @click="showCookieModal = !showCookieModal" aria-label="close"></button>
+          </div>
+          <div class="modal-body">
+              <fieldset>
+                <row>
+                  <column>
+                    <h5>{{ cookieContent.modal.functional.heading }}</h5>
+                  </column>
+                  <column>
+                    <label for="modal1CB" class="option">
+                      Necessary<span class="visually-hidden">functional label</span>
+                      <input
+                        id="modal1CB"
+                        type="checkbox"
+                        value="functional"
+                        checked
+                        disabled
+                      />
+                    </label>
+                  </column>
+                </row>
+                <row>
+                  <column class="modal-description">
+                    {{cookieContent.modal.functional.description}}
+                  </column>
+                </row>
+                <hr />
+                <row>
+                  <column>
+                    <h5>{{ cookieContent.modal.analytics.heading }}</h5>
+                  </column>
+                  <column>
+                    <label for="modal2CB" class="option">
+                      <span class="visually-hidden">analytics checkbox</span>
+                      <input
+                        id="modal2CB"
+                        type="checkbox"
+                        name="modal2CB"
+                        value="analytics"
+                      />
+                    </label>
+                  </column>
+                </row>
+                <row>
+                  <column class="modal-description">
+                    {{cookieContent.modal.analytics.description}}
+                  </column>
+                </row>
+                <hr />
+                <row>
+                  <column>
+                    <h5>{{ cookieContent.modal.marketing.heading }}</h5>
+                  </column>
+                  <column text-align="right">
+                    <label for="modal3CB" class="option">
+                      <span class="visually-hidden">marketing checkbox</span>
+                      <input
+                        id="modal3CB"
+                        type="checkbox"
+                        name="modal3CB"
+                        value="marketing"
+                      />
+                    </label>
+                  </column>
+                </row>
+                <row>
+                  <column class="modal-description">
+                    {{cookieContent.modal.marketing.description}}
+                  </column>
+                </row>
+              </fieldset>
+            </div>
+            <div class="modal-footer">
+              <button
+                id="modal_save"
+                type="button"
+                role="button"
+                class="cookieBtn yellow hasIcon"
+                style="order:1;"
+                aria-label="Save cookie settings"
+                @click="clickedCookie('save'), fireGTM(), checkCookie(), showCookieModal = !showCookieModal"
+              >
+                Save
+              </button>
+              <button
+                id="modal_accept"
+                type="button"
+                role="button"
+                class="cookieBtn black hasIcon"
+                style="order:2;"
+                data-bs-dismiss="cookieModal"
+                aria-label="Accept all cookies"
+                @click="clickedCookie('accept'), fireGTM(), showCookieModal = !showCookieModal"
+              >
+                Accept all
+              </button>
+            </div>
+          </div>
+        </div>
+    </div>
   </container>
 </template>
 
 <script>
-import { Container, Row, Column } from '../../../index.vue'
+import Container from './../../Containers/Container/index.vue'
+import Row from './../../Containers/Row/index.vue'
+import Column from './../../Containers/Column/index.vue'
 import { analyticsCookies, marketingCookies } from './Constants'
 
 export default {
@@ -227,7 +212,8 @@ export default {
       modalTitle: this.modalHeading,
       analyticsCookies,
       marketingCookies,
-      screenWidth: 0
+      screenWidth: 0,
+      showCookieModal: false
     }
   },
   computed: {

package/src/components/Global/Cookies/styles.scss

@@ -1,5 +1,5 @@
 @import '../../../assets/styles/generated-icons.scss';
-@import '../../../includes/scss/all';
+@import './../../../includes/scss/all';
 
 h3.cookie-header {
   font-weight: 700;
@@ -249,7 +249,15 @@ h3.cookie-header {
   color: $black;
 }
 
-.modal-heading {
+.modal {
+  background: rgba(0,0,0,0.5)
+}
+
+.modal-backdrop {
+  display: none;
+}
+
+.modal-heading-text {
   font-size: 26px;
   font-weight: 700;
   line-height: 32px;

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

@@ -4,62 +4,58 @@
       :has-caret="true"
       :selected="numberOfItems > 0"
       :is-reset="false"
-      @clicked="$bvModal.show(`modal-center-${_uid}`)"
+      @clicked="showMyModal = !showMyModal"
     >
       <span>{{ data.name }}</span>
       <span v-if="numberOfItems > 0">({{ numberOfItems }})</span>
     </filter-button>
-    <b-modal
-      :id="`modal-center-${_uid}`"
-      modal-class="wcl-directory-filters__single-tax__modal"
-      centered
-      scrollable
-      size="xl"
-      :title="data.name"
-      :title-sr-only="true"
-      header-close-label="Close dialog box"
-    >
-      <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 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>
         </div>
-      </fieldset>
-      <template #modal-footer="{ ok }">
-        <!-- Emulate built in modal footer ok and cancel button actions -->
-        <cta-button
-          v-if="!loading && results !== 0"
-          :type="'dark'"
-          :rtl="false"
-          :focus-outline="'light'"
-          :workwell="false"
-          @clicked="ok()"
-          >Show <span>{{ results }}</span> {{ resultString }}</cta-button
-        >
-        <strong v-else><span v-show="!loading">No results found</span></strong>
-      </template>
-    </b-modal>
+    </div>
+  </div>
   </div>
 </template>
 <script>
-import CtaButton from './../../../SubComponents/CtaButton/index.vue'
-import FilterButton from './../../../Common/FilterButton/index.vue'
-import { BModal } from 'bootstrap-vue-next'
+import CtaButton from '../../../SubComponents/CtaButton/index.vue'
+import FilterButton from '../../../Common/FilterButton/index.vue'
 
 export default {
   components: {
     CtaButton,
-    FilterButton,
-    BModal
+    FilterButton
   },
   props: {
     data: {
@@ -82,7 +78,8 @@ export default {
           (term) => term.preselected
         )
       },
-      hasReset: false
+      hasReset: false,
+      showMyModal: false
     }
   },
   computed: {
@@ -92,7 +89,7 @@ export default {
     resultString() {
       let s = 's'
       this.results === 1 ? (s = '') : false
-      return 'Result' + s
+      return 'Result' + s + ' '
     }
   },
   watch: {
@@ -121,7 +118,7 @@ export default {
 }
 </script>
 <style lang="scss">
-//
+  //
 // Global non scoped scss!
 // Modal inner overrides only
 //
@@ -134,13 +131,22 @@ export default {
     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%;

package/src/components/Global/GlobalNotice/index.stories.js

@@ -0,0 +1,8 @@
+import GlobalNotice from './index.vue'
+
+export default {
+    title: 'Global/GlobalNotice',
+    component: GlobalNotice
+  }
+  
+  export const Default = {}