@worksafevictoria/wcl7.5 1.1.0-beta.9 → 1.1.0-beta.90

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,90 +114,7 @@ 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;
-      }
-    }
-    .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;
-          @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;
-          }
-        }
-      }
-    }
-    .modal-footer {
-      border: none;
-    }
-  }
-}
-</style>

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

@@ -5,4 +5,10 @@ export default {
     component: GlobalNotice
   }
   
-  export const Default = {}
+  export const Default = {
+    loaders: [
+      () => { 
+        window.localStorage.removeItem('globalModalHidden')
+      }
+    ]
+  }

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

@@ -1,74 +1,85 @@
 <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: '',
       displayGlobal: false,
     }
   },
+  computed: {
+    showGlobalNotice() {
+      //Check first if SHOW_GLOBAL_NOTICE have been turned on in the environment variable
+      return (this.$config
+        ? this.$config.public.globalNotice
+        : process.env.SHOW_GLOBAL_NOTICE) === false
+        ? false
+        : true
+    },
+  },
   mounted() {
     window.addEventListener('load', this.checkPage())
   },
@@ -77,8 +88,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')
       }
@@ -90,49 +105,34 @@ export default {
         this.displayGlobal = false
       } else if (typeof window !== 'undefined') {
         this.displayGlobal =
-          process.env.SHOW_GLOBAL_NOTICE === 'true' &&
+          this.showGlobalNotice === true &&
           !localStorage.getItem('globalModalHidden')
       } else {
-        this.displayGlobal = process.env.SHOW_GLOBAL_NOTICE === 'true'
+        this.displayGlobal =
+          (this.$config
+            ? this.$config.public.globalNotice
+            : 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
-
-.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;

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

@@ -42,10 +42,9 @@ export default {
     title: 'HeroHeader default example',
     description: '<p class="intro">The page subtitle goes in here... The page subtitle goes in here... The page subtitle goes in here...</p><p><a href="#" class="cta-button">class cta-button</a></p>',
     image:  {
-        url:
-          'https://content.api.worksafe.vic.gov.au/sites/default/files/2020-04/Topic-Coronavirus-COVID-19.jpg',
-        alt: 'Some alt text'
-      },
+      url: process.env.CONTENT_API_URL + '/sites/default/files/2020-04/Topic-Coronavirus-COVID-19.jpg',
+      alt: 'Some alt text'
+    },
     cta: cta_content,
     bgColor: false,
     breadcrumbItems: breadcrumb_content,

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

@@ -48,7 +48,8 @@
               class="wcl-hero-header__content-wrapper__content-col"
               :md="7"
               :class="{
-                [`wcl-hero-header__content-wrapper__content-col--split`]: $slots.side
+                [`wcl-hero-header__content-wrapper__content-col--split`]:
+                  $slots.side,
               }"
             >
               <breadcrumb
@@ -98,9 +99,7 @@
               >
             </column>
           </row>
-          <template v-if="showSocial && type !== 'hero'">
-            <social-share :rtl="rtl" />
-          </template>
+          <social-share v-show="showSocial && type !== 'hero'" :rtl="rtl" />
         </container>
       </div>
       <!-- Type Default -->
@@ -152,7 +151,7 @@
       </column>
       <!-- No Col needed for type Hero -->
     </row>
-    <social-share v-if="showSocial && type === 'hero'" :rtl="rtl" />
+    <social-share v-show="showSocial && type === 'hero'" :rtl="rtl" />
   </container>
 </template>
 <script>
@@ -178,63 +177,63 @@ export default {
     CtaButton,
     HeroHeaderChevron,
     RichText,
-    Icon
+    Icon,
   },
   props: {
     type: {
       type: String,
-      default: 'default'
+      default: 'default',
     },
     title: {
       type: String,
-      default: ''
+      default: '',
     },
     description: {
       type: String,
-      default: ''
+      default: '',
     },
     image: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     cta: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     bgColor: {
       type: Boolean,
-      default: false
+      default: false,
     },
     breadcrumbItems: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     workwell: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showBreadcrumb: {
       type: Boolean,
-      default: true
+      default: true,
     },
     showMask: {
       type: Boolean,
-      default: true
+      default: true,
     },
     showSocial: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   data() {
     return {
       socialShareToggle: false,
       HeroHeaderChevron,
-      CaretDown
+      CaretDown,
     }
   },
   computed: {
@@ -271,7 +270,7 @@ export default {
       //   }
       // }
       return this.title
-    }
+    },
     // Will reintroduce if business requirement
     //   strippedDescription() {
     //     let strippedString = this.description.replace(/(<([^>]+)>)/gi, '')
@@ -282,8 +281,8 @@ export default {
     //   }
   },
   mounted() {
-    if (this.$nuxt?.$on) {
-      this.$nuxt.$on('scrollToTop', () => {
+    if (this.$bus) {
+      this.$bus.$on('scrollToTop', () => {
         setTimeout(() => {
           const title = this.$refs.title
           if (title) {
@@ -295,8 +294,8 @@ export default {
     }
   },
   beforeDestroy() {
-    if (this.$nuxt?.$off) {
-      this.$nuxt.$off('scrollToTop')
+    if (this.$bus) {
+      this.$bus.$off('scrollToTop')
     }
   },
   methods: {
@@ -316,20 +315,20 @@ export default {
         ev.target.scrollIntoView({
           behavior: 'smooth',
           alignToTop: true,
-          block: 'start'
+          block: 'start',
         })
       }
     },
     fireGTM() {
       let attrs = {
         label: this.cta.uri,
-        document_title: this.cta.filename
+        document_title: this.cta.filename,
       }
       if (this.$gtm) {
         this.$gtm.push({ event: 'custom.interaction.download', ...attrs })
       }
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>

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

@@ -21,31 +21,21 @@ const mockData = [
 export default {
   title: 'Global/ProgressBar',
   component: ProgressBar,
-  argTypes: {
-    steeperStyle: {
-      control: 'boolean'
-    },
-    items: {
-      control: 'array'
-    },
-    rtl: {
-      control: 'boolean'
-    }
+  tags: ['autodocs'],
+  args: {
+    items: mockData,
+    rtl: false
   }
 }
 
 export const Steeper = {
   args: {
-    steeperStyle: true,
-    items: mockData,
-    rtl: false
+    steeperStyle: true
   }
 }
 
 export const Default = {
   args: {
-    steeperStyle: false,
-    items: mockData,
-    rtl: false
+    steeperStyle: false
   }
 }