@worksafevictoria/wcl7.5 1.1.0 → 1.1.2

package/.storybook/main.js

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

package/package.json

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

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

@@ -17,6 +17,7 @@
       >
       <search
         ref="searchInputBox"
+        :google-search-flag="googleSearchFlag"
         :initial-search-query="searchQuery"
         :page-limit="pageLimit"
         :page-number="pageNumber"
@@ -31,7 +32,7 @@
 </template>
 
 <script>
-import Close from '../../../../assets/icons/close.svg'
+import Close from '../../../../assets/icons/close.svg?url'
 import Search from '../../../SubComponents/Search/index.vue'
 
 export default {
@@ -45,6 +46,10 @@ export default {
     contentParser: {
       type: Function,
       required: true
+    },
+    googleSearchFlag: {
+      type: String,
+      default: 'googlerest'
     }
   },
   data() {

package/src/components/Global/AppHeader/index.stories.js

@@ -18,45 +18,42 @@ const contentParser = () => {
 export default {
   title: 'Global/AppHeader',
   component: AppHeader,
+  tags: ['autodocs'],
   data() {
     return {
       appHeaderData
     }
   },
   argTypes: {
-    headerMenu: {
-      control: 'object',
-      defaultValue: appHeaderData
-    },
     contentParser: {
-      control: 'function',
-      defaultValue: contentParser,
       table: { disable: true }
-    },
-    isWorkWell: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    authenticated: {
-      control: 'boolean',
-      defaultValue: false
     }
+  },
+  args: {
+    headerMenu: appHeaderData,
+    contentParser: contentParser,
+    isWorkWell: false,
+    authenticated: false,
+    mainContent: 'Some dummy main content required for this example',
+    footerContent: 'Some dummy footer content required for this example'
   }
 }
 
-const DefaultContent = (args, { argTypes }) => ({
+const DefaultContent = (args) => ({
   components: { AppHeader },
-  props: Object.keys(argTypes),
+  setup() {
+    return { args }
+  },
   template: `
   <div>
   <app-header
-  v-bind="$props"
+  v-bind="args"
   />
     <main>
       <div class="container">
         <div class="row">
           <div class="col">
-            {{$props.mainContent}}
+            {{args.mainContent}}
           </div>
         </div>
       </div>
@@ -65,7 +62,7 @@ const DefaultContent = (args, { argTypes }) => ({
       <div class="container">
         <div class="row">
           <div class="col">
-          {{$props.footerContent}}
+          {{args.footerContent}}
           </div>
         </div>
       </div>
@@ -75,8 +72,3 @@ const DefaultContent = (args, { argTypes }) => ({
 })
 
 export const Default = DefaultContent.bind({})
-
-Default.args = {
-  mainContent: 'Some dummy main content required for this example',
-  footerContent: 'Some dummy footer content required for this example'
-}

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

@@ -416,14 +416,14 @@
 
 <script>
 import ModalSearch from './ModalSearch/index.vue'
-import Close from './../../../assets/icons/close.svg'
-import WorkSafeLogo from './../../../assets/icons/AppFooter/worksafe-footer-logo.svg'
-import WorkWellLogo from './../../../assets/icons/AppFooter/logo-workwell-reversed.svg'
-import CaretRight from './../../../assets/icons/caret-right.svg'
-import CaretDown from './../../../assets/icons/caret-down.svg'
-import SearchIcon from './../../../assets/icons/AppHeader/search-32px.svg'
-import CaretLeft from './../../../assets/icons/caret-left.svg'
-import MenuIcon from './../../../assets/icons/AppHeader/menu-32px.svg'
+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: {
@@ -527,6 +527,7 @@ export default {
       this.windowWidth = window.innerWidth
     },
     firstLevelClick(item, ref) {
+      console.log('in first level click')
       // Reset screen to fix whitespace
       if (window && window.scrollTo && this.screen === 'desktop') {
         window.scrollTo(0, 0)

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

@@ -1,8 +1,10 @@
 <template>
-  <h1>Form Instance</h1>
+  <div>
+    <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/Search/GoogleREST/index.stories.js

@@ -0,0 +1,50 @@
+import Search from './../index.vue'
+
+const contentParser = () => {
+  return Promise.resolve({
+    results: [
+      {
+        title: 'Content title 1',
+        description: 'Content description 2'
+      }
+    ],
+    offset: 0,
+    numFound: 1000
+  })
+}
+
+export default {
+  title: 'SubComponents/Search',
+  component: { Search },
+  tags: ['autodocs'],
+  argTypes: {
+   contentParser: {
+     table: { disable: true }
+    },
+    googleSearchFlag: {
+      table: { disable: true }
+    }
+  },
+  args: {
+    pageLimit: 10,
+    contentParser: contentParser,
+    isTypeahead: false,
+    initialSearchQuery: 'Mental Health',
+    googleSearchFlag: 'googlerest',
+    visibleSearchList: true
+  },
+  
+}
+
+const DefaultSearch = (args) => ({
+  components: { Search },
+  setup () {
+    return { args }
+  },
+  template: `<search 
+  v-bind="args" 
+  :search-type="googleSearchFlag" 
+  ref="googlerest" />`
+})
+
+export const GoogleREST = DefaultSearch.bind({})

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

@@ -0,0 +1,23 @@
+import Search from './../index.vue'
+
+export default {
+  title: 'SubComponents/Search',
+  component: { Search },
+  tags: ['autodocs'],
+  args: {
+    googleSearchFlag: 'google'
+  }
+}
+
+const DefaultSearch = (args) => ({
+  components: { Search },
+  setup () {
+    return { args }
+  },
+  template: `<search 
+  v-bind="args" 
+  :google-search-flag="googleSearchFlag"
+  ref="googlerest" />`
+})
+
+export const GoogleSearch = DefaultSearch.bind({})

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

@@ -1,22 +1,32 @@
 <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 {{ query }}</span>
+      <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>
     </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="true"
+      :is-selectable="false"
       :size="'full'"
       :row-spacing="'none'"
       :no-padding-top="true"
       @selected="onSelectResult"
+      @selected-title="onSelectCardTitle"
     >
       <template v-slot:cardItem="{ card }">
         <card-grid-item
@@ -29,7 +39,7 @@
           :description="
             !isTypeahead && card.description
               ? truncate(card.description, 144)
-              : ''
+              : card.htmlSnippet || ''
           "
           :strip-description-html="true"
           :taxonomies="{
@@ -37,6 +47,7 @@
             topic: card.topic,
             language: card.language
           }"
+          :is-card-title-selectable="isCardTitleSelectable"
         />
       </template>
       <template
@@ -58,7 +69,6 @@
             :aria-label="'search result pagination'"
             :rows="pageLimit"
             :offset="offset"
-            :max-pages="4"
             :total="numFound"
             :align="'start'"
             @prev="(pg) => $emit('pageChanged', pg.currentPage)"
@@ -113,6 +123,14 @@ export default {
     isLoading: {
       type: Boolean,
       required: false
+    },
+    suggestion: {
+      type: String,
+      default: null
+    },
+    isCardTitleSelectable: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {
@@ -125,6 +143,18 @@ 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,
@@ -132,6 +162,12 @@ 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 === '/'
@@ -149,9 +185,7 @@ export default {
         topic: card?.selectedCard?.topic,
         language: card?.selectedCard?.language
       }
-      if (this.$gtm) {
-        this.$gtm.push({ event: 'custom.search.site.result', ...attrs })
-      }
+      this.$gtm.push({ event: 'custom.search.site.result', ...attrs })
     },
     showMoreResults() {
       if (this.$nuxt) {
@@ -165,8 +199,13 @@ export default {
 <style lang="scss" scoped>
 @import '../../../../includes/scss/all';
 .app-search-result {
-  &__found {
+  &__found,
+  &__suggestion {
     margin: 40px 16px;
+    .suggestion {
+      font-weight: bold;
+      color: #006bff;
+    }
   }
 
   :deep(.card-grid-item__card) {
@@ -214,4 +253,25 @@ 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,29 +15,32 @@ const contentParser = () => {
 
 export default {
   title: 'SubComponents/Search',
-  component: Search,
+  component: { Search },
+  tags: ['autodocs'],
   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'
+    initialSearchQuery: 'Metal',
+    googleSearchFlag: 'solar',
+    visibleSearchList: true
   }
 }
+
+const DefaultSearch = (args) => ({
+  components: { Search },
+  setup () {
+    return { args }
+  },
+  template: `<search 
+  v-bind="args" 
+  ref="solrsearch" />`
+})
+
+export const Default = DefaultSearch.bind({})
+