@worksafevictoria/wcl7.5 1.1.0-beta.4 → 1.1.0-beta.40

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)
@@ -514,12 +511,13 @@ export default {
       this.screenWidth()
     }
     if (this.$nuxt) {
-      this.$nuxt.$on('site-search', (query) => {
-        this.searchQuery = query
-        if (query) {
-          this.showSearch()
-        }
-      })
+      //console.log('🚀 ~ this.$nuxt.$on ~ this.$nuxt:', this.$nuxt)
+      // this.$nuxt.$on('site-search', (query) => {
+      //   this.searchQuery = query
+      //   if (query) {
+      //     this.showSearch()
+      //   }
+      // })
     }
   },
   methods: {
@@ -658,7 +656,7 @@ export default {
         refID,
         parentIndex,
         secondIndex,
-        thirdIndex
+        thirdIndex,
       )
       if (theLI) {
         let A = theLI.getElementsByTagName('A')[0]
@@ -670,7 +668,7 @@ export default {
         refID,
         parentIndex,
         secondIndex,
-        thirdIndex
+        thirdIndex,
       )
       if (theLI) {
         let A = theLI.getElementsByTagName('A')[0]
@@ -860,7 +858,7 @@ 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)
     },
@@ -868,8 +866,8 @@ export default {
       if (this.$nuxt) {
         this.$nuxt.$emit('scrollToTop')
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

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

@@ -3,6 +3,7 @@ import ContrastMode from './index.vue'
 export default {
     title: 'Global/ContrastMode',
     component: ContrastMode,
+    tags: ['autodocs'],
   }
   
   const Template = (args) => ({

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

@@ -159,7 +159,8 @@ export default {
       }
     }
     .modal-body {
-      padding: 32px;
+      padding: 0px 32px 0px;
+      margin-top: 16px;
       fieldset {
         display: flex;
         flex-direction: row;

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/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, '')
@@ -283,15 +282,16 @@ export default {
   },
   mounted() {
     if (this.$nuxt?.$on) {
-      this.$nuxt.$on('scrollToTop', () => {
-        setTimeout(() => {
-          const title = this.$refs.title
-          if (title) {
-            title.$el.setAttribute('tabindex', 0)
-            title.$el.focus()
-          }
-        }, 500)
-      })
+      // console.log('🚀 ~ this.$nuxt.$on ~ this.$nuxt:', this.$nuxt)
+      // this.$nuxt.$on('scrollToTop', () => {
+      //   setTimeout(() => {
+      //     const title = this.$refs.title
+      //     if (title) {
+      //       title.$el.setAttribute('tabindex', 0)
+      //       title.$el.focus()
+      //     }
+      //   }, 500)
+      // })
     }
   },
   beforeDestroy() {
@@ -316,20 +316,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
   }
 }

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

@@ -137,7 +137,8 @@ export default {
         }
     },
     mounted() {
-        if (process.client) {
+      let winHref = window.location.href
+          if (winHref.toLowerCase().includes("worksafe")) {
             this.url = window.location.href;
         }
     },

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

@@ -9,23 +9,7 @@ const stripContentFull =
   export default {
     title: 'Global/Strip',
     component: Strip,
-    argTypes: {
-      stripHeading: {
-        control: 'text'
-      },
-      stripContent: {
-        control: 'text'
-      },
-      rtl: {
-        control: 'boolean'
-      },
-      type: {
-        control: 'text'
-      },
-      mini: {
-        control: 'boolean'
-      }
-    }
+    tags: ['autodocs'],
   }
   
   export const MiniAlertStrip = {

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

@@ -12,7 +12,7 @@
       @dismissed="handleDismissed()"
     >
       <div
-        :role="mini ? 'link' : false"
+        :role="mini ? 'link' : null"
         :class="type + '-strip__inner-wrap'"
         :tabindex="mini ? 0 : false"
         :style="mini ? 'cursor: pointer;' : false"
@@ -331,11 +331,15 @@ export default {
 
       a {
         color: $black;
-
-        &:focus {
+        text-decoration: none;
+      }
+      a:hover {   
           text-decoration: underline;
         }
-      }
+      a:focus {
+          text-decoration: underline;
+        }
+    
     }
     &__icon {
       &--caret {

package/src/components/Paragraphs/Accordion/index.stories.js

@@ -30,6 +30,7 @@ const mockAccordionItems = [
 export default {
   title: 'Paragraphs/Accordion',
   component: Accordion,
+  tags: ['autodocs'],
   argTypes: {
     titleTag: {
       control: 'select',

package/src/components/Paragraphs/Breakout/index.stories.js

@@ -3,6 +3,7 @@ import Breakout from './index.vue'
 export default {
   title: 'Paragraphs/Breakout',
   component: Breakout,
+  tags: ['autodocs'],
   argTypes: {
     headingTag: {
       control: 'select',

package/src/components/Paragraphs/BrowseContent/index.stories.js

@@ -5,6 +5,7 @@ const bundleContent = ['news', 'page']
 export default {
   title: 'Paragraphs/BrowseContent',
   component: { BrowseContent },
+  tags: ['autodocs'],
   argTypes: {
     background: {
       control: 'select',