@worksafevictoria/wcl7.5 1.1.0-beta.1 → 1.1.0-beta.10

package/src/components/Paragraphs/ListGroup/navigation-card.stories.js

@@ -5,50 +5,53 @@ export default {
   title: 'Paragraphs/NavigationCards',
   component: ListGroup,
   argTypes: {
-    darkBackground: {
-      control: 'boolean',
-      defaultValue: true
-    },
-    items: {
-      control: 'object',
-      defaultValue: storyData.links
-    },
-    rtlItems: {
-      control: 'object',
-      defaultValue: storyDataAr.links
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
+    list: {
+      table: {
+        disable: true
+      }
     },
-    titleTag: {
-      control: 'text',
-      defaultValue: 'h2'
+    title: {
+      table: {
+        disable: true
+      }
     },
-    showListItemNavigationArrow: {
-      control: 'boolean',
-      defaultValue: false
+    role: {
+      table: {
+        disable: true
+      }
     },
-    showLargeSpacing: {
-      control: 'boolean',
-      defaultValue: false
+    subHeading: {
+      table: {
+        disable: true
+      }
     },
-    list: {
+    footerHeading: {
       table: {
         disable: true
       }
     },
-    title: {
+    showListLink: {
       table: {
         disable: true
       }
     }
+  },
+  args: {
+    darkBackground: true,
+    items: storyData.links,
+    rtlItems: storyDataAr.links,
+    rtl: false,
+    titleTag: 'h2',
+    showListItemNavigationArrow: true,
+    showLargeSpacing: false
   }
 }
 
 const Template = (args, { argTypes }) => ({
   components: { ListGroup },
-  props: Object.keys(argTypes),
+  setup () {
+    return { args }
+  },
   data() {
     return {
       storyData,
@@ -56,9 +59,9 @@ const Template = (args, { argTypes }) => ({
     }
   },
   template: `<list-group
-    v-bind="$props"
-    :list="rtl ? rtlItems : items"
-    :title="(rtl ? storyDataAr.title : storyData.title)"
+    v-bind="args"
+    :list="args.rtl ? args.rtlItems : args.items"
+    :title="(args.rtl ? storyDataAr.title : storyData.title)"
   />
 `
 })

package/src/components/Paragraphs/ScrollSpy/index.stories.js

@@ -1,6 +1,7 @@
 import ScrollSpy from './index.vue'
+import { BCol, BRow, BContainer } from 'bootstrap-vue-next'
 
-const itemList = [
+const englishItemList = [
   {
     text: 'Section one heading',
     id: 'item-1'
@@ -42,30 +43,22 @@ export default {
   title: 'Paragraphs/ScrollSpy',
   component: ScrollSpy,
   argTypes: {
-    title: {
-      control: 'text',
-      defaultValue: 'On this page'
-    },
     itemList: {
-      control: 'array'
-    },
-    itemListEnglish: {
-      control: 'array',
-      defaultValue: itemList
-    },
-    itemListArabic: {
-      control: 'array',
-      defaultValue: arabicItemList
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
+      table: {disable: true}
+    }
+  },
+  args: {
+    title: 'On this page',
+    itemListEnglish:  englishItemList,
+    itemListArabic: arabicItemList,
+    rtl: false
     }
-  }
 }
-const DefaultContent = (args, { argTypes }) => ({
-  components: { ScrollSpy },
-  props: Object.keys(argTypes),
+const DefaultContent = (args) => ({
+  components: { ScrollSpy, BCol, BRow, BContainer },
+  setup() {
+    return { args }
+  },
   data() {
     return {
       text: `
@@ -79,7 +72,7 @@ const DefaultContent = (args, { argTypes }) => ({
           ipsum commodo tempor sunt in proident.
         `,
       arabicText: `هنالك العديد من الأنواع المتوفرة لنصوص لوريم إيبسوم، ولكن الغالبية تم تعديلها بشكل ما عبر إدخال بعض النوادر أو الكلمات العشوائية إلى النص. إن كنت تريد أن تستخدم نص لوريم إيبسوم ما، عليك أن تتحقق أولاً أن ليس هناك أي كلمات أو عبارات محرجة أو غير لائقة مخبأة في هذا النص. بينما تعمل جميع مولّدات نصوص لوريم إيبسوم على الإنترنت على إعادة تكرار مقاطع من نص لوريم إيبسوم نفسه عدة مرات بما تتطلبه الحاجة، يقوم مولّدنا هذا باستخدام كلمات من قاموس يحوي على أكثر من 200 كلمة لا تينية، مضاف إليها مجموعة من الجمل النموذجية، لتكوين نص لوريم إيبسوم ذو شكل منطقي قريب إلى النص الحقيقي. وبالتالي يكون النص الناتح خالي من التكرار، أو أي كلمات أو عبارات غير لائقة أو ما شابه. وهذا ما يجعله أول مولّد نص لوريم إيبسوم حقيقي على الإنترنت.`,
-      itemList,
+      englishItemList,
       arabicItemList
     }
   },
@@ -126,7 +119,7 @@ const DefaultContent = (args, { argTypes }) => ({
         </div>
       </b-col>
       <b-col cols="4">
-      <scroll-spy v-bind="$props" :item-list="itemListEnglish" />
+      <scroll-spy v-bind="args" :item-list="args.itemListEnglish" />
       </b-col>
     </b-row>
 
@@ -174,11 +167,10 @@ const DefaultContent = (args, { argTypes }) => ({
         </div>
       </b-col>
       <b-col cols="4">
-      <scroll-spy v-bind="$props" :item-list="arabicItemList" />
+      <scroll-spy v-bind="args" :item-list="args.arabicItemList" />
       </b-col>
     </b-row>
     </b-container>`
 })
 
 export const Default = DefaultContent.bind({})
-Default.parameters = { controls: { exclude: ['itemList'] } }

package/src/components/Paragraphs/ScrollSpy/index.vue

@@ -22,10 +22,11 @@
 
 <script>
 import SectionGroup from '../../Containers/SectionGroup/index.vue'
+import { BNavbar, BListGroup, BListGroupItem } from 'bootstrap-vue-next'
 
 export default {
   name: 'ScrollSpy',
-  components: { SectionGroup },
+  components: { SectionGroup, BNavbar, BListGroup, BListGroupItem },
   props: {
     title: {
       type: String,

package/src/components/Paragraphs/TaskFinder/index.stories.js

@@ -8,38 +8,15 @@ import {
 export default {
   title: 'Paragraphs/TaskFinder',
   component: TaskFinder,
-  argTypes: {
-    taskList: {
-      control: 'object',
-      defaultValue: taskFinderTempData
-    },
-    title: {
-      control: 'text',
-      defaultValue: taskFinderTempTitle
-    },
-    text: {
-      control: 'text',
-      defaultValue: taskFinderTempText
-    },
-    headingTag: {
-      control: 'text',
-      defaultValue: 'h2'
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    workwell: {
-      control: 'boolean',
-      defaultValue: false
-    }
-  }
+  args: {
+    taskList: taskFinderTempData,
+    title: taskFinderTempTitle,
+    text: taskFinderTempText,
+    headingTag: 'h2',
+    rtl: false,
+    workwell: false
+  },
+  template: '<task-finder v-bind="args" :storybook="true"/>'
 }
 
-const DefaultContent = (args, { argTypes }) => ({
-  components: { TaskFinder },
-  props: Object.keys(argTypes),
-  template: '<task-finder v-bind="$props" :storybook="true"/>'
-})
-
-export const Default = DefaultContent.bind({})
+export const Default = {}

package/src/components/Paragraphs/TaskFinder/pdf/index.vue

@@ -25,7 +25,7 @@
 
 <script>
 import { isAbsoluteUrl } from '../../../../../lib/utility'
-import Row from './../../../Containers/Container/index.vue'
+import Row from './../../../Containers/Row/index.vue'
 import Container from './../../../Containers/Container/index.vue'
 import Column from './../../../Containers/Column/index.vue'
 import RichText from './../../../Paragraphs/RichText/index.vue'

package/src/components/Paragraphs/TextMedia/index.stories.js

@@ -19,75 +19,26 @@ const MockVideo = {
 export default {
   title: 'Paragraphs/Text + Media',
   component: TextMedia,
-  argTypes: {
-    content: {
-      control: 'text',
-      defaultValue:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'
-    },
-    titleText: {
-      control: 'text',
-      defaultValue: 'A sample media item'
-    },
-    titleTag: {
-      control: 'text',
-      defaultValue: 'h3'
-    },
-    hasBgColor: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    flip: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    workwell: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    video: {
-      control: 'object'
-    },
-    image: {
-      control: 'object'
-    },
-    mediaType: {
-      control: 'text'
-    },
-    storybook: {
-      control: 'boolean',
-      defaultValue: true
-    },
-    hideImageMob: {
-      control: 'boolean',
-      defaultValue: false
-    }
+  args: {
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>',
+    titleText: 'A sample media item',
+    titleTag: 'h3',
+    hasBgColor: false,
+    flip: false,
+    rtl: false,
+    workwell: false,
+    storybook: true,
+    hideImageMob: false
   }
 }
 
-const TextWithImageDefault = (args, { argTypes }) => ({
-  components: { TextMedia },
-  props: Object.keys(argTypes),
-  template: `<text-media v-bind="$props" />`
-})
-
-export const TextWithImage = TextWithImageDefault.bind({})
+export const TextWithImage = {}
 TextWithImage.args = {
   mediaType: 'image',
   image: MockImage
 }
 
-const TextWithVideoDefault = (args, { argTypes }) => ({
-  components: { TextMedia },
-  props: Object.keys(argTypes),
-  template: `<text-media v-bind="$props" />`
-})
-
-export const TextWithVideo = TextWithVideoDefault.bind({})
+export const TextWithVideo = {}
 TextWithVideo.args = {
   mediaType: 'video',
   video: MockVideo

package/src/components/Paragraphs/VideoGrid/index.stories.js

@@ -107,45 +107,28 @@ export default {
   title: 'Paragraphs/VideoGrid',
   component: { VideoGrid, Container, Row, Column },
   argTypes: {
-    gridTitle: {
-      control: 'text',
-      defaultValue: mockData.title
-    },
     titleTag: {
       control: 'select',
-      options: ['h2', 'h3'],
-      defaultValue: 'h2'
-    },
-    gridDescription: {
-      control: 'text',
-      defaultValue: mockData.description
-    },
-    videoList: {
-      control: 'object',
-      defaultValue: mockData.videos
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: mockData.rtl
-    },
-    threeColumns: {
-      control: 'boolean',
-      defaultValue: mockData.threeColumns
-    },
-    greyBackground: {
-      control: 'boolean',
-      defaultValue: mockData.greyBackground
-    },
-    cta: {
-      control: 'object',
-      defaultValue: mockData.cta
+      options: ['h2', 'h3']
     }
+  },
+  args: {
+    gridTitle: mockData.title,
+    titleTag: 'h2',
+    gridDescription: mockData.description,
+    videoList: mockData.videos,
+    rtl: mockData.rtl,
+    threeColumns: mockData.threeColumns,
+    greyBackground:  mockData.greyBackground,
+    cta:  mockData.cta
   }
 }
 
 const YoutubeContent = (args, { argTypes }) => ({
   components: { VideoGrid, Container, Row, Column },
-  props: Object.keys(argTypes),
+  setup() {
+    return { args };
+  },
   data() {
     return {
       videos: mockData.videos
@@ -156,7 +139,7 @@ const YoutubeContent = (args, { argTypes }) => ({
     <row>
       <column>
         <video-grid
-          v-bind="$props"
+          v-bind="args"
         />
       </column>
     </row>
@@ -165,3 +148,4 @@ const YoutubeContent = (args, { argTypes }) => ({
 })
 
 export const Youtube = YoutubeContent.bind({})
+

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>