@worksafevictoria/wcl7.5 1.3.0 → 1.5.0

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

@@ -10,6 +10,8 @@
 
   &__wrap {
     position: relative;
+    white-space: nowrap;
+    overflow-y: scroll;
     background: $app-header-background-colour;
     border-radius: 3px;
     height: 70px;
@@ -111,6 +113,7 @@
         margin-right: 0;
       }
 
+  
       .search-string {
         @media screen and (max-width: 1065px) and (min-width: 981px) {
           display: none;
@@ -206,6 +209,19 @@
           position: relative;
         }
 
+        &__innermore {
+          overflow-x: auto;
+          height: max-content;
+          left: 25px;
+          right: 25px;
+          top: 180px;
+          position: fixed;
+          padding-top: 15px !important;
+          background-color: $app-menu-black !important;
+          border-radius: 3px;
+        }
+
+
         &__wrap {
           position: relative;
           margin: 0 auto;
@@ -232,9 +248,11 @@
 
       &:last-of-type {
         > a {
+
           svg {
             height: 23px;
             width: 23px;
+
           }
           & > span {
             margin-right: 10px;
@@ -342,6 +360,7 @@
 
   .styled-scrollbar {
     overflow-y: scroll;
+    white-space: normal !important;
     //firefox
     scrollbar-color: $app-header-active $app-menu-black;
     scrollbar-width: thin;
@@ -365,6 +384,13 @@
     left: -9999px !important;
   }
 }
+
+.more-menu {
+  height: 56px;
+  vertical-align: middle;
+  padding: 0px 10px !important;
+}
+
 .skip-link {
   @include visually-hidden;
   color: $app-menu-black;

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

@@ -199,7 +199,7 @@ export default {
     margin: 0;
     padding: 0;
     top: 0;
-    left: -26%;
+    left: -19%;
     transition: all 0.4s ease-in-out;
     /////
     outline-offset: 2px;

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

@@ -429,4 +429,11 @@ export default {
 
 <style lang="scss" scoped>
 @import './styles';
+
+#mainCookieContainer {
+  .modal-dialog {
+    max-width: var(--bs-modal-width);
+    margin: 1.75rem auto;
+  }
+}
 </style>

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/Directory/Records/ISP/index.vue

@@ -13,14 +13,14 @@
         <column class="contact">
           <div>Phone</div>
           <a :href="`tel:${item.contact.mobile || item.contact.phone}`"
-            ><span class="sr-only">Phone number</span
+            ><span class="sr-only visually-hidden">Phone number</span
             >{{ item.contact.mobile || item.contact.phone }}</a
           >
         </column>
         <column v-if="baseLocation && recordLocation" class="distance">
           <div>Distance</div>
           <div tabindex="0">
-            <span class="sr-only">Distance from your specified location</span>
+            <span class="sr-only visually-hidden">Distance from your specified location</span>
             {{
               calcDistance(
                 baseLocation.lat,

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/Statistics/index.vue

@@ -80,6 +80,7 @@ export default {
     border-radius: 10px 10px 10px 10px;
     margin-bottom: 16px;
     border-top: none;
+    opacity: unset;
   }
   :deep(.card-title) {
     line-height: 1.2;

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>