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

package/package.json

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

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

@@ -7,6 +7,7 @@
       interval="0"
       controls
       indicators
+      label-indicators="Select a slide to display"
       keyboard
       :fade="true"
       background="#ababab"
@@ -115,10 +116,15 @@ methods: {
 <style>
   .carousel {
     position: relative;
-    height: 70%;
     margin-bottom: 10px;
   }
 
+  .carousel img {
+    object-fit: cover;
+    max-height: 420px;
+    width: 100%;
+  }
+
   .carousel-indicators button {
     width: 10px !important;
     height: 10px !important;

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

@@ -22,6 +22,10 @@ const headerLinks = [
     {
       text: 'Pay or renew your insurance',
       path: '/pay-or-renew-your-workcover-insurance-premium'
+    },
+    {
+      text: 'Contact Worksafe',
+      path: '/contact-worksafe'
     }
   ]
 

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

@@ -15,9 +15,7 @@
       <container class="homepage-header__content-wrapper__content">
         <row>
           <column
-              class="homepage-header__content-wrapper__content-col col-12 col-md-7 homepage-header__content-wrapper__content-col--split wcl-rich-text--ltr"
-              :xs="7"
-              :md="7"
+              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"
             >
               <carousel-component 
                 :carousel-items="slideList"
@@ -25,10 +23,8 @@
                 :is-paragraph="false"
               />
           </column>
-          <column
-              md="4"
-              :offset-md="1"
-              class="homepage-header__side col-md-4 offset-md-1"
+          <column  
+              class="homepage-header__side col-12 col-md-5 col-lg-4"
             >
               <div>
                 <cta-button
@@ -220,4 +216,6 @@ export default {
     }
   }
 }
+
+
 </style>

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

@@ -6,11 +6,12 @@
       </div>
     </template>
     <template v-else>
-      <b-input-group>
+      <BInputGroup>
         <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
         >
-        <b-form-input
+        <BFormInput
           id="site-search"
           autofocus
           ref="siteSearch"
@@ -21,14 +22,14 @@
           trim
           @update="onChange"
           @keyup.enter="onChange"
-        ></b-form-input>
+        ></BFormInput>
         <template #append>
-          <b-button size="sm" class="search-button" @click="onSearch"
+          <BButton size="sm" class="search-button" @click="onSearch"
             ><span class="not-extra-small-screen">Search</span>
             <img alt="search icon" :src="searchIcon"
-          /></b-button>
+          /></BButton>
         </template>
-      </b-input-group>
+      </BInputGroup>
       <search-listing
         v-if="loadSearchList && (searchResults || isLoading)"
         :class="{
@@ -54,14 +55,13 @@
   </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,40 +91,39 @@ 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: {
@@ -139,54 +138,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),
@@ -194,19 +193,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(() => {
@@ -214,78 +213,82 @@ 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,
@@ -299,100 +302,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;
@@ -450,7 +453,7 @@ export default {
     }
   }
 
-  @include mq("xs") {
+  @include mq('xs') {
     .not-extra-small-screen {
       display: none;
     }
@@ -540,7 +543,7 @@ export default {
       padding-left: 32px;
 
       &:before {
-        content: "Search";
+        content: 'Search';
       }
 
       @media screen and (max-width: 767px) {
@@ -620,7 +623,7 @@ export default {
       padding: 0;
 
       &::after {
-        content: " ";
+        content: ' ';
         position: absolute;
         height: 16px;
         width: 11px;
@@ -727,7 +730,7 @@ export default {
     }
 
     /* search list end */
-    @include mq("xs") {
+    @include mq('xs') {
       .not-extra-small-screen {
         display: none;
       }