@worksafevictoria/wcl7.5 1.1.0-beta.2 → 1.1.0

package/.storybook/main.js

@@ -12,8 +12,7 @@ const config = {
     options: {}
   },
   docs: {
-    autodocs: 'tag',
-    defaultName: 'Documentation'
+    autodocs: 'tag'
   }
 }
 export default config

package/package.json

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

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

@@ -1,10 +1,8 @@
 <template>
-  <div>
-    <h1>Form Instance</h1>
+  <h1>Form Instance</h1>
   <p>
     The .vue and .stories.js files for SubComponents/FormInstance (displayed in Storybook under Form) must be copied from current Storybook 6 branch when time to upgrade them.  They are causing errors preventing Storybook from being rendered and therefore tested.
   </p>
-  </div>
 </template>
 
 <script>

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

@@ -0,0 +1,8 @@
+import GoogleSearch from './index.vue'
+
+export default {
+  title: 'SubComponents/GoogleSearch',
+  component: GoogleSearch
+}
+
+export const Default = {}

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

@@ -0,0 +1,405 @@
+<template>
+  <div class="wcl-search">
+    <div class="gcse-search"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    // console.log('Component mounted')
+    this.setupCustomeStyle()
+
+    // Introduce a delay before setting up addEventListener
+    setTimeout(() => {
+      this.setupCustomAttr()
+      this.handleSearchResultLinkTitle()
+    }, 2000) // Adjust the delay time as needed
+  },
+
+  beforeDestroy() {
+    // Remove event listeners before the component is destroyed
+    const targetNode = document.querySelector('input[name="search"]')
+    const buttonNode = document.querySelector('button.gsc-search-button')
+
+    if (targetNode) {
+      // Add keyup.enter event listener
+      targetNode.removeEventListener('keyup', this.handleKeyUp)
+      buttonNode.removeEventListener('click', this.handleKeyUp)
+    }
+    const paginationNodes = document.querySelectorAll('.gsc-cursor-page')
+    paginationNodes.forEach((paginationNode) => {
+      paginationNode.removeEventListener('click', this.handleSearchResultTitle)
+    })
+  },
+
+  methods: {
+    // Method to customize google search style
+    setupCustomeStyle() {
+      const script = document.createElement('script')
+      script.async = true
+      script.src = 'https://cse.google.com/cse.js?cx=53b1506aa03c64160'
+      document.head.appendChild(script)
+
+      // Create a new 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;}'
+      // Inject the style element into the head
+      document.head.appendChild(style)
+      // Set the text content of the style element to the CSS text
+      style.textContent = cssVar
+    },
+
+    // Method to add google search input attributes
+    setupCustomAttr() {
+      console.log('setupCustomInputAttr ...')
+
+      const targetNode = document.querySelector('input[name="search"]')
+      const buttonNode = document.querySelector('button.gsc-search-button')
+
+      if (targetNode) {
+        // Add keyup.enter event listener
+        targetNode.addEventListener('keyup', this.handleKeyUp)
+        buttonNode.addEventListener('click', this.handleKeyUp)
+      }
+
+      this.setupPaginationEvent()
+    },
+
+    setupPaginationEvent() {
+      console.log('setupPaginationEvent ....')
+      // Introduce a delay before setting up addEventListener on pagination
+      setTimeout(() => {
+        this.handleSearchResultLinkTitle()
+        const paginationNodes = document.querySelectorAll('.gsc-cursor-page')
+        console.log('paginationNodes length ..', paginationNodes.length)
+
+        if (paginationNodes && paginationNodes.length > 0) {
+          console.log('FOUND PAGINATION ....', paginationNodes)
+
+          // Loop through each element and add a click event listener
+          paginationNodes.forEach((paginationNode) => {
+            // Check if the click event listener has already been added
+            if (!paginationNode.clickEventListenerAdded) {
+              // Add a click event listener
+              paginationNode.addEventListener(
+                'click',
+                this.handleSearchResultTitle
+              )
+              // Mark that the click event listener has been added
+              paginationNode.clickEventListenerAdded = true
+              console.log('Adding a click event listener')
+            }
+          })
+        }
+      }, 2000) // Adjust the delay time as needed
+    },
+
+    // Method to trim text after '|'
+    handleSearchResultTitle() {
+      //alert('handleSearchResultTitle ....')
+      this.setupPaginationEvent()
+    },
+
+    handleSearchResultLinkTitle() {
+      //alert('handleSearchResultLinkTitle ....')
+      // Get all targetNodes with class "a.gs-title"
+      var targetNodes = document.querySelectorAll('a.gs-title')
+      console.log('search list title targetNodes :- ', targetNodes)
+
+      // Loop through each element and hide the text after the "|"
+      targetNodes.forEach(function(element) {
+        // Get the text content
+        var text = element.textContent || element.innerText
+
+        // Find the index of the "|" symbol
+        var pipeIndex = text.indexOf('|')
+        console.log('text :- ', text)
+        // If the "|" symbol is found, update the text content to display only the part before "|"
+        if (pipeIndex !== -1) {
+          element.textContent = text.substring(0, pipeIndex).trim()
+        }
+      })
+    },
+
+    handleKeyUp(event) {
+      if (event.key === 'Enter' || event.type === 'click') {
+        let keyword = event.key
+          ? event.target.value
+          : document.querySelector('input[name="search"]').value
+
+        // console.log('Enter key pressed. Value:', keyword)
+
+        // 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
+          // console.log('URL does not contains "/search" ...', URL)
+          window.location.assign(URL)
+        }
+
+        this.setupPaginationEvent
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+
+.wcl-search {
+  :deep(form.gsc-search-box) {
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+    width: 100%;
+  }
+  :deep(.gsib_a) {
+    padding: 0 !important;
+    height: 56px;
+  }
+  :deep(.gsib_b) {
+    position: absolute;
+    right: 5px;
+    top: 15px;
+  }
+  :deep(.gcsc-more-maybe-branding-root) {
+    display: none;
+  }
+  :deep(table.gsc-input) {
+    position: relative;
+  }
+  :deep(td.gsc-input) {
+    border: none;
+    padding: 0;
+    width: 100%;
+  }
+  :deep(.gsc-input-box) {
+    border: none;
+  }
+  :deep(input.gsc-input) {
+    border-radius: 8px 0px 0px 8px;
+    border: 1px solid $gray !important;
+    border-right: 0 !important;
+    background: none !important;
+    color: #495057;
+    height: 56px !important;
+    position: relative;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    padding: 0.375rem 0.75rem !important;
+
+    @media screen and (max-width: 320px) {
+      width: 220px;
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+  :deep(.gsc-search-button) {
+    display: -ms-flexbox;
+    display: flex;
+    margin-left: 0px;
+    height: 56px;
+    margin-top: 0px;
+  }
+  :deep(button.gsc-search-button) {
+    background: $orange;
+    border: none;
+    border-radius: 0px 8px 8px 0px;
+    color: $black;
+    display: flex;
+    align-items: center;
+    height: 56px !important;
+    font-size: 16px;
+    font-weight: 700;
+    padding-right: 32px;
+    padding-left: 32px;
+
+    &:before {
+      content: 'Search';
+    }
+    @media screen and (max-width: 767px) {
+      margin-top: 6px;
+    }
+    @media screen and (max-width: 320px) {
+      padding-right: 16px;
+      padding-left: 16px;
+    }
+
+    svg {
+      fill: black;
+      height: 18px;
+      width: 18px;
+      margin-left: 10px;
+    }
+
+    :focus {
+      box-shadow: 0px;
+    }
+  }
+
+  :deep(.gsst_a .gscb_a) {
+    color: #191919;
+  }
+  :deep(.gsc-result-info) {
+    color: #191919;
+    font-size: 16px;
+    font-weight: 400;
+  }
+  :deep(.gsc-above-wrapper-area) {
+    padding: 20px 0;
+    border-bottom: none;
+  }
+  /* search list start */
+  :deep(.gsc-url-top) {
+    display: none;
+  }
+  :deep(.gsc-table-result) {
+    line-height: 1.6;
+    padding: 0 5px;
+    font-size: 16px;
+    font-weight: 400;
+    width: 80%;
+    b {
+      color: #191919;
+      font-size: 16px;
+      font-weight: normal;
+    }
+  }
+  :deep(.gsc-resultsRoot.gsc-tabData) {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 15px;
+    padding-right: 15px;
+
+    &:hover {
+      border: none;
+    }
+  }
+  :deep(.gs-bidi-start-align.gs-snippet) {
+    color: #191919 !important;
+    line-height: 24px;
+  }
+  :deep(.gsc-thumbnail-inside) {
+    position: relative;
+    padding: 0;
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      height: 16px;
+      width: 11px;
+      top: 5px;
+      right: 16px;
+      background-repeat: no-repeat;
+      background-image: url(../../../assets/icons/chev-right.svg);
+      background-size: 100%;
+    }
+    div.gs-title {
+      width: 90%;
+      margin-bottom: 12px;
+      overflow: visible;
+    }
+    a.gs-title {
+      color: #191919 !important;
+      font-weight: 700;
+      line-height: 24px;
+      font-size: 20px;
+      border: 3px solid transparent;
+      padding-left: 5px;
+      padding-right: 5px;
+      text-decoration: underline;
+
+      &:hover {
+        border: 3px solid #da47ff;
+        color: #006bff !important;
+        b {
+          color: #006bff !important;
+        }
+      }
+
+      b {
+        color: #191919 !important;
+        font-size: 20px;
+      }
+    }
+  }
+  :deep(.gsc-orderby-label) {
+    font-size: 16px;
+    font-weight: 700;
+    color: #191919;
+  }
+  :deep(.gsc-selected-option-container) {
+    background-color: white;
+    border-radius: 10px;
+    margin-top: 0px;
+    padding-top: 6px;
+    margin-right: 0;
+    margin-left: 4px;
+    padding-left: 20px;
+    padding-bottom: 6px;
+    height: 40px;
+    .gsc-selected-option {
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+      margin-right: 20px;
+    }
+  }
+  :deep(.gsc-control-cse .gsc-option-selector) {
+    margin-top: 0;
+    margin-right: 10px;
+  }
+  :deep(.gsc-expansionArea > .gsc-webResult.gsc-result) {
+    border: 0;
+    flex: 0 0 100%;
+    max-width: 100%;
+    padding: 0;
+    &:first-child {
+      border-top: 1px solid #bababa;
+    }
+    > div {
+      border-bottom: 1px solid #bababa;
+      padding: 32px 0;
+    }
+  }
+
+  :deep(.gsc-results .gsc-cursor-box .gsc-cursor-current-page) {
+    background-color: lightgrey;
+  }
+  :deep(.gsc-results .gsc-cursor-box .gsc-cursor-page) {
+    border: 1px solid grey;
+    color: #333333;
+    padding: 10px 12px;
+    border-radius: 5px;
+    font-size: 16px;
+    font-weight: 400;
+  }
+  :deep(.gsc-results .gsc-cursor-box) {
+    margin-top: 50px;
+  }
+
+  /* search list end */
+  @include mq('xs') {
+    .not-extra-small-screen {
+      display: none;
+    }
+  }
+}
+@media screen and (max-width: 767px) {
+  :deep(.gssb_c) {
+    width: 85% !important;
+  }
+}
+</style>

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

@@ -1,32 +1,22 @@
 <template>
   <div class="app-search-result">
-    <div v-if="isLoading" class="app-search-result__loader"></div>
+    <div v-if="isLoading" class="app-search-result__loader" ></div>
     <p
       v-if="!(isTypeahead && numFound > 0) && !isLoading"
       class="app-search-result__found"
     >
-      <span
-        >{{ numFound }} results found for
-        {{ !suggestion ? query : suggestion }}</span
-      >
-    </p>
-    <p
-      v-if="results && results.length > 0 && suggestion"
-      class="app-search-result__suggestion"
-    >
-      Showing results for <span class="suggestion">{{ suggestion }}</span>
+      <span>{{ numFound }} results found for {{ query }}</span>
     </p>
     <card-grid
       v-if="results && results.length > 0 && !isLoading"
       :force-lg-columns-per-row="1"
       :force-md-columns-per-row="1"
       :cards="results"
-      :is-selectable="false"
+      :is-selectable="true"
       :size="'full'"
       :row-spacing="'none'"
       :no-padding-top="true"
       @selected="onSelectResult"
-      @selected-title="onSelectCardTitle"
     >
       <template v-slot:cardItem="{ card }">
         <card-grid-item
@@ -39,7 +29,7 @@
           :description="
             !isTypeahead && card.description
               ? truncate(card.description, 144)
-              : card.htmlSnippet || ''
+              : ''
           "
           :strip-description-html="true"
           :taxonomies="{
@@ -47,7 +37,6 @@
             topic: card.topic,
             language: card.language
           }"
-          :is-card-title-selectable="isCardTitleSelectable"
         />
       </template>
       <template
@@ -69,6 +58,7 @@
             :aria-label="'search result pagination'"
             :rows="pageLimit"
             :offset="offset"
+            :max-pages="4"
             :total="numFound"
             :align="'start'"
             @prev="(pg) => $emit('pageChanged', pg.currentPage)"
@@ -123,14 +113,6 @@ export default {
     isLoading: {
       type: Boolean,
       required: false
-    },
-    suggestion: {
-      type: String,
-      default: null
-    },
-    isCardTitleSelectable: {
-      type: Boolean,
-      default: false
     }
   },
   methods: {
@@ -143,18 +125,6 @@ export default {
       }
       return value
     },
-    onSelectCardTitle(card) {
-      navigateToPath.call(
-        this,
-        card?.selectedCard?.link,
-        card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
-      )
-      this.$nextTick(() => this.$emit('selected-title'))
-
-      if (this.$gtm) {
-        this.fireGTM(card)
-      }
-    },
     onSelectResult(card) {
       navigateToPath.call(
         this,
@@ -162,12 +132,6 @@ export default {
         card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
       )
       this.$nextTick(() => this.$emit('selected'))
-
-      if (this.$gtm) {
-        this.fireGTM(card)
-      }
-    },
-    fireGTM(card) {
       let attrs = {
         location:
           this.$route?.path === '/'
@@ -185,7 +149,9 @@ export default {
         topic: card?.selectedCard?.topic,
         language: card?.selectedCard?.language
       }
-      this.$gtm.push({ event: 'custom.search.site.result', ...attrs })
+      if (this.$gtm) {
+        this.$gtm.push({ event: 'custom.search.site.result', ...attrs })
+      }
     },
     showMoreResults() {
       if (this.$nuxt) {
@@ -199,13 +165,8 @@ export default {
 <style lang="scss" scoped>
 @import '../../../../includes/scss/all';
 .app-search-result {
-  &__found,
-  &__suggestion {
+  &__found {
     margin: 40px 16px;
-    .suggestion {
-      font-weight: bold;
-      color: #006bff;
-    }
   }
 
   :deep(.card-grid-item__card) {
@@ -253,25 +214,4 @@ export default {
     }
   }
 }
-
-.wcl-search__google {
-  .app-search-result {
-    :deep(.card-grid-item__card) {
-      border-radius: 0 !important;
-      border-bottom: solid $gray-alt 1px;
-      &:hover {
-        background-color: transparent !important;
-      }
-    }
-    :deep(.card-title) {
-      text-decoration: underline;
-      border: 3px solid transparent;
-      width: auto;
-      &:hover {
-        border: 3px solid #da47ff;
-        color: #006bff !important;
-      }
-    }
-  }
-}
 </style>

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

@@ -15,32 +15,29 @@ const contentParser = () => {
 
 export default {
   title: 'SubComponents/Search',
-  component: { Search },
-  tags: ['autodocs'],
+  component: Search,
   argTypes: {
+    pageLimit: {
+      control: 'number'
+    },
     contentParser: {
+      control: 'function',
       table: { disable: true }
+    },
+    isTypeahead: {
+      control: 'boolean'
+    },
+    initialSearchQuery: {
+      control: 'text'
     }
-  },
+  }
+}
+
+export const Default = {
   args: {
     pageLimit: 5,
     contentParser: contentParser,
     isTypeahead: false,
-    initialSearchQuery: 'Metal',
-    googleSearchFlag: 'solar',
-    visibleSearchList: true
+    initialSearchQuery: 'Metal'
   }
 }
-
-const DefaultSearch = (args) => ({
-  components: { Search },
-  setup () {
-    return { args }
-  },
-  template: `<search 
-  v-bind="args" 
-  ref="solrsearch" />`
-})
-
-export const Default = DefaultSearch.bind({})
-