@worksafevictoria/wcl7.5 1.13.0-beta.8 → 1.13.0-beta.9

package/package.json

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

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

@@ -118,7 +118,7 @@ methods: {
     position: relative;
     margin-bottom: 10px;
   }
-
+/* Introduced changes to make image responsive */
   .carousel img {
     object-fit: cover;
     max-height: 420px;

package/src/components/Containers/HomepageHeaderNew/index.stories.js

@@ -1,6 +1,7 @@
 import HomepageHeader from './index.vue'
 import { mockCarouselItems } from '../../../mock/carousel-items'
 
+// Introduced an additional headerLink
 
 const headerLinks = [
     {

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

@@ -14,6 +14,7 @@
     <div class="homepage-header__content-wrapper">
       <container class="homepage-header__content-wrapper__content">
         <row>
+          <!-- changes made to bootstrap grid breakpoints -->
           <column
               class="homepage-header__content-wrapper__content-col col-12 col-md-7 col-lg-8 homepage-header__content-wrapper__content-col--split wcl-rich-text--ltr"
             >

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

@@ -6,12 +6,11 @@
       </div>
     </template>
     <template v-else>
-      <BInputGroup>
+      <b-input-group>
         <label class="visually-hidden" for="site-search"
-          >Search by keyword (Typed keyword automatically filters below
-          results)</label
+          >Search by keyword (Typed keyword automatically filters below results)</label
         >
-        <BFormInput
+        <b-form-input
           id="site-search"
           autofocus
           ref="siteSearch"
@@ -22,14 +21,14 @@
           trim
           @update="onChange"
           @keyup.enter="onChange"
-        ></BFormInput>
+        ></b-form-input>
         <template #append>
-          <BButton size="sm" class="search-button" @click="onSearch"
+          <b-button size="sm" class="search-button" @click="onSearch"
             ><span class="not-extra-small-screen">Search</span>
             <img alt="search icon" :src="searchIcon"
-          /></BButton>
+          /></b-button>
         </template>
-      </BInputGroup>
+      </b-input-group>
       <search-listing
         v-if="loadSearchList && (searchResults || isLoading)"
         :class="{
@@ -55,13 +54,14 @@
   </div>
 </template>
 <script>
-import axios from 'axios'
-import searchIcon from '../../../assets/icons/search.svg?url'
-import SearchListing from './SearchListing/index.vue'
-import { BButton, BInputGroup, BFormInput } from 'bootstrap-vue-next'
+import axios from "axios";
+import searchIcon from "../../../assets/icons/search.svg?url";
+import SearchListing from "./SearchListing/index.vue";
+import { BButton, BInputGroup, BFormInput } from "bootstrap-vue-next";
 
 export default {
   components: { SearchListing, BButton, BInputGroup, BFormInput },
+  
   props: {
     pageLimit: {
       type: Number,
@@ -77,11 +77,11 @@ export default {
     },
     initialSearchQuery: {
       type: String,
-      default: '',
+      default: "",
     },
     googleSearchFlag: {
       type: String,
-      default: 'solar',
+      default: "solar",
     },
     visibleSearchList: {
       type: Boolean,
@@ -91,39 +91,40 @@ export default {
   data() {
     return {
       searchIcon,
-      searchQuery: '',
+      searchQuery: "",
       searchResults: null,
       isLoading: false,
-      field_language: '8671',
+      field_language: "8671",
       searchType: this.googleSearchFlag,
       googleSearchScript: false,
       loadSearchList: this.visibleSearchList,
-    }
+    };
   },
   computed: {
     searchClass() {
       return {
-        'wcl-search': true,
-        'wcl-search__google': this.searchType !== 'solar',
-      }
+        "wcl-search": true,
+        "wcl-search__google": this.searchType !== "solar",
+      };
     },
   },
   mounted() {
-    if (this.searchType === 'google') {
-      this.setupGoogleStyle()
+    
+    if (this.searchType === "google") {
+      this.setupGoogleStyle();
     } else {
       if (this.initialSearchQuery) {
-        this.searchQuery = this.initialSearchQuery
-        this.onSearch()
+        this.searchQuery = this.initialSearchQuery;
+        this.onSearch();
       }
       if (this.isTypeahead && window) {
-        window.document.addEventListener('click', this.closeSearchResults)
+        window.document.addEventListener("click", this.closeSearchResults);
       }
     }
   },
   beforeDestroy() {
     if (this.isTypeahead && window && document) {
-      window.document.removeEventListener('click', this.closeSearchResults)
+      window.document.removeEventListener("click", this.closeSearchResults);
     }
   },
   methods: {
@@ -138,54 +139,54 @@ export default {
               q: query,
               start: start,
             },
-          },
-        )
-        return response
+          }
+        );
+        return response;
       } catch (error) {
-        console.error('Error fetching search results:', error)
-        return []
+        console.error("Error fetching search results:", error);
+        return [];
       }
     },
     async onGoogleSearch(pageNr = 1, searchQuery) {
-      this.$emit('loading', true)
-      this.isLoading = true
+      this.$emit("loading", true);
+      this.isLoading = true;
 
-      const apiKey = 'AIzaSyD76GAmQQ6DuxKWf-aLXPZ9pwdz4nOvs2c'
-      const searchEngineId = '53b1506aa03c64160'
+      const apiKey = "AIzaSyD76GAmQQ6DuxKWf-aLXPZ9pwdz4nOvs2c";
+      const searchEngineId = "53b1506aa03c64160";
 
-      const start = (pageNr - 1) * this.pageLimit
+      const start = (pageNr - 1) * this.pageLimit;
       let response = await this.fetchSearchResults(
         apiKey,
         searchEngineId,
         searchQuery,
-        start,
-      )
-      let items = []
-      let suggest = response?.data?.spelling?.correctedQuery || ''
+        start
+      );
+      let items = [];
+      let suggest = response?.data?.spelling?.correctedQuery || "";
       if (response?.data?.spelling?.correctedQuery) {
         response = await this.fetchSearchResults(
           apiKey,
           searchEngineId,
           response?.data?.spelling?.correctedQuery,
-          start,
-        )
-        items = response?.data?.items
+          start
+        );
+        items = response?.data?.items;
       } else if (response?.data?.items) {
-        items = response?.data?.items
+        items = response?.data?.items;
       }
       if (items.length > 0) {
-        const totalResults = response?.data?.searchInformation?.totalResults
+        const totalResults = response?.data?.searchInformation?.totalResults;
         // Loop through each item in the items array
         const modifiedResults = items.map((item) => {
           // Update the title using the handleSearchResultLinkTitle function
-          const modifiedTitle = this.handleSearchResultLinkTitle(item.title)
+          const modifiedTitle = this.handleSearchResultLinkTitle(item.title);
 
           // Return the modified item with the updated title
           return {
             ...item,
             title: modifiedTitle,
-          }
-        })
+          };
+        });
 
         this.searchResults = {
           offset: Number(pageNr === 1 ? pageNr - 1 : pageNr),
@@ -193,19 +194,19 @@ export default {
           query: this.searchQuery,
           results: modifiedResults,
           suggestion: suggest,
-        }
+        };
       } else {
         this.searchResults = {
           offset: 0,
           numFound: 0,
-          query: this.searchQuery ?? '',
+          query: this.searchQuery ?? "",
           results: [],
           suggestion: suggest,
-        }
+        };
       }
-      this.$emit('loading', false)
-      this.isLoading = false
-      this.$emit('results', this.searchResults)
+      this.$emit("loading", false);
+      this.isLoading = false;
+      this.$emit("results", this.searchResults);
 
       // wait for the page title to be updated and then fire the search event
       setTimeout(() => {
@@ -213,82 +214,78 @@ export default {
           pageTitle: document.title,
           pageURL: this.$route?.fullPath,
           location:
-            this.$route?.path === '/'
-              ? 'Homepage'
-              : this.$route?.path === '/search'
-                ? 'Search Page'
-                : this.$route?.path,
+            this.$route?.path === "/"
+              ? "Homepage"
+              : this.$route?.path === "/search"
+              ? "Search Page"
+              : this.$route?.path,
           label: this.searchQuery,
           results: this.searchResults.numFound,
-        }
+        };
         if (this.$gtm) {
-          this.$gtm.push({ event: 'custom.search.site.submit', ...attrs })
+          this.$gtm.push({ event: "custom.search.site.submit", ...attrs });
         }
-      }, 300)
+      }, 300);
     },
     pageChanged(newPageNumber) {
-      if (this.searchType === 'solar') {
+      if (this.searchType === "solar") {
         // Reset search results before fetching new results
-        this.resetSearchResults()
-        this.performSearch(newPageNumber, this.searchQuery, this.pageLimit)
+        this.resetSearchResults();
+        this.performSearch(newPageNumber, this.searchQuery, this.pageLimit);
       } else {
         // Fetch new search results with the updated page number
-        this.onGoogleSearch(newPageNumber, this.searchQuery)
+        this.onGoogleSearch(newPageNumber, this.searchQuery);
       }
     },
     onSearch(e) {
-      const { path } = this.$route || {}
+      const { path } = this.$route || {};
 
       // Home page
       if (
-        (e?.type === 'click' || e?.key == 'Enter') &&
+        (e?.type === "click" || e?.key == "Enter") &&
         this.searchQuery &&
         this.searchQuery.length > 2 &&
-        path === '/'
+        path === "/"
       ) {
         // Search page
-        const searchQuery = encodeURIComponent(this.searchQuery)
-        const origin = window.location.origin
-        const hash = window.location.hash
-        const pathname = 'search'
-        const URL = `${origin}/${pathname}${hash}?q=${searchQuery}`
+        const searchQuery = encodeURIComponent(this.searchQuery);
+        const origin = window.location.origin;
+        const hash = window.location.hash;
+        const pathname = "search";
+        const URL = `${origin}/${pathname}${hash}?q=${searchQuery}`;
 
         // Uncomment below commented code when goes live
-        window.location.assign(URL)
+        window.location.assign(URL);
       } else {
-        this.resetSearchResults()
-        this.$emit('query', this.searchQuery)
+        this.resetSearchResults();
+        this.$emit("query", this.searchQuery);
 
-        if (this.searchType === 'solar') {
-          this.performSearch(1, this.searchQuery, this.pageLimit)
+        if (this.searchType === "solar") {
+          this.performSearch(1, this.searchQuery, this.pageLimit);
         } else {
-          this.onGoogleSearch(1, this.searchQuery)
+          this.onGoogleSearch(1, this.searchQuery);
         }
       }
     },
     resetSearchResults() {
-      this.searchResults = null
+      this.searchResults = null;
     },
     closeSearchResults(ev) {
-      if (
-        this.isTypeahead &&
-        this.searchResults &&
-        ev?.target?.id !== 'site-search'
-      ) {
-        this.resetSearchResults()
-        this.searchQuery = null
-        this.$emit('query', null)
+      if (this.isTypeahead && this.searchResults && ev?.target?.id !== "site-search") {
+        this.resetSearchResults();
+        this.searchQuery = null;
+        this.$emit("query", null);
       }
     },
     onChange(e) {
       if (this.searchQuery && this.searchQuery.length > 2) {
-        this.onSearch(e)
+        this.onSearch(e);
       }
     },
     performSearch(pageNr = 1, searchQuery, pageLimit) {
       if (searchQuery) {
-        this.$emit('loading', true)
-        this.isLoading = true
+        this.$emit("loading", true);
+        this.isLoading = true;
         this.contentParser({
           query: searchQuery,
           start: pageNr > 1 ? (pageNr - 1) * pageLimit : 0,
@@ -302,100 +299,100 @@ export default {
               query: searchQuery,
               results: res.results,
               suggestion: null,
-            }
+            };
           } else {
             this.searchResults = {
               offset: 0,
               numFound: 0,
-              query: this.searchQuery ?? '',
+              query: this.searchQuery ?? "",
               results: [],
               suggestion: null,
-            }
+            };
           }
-          this.$emit('loading', false)
-          this.isLoading = false
-          this.$emit('results', this.searchResults)
+          this.$emit("loading", false);
+          this.isLoading = false;
+          this.$emit("results", this.searchResults);
           // wait for the page title to be updated and then fire the search event
           setTimeout(() => {
             const attrs = {
               pageTitle: document.title,
               pageURL: this.$route?.fullPath,
               location:
-                this.$route?.path === '/'
-                  ? 'Homepage'
-                  : this.$route?.path === '/search'
-                    ? 'Search Page'
-                    : this.$route?.path,
+                this.$route?.path === "/"
+                  ? "Homepage"
+                  : this.$route?.path === "/search"
+                  ? "Search Page"
+                  : this.$route?.path,
               label: this.searchQuery,
               results: this.searchResults.numFound,
-            }
+            };
             if (this.$gtm) {
-              this.$gtm.push({ event: 'custom.search.site.submit', ...attrs })
+              this.$gtm.push({ event: "custom.search.site.submit", ...attrs });
             }
-          }, 300)
-        })
+          }, 300);
+        });
       }
     },
 
     // Method to customize google search style
     setupGoogleStyle() {
       if (this.googleSearchScript === false) {
-        const script = document.createElement('script')
-        script.async = true
+        const script = document.createElement("script");
+        script.async = true;
         script.src = this.$config
           ? this.$config.public.googleSearch
-          : process.env.GOOGLE__URL
-        document.head.appendChild(script)
-        this.googleSearchScript = true
+          : process.env.GOOGLE__URL;
+        document.head.appendChild(script);
+        this.googleSearchScript = true;
 
         // Create a new style element
-        const style = document.createElement('style')
-        style.id = 'searchStyle' // Assign an ID to the style element
+        const style = document.createElement("style");
+        style.id = "searchStyle"; // Assign an ID to the style element
         // The CSS we are going to inject
-        const cssVar = 'table.gssb_c {display: none !important;}'
+        const cssVar = "table.gssb_c {display: none !important;}";
         // Inject the style element into the head
-        document.head.appendChild(style)
+        document.head.appendChild(style);
         // Set the text content of the style element to the CSS text
-        style.textContent = cssVar
+        style.textContent = cssVar;
       }
     },
 
     // function to handle search result link titles
     handleSearchResultLinkTitle(title) {
       // Split the title by the '|' character
-      const titleParts = title.split('|')
+      const titleParts = title.split("|");
 
       // Remove any leading or trailing whitespace from each part
-      const cleanedTitleParts = titleParts.map((part) => part.trim())
+      const cleanedTitleParts = titleParts.map((part) => part.trim());
 
       // Join the cleaned title parts back together without the text after the '|' character
-      const modifiedTitle = cleanedTitleParts[0] // Take only the first part before '|'
+      const modifiedTitle = cleanedTitleParts[0]; // Take only the first part before '|'
 
-      return modifiedTitle
+      return modifiedTitle;
     },
 
     handleKeyUp(event) {
-      if (event.key === 'Enter' || event.type === 'click') {
+      if (event.key === "Enter" || event.type === "click") {
         let keyword = event.key
           ? event.target.value
-          : document.querySelector('input[name="search"]').value
+          : document.querySelector('input[name="search"]').value;
 
         // Check if the URL does not contain "/search"
-        if (keyword && !window.location.href.includes('/search')) {
-          let origin = window.location.origin
-          let hash = window.location.hash
-          let pathname = 'search'
-          let URL = origin + '/' + pathname + hash
+        if (keyword && !window.location.href.includes("/search")) {
+          let origin = window.location.origin;
+          let hash = window.location.hash;
+          let pathname = "search";
+          let URL = origin + "/" + pathname + hash;
         }
 
-        this.setupPaginationEvent()
+        this.setupPaginationEvent();
       }
     },
   },
-}
+};
 </script>
 <style lang="scss" scoped>
-@import '../../../includes/scss/all';
+@import "../../../includes/scss/all";
 
 .wcl-search {
   position: relative;
@@ -453,7 +450,7 @@ export default {
     }
   }
 
-  @include mq('xs') {
+  @include mq("xs") {
     .not-extra-small-screen {
       display: none;
     }
@@ -543,7 +540,7 @@ export default {
       padding-left: 32px;
 
       &:before {
-        content: 'Search';
+        content: "Search";
       }
 
       @media screen and (max-width: 767px) {
@@ -623,7 +620,7 @@ export default {
       padding: 0;
 
       &::after {
-        content: ' ';
+        content: " ";
         position: absolute;
         height: 16px;
         width: 11px;
@@ -730,7 +727,7 @@ export default {
     }
 
     /* search list end */
-    @include mq('xs') {
+    @include mq("xs") {
       .not-extra-small-screen {
         display: none;
       }