@worksafevictoria/wcl7.5 1.1.0-beta.11 → 1.1.0-beta.111

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);
+}

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

@@ -0,0 +1,74 @@
+import AppHeader from './index.vue'
+import { appHeaderData } from '../../../mock/app-header-new'
+
+const contentParser = () => {
+  return Promise.resolve({
+    results: [
+      {
+        title: 'Content title 1',
+        description: 'Content description 2'
+      }
+    ],
+    offset: 0,
+    numFound: 1000
+  })
+}
+
+
+export default {
+  title: 'Website_Redesign/AppHeader',
+  component: AppHeader,
+  tags: ['autodocs'],
+  data() {
+    return {
+      appHeaderData
+    }
+  },
+  argTypes: {
+    contentParser: {
+      table: { disable: true }
+    }
+  },
+  args: {
+    headerMenu: appHeaderData,
+    contentParser: contentParser,
+    isWorkWell: false,
+    authenticated: false,
+    mainContent: 'Some dummy main content required for this example',
+    footerContent: 'Some dummy footer content required for this example'
+  }
+}
+
+const DefaultContent = (args) => ({
+  components: { AppHeader },
+  setup() {
+    return { args }
+  },
+  template: `
+  <div>
+  <app-header
+  v-bind="args"
+  />
+    <main>
+      <div class="container">
+        <div class="row">
+          <div class="col">
+            {{args.mainContent}}
+          </div>
+        </div>
+      </div>
+    </main>
+    <footer>
+      <div class="container">
+        <div class="row">
+          <div class="col">
+          {{args.footerContent}}
+          </div>
+        </div>
+      </div>
+    </footer>
+  </div>
+  `
+})
+
+export const Default = DefaultContent.bind({})