@worksafevictoria/wcl7.5 1.1.0-beta.45 → 1.1.0-beta.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.1.0-beta.45",
+  "version": "1.1.0-beta.47",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

package/src/components/Containers/Subheader/index.vue

@@ -104,8 +104,14 @@ export default {
       // Some custom logic for gov caretaker logic
       if (process.env.CARETAKER && process.env.CARETAKER === 'true') {
         if (!isGovSite(card?.selectedCard?.linkHref)) {
-          this.$store.commit('page/SET_CARETAKER_REF', 'subheader')
-          this.$root.$emit('caretaker-open', card?.selectedCard?.linkHref)
+          // this.$store.commit('page/SET_CARETAKER_REF', 'subheader')
+          // this.$root.$emit('caretaker-open', card?.selectedCard?.linkHref)
+          if (this.$pageStore) {
+            this.$pageStore.caretaker.referrer = 'subheader'
+          }
+          if (this.$bus) {
+            this.$bus.$emit('caretaker-open', card?.selectedCard?.linkHref)
+          }
         } else {
           navigateToPath.call(
             this,

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

@@ -510,14 +510,13 @@ export default {
       window.addEventListener('resize', this.screenWidth)
       this.screenWidth()
     }
-    if (this.$nuxt) {
-      //console.log('🚀 ~ this.$nuxt.$on ~ this.$nuxt:', this.$nuxt)
-      // this.$nuxt.$on('site-search', (query) => {
-      //   this.searchQuery = query
-      //   if (query) {
-      //     this.showSearch()
-      //   }
-      // })
+    if (this.$bus) {
+      this.$bus.$on('site-search', (query) => {
+        this.searchQuery = query
+        if (query) {
+          this.showSearch()
+        }
+      })
     }
   },
   methods: {
@@ -863,8 +862,8 @@ export default {
       // this.$store.dispatch('tracking/event', payload)
     },
     skipToContent() {
-      if (this.$nuxt) {
-        this.$nuxt.$emit('scrollToTop')
+      if (this.$bus) {
+        this.$bus.$emit('scrollToTop')
       }
     },
   },

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

@@ -281,22 +281,21 @@ export default {
     //   }
   },
   mounted() {
-    if (this.$nuxt?.$on) {
-      // 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)
-      // })
+    if (this.$bus) {
+      this.$bus.$on('scrollToTop', () => {
+        setTimeout(() => {
+          const title = this.$refs.title
+          if (title) {
+            title.$el.setAttribute('tabindex', 0)
+            title.$el.focus()
+          }
+        }, 500)
+      })
     }
   },
   beforeDestroy() {
-    if (this.$nuxt?.$off) {
-      this.$nuxt.$off('scrollToTop')
+    if (this.$bus) {
+      this.$bus.$off('scrollToTop')
     }
   },
   methods: {

package/src/components/Paragraphs/Accordion/AccordionItem/index.vue

@@ -6,7 +6,7 @@
       class="accordion-item"
       :class="{
         rtl: rtl,
-        '--with-pre-heading': preHeading && showPreHeading
+        '--with-pre-heading': preHeading && showPreHeading,
       }"
     >
       <a
@@ -33,7 +33,7 @@
           :icon-alt="'collapse'"
           :glyph="CaretUp"
           :class="{
-            '--with-pre-heading': preHeading && showPreHeading
+            '--with-pre-heading': preHeading && showPreHeading,
           }"
         />
         <icon
@@ -44,7 +44,7 @@
           :icon-alt="'expand'"
           :glyph="CaretDown"
           :class="{
-            '--with-pre-heading': preHeading && showPreHeading
+            '--with-pre-heading': preHeading && showPreHeading,
           }"
         />
       </a>
@@ -76,42 +76,42 @@ export default {
     RichText,
     Icon,
     BCard,
-    BCardBody
+    BCardBody,
   },
   props: {
     title: {
       type: String,
-      default: 'Item'
+      default: 'Item',
     },
     preHeading: {
       type: String,
-      default: 'PRE-HEADING'
+      default: 'PRE-HEADING',
     },
     content: {
       type: String,
-      default: null
+      default: null,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     open: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showPreHeading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     meta: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   data: () => ({
     showAccordion: false,
     CaretDown,
-    CaretUp
+    CaretUp,
   }),
   mounted() {
     this.$nextTick(() => {
@@ -122,12 +122,16 @@ export default {
     toggleAccordion() {
       this.showAccordion = !this.showAccordion
       if (this.showAccordion) {
-        this.$root.$emit('accordionItemOpen', this.meta)
+        if (this.$bus) {
+          this.$bus.$emit('accordionItemOpen', this.meta) // this.$root.$emit('accordionItemOpen', this.meta)
+        }
       } else {
-        this.$root.$emit('accordionItemClose', this.meta)
+        if (this.$bus) {
+          this.$bus.$emit('accordionItemClose', this.meta) // this.$root.$emit('accordionItemClose', this.meta)
+        }
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

package/src/components/Paragraphs/BrowseContent/index.vue

@@ -166,12 +166,8 @@ export default {
       return allCards
     },
     async loadMoreCards(init) {
-      // Preference pinia
       const attrs = {
-        group: this.$pinia?.state?.value?.page?.content?.title
-          ? this.$pinia?.state?.value?.page?.content?.title
-          : this.$store?.state?.page?.content?.title,
-        // group: this.$store?.state?.page?.content?.title ? this.$store?.state?.page?.content?.title : this.$pinia?.state?.page?.content?.title
+        group: this.$pageStore?.content?.title,
       }
       if (this.$gtm && !init) {
         this.$gtm.push({ event: 'custom.interaction.showmore.click', ...attrs })

package/src/components/Paragraphs/ListGroup/index.vue

@@ -48,7 +48,7 @@
         :taxonomies="{
           industry: card.industry,
           topic: card.topic,
-          language: card.language
+          language: card.language,
         }"
       />
     </template>
@@ -69,7 +69,7 @@ import RichText from './../../Paragraphs/RichText/index.vue'
 import {
   isAbsoluteUrl,
   navigateToPath,
-  isGovSite
+  isGovSite,
 } from './../../../../lib/utility'
 
 export default {
@@ -80,48 +80,48 @@ export default {
       type: Array,
       default() {
         return []
-      }
+      },
     },
     role: {
       type: String,
-      default: 'button'
+      default: 'button',
     },
     darkBackground: {
       type: Boolean,
-      default: false
+      default: false,
     },
     title: {
       type: String,
-      default: ''
+      default: '',
     },
     titleTag: {
       type: String,
-      default: 'h3'
+      default: 'h3',
     },
     subHeading: {
       type: String,
-      default: null
+      default: null,
     },
     footerHeading: {
       type: String,
-      default: null
+      default: null,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showListItemNavigationArrow: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showLargeSpacing: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showListLink: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   methods: {
     getCaret(card) {
@@ -138,37 +138,43 @@ export default {
       // Some custom logic for gov caretaker logic
       if (process.env.CARETAKER && process.env.CARETAKER === 'true') {
         if (!isGovSite(card?.selectedCard?.link)) {
-          this.$store.commit('page/SET_CARETAKER_REF', 'list-group')
-          this.$root.$emit('caretaker-open', card?.selectedCard?.link)
+          // this.$store.commit('page/SET_CARETAKER_REF', 'list-group')
+          // this.$root.$emit('caretaker-open', card?.selectedCard?.link)
+          if (this.$pageStore) {
+            this.$pageStore.caretaker.referrer = 'list-group'
+          }
+          if (this.$bus) {
+            this.$bus.$emit('caretaker-open', card?.selectedCard?.link)
+          }
         } else {
           navigateToPath.call(
             this,
             card?.selectedCard?.link,
-            card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+            card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
           )
         }
       } else {
         navigateToPath.call(
           this,
           card?.selectedCard?.link,
-          card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+          card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
         )
       }
     },
     focussed(ev) {
       const path = ev.path || (ev.composedPath && ev.composedPath())
       const theTabbedCards = path.find(
-        (el) => el['_prevClass'] === 'tabbed-cards'
+        (el) => el['_prevClass'] === 'tabbed-cards',
       )
       if (ev.shiftKey && theTabbedCards) {
         ev.preventDefault()
-        let selectedTabbedCards = theTabbedCards.getElementsByClassName(
-          'isSelected'
-        )
+        let selectedTabbedCards =
+          theTabbedCards.getElementsByClassName('isSelected')
         let selectedCard = selectedTabbedCards[0].getElementsByTagName('button')
-        let thePrevLGItem = ev.target?.parentElement?.parentElement?.previousSibling?.getElementsByTagName(
-          'button'
-        )
+        let thePrevLGItem =
+          ev.target?.parentElement?.parentElement?.previousSibling?.getElementsByTagName(
+            'button',
+          )
         if (thePrevLGItem) {
           thePrevLGItem[0].focus()
         } else {
@@ -176,22 +182,25 @@ export default {
         }
       } else if (!ev.shiftKey && theTabbedCards) {
         ev.preventDefault()
-        let selectedTabbedCards = theTabbedCards.getElementsByClassName(
-          'isSelected'
-        )
-        let nextTabbedCard = selectedTabbedCards[0]?.parentElement?.nextSibling?.getElementsByTagName(
-          'button'
-        )
-        let theNextLGItem = ev.target?.parentElement?.parentElement?.nextSibling?.getElementsByTagName(
-          'button'
-        )
+        let selectedTabbedCards =
+          theTabbedCards.getElementsByClassName('isSelected')
+        let nextTabbedCard =
+          selectedTabbedCards[0]?.parentElement?.nextSibling?.getElementsByTagName(
+            'button',
+          )
+        let theNextLGItem =
+          ev.target?.parentElement?.parentElement?.nextSibling?.getElementsByTagName(
+            'button',
+          )
         if (theNextLGItem) {
           theNextLGItem[0].focus()
         } else if (nextTabbedCard) {
           nextTabbedCard[0].focus()
         } else {
           let nextFocus = this.focusNextElement()
-          this.$root.$emit('last-focus-out')
+          if (this.$bus) {
+            this.$bus.$emit('last-focus-out')
+          }
           nextFocus.focus()
         }
       } else {
@@ -208,7 +217,7 @@ export default {
           'button:not([disabled]):not([tabindex="-1"])',
           'input:not([disabled]):not([tabindex="-1"])',
           'select:not([disabled]):not([tabindex="-1"])',
-          '[tabindex]:not([disabled]):not([tabindex="-1"])'
+          '[tabindex]:not([disabled]):not([tabindex="-1"])',
           /* add custom queries here */
         ].join(','),
         queryResult = Array.prototype.filter.call(
@@ -220,7 +229,7 @@ export default {
               elem.offsetHeight > 0 ||
               elem === activeElem
             )
-          }
+          },
         ),
         indexedList = queryResult
           .slice()
@@ -234,20 +243,20 @@ export default {
               ? a.tabIndex < b.tabIndex
                 ? -1
                 : b.tabIndex < a.tabIndex
-                ? 1
-                : 0
+                  ? 1
+                  : 0
               : a.tabIndex != 0
-              ? -1
-              : b.tabIndex != 0
-              ? 1
-              : 0
+                ? -1
+                : b.tabIndex != 0
+                  ? 1
+                  : 0
           }),
         focusable = [].concat(
           indexedList,
           queryResult.filter((elem) => {
             /* filter out all indexes above 0 */
             return elem.tabIndex == 0 || elem.tabIndex == -1 ? true : false
-          })
+          }),
         )
 
       /* if reverse is true return the previous focusable element
@@ -256,8 +265,8 @@ export default {
         ? focusable[focusable.indexOf(activeElem) - 1] ||
             focusable[focusable.length - 1]
         : focusable[focusable.indexOf(activeElem) + 1] || focusable[0]
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>

package/src/components/Paragraphs/TabbedCards/index.vue

@@ -40,10 +40,11 @@
             :is-expandable="true"
           />
         </template>
-        <template          
-          v-slot:cardGridFooter
-        >
-          <column v-if="selectedRow === rIndex && selectedCard" class="listgroup-column">
+        <template v-slot:cardGridFooter>
+          <column
+            v-if="selectedRow === rIndex && selectedCard"
+            class="listgroup-column"
+          >
             <div ref="listgroup" class="tabbed-cards__listGroup">
               <list-group
                 :list="selectedCard.links"
@@ -77,24 +78,24 @@ export default {
   props: {
     heading: {
       type: String,
-      default: ''
+      default: '',
     },
     description: {
       type: String,
-      default: ''
+      default: '',
     },
     tabbedCards: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     workwell: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
@@ -102,7 +103,7 @@ export default {
       selectedRow: undefined,
       screenWidth: 0,
       loaded: false,
-      tabList: null
+      tabList: null,
     }
   },
   computed: {
@@ -122,15 +123,18 @@ export default {
       } else {
         return 3
       }
-    }
+    },
   },
   mounted() {
     window.addEventListener('resize', this.updateScreenWidth)
     this.screenWidth = document.documentElement.clientWidth
-    /* this.$root.$on('last-focus-out', () => {
-      this.selectedCard = null
-      this.selectedRow = null
-    }) */
+    if (this.$bus) {
+      this.$bus.$on('last-focus-out', () => {
+        this.selectedCard = null
+        this.selectedRow = null
+      })
+    }
+
     this.loaded = true
   },
   beforeDestroy() {
@@ -171,7 +175,7 @@ export default {
             easing: 'ease-in',
             offset: -100,
             force: true,
-            cancelable: true
+            cancelable: true,
           }
           setTimeout(() => {
             const listGroup = this.$refs.listgroup[0]
@@ -193,14 +197,17 @@ export default {
     focussed(ev) {
       ev.preventDefault()
       let activeElem = ev.target
-      if(!this.tabList){
+      if (!this.tabList) {
         this.tabList = this.getFocusElements()
       } else {
-        let newList = this.getFocusElements().filter(item => this.tabList.indexOf(item) == -1)
-        this.tabList.splice(this.tabList.indexOf(activeElem) + 1,0,...newList)
+        let newList = this.getFocusElements().filter(
+          (item) => this.tabList.indexOf(item) == -1,
+        )
+        this.tabList.splice(this.tabList.indexOf(activeElem) + 1, 0, ...newList)
       }
-      let newTab = ev.shiftKey ? this.tabList[this.tabList.indexOf(activeElem) - 1] ||
-            this.tabList[this.tabList.length - 1]
+      let newTab = ev.shiftKey
+        ? this.tabList[this.tabList.indexOf(activeElem) - 1] ||
+          this.tabList[this.tabList.length - 1]
         : this.tabList[this.tabList.indexOf(activeElem) + 1] || this.tabList[0]
       newTab.focus()
     },
@@ -211,17 +218,14 @@ export default {
           'button:not([disabled]):not([tabindex="-1"])',
           'input:not([disabled]):not([tabindex="-1"])',
           'select:not([disabled]):not([tabindex="-1"])',
-          '[tabindex]:not([disabled]):not([tabindex="-1"])'
+          '[tabindex]:not([disabled]):not([tabindex="-1"])',
           /* add custom queries here */
         ].join(','),
         queryResult = Array.prototype.filter.call(
           document.querySelectorAll(queryString),
           (elem) => {
-            return (
-              elem.offsetWidth > 0 ||
-              elem.offsetHeight > 0
-            )
-          }
+            return elem.offsetWidth > 0 || elem.offsetHeight > 0
+          },
         ),
         indexedList = queryResult
           .slice()
@@ -235,24 +239,24 @@ export default {
               ? a.tabIndex < b.tabIndex
                 ? -1
                 : b.tabIndex < a.tabIndex
-                ? 1
-                : 0
+                  ? 1
+                  : 0
               : a.tabIndex != 0
-              ? -1
-              : b.tabIndex != 0
-              ? 1
-              : 0
+                ? -1
+                : b.tabIndex != 0
+                  ? 1
+                  : 0
           }),
         focusable = [].concat(
           indexedList,
           queryResult.filter((elem) => {
             /* filter out all indexes above 0 */
             return elem.tabIndex == 0 || elem.tabIndex == -1 ? true : false
-          })
+          }),
         )
-        return focusable
-    }
-  }
+      return focusable
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>

package/src/components/SubComponents/CardGroup/index.vue

@@ -26,7 +26,7 @@
         class="card_group__card"
         :class="{
           [`card_group__card--${card.colour}`]: card.pillText,
-          [`card_group__card--none`]: !card.pillText
+          [`card_group__card--none`]: !card.pillText,
         }"
         :card-header-title="card.title"
         :caret="getCaret(card)"
@@ -40,7 +40,7 @@
         :taxonomies="{
           industry: card.industry,
           topic: card.topic,
-          language: card.language
+          language: card.language,
         }"
       >
         <template v-slot:cardTop>
@@ -55,9 +55,9 @@
     <template
       v-if="
         loading ||
-          (cards.length === 0 && !loading) ||
-          $slots.cardGroupFooter ||
-          (!loading && showLoadMore)
+        (cards.length === 0 && !loading) ||
+        $slots.cardGroupFooter ||
+        (!loading && showLoadMore)
       "
       v-slot:cardGridFooter
     >
@@ -93,7 +93,7 @@ import Column from './../../Containers/Column/index.vue'
 import {
   isAbsoluteUrl,
   navigateToPath,
-  isGovSite
+  isGovSite,
 } from './../../../../lib/utility'
 import CardBody from './cardbody.vue'
 import CardTop from './cardtop.vue'
@@ -109,57 +109,57 @@ export default {
     CardBody,
     CardTop,
     CtaButton,
-    BSpinner
-},
+    BSpinner,
+  },
   props: {
     bundle: {
       type: Array,
       required: false,
-      default: () => []
+      default: () => [],
     },
     caret: {
       type: String,
       default: undefined,
       validator: (value) =>
-        ['down', 'up', 'right', 'left', 'external'].indexOf(value) >= 0
+        ['down', 'up', 'right', 'left', 'external'].indexOf(value) >= 0,
     },
     cards: {
       type: Array,
       required: true,
-      default: () => []
+      default: () => [],
     },
     background: {
       type: String,
-      default: 'none'
+      default: 'none',
     },
     title: {
       type: String,
-      default: null
+      default: null,
     },
     titleTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     loading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     columns: {
       type: Number,
-      default: 3
+      default: 3,
     },
     showLoadMore: {
       type: Boolean,
-      default: false
+      default: false,
     },
     emptyCardsText: {
       type: String,
-      default: 'No results returned'
-    }
+      default: 'No results returned',
+    },
   },
   computed: {
     allCardsRTL() {
@@ -167,7 +167,7 @@ export default {
         return this.rtl
       }
       return this.cards.every((card) => this.rtl || card.rtl)
-    }
+    },
   },
   methods: {
     getCaret(card) {
@@ -181,24 +181,30 @@ export default {
       // Some custom logic for gov caretaker logic
       if (process.env.CARETAKER && process.env.CARETAKER === 'true') {
         if (!isGovSite(card?.selectedCard?.link)) {
-          this.$store.commit('page/SET_CARETAKER_REF', 'card-group')
-          this.$root.$emit('caretaker-open', card?.selectedCard?.link)
+          // this.$store.commit('page/SET_CARETAKER_REF', 'card-group')
+          // this.$root.$emit('caretaker-open', card?.selectedCard?.link)
+          if (this.$pageStore) {
+            this.$pageStore.caretaker.referrer = 'card-group'
+          }
+          if (this.$bus) {
+            this.$bus.$emit('caretaker-open', card?.selectedCard?.link)
+          }
         } else {
           navigateToPath.call(
             this,
             card?.selectedCard?.link,
-            card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+            card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
           )
         }
       } else {
         navigateToPath.call(
           this,
           card?.selectedCard?.link,
-          card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+          card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
         )
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

package/src/components/SubComponents/CtaButton/index.vue

@@ -75,77 +75,77 @@ export default {
   components: {
     arrowRight,
     arrowLeft,
-    icon
+    icon,
   },
   props: {
     type: {
       type: String,
       default: 'default',
       validator: (value) =>
-        ['default', 'white', 'gray', 'workwell', 'dark'].indexOf(value) >= 0
+        ['default', 'white', 'gray', 'workwell', 'dark'].indexOf(value) >= 0,
     },
     url: {
       type: String,
       required: false,
-      default: ''
+      default: '',
     },
     alt: {
       type: String,
-      default: ''
+      default: '',
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     glyph: {
       type: [Object, String],
       required: false,
-      default: () => null
+      default: () => null,
     },
     glyphHeight: {
       type: Number,
       required: false,
-      default: 15
+      default: 15,
     },
     glyphWidth: {
       type: Number,
       required: false,
-      default: 25
+      default: 25,
     },
     workwell: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isCentred: {
       type: Boolean,
-      default: false
+      default: false,
     },
     textOnly: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isFluid: {
       type: Boolean,
-      default: true
+      default: true,
     },
     stretch: {
       type: Boolean,
-      default: false
+      default: false,
     },
     slim: {
       type: Boolean,
-      default: false
+      default: false,
     },
     focusOutline: {
       type: String,
       default: 'default',
-      validator: (value) => ['default', 'light', 'dark'].indexOf(value) >= 0
-    }
+      validator: (value) => ['default', 'light', 'dark'].indexOf(value) >= 0,
+    },
   },
   data() {
     return {
       arrowRight,
-      arrowLeft
+      arrowLeft,
     }
   },
   computed: {
@@ -188,12 +188,12 @@ export default {
       return this.isCentred
         ? { ['wcl-cta__arrow']: hasArrow }
         : {
-            ['wcl-cta__arrow']: hasArrow
+            ['wcl-cta__arrow']: hasArrow,
           }
     },
     textClass() {
       return this.isCentred ? {} : {}
-    }
+    },
   },
   methods: {
     clicked() {
@@ -201,15 +201,17 @@ export default {
       var attrs
       if (theEl && theEl.length > 0) {
         attrs = {
-          group: this.$store?.state?.page?.content?.title,
+          //group: this.$store?.state?.page?.content?.title,
+          group: this.$pageStore?.content?.title,
           label: theEl[0]?.innerText?.split('\n')[0],
-          data: this.url
+          data: this.url,
         }
       } else {
         attrs = {
-          group: this.$store?.state?.page?.content?.title,
+          //group: this.$store?.state?.page?.content?.title,
+          group: this.$pageStore?.content?.title,
           label: '',
-          data: this.url
+          data: this.url,
         }
       }
       // push event to gtm
@@ -225,8 +227,8 @@ export default {
         this.$router.push(this.url)
       }
       this.$emit('clicked')
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>

package/src/components/SubComponents/ResourceGroup/index.vue

@@ -307,7 +307,8 @@ export default {
     },
     async loadMoreCards(init) {
       const attrs = {
-        group: this.$store?.state?.page?.content?.title,
+        group: this.$pageStore?.content?.title,
+        //group: this.$store?.state?.page?.content?.title,
       }
       if (this.$gtm && !init) {
         this.$gtm.push({ event: 'custom.interaction.showmore.click', ...attrs })
@@ -439,8 +440,14 @@ export default {
       // Some custom logic for gov caretaker logic
       if (process.env.CARETAKER && process.env.CARETAKER === 'true') {
         if (!isGovSite(card?.selectedCard?.link)) {
-          this.$store.commit('page/SET_CARETAKER_REF', 'list-group')
-          this.$root.$emit('caretaker-open', card?.selectedCard?.link)
+          // this.$store.commit('page/SET_CARETAKER_REF', 'list-group')
+          // this.$root.$emit('caretaker-open', card?.selectedCard?.link)
+          if (this.$pageStore) {
+            this.$pageStore.caretaker.referrer = 'list-group'
+          }
+          if (this.$bus) {
+            this.$bus.$emit('caretaker-open', card?.selectedCard?.link)
+          }
         } else {
           navigateToPath.call(
             this,
@@ -493,7 +500,9 @@ export default {
           nextTabbedCard[0].focus()
         } else {
           let nextFocus = this.focusNextElement()
-          this.$root.$emit('last-focus-out')
+          if (this.$bus) {
+            this.$bus.$emit('last-focus-out')
+          }
           nextFocus.focus()
         }
       } else {