@worksafevictoria/wcl7.5 1.1.0-beta.6 → 1.1.0-beta.61

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

@@ -11,7 +11,7 @@
           <column>
             <div class="mobilescreen">Reviewed on {{ updateDate }}</div>
             <div v-if="!submitted">
-              <div style="margin-right:10px; display:inline">
+              <div style="margin-right: 10px; display: inline">
                 <strong>Was this page helpful?</strong>
               </div>
               <input
@@ -86,7 +86,7 @@
                     Cancel
                   </button>
                   <cta-button
-                    style="float:right;"
+                    style="float: right"
                     :url="''"
                     :rtl="rtl"
                     @clicked="submitFeedback()"
@@ -181,7 +181,7 @@
                     :key="subIndex"
                     class="app-footer-menu__item"
                     :class="{
-                      'app-footer-menu__item--hide': !menuItem.isOpen
+                      'app-footer-menu__item--hide': !menuItem.isOpen,
                     }"
                   >
                     <a
@@ -249,7 +249,7 @@
                   <li
                     class="app-footer-menu__item app-footer-menu__address app-footer-menu__item--link"
                     :class="{
-                      'app-footer-menu__item--hide': !contactMenuIsOpen
+                      'app-footer-menu__item--hide': !contactMenuIsOpen,
                     }"
                   >
                     <p>
@@ -261,7 +261,7 @@
                   <li
                     class="app-footer-menu__item app-footer-menu__item--link"
                     :class="{
-                      'app-footer-menu__item--hide': !contactMenuIsOpen
+                      'app-footer-menu__item--hide': !contactMenuIsOpen,
                     }"
                   >
                     <a class="dark" href="tel:+611800136089">1800 136 089</a>
@@ -269,7 +269,7 @@
                   <li
                     class="app-footer-menu__item app-footer-menu__item--link"
                     :class="{
-                      'app-footer-menu__item--hide': !contactMenuIsOpen
+                      'app-footer-menu__item--hide': !contactMenuIsOpen,
                     }"
                   >
                     <nuxt-link class="dark" to="/contact-worksafe"
@@ -337,7 +337,7 @@
             <button
               class="app-footer__main__subscribe-col__btn"
               :class="{
-                'app-footer__main__subscribe-btn--workwell': isWorkwell
+                'app-footer__main__subscribe-btn--workwell': isWorkwell,
               }"
               @click="subscribe"
             >
@@ -385,25 +385,25 @@ export default {
     Container,
     Row,
     Icon,
-    CtaButton
+    CtaButton,
   },
   props: {
     footerMenu: {
       type: Array,
-      required: true
+      required: true,
     },
     changedDate: {
       type: String,
-      required: true
+      required: true,
     },
     isWorkwell: {
       type: Boolean,
-      default: false
+      default: false,
     },
     storybook: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
@@ -430,8 +430,8 @@ export default {
         webform_id: 'page_feedback_form',
         page_url: '',
         was_the_information_on_this_page_helpful_: '',
-        message: ''
-      }
+        message: '',
+      },
     }
   },
   computed: {
@@ -444,7 +444,7 @@ export default {
     },
     processID() {
       return `${Date.now()}-${Math.floor(Math.random() * 10000)}`
-    }
+    },
   },
   watch: {
     $route() {
@@ -452,10 +452,10 @@ export default {
       this.submitted = false
     },
     showForm: {
-      handler: function() {
+      handler: function () {
         this.initialiseFeedback()
-      }
-    }
+      },
+    },
   },
   mounted() {
     this.$nextTick(() => {
@@ -510,7 +510,8 @@ export default {
       const attrs = {
         event: 'custom.interaction.helpful',
         label: this.response.was_the_information_on_this_page_helpful_,
-        title: this.$store?.state?.page?.content?.title
+        //title: this.$store?.state?.page?.content?.title,
+        title: this.$pageStore?.content?.title,
       }
       if (this.$gtm) {
         this.$gtm.push({ event: 'custom.interaction.helpful', ...attrs })
@@ -518,20 +519,21 @@ export default {
     },
     fireGtagFeedback() {
       const attrs = {
-        title: this.$store?.state?.page?.content?.title,
+        //title: this.$store?.state?.page?.content?.title,
+        title: this.$pageStore?.content?.title,
         label: this.response.was_the_information_on_this_page_helpful_,
-        processID: this.processID
+        processID: this.processID,
       }
       if (this.$gtm) {
         this.$gtm.push({
           event: 'custom.interaction.helpful.feedback',
-          ...attrs
+          ...attrs,
         })
       }
     },
     backToTop() {
-      if (!this.storybook) {
-        this.$nuxt.$emit('scrollToTop')
+      if (this.$bus) {
+        this.$bus.$emit('scrollToTop')
       }
     },
     isAbsoluteUrl(uri) {
@@ -617,13 +619,13 @@ export default {
           this.$gtm.push({
             event: 'custom.interaction.outboundlink',
             category: item.title,
-            label: item.absolute
+            label: item.absolute,
           })
         }
         window.open(item.absolute)
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

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

@@ -7,7 +7,7 @@
       <div
         v-if="
           (!isSecondLevelOpen && screen === 'desktop') ||
-            (!isMobileMenuOpen && screen === 'mobile')
+          (!isMobileMenuOpen && screen === 'mobile')
         "
         class="app-header__app-branding"
       >
@@ -29,7 +29,7 @@
         <button
           v-if="
             (isSecondLevelOpen && screen === 'desktop') ||
-              (isMobileMenuOpen && screen === 'mobile')
+            (isMobileMenuOpen && screen === 'mobile')
           "
           ref="closeMenuButton"
           class="dark"
@@ -56,7 +56,7 @@
       <nav
         v-if="isMobileMenuOpen || screen === 'desktop'"
         :class="{
-          'styled-scrollbar': screen === 'mobile' && !isSecondLevelOpen
+          'styled-scrollbar': screen === 'mobile' && !isSecondLevelOpen,
         }"
       >
         <ul class="app-header__nav-menu">
@@ -75,7 +75,7 @@
               @click.prevent="
                 firstLevelClick(
                   firstLevelLink,
-                  `firstLevelMenuItem-${parentIndex}`
+                  `firstLevelMenuItem-${parentIndex}`,
                 )
               "
               @mouseover="mouseHover('firstLevelMenuItem', parentIndex)"
@@ -114,7 +114,8 @@
                 <div
                   class="sub-nav-container__wrap"
                   :class="{
-                    'styled-scrollbar': screen === 'mobile' && isSecondLevelOpen
+                    'styled-scrollbar':
+                      screen === 'mobile' && isSecondLevelOpen,
                   }"
                 >
                   <div
@@ -136,12 +137,11 @@
                   <div class="selected-items">
                     <ul v-if="firstLevelLink.below" class="sub-nav-group">
                       <li
-                        v-for="(secondLevelLink,
-                        secondIndex) in firstLevelLink.below"
+                        v-for="(
+                          secondLevelLink, secondIndex
+                        ) in firstLevelLink.below"
                         :key="secondLevelLink.key"
-                        :ref="
-                          `secondLevelMenuItem-${parentIndex}-${secondIndex}`
-                        "
+                        :ref="`secondLevelMenuItem-${parentIndex}-${secondIndex}`"
                         class="sub-nav-parent-item"
                       >
                         <a
@@ -154,41 +154,41 @@
                             searchFocus(
                               secondIndex,
                               firstLevelLink.below.length,
-                              $event
+                              $event,
                             )
                           "
                           @click.prevent="
                             secondLevelClick(
                               secondLevelLink,
-                              `secondLevelMenuItem-${parentIndex}-${secondIndex}`
+                              `secondLevelMenuItem-${parentIndex}-${secondIndex}`,
                             )
                           "
                           @mouseover="
                             mouseHover(
                               'secondLevelMenuItem',
                               parentIndex,
-                              secondIndex
+                              secondIndex,
                             )
                           "
                           @mouseleave="
                             mouseLeave(
                               'secondLevelMenuItem',
                               parentIndex,
-                              secondIndex
+                              secondIndex,
                             )
                           "
                           @focusin="
                             mouseHover(
                               'secondLevelMenuItem',
                               parentIndex,
-                              secondIndex
+                              secondIndex,
                             )
                           "
                           @focusout="
                             mouseLeave(
                               'secondLevelMenuItem',
                               parentIndex,
-                              secondIndex
+                              secondIndex,
                             )
                           "
                         >
@@ -213,35 +213,35 @@
                             searchFocus(
                               secondIndex,
                               firstLevelLink.below.length,
-                              $event
+                              $event,
                             )
                           "
                           @mouseover.native="
                             mouseHover(
                               'secondLevelMenuItem',
                               parentIndex,
-                              secondIndex
+                              secondIndex,
                             )
                           "
                           @mouseleave.native="
                             mouseLeave(
                               'secondLevelMenuItem',
                               parentIndex,
-                              secondIndex
+                              secondIndex,
                             )
                           "
                           @focusin.native="
                             mouseHover(
                               'secondLevelMenuItem',
                               parentIndex,
-                              secondIndex
+                              secondIndex,
                             )
                           "
                           @focusout.native="
                             mouseLeave(
                               'secondLevelMenuItem',
                               parentIndex,
-                              secondIndex
+                              secondIndex,
                             )
                           "
                           @click.native="fireAnalytics(secondLevelLink)"
@@ -253,9 +253,7 @@
                             <div class="selected-title">
                               <nuxt-link
                                 v-if="secondLevelLink.relative"
-                                :ref="
-                                  `secondLevelSelectedTitle-${parentIndex}-${secondIndex}`
-                                "
+                                :ref="`secondLevelSelectedTitle-${parentIndex}-${secondIndex}`"
                                 :to="secondLevelLink.relative"
                                 class="dark"
                                 @click.native="fireAnalytics(secondLevelLink)"
@@ -271,12 +269,11 @@
                                 class="sub-nav-group"
                               >
                                 <li
-                                  v-for="(thirdLevelLink,
-                                  thirdIndex) in secondLevelLink.below"
+                                  v-for="(
+                                    thirdLevelLink, thirdIndex
+                                  ) in secondLevelLink.below"
                                   :key="thirdLevelLink.key"
-                                  :ref="
-                                    `thirdLevelMenuItem-${parentIndex}-${secondIndex}-${thirdIndex}`
-                                  "
+                                  :ref="`thirdLevelMenuItem-${parentIndex}-${secondIndex}-${thirdIndex}`"
                                 >
                                   <nuxt-link
                                     v-if="thirdLevelLink.relative"
@@ -286,7 +283,7 @@
                                       searchFocus(
                                         thirdIndex,
                                         secondLevelLink.below.length,
-                                        $event
+                                        $event,
                                       )
                                     "
                                     @mouseover.native="
@@ -294,7 +291,7 @@
                                         'thirdLevelMenuItem',
                                         parentIndex,
                                         secondIndex,
-                                        thirdIndex
+                                        thirdIndex,
                                       )
                                     "
                                     @mouseleave.native="
@@ -302,7 +299,7 @@
                                         'thirdLevelMenuItem',
                                         parentIndex,
                                         secondIndex,
-                                        thirdIndex
+                                        thirdIndex,
                                       )
                                     "
                                     @focusin.native="
@@ -310,7 +307,7 @@
                                         'thirdLevelMenuItem',
                                         parentIndex,
                                         secondIndex,
-                                        thirdIndex
+                                        thirdIndex,
                                       )
                                     "
                                     @focusout.native="
@@ -318,7 +315,7 @@
                                         'thirdLevelMenuItem',
                                         parentIndex,
                                         secondIndex,
-                                        thirdIndex
+                                        thirdIndex,
                                       )
                                     "
                                     @click.native="
@@ -433,25 +430,25 @@ export default {
     CaretDown,
     CaretLeft,
     MenuIcon,
-    SearchIcon
+    SearchIcon,
   },
   props: {
     headerMenu: {
       type: Array,
-      required: true
+      required: true,
     },
     contentParser: {
       type: Function,
-      required: true
+      required: true,
     },
     isWorkWell: {
       type: Boolean,
-      default: false
+      default: false,
     },
     authenticated: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
@@ -472,7 +469,7 @@ export default {
       CaretLeft,
       MenuIcon,
       windowWidth: 0,
-      searchQuery: null
+      searchQuery: null,
     }
   },
   computed: {
@@ -486,7 +483,7 @@ export default {
     },
     isChrome() {
       return !!window.chrome
-    }
+    },
   },
   watch: {
     $route() {
@@ -503,7 +500,7 @@ export default {
           this.isMobileMenuOpen = true
         }
       }
-    }
+    },
   },
   destroyed() {
     window.removeEventListener('resize', this.screenWidth)
@@ -513,8 +510,8 @@ export default {
       window.addEventListener('resize', this.screenWidth)
       this.screenWidth()
     }
-    if (this.$nuxt) {
-      this.$nuxt.$on('site-search', (query) => {
+    if (this.$bus) {
+      this.$bus.$on('site-search', (query) => {
         this.searchQuery = query
         if (query) {
           this.showSearch()
@@ -658,7 +655,7 @@ export default {
         refID,
         parentIndex,
         secondIndex,
-        thirdIndex
+        thirdIndex,
       )
       if (theLI) {
         let A = theLI.getElementsByTagName('A')[0]
@@ -670,7 +667,7 @@ export default {
         refID,
         parentIndex,
         secondIndex,
-        thirdIndex
+        thirdIndex,
       )
       if (theLI) {
         let A = theLI.getElementsByTagName('A')[0]
@@ -860,16 +857,16 @@ export default {
         event: 'custom.interaction.megamenu.click',
         group: 'Mega Menu',
         label: content.title,
-        url: content.relative
+        url: content.relative,
       }
       // this.$store.dispatch('tracking/event', payload)
     },
     skipToContent() {
-      if (this.$nuxt) {
-        this.$nuxt.$emit('scrollToTop')
+      if (this.$bus) {
+        this.$bus.$emit('scrollToTop')
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

package/src/components/Global/AppHeaderNew/ModalSearch/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="app-search" @keyup.esc="$emit('closed')">
+    <!-- Do not change the position of elements as they are used for keyboard nav -->
+    <button
+      ref="closeSearchButton"
+      class="close app-search__close-btn"
+      @click="$emit('closed')"
+    >
+      Close menu
+      <img class="app-search__close-icon" width="22" height="18" :src="Close" />
+    </button>
+    <form @submit.prevent>
+      <label
+        class="app-search__label font-weight-bold"
+        for="app-search--search-input-box"
+        >Search WorkSafe</label
+      >
+      <search
+        ref="searchInputBox"
+        :google-search-flag="googleSearchFlag"
+        :initial-search-query="searchQuery"
+        :page-limit="pageLimit"
+        :page-number="pageNumber"
+        :content-parser="contentParser"
+        :is-typeahead="false"
+        @loading="(e) => (searchResults = null)"
+        @results="(e) => (searchResults = e)"
+        @selected="$emit('closed')"
+      />
+    </form>
+  </div>
+</template>
+
+<script>
+import Close from '../../../../assets/icons/close.svg?url'
+import Search from '../../../SubComponents/Search/index.vue'
+
+export default {
+  name: 'ModalSearch',
+  components: { Search },
+  props: {
+    searchQuery: {
+      type: String,
+      default: ''
+    },
+    contentParser: {
+      type: Function,
+      required: true
+    },
+    googleSearchFlag: {
+      type: String,
+      default: 'googlerest'
+    }
+  },
+  data() {
+    return {
+      pageLimit: 20,
+      pageNumber: 1,
+      searchResults: null,
+      Close
+    }
+  },
+  mounted() {
+    this.$refs.searchInputBox.$el.querySelector('input').focus()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './styles';
+</style>

package/src/components/Global/AppHeaderNew/ModalSearch/styles.scss

@@ -0,0 +1,43 @@
+@import '../includes';
+@import '../../../../includes/scss/vars/src/colors.scss';
+
+.app-search {
+  position: relative;
+
+  @include fp('padding-left', 16, 60, $start: 320, $end: 980);
+  @include fp('padding-right', 16, 60, $start: 320, $end: 980);
+
+  & > &__close-btn {
+    position: absolute;
+    font-size: 16px;
+    color: $app-menu-black;
+    background: transparent;
+    border: none;
+    padding: 0;
+    font-family: inherit;
+    top: -32px;
+    @include fp('right', 16, 60, $start: 320, $end: 980);
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    span {
+      font-size: 24px;
+      padding-left: 16px;
+    }
+
+    .app-search__close-icon {
+      margin-left: 16px;
+    }
+  }
+
+  &__label {
+    font-size: 18px;
+    line-height: 1.56;
+    display: block;
+    margin-bottom: 8px;
+    margin-top: 56px;
+    color: $app-menu-black;
+  }
+}

package/src/components/Global/AppHeaderNew/includes.scss

@@ -0,0 +1,71 @@
+//
+// Not importing variables and mixins because needs to be
+// as portable as it can for v2 migrate
+//
+// TODO for v2:
+//
+// [] hook up with includes
+//
+
+//
+// Fluid Properties
+// Usage : h1 { @include fp(font-size, 50, 100); //50px at 320, 100px at 1920;}
+//
+$app-menu-yellow: #fdcd59;
+$app-menu-gold: #fecc56;
+$primary-color: $app-menu-gold;
+$app-menu-white: #ffffff;
+$app-menu-black: #191919;
+$app-menu-grey: lightgrey;
+$app-menu-green: #356041;
+$app-menu-border-color: rgba(255, 255, 255, 0.3);
+// $app-menu-border-color: $app-menu-black;
+
+$app-header-background-colour: $app-menu-grey !default;
+$app-header-text-colour: $app-menu-black !default;
+$app-header-hover: $app-menu-gold !default;
+$app-header-active: $app-menu-yellow !default;
+$app-subheader-text-colour: $app-menu-white !default;
+
+@if ($primary-color == #478157) {
+  $app-header-background-colour: $app-menu-green !global;
+  $app-header-outline-colour: $app-menu-white !global;
+  $app-header-hover: $app-menu-white !global;
+  $app-header-active: $app-menu-white !global;
+}
+
+@mixin fp(
+  $property,
+  $min,
+  $max,
+  $start: 320,
+  $end: 1920,
+  $clip: true,
+  $clipAtStart: true,
+  $clipAtEnd: true
+) {
+  $multiplier: calc($max - $min / $end - $start) * 100;
+  $adder: calc($min * $end - $max * $start / $end - $start);
+  $formula: calc(#{$multiplier + 0vw} + #{$adder + 0px});
+  @if $clip and $clipAtStart {
+    @media (max-width: #{$start + 0px}) {
+      #{$property}: $min + 0px;
+    }
+  }
+  @if $clip and $clipAtEnd {
+    @media (min-width: #{$end + 0px}) {
+      #{$property}: $max + 0px;
+    }
+  }
+  #{$property}: $formula;
+}
+
+@mixin visually-hidden {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}