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

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({})
-