@worksafevictoria/wcl7.5 1.8.0-beta.4 → 1.8.0-beta.6

package/lib/utility.js

@@ -35,6 +35,8 @@ function isGovSite(url) {
 }
 
 function navigateToPath(path, newTab, nuxtRouter) {
+  debugger
+
   const url = String(path).startsWith('www.') ? `http://${path}` : path
   const isAbsolute = isAbsoluteUrl(url)
   const router = nuxtRouter ? nuxtRouter : this.$router

package/package.json

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

package/src/components/Common/CardGrid/index.vue

@@ -227,6 +227,7 @@ export default {
   },
   methods: {
     cardTitleSelected(selectedCard, ev) {
+      debugger;
       this.clearCards();
       selectedCard.selected = !!!selectedCard.selected;
       const selectedCardModelIndex = this.getChildIndex(selectedCard);

package/src/components/Common/CardGridItem/index.vue

@@ -403,7 +403,7 @@ export default {
   methods: {
     cardClicked(ev) {
       debugger;
-      console.log("cardClicked this.isSelectable :- ", this.isSelectable);
+
       if (this.isSelectable) {
         this.parentGrid.cardSelected(this, ev);
       }

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

@@ -13,11 +13,7 @@
       >
         <nuxt-link class="dark" to="/">
           <img
-            :alt="
-              isWorkWell
-                ? 'Work Well Victoria - Logo'
-                : 'Work Safe Victoria - Logo'
-            "
+            :alt="isWorkWell ? 'Work Well Victoria - Logo' : 'Work Safe Victoria - Logo'"
             width="127"
             height="55"
             :src="isWorkWell ? WorkWellLogo : WorkSafeLogo"
@@ -50,7 +46,7 @@
           @keydown.tab="submenuFocus"
         >
           <caret-left />
-          {{ isThirdLevelOpen ? firstLevelItemName : 'Main menu' }}
+          {{ isThirdLevelOpen ? firstLevelItemName : "Main menu" }}
         </button>
       </div>
       <nav
@@ -73,10 +69,7 @@
               role="button"
               aria-expanded="false"
               @click.prevent="
-                firstLevelClick(
-                  firstLevelLink,
-                  `firstLevelMenuItem-${parentIndex}`,
-                )
+                firstLevelClick(firstLevelLink, `firstLevelMenuItem-${parentIndex}`)
               "
               @mouseover="mouseHover('firstLevelMenuItem', parentIndex)"
               @mouseleave="mouseLeave('firstLevelMenuItem', parentIndex)"
@@ -114,8 +107,7 @@
                 <div
                   class="sub-nav-container__wrap"
                   :class="{
-                    'styled-scrollbar':
-                      screen === 'mobile' && isSecondLevelOpen,
+                    'styled-scrollbar': screen === 'mobile' && isSecondLevelOpen,
                   }"
                 >
                   <div
@@ -137,9 +129,7 @@
                   <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}`"
                         class="sub-nav-parent-item"
@@ -151,45 +141,25 @@
                           role="button"
                           aria-expanded="false"
                           @keydown.tab="
-                            searchFocus(
-                              secondIndex,
-                              firstLevelLink.below.length,
-                              $event,
-                            )
+                            searchFocus(secondIndex, firstLevelLink.below.length, $event)
                           "
                           @click.prevent="
                             secondLevelClick(
                               secondLevelLink,
-                              `secondLevelMenuItem-${parentIndex}-${secondIndex}`,
+                              `secondLevelMenuItem-${parentIndex}-${secondIndex}`
                             )
                           "
                           @mouseover="
-                            mouseHover(
-                              'secondLevelMenuItem',
-                              parentIndex,
-                              secondIndex,
-                            )
+                            mouseHover('secondLevelMenuItem', parentIndex, secondIndex)
                           "
                           @mouseleave="
-                            mouseLeave(
-                              'secondLevelMenuItem',
-                              parentIndex,
-                              secondIndex,
-                            )
+                            mouseLeave('secondLevelMenuItem', parentIndex, secondIndex)
                           "
                           @focusin="
-                            mouseHover(
-                              'secondLevelMenuItem',
-                              parentIndex,
-                              secondIndex,
-                            )
+                            mouseHover('secondLevelMenuItem', parentIndex, secondIndex)
                           "
                           @focusout="
-                            mouseLeave(
-                              'secondLevelMenuItem',
-                              parentIndex,
-                              secondIndex,
-                            )
+                            mouseLeave('secondLevelMenuItem', parentIndex, secondIndex)
                           "
                         >
                           <span>{{ secondLevelLink.title }}</span>
@@ -210,39 +180,19 @@
                           class="dark"
                           :to="secondLevelLink.relative"
                           @keydown.tab.native="
-                            searchFocus(
-                              secondIndex,
-                              firstLevelLink.below.length,
-                              $event,
-                            )
+                            searchFocus(secondIndex, firstLevelLink.below.length, $event)
                           "
                           @mouseover.native="
-                            mouseHover(
-                              'secondLevelMenuItem',
-                              parentIndex,
-                              secondIndex,
-                            )
+                            mouseHover('secondLevelMenuItem', parentIndex, secondIndex)
                           "
                           @mouseleave.native="
-                            mouseLeave(
-                              'secondLevelMenuItem',
-                              parentIndex,
-                              secondIndex,
-                            )
+                            mouseLeave('secondLevelMenuItem', parentIndex, secondIndex)
                           "
                           @focusin.native="
-                            mouseHover(
-                              'secondLevelMenuItem',
-                              parentIndex,
-                              secondIndex,
-                            )
+                            mouseHover('secondLevelMenuItem', parentIndex, secondIndex)
                           "
                           @focusout.native="
-                            mouseLeave(
-                              'secondLevelMenuItem',
-                              parentIndex,
-                              secondIndex,
-                            )
+                            mouseLeave('secondLevelMenuItem', parentIndex, secondIndex)
                           "
                           @click.native="fireAnalytics(secondLevelLink)"
                         >
@@ -264,10 +214,7 @@
                               <span v-else>{{ secondLevelLink.title }}</span>
                             </div>
                             <div class="selected-sub-nav">
-                              <ul
-                                v-if="secondLevelLink.below"
-                                class="sub-nav-group"
-                              >
+                              <ul v-if="secondLevelLink.below" class="sub-nav-group">
                                 <li
                                   v-for="(
                                     thirdLevelLink, thirdIndex
@@ -283,7 +230,7 @@
                                       searchFocus(
                                         thirdIndex,
                                         secondLevelLink.below.length,
-                                        $event,
+                                        $event
                                       )
                                     "
                                     @mouseover.native="
@@ -291,7 +238,7 @@
                                         'thirdLevelMenuItem',
                                         parentIndex,
                                         secondIndex,
-                                        thirdIndex,
+                                        thirdIndex
                                       )
                                     "
                                     @mouseleave.native="
@@ -299,7 +246,7 @@
                                         'thirdLevelMenuItem',
                                         parentIndex,
                                         secondIndex,
-                                        thirdIndex,
+                                        thirdIndex
                                       )
                                     "
                                     @focusin.native="
@@ -307,7 +254,7 @@
                                         'thirdLevelMenuItem',
                                         parentIndex,
                                         secondIndex,
-                                        thirdIndex,
+                                        thirdIndex
                                       )
                                     "
                                     @focusout.native="
@@ -315,20 +262,14 @@
                                         'thirdLevelMenuItem',
                                         parentIndex,
                                         secondIndex,
-                                        thirdIndex,
+                                        thirdIndex
                                       )
                                     "
-                                    @click.native="
-                                      fireAnalytics(thirdLevelLink)
-                                    "
+                                    @click.native="fireAnalytics(thirdLevelLink)"
                                   >
                                     <span>{{ thirdLevelLink.title }}</span>
                                   </nuxt-link>
-                                  <a
-                                    v-else
-                                    class="dark"
-                                    :href="thirdLevelLink.absolute"
-                                  >
+                                  <a v-else class="dark" :href="thirdLevelLink.absolute">
                                     <span>{{ thirdLevelLink.title }}</span>
                                   </a>
                                 </li>
@@ -402,6 +343,7 @@
       </div>
       <div v-if="isSearchOpen && !isWorkWell" class="search-container">
         <modal-search
+          :google-search-flag="'googlerest'"
           :search-query="searchQuery"
           :content-parser="contentParser"
           @closed="closeSearch"
@@ -412,15 +354,15 @@
 </template>
 
 <script>
-import ModalSearch from './ModalSearch/index.vue'
-import Close from './../../../assets/icons/close.svg?component'
-import WorkSafeLogo from './../../../assets/icons/AppFooter/worksafe-footer-logo.svg?url'
-import WorkWellLogo from './../../../assets/icons/AppFooter/logo-workwell-reversed.svg?url'
-import CaretRight from './../../../assets/icons/caret-right.svg?component'
-import CaretDown from './../../../assets/icons/caret-down.svg?component'
-import SearchIcon from './../../../assets/icons/AppHeader/search-32px.svg?component'
-import CaretLeft from './../../../assets/icons/caret-left.svg?component'
-import MenuIcon from './../../../assets/icons/AppHeader/menu-32px.svg?component'
+import ModalSearch from "./ModalSearch/index.vue";
+import Close from "./../../../assets/icons/close.svg?component";
+import WorkSafeLogo from "./../../../assets/icons/AppFooter/worksafe-footer-logo.svg?url";
+import WorkWellLogo from "./../../../assets/icons/AppFooter/logo-workwell-reversed.svg?url";
+import CaretRight from "./../../../assets/icons/caret-right.svg?component";
+import CaretDown from "./../../../assets/icons/caret-down.svg?component";
+import SearchIcon from "./../../../assets/icons/AppHeader/search-32px.svg?component";
+import CaretLeft from "./../../../assets/icons/caret-left.svg?component";
+import MenuIcon from "./../../../assets/icons/AppHeader/menu-32px.svg?component";
 
 export default {
   components: {
@@ -470,85 +412,81 @@ export default {
       MenuIcon,
       windowWidth: 0,
       searchQuery: null,
-    }
+    };
   },
   computed: {
     showSecondLevelCaret() {
       return (
-        (this.screen === 'mobile' &&
-          this.isSecondLevelOpen &&
-          !this.isThirdLevelOpen) ||
-        this.screen === 'desktop'
-      )
+        (this.screen === "mobile" && this.isSecondLevelOpen && !this.isThirdLevelOpen) ||
+        this.screen === "desktop"
+      );
     },
     isChrome() {
-      return !!window.chrome
+      return !!window.chrome;
     },
   },
   watch: {
     $route() {
       if (this.screen) {
-        this.closeMegaMenu()
+        this.closeMegaMenu();
       }
     },
     windowWidth(val) {
       if (val > 980) {
-        this.screen = 'desktop'
+        this.screen = "desktop";
       } else if (val <= 980) {
-        this.screen = 'mobile'
+        this.screen = "mobile";
         if (this.isSecondLevelOpen === true) {
-          this.isMobileMenuOpen = true
+          this.isMobileMenuOpen = true;
         }
       }
     },
   },
   destroyed() {
-    window.removeEventListener('resize', this.screenWidth)
+    window.removeEventListener("resize", this.screenWidth);
   },
   created() {
-    if (typeof window !== 'undefined' && window) {
-      window.addEventListener('resize', this.screenWidth)
-      this.screenWidth()
+    if (typeof window !== "undefined" && window) {
+      window.addEventListener("resize", this.screenWidth);
+      this.screenWidth();
     }
     if (this.$bus) {
-      this.$bus.$on('site-search', (query) => {
-        this.searchQuery = query
+      this.$bus.$on("site-search", (query) => {
+        this.searchQuery = query;
         if (query) {
-          this.showSearch()
+          this.showSearch();
         }
-      })
+      });
     }
   },
   methods: {
     screenWidth() {
-      this.windowWidth = window.innerWidth
+      this.windowWidth = window.innerWidth;
     },
     firstLevelClick(item, ref) {
-      console.log('in first level click')
+      console.log("in first level click");
       // Reset screen to fix whitespace
-      if (window && window.scrollTo && this.screen === 'desktop') {
-        window.scrollTo(0, 0)
+      if (window && window.scrollTo && this.screen === "desktop") {
+        window.scrollTo(0, 0);
       }
 
-      let selectedItem = this.$refs[ref][0]
-      let previouslyOpenItem = this.getActiveParent()
+      let selectedItem = this.$refs[ref][0];
+      let previouslyOpenItem = this.getActiveParent();
 
       // Set this for mobile
-      this.firstLevelItemName = item.title
-      this.firstLevelItemRef = ref
+      this.firstLevelItemName = item.title;
+      this.firstLevelItemRef = ref;
 
       // Set the first item to the variable
       if (previouslyOpenItem.length) {
-        previouslyOpenItem = previouslyOpenItem[0]
+        previouslyOpenItem = previouslyOpenItem[0];
       }
       // If the menu is not open, open it
       if (item.below && this.isSecondLevelOpen === false) {
-        selectedItem.classList.add('isActiveParent')
-        selectedItem
-          .getElementsByTagName('a')[0]
-          .setAttribute('aria-expanded', 'true')
-        this.isSecondLevelOpen = true
-        this.letBodyOverflow(false)
+        selectedItem.classList.add("isActiveParent");
+        selectedItem.getElementsByTagName("a")[0].setAttribute("aria-expanded", "true");
+        this.isSecondLevelOpen = true;
+        this.letBodyOverflow(false);
       }
       // If the menu is already open and the same item is clicked,
       // close it
@@ -557,57 +495,51 @@ export default {
         this.isSecondLevelOpen === true &&
         selectedItem === previouslyOpenItem
       ) {
-        selectedItem.classList.remove('isActiveParent')
-        selectedItem
-          .getElementsByTagName('a')[0]
-          .setAttribute('aria-expanded', 'false')
-        this.isSecondLevelOpen = false
-        this.letBodyOverflow(true)
+        selectedItem.classList.remove("isActiveParent");
+        selectedItem.getElementsByTagName("a")[0].setAttribute("aria-expanded", "false");
+        this.isSecondLevelOpen = false;
+        this.letBodyOverflow(true);
       }
       // If the link has no children then go to that page
       else if (!item.below) {
-        if (item.relative !== '/') {
-          this.$router.push(item.relative)
+        if (item.relative !== "/") {
+          this.$router.push(item.relative);
         }
       }
       // Otherwise just remove the existing open menu and add
       // the isActive class on the new selected item
       else {
-        previouslyOpenItem.classList.remove('isActiveParent')
-        selectedItem.classList.add('isActiveParent')
+        previouslyOpenItem.classList.remove("isActiveParent");
+        selectedItem.classList.add("isActiveParent");
         previouslyOpenItem
-          .getElementsByTagName('a')[0]
-          .setAttribute('aria-expanded', 'false')
-        selectedItem
-          .getElementsByTagName('a')[0]
-          .setAttribute('aria-expanded', 'true')
+          .getElementsByTagName("a")[0]
+          .setAttribute("aria-expanded", "false");
+        selectedItem.getElementsByTagName("a")[0].setAttribute("aria-expanded", "true");
       }
-      if (this.screen === 'mobile') {
-        this.focusOnNext(selectedItem)
+      if (this.screen === "mobile") {
+        this.focusOnNext(selectedItem);
       }
     },
     secondLevelClick(item, ref) {
-      let selectedItem = this.$refs[ref][0]
-      let previouslyOpenItem = this.getActiveChild()
-      this.secondLevelItemRef = ref
+      let selectedItem = this.$refs[ref][0];
+      let previouslyOpenItem = this.getActiveChild();
+      this.secondLevelItemRef = ref;
 
       // Set the first item to the variable
       if (previouslyOpenItem.length) {
-        previouslyOpenItem = previouslyOpenItem[0]
+        previouslyOpenItem = previouslyOpenItem[0];
       }
 
       // If the menu is not open, open it
       if (item.below && this.isThirdLevelOpen === false) {
-        selectedItem.classList.add('isActiveChild')
-        selectedItem
-          .getElementsByTagName('a')[0]
-          .setAttribute('aria-expanded', 'true')
-        this.isThirdLevelOpen = true
+        selectedItem.classList.add("isActiveChild");
+        selectedItem.getElementsByTagName("a")[0].setAttribute("aria-expanded", "true");
+        this.isThirdLevelOpen = true;
       }
       // If the link has no children then go to that page
       else if (!item.below) {
-        if (item.relative !== '/') {
-          this.$router.push(item.relative)
+        if (item.relative !== "/") {
+          this.$router.push(item.relative);
         }
       }
       // If the menu is already open and the same item is clicked,
@@ -617,260 +549,238 @@ export default {
         this.isThirdLevelOpen === true &&
         selectedItem === previouslyOpenItem
       ) {
-        selectedItem.classList.remove('isActiveChild')
-        selectedItem
-          .getElementsByTagName('a')[0]
-          .setAttribute('aria-expanded', 'false')
-        this.isThirdLevelOpen = false
+        selectedItem.classList.remove("isActiveChild");
+        selectedItem.getElementsByTagName("a")[0].setAttribute("aria-expanded", "false");
+        this.isThirdLevelOpen = false;
       }
       // Otherwise just remove the existing open menu and add
       // the isActive class on the new selected item
       else {
-        previouslyOpenItem.classList.remove('isActiveChild')
+        previouslyOpenItem.classList.remove("isActiveChild");
         previouslyOpenItem
-          .getElementsByTagName('a')[0]
-          .setAttribute('aria-expanded', 'false')
-        selectedItem.classList.add('isActiveChild')
-        selectedItem
-          .getElementsByTagName('a')[0]
-          .setAttribute('aria-expanded', 'true')
+          .getElementsByTagName("a")[0]
+          .setAttribute("aria-expanded", "false");
+        selectedItem.classList.add("isActiveChild");
+        selectedItem.getElementsByTagName("a")[0].setAttribute("aria-expanded", "true");
       }
 
-      this.focusOnNext(selectedItem)
+      this.focusOnNext(selectedItem);
     },
     showMobileMenu() {
       // Reset screen to top to fix whitespace issues
       if (window) {
-        window.scrollTo(0, 0)
+        window.scrollTo(0, 0);
       }
 
-      this.isMobileMenuOpen = true
-      this.letBodyOverflow(false)
+      this.isMobileMenuOpen = true;
+      this.letBodyOverflow(false);
       this.$nextTick(() => {
-        this.$refs['firstLevelMenuItem-0'][0].firstElementChild.focus()
-      })
+        this.$refs["firstLevelMenuItem-0"][0].firstElementChild.focus();
+      });
     },
     mouseHover(refID, parentIndex, secondIndex, thirdIndex) {
-      let theLI = this.getLIaboveHovered(
-        refID,
-        parentIndex,
-        secondIndex,
-        thirdIndex,
-      )
+      let theLI = this.getLIaboveHovered(refID, parentIndex, secondIndex, thirdIndex);
       if (theLI) {
-        let A = theLI.getElementsByTagName('A')[0]
-        A.style.borderBottom = '1px solid transparent'
+        let A = theLI.getElementsByTagName("A")[0];
+        A.style.borderBottom = "1px solid transparent";
       }
     },
     mouseLeave(refID, parentIndex, secondIndex, thirdIndex) {
-      let theLI = this.getLIaboveHovered(
-        refID,
-        parentIndex,
-        secondIndex,
-        thirdIndex,
-      )
+      let theLI = this.getLIaboveHovered(refID, parentIndex, secondIndex, thirdIndex);
       if (theLI) {
-        let A = theLI.getElementsByTagName('A')[0]
-        A.removeAttribute('style')
+        let A = theLI.getElementsByTagName("A")[0];
+        A.removeAttribute("style");
       }
     },
     getLIaboveHovered(refID, parentIndex, secondIndex, thirdIndex) {
       // Check if its a first level link
       if (secondIndex === undefined && thirdIndex === undefined) {
-        if (screen === 'desktop') {
-          return
+        if (screen === "desktop") {
+          return;
         }
 
-        let prevFirstIndex = parentIndex - 1
+        let prevFirstIndex = parentIndex - 1;
 
         if (prevFirstIndex < 0) {
-          return
+          return;
         } else {
-          let aboveHovered = `${refID}-${prevFirstIndex}`
-          return this.$refs[aboveHovered][0]
+          let aboveHovered = `${refID}-${prevFirstIndex}`;
+          return this.$refs[aboveHovered][0];
         }
       }
       // Check if its a second level link
       else if (thirdIndex === undefined) {
-        let prevSecondIndex = secondIndex - 1
+        let prevSecondIndex = secondIndex - 1;
         if (prevSecondIndex < 0) {
-          return
+          return;
         } else {
-          let aboveHovered = `${refID}-${parentIndex}-${prevSecondIndex}`
-          return this.$refs[aboveHovered][0]
+          let aboveHovered = `${refID}-${parentIndex}-${prevSecondIndex}`;
+          return this.$refs[aboveHovered][0];
         }
       }
       // If its a third level link
       else {
-        let prevThirdIndex = thirdIndex - 1
+        let prevThirdIndex = thirdIndex - 1;
         if (prevThirdIndex < 0) {
-          return
+          return;
         } else {
-          let aboveHovered = `${refID}-${parentIndex}-${secondIndex}-${prevThirdIndex}`
-          return this.$refs[aboveHovered][0]
+          let aboveHovered = `${refID}-${parentIndex}-${secondIndex}-${prevThirdIndex}`;
+          return this.$refs[aboveHovered][0];
         }
       }
     },
     showSearch() {
-      this.isSearchOpen = true
-      this.letBodyOverflow(false)
+      this.isSearchOpen = true;
+      this.letBodyOverflow(false);
     },
     closeSearch() {
-      this.isSearchOpen = false
-      this.letBodyOverflow(true)
-      this.resetTab()
-      this.searchQuery = null
+      this.isSearchOpen = false;
+      this.letBodyOverflow(true);
+      this.resetTab();
+      this.searchQuery = null;
     },
     closeMegaMenu() {
-      let activeChild = this.getActiveChild()
-      let theActiveParent = this.getActiveParent()
+      let activeChild = this.getActiveChild();
+      let theActiveParent = this.getActiveParent();
 
       if (theActiveParent.length) {
-        theActiveParent = theActiveParent[0]
-        theActiveParent.classList.remove('isActiveParent')
+        theActiveParent = theActiveParent[0];
+        theActiveParent.classList.remove("isActiveParent");
         theActiveParent
-          .getElementsByTagName('a')[0]
-          .setAttribute('aria-expanded', 'false')
+          .getElementsByTagName("a")[0]
+          .setAttribute("aria-expanded", "false");
       }
 
       if (this.isThirdLevelOpen) {
-        activeChild = activeChild[0]
-        activeChild.classList.remove('isActiveChild')
-        activeChild
-          .getElementsByTagName('a')[0]
-          .setAttribute('aria-expanded', 'false')
-        this.isThirdLevelOpen = false
+        activeChild = activeChild[0];
+        activeChild.classList.remove("isActiveChild");
+        activeChild.getElementsByTagName("a")[0].setAttribute("aria-expanded", "false");
+        this.isThirdLevelOpen = false;
       }
-      this.isMobileMenuOpen = false
-      this.isSecondLevelOpen = false
-      this.letBodyOverflow(true)
+      this.isMobileMenuOpen = false;
+      this.isSecondLevelOpen = false;
+      this.letBodyOverflow(true);
     },
     letBodyOverflow(state) {
-      let body = document.body
-      let main = document.getElementsByTagName('main')[0]
-      let footer = document.getElementsByTagName('footer')[0]
+      let body = document.body;
+      let main = document.getElementsByTagName("main")[0];
+      let footer = document.getElementsByTagName("footer")[0];
       switch (state) {
         case true:
-          body.removeAttribute('style')
+          body.removeAttribute("style");
           if (main) {
-            main.removeAttribute('style')
+            main.removeAttribute("style");
           }
           if (footer) {
-            footer.removeAttribute('style')
+            footer.removeAttribute("style");
           }
-          break
+          break;
         case false:
-          body.style.overflow = 'hidden'
-          body.style.background = '#ffffff'
+          body.style.overflow = "hidden";
+          body.style.background = "#ffffff";
           if (main) {
-            main.style.display = 'none'
+            main.style.display = "none";
           }
           if (footer) {
-            footer.style.display = 'none'
+            footer.style.display = "none";
           }
-          break
+          break;
       }
     },
     resetTab(el) {
       if (this.$refs.closeMenuButton) {
         if (el) {
-          el.preventDefault()
+          el.preventDefault();
         }
-        this.$refs.closeMenuButton.focus()
+        this.$refs.closeMenuButton.focus();
       }
     },
     getActiveParent() {
-      return document.getElementsByClassName('isActiveParent')
+      return document.getElementsByClassName("isActiveParent");
     },
     getActiveChild() {
-      return document.getElementsByClassName('isActiveChild')
+      return document.getElementsByClassName("isActiveChild");
     },
     mobileGoBack() {
       if (this.isThirdLevelOpen) {
-        let activeChild = this.getActiveChild()
-        activeChild = activeChild[0]
-        activeChild.classList.remove('isActiveChild')
-        activeChild
-          .getElementsByTagName('a')[0]
-          .setAttribute('aria-expanded', 'false')
-        this.isThirdLevelOpen = false
+        let activeChild = this.getActiveChild();
+        activeChild = activeChild[0];
+        activeChild.classList.remove("isActiveChild");
+        activeChild.getElementsByTagName("a")[0].setAttribute("aria-expanded", "false");
+        this.isThirdLevelOpen = false;
       } else if (this.isSecondLevelOpen) {
-        let activeParent = this.getActiveParent()
-        activeParent = activeParent[0]
-        activeParent.classList.remove('isActiveParent')
-        activeParent
-          .getElementsByTagName('a')[0]
-          .setAttribute('aria-expanded', 'false')
-        this.isSecondLevelOpen = false
+        let activeParent = this.getActiveParent();
+        activeParent = activeParent[0];
+        activeParent.classList.remove("isActiveParent");
+        activeParent.getElementsByTagName("a")[0].setAttribute("aria-expanded", "false");
+        this.isSecondLevelOpen = false;
       }
     },
     searchFocus(index, length, event) {
       if (index === length - 1 && this.isMobileMenuOpen && !event.shiftKey) {
-        event.preventDefault()
-        this.$refs.searchButton.focus()
+        event.preventDefault();
+        this.$refs.searchButton.focus();
       } else if (index === 0 && this.isMobileMenuOpen && event.shiftKey) {
-        event.preventDefault()
-        let firstIndex = this.firstLevelItemRef.split('-')[1]
-        let key = null
+        event.preventDefault();
+        let firstIndex = this.firstLevelItemRef.split("-")[1];
+        let key = null;
         if (!this.isThirdLevelOpen) {
-          key = `secondLevelSelectedTitle-${firstIndex}`
+          key = `secondLevelSelectedTitle-${firstIndex}`;
         } else if (this.isThirdLevelOpen) {
-          let secondIndex = this.secondLevelItemRef.split('-')[2]
-          key = `secondLevelSelectedTitle-${firstIndex}-${secondIndex}`
+          let secondIndex = this.secondLevelItemRef.split("-")[2];
+          key = `secondLevelSelectedTitle-${firstIndex}-${secondIndex}`;
         }
-        if (this.$refs[key][0].$el.nodeName === 'A') {
-          this.$refs[key][0].$el.focus()
+        if (this.$refs[key][0].$el.nodeName === "A") {
+          this.$refs[key][0].$el.focus();
         }
       }
     },
     submenuFocus(event) {
       if (this.isMobileMenuOpen && !event.shiftKey && this.isSecondLevelOpen) {
-        event.preventDefault()
-        let firstIndex = this.firstLevelItemRef.split('-')[1]
-        let key = null
+        event.preventDefault();
+        let firstIndex = this.firstLevelItemRef.split("-")[1];
+        let key = null;
         if (!this.isThirdLevelOpen) {
-          key = `secondLevelSelectedTitle-${firstIndex}`
+          key = `secondLevelSelectedTitle-${firstIndex}`;
         } else if (this.isThirdLevelOpen) {
-          let secondIndex = this.secondLevelItemRef.split('-')[2]
-          key = `secondLevelSelectedTitle-${firstIndex}-${secondIndex}`
+          let secondIndex = this.secondLevelItemRef.split("-")[2];
+          key = `secondLevelSelectedTitle-${firstIndex}-${secondIndex}`;
         }
-        if (this.$refs[key][0].$el.nodeName === 'A') {
-          this.$refs[key][0].$el.focus()
+        if (this.$refs[key][0].$el.nodeName === "A") {
+          this.$refs[key][0].$el.focus();
         }
       }
     },
     backBtnFocus(event) {
       if (this.isMobileMenuOpen && event.shiftKey && this.isSecondLevelOpen) {
-        event.preventDefault()
-        this.$refs.menuBackButton.focus()
+        event.preventDefault();
+        this.$refs.menuBackButton.focus();
       }
     },
     focusOnNext(selectedItem) {
       this.$nextTick(() => {
-        selectedItem
-          .getElementsByClassName('selected-title')[0]
-          .firstChild.focus()
-      })
+        selectedItem.getElementsByClassName("selected-title")[0].firstChild.focus();
+      });
     },
     fireAnalytics(content) {
       let payload = {
-        event: 'custom.interaction.megamenu.click',
-        group: 'Mega Menu',
+        event: "custom.interaction.megamenu.click",
+        group: "Mega Menu",
         label: content.title,
         url: content.relative,
-      }
+      };
       // this.$store.dispatch('tracking/event', payload)
     },
     skipToContent() {
       if (this.$bus) {
-        this.$bus.$emit('scrollToTop')
+        this.$bus.$emit("scrollToTop");
       }
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import './styles';
-@import './mobile';
+@import "./styles";
+@import "./mobile";
 </style>

package/src/components/Paragraphs/Directory/HSCP/Records/SingleRecord/index.vue

@@ -57,70 +57,73 @@
       <div style="padding-top: 20px;">
         <hr>
       </div>
-      <row >
+      <!-- Contacts, if any -->
+      <div v-if="validContacts">
+        <row >
         <column >
           <h4>Contact Information</h4>
         </column>
       </row>
-      <row>
-        <column sm="2" class="label">
+      <row v-if="item.contact1 !== '' || item.contact2 !== ''">
+        <column sm="2" class="label" v-if="item.contact1 !== ''">
           Contact
         </column>
-        <column sm="4" class="hscp-additional-records">
+        <column sm="4" class="hscp-additional-records" v-if="item.contact1 !== ''">
           {{item.contact1}}
         </column>
-        <column sm="2" class="label">
+        <column sm="2" class="label" v-if="item.contact2 !== ''">
           Contact
         </column>
-        <column sm="4" class="hscp-additional-records">
+        <column sm="4" class="hscp-additional-records" v-if="item.contact2 !== ''">
           {{item.contact2}}
         </column>
       </row>
-      <row>
-        <column sm="2" class="label">
+      <row v-if="item.phone1 !== '' || item.phone2 !== ''">
+        <column sm="2" class="label" v-if="item.phone1 !== ''">
           Phone
         </column>
-        <column sm="4" class="hscp-additional-records">
+        <column sm="4" class="hscp-additional-records" v-if="item.phone1 !== ''">
           {{item.phone1}}
         </column>
-        <column sm="2" class="label">
+        <column sm="2" class="label" v-if="item.phone2 !== ''">
           Phone
         </column>
-        <column sm="4" class="hscp-additional-records">
+        <column sm="4" class="hscp-additional-records" v-if="item.phone2 !== ''">
           {{item.phone2}}
         </column>
       </row>
-      <row>
-        <column sm="2" class="label">
+      <row v-if="item.email1 !== '' || item.email2 !== ''">
+        <column sm="2" class="label" v-if="item.email1 !== ''">
           Email
         </column>
-        <column sm="4" class="hscp-additional-records">
+        <column sm="4" class="hscp-additional-records" v-if="item.email1 !== ''">
           {{item.email1}}
         </column>
-        <column sm="2" class="label">
+        <column sm="2" class="label" v-if="item.email2 !== ''">
           Email
         </column>
-        <column sm="4" class="hscp-additional-records">
+        <column sm="4" class="hscp-additional-records" v-if="item.email1 !== ''">
           {{item.email2}}
         </column>
       </row>
+      </div>
+     <div v-if="item.trainingVenues.length">
       <row class="row-hscp-additional">
         <column>
           <h4>Training Venue Locations</h4>
         </column>
       </row>
       <row class="hscp-additional-records">
-        <column v-if="item.trainingVenues.length" >
+        <column  >
           <ul>
             <li v-for="(venue) in item.trainingVenues.split(',')" :key="venue.id">
               {{venue}}
             </li>
           </ul> 
         </column>
-        <column v-else-if="!item.trainingVenues.length">
-          <p>No training venues</p>
-        </column>
       </row>
+     </div>
+      
       <row class="row-hscp-additional">
         <column>
           <h4>Training Courses</h4>
@@ -170,6 +173,13 @@ export default {
     gMapLink() {
       return `https://google.com/maps?q=${this.item.title}%20${this.item.fullAddress}`
     },
+    validContacts() {
+      if (this.item.contact1 === '' && this.item.contact2 === '' && this.item.phone1 === '' && this.item.phone2 === '' && this.item.email1 === '' && this.item.email2 === '') {
+        return false
+      } else {
+        return true
+      }
+    }
 
   },
   methods: {
@@ -206,12 +216,11 @@ export default {
   align-content: end;
   max-width: 20px;
   padding-right: 0px;
-  padding-bottom: 10px;
   float:right;
 }
 .paragraph--directory__records--hscp {
 
-  padding-bottom: 20px !important;
+  padding-bottom: 30px !important;
   
   a {
         color: $black;

package/src/components/SubComponents/Search/SearchListing/index.vue

@@ -18,14 +18,15 @@
       :force-lg-columns-per-row="1"
       :force-md-columns-per-row="1"
       :cards="results"
-      :is-selectable="true"
+      :is-selectable="isSelectable"
       :size="'full'"
       :row-spacing="'none'"
       :no-padding-top="true"
-      @selected="onSelectResult"
+      :google-search-flag="googleSearchFlag"
+      @selected="handleSelect"
+      @selected-title="handleSelect"
     >
       <template v-slot:cardItem="{ card }">
-        <span class="d-none">card.link :- {{ card.link }}</span>
         <card-grid-item
           :header-size="isTypeahead ? 'medium' : 'large'"
           :card-header-title="card.title"
@@ -45,6 +46,7 @@
             topic: card.topic,
             language: card.language,
           }"
+          :is-card-title-selectable="isCardTitleSelectable"
         />
       </template>
       <template
@@ -133,6 +135,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    googleSearchFlag: {
+      type: String,
+      default: "solar",
+    },
   },
   methods: {
     onClickItem(event, item, index) {
@@ -144,32 +150,29 @@ export default {
       }
       return value;
     },
-    onSelectCardTitle(card) {
+    handleSelect(card) {
       debugger;
-      navigateToPath.call(
-        this,
-        card?.selectedCard?.link.match(/https?:\/\/[^\/]+(\/[^?#]*)/)[1], // open link in current environment
-        card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
-      );
-      this.$nextTick(() => this.$emit("selected-title"));
 
-      if (this.$gtm) {
-        this.fireGTM(card);
+      const isSolar = this.googleSearchFlag === "solar";
+      const link = card?.selectedCard?.link;
+      const openInNewTab = card?.ev?.ctrlKey || card?.ev?.metaKey;
+
+      // Extract pathname only for solar
+      const finalLink = isSolar ? link : link?.match(/https?:\/\/[^\/]+(\/[^?#]*)/)?.[1];
+
+      if (finalLink) {
+        navigateToPath.call(this, finalLink, openInNewTab);
       }
-    },
-    onSelectResult(card) {
-      debugger;
-      navigateToPath.call(
-        this,
-        card?.selectedCard?.link.match(/https?:\/\/[^\/]+(\/[^?#]*)/)[1], // title click is used for search result, but change also included here
-        card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
-      );
-      this.$nextTick(() => this.$emit("selected"));
+
+      this.$nextTick(() => {
+        this.$emit(isSolar ? "selected" : "selected-title");
+      });
 
       if (this.$gtm) {
         this.fireGTM(card);
       }
     },
+
     fireGTM(card) {
       let attrs = {
         location:

package/src/components/SubComponents/Search/index.stories.js

@@ -5,7 +5,8 @@ const contentParser = () => {
     results: [
       {
         title: 'Content title 1',
-        description: 'Content description 2'
+        description: 'Content description 2',
+        link: '/mental-health'
       }
     ],
     offset: 0,

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

@@ -42,6 +42,9 @@
         :offset="searchResults && searchResults.offset"
         :page-limit="pageLimit"
         :content-parser="contentParser"
+        :google-search-flag="searchType"
+        :is-selectable="searchType === 'solar'"
+        :is-card-title-selectable="searchType !== 'solar'"
         @selected="$emit('selected')"
         @pageChanged="pageChanged"
       />
@@ -231,9 +234,6 @@ export default {
       }
     },
     onSearch(e) {
-      debugger;
-      console.log("this.searchType:- ", this.searchType);
-
       const { path } = this.$route || {};
 
       // Home page