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

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

@@ -45,7 +45,7 @@
           :taxonomies="{
             industry: card.industry,
             topic: card.topic,
-            language: card.language
+            language: card.language,
           }"
           :is-card-title-selectable="isCardTitleSelectable"
         />
@@ -94,44 +94,44 @@ export default {
   props: {
     isTypeahead: {
       type: Boolean,
-      required: false
+      required: false,
     },
     pageLimit: {
       type: Number,
       required: false,
-      default: 20
+      default: 20,
     },
     numFound: {
       type: Number,
       required: false,
-      default: 0
+      default: 0,
     },
     query: {
       type: String,
       required: false,
-      default: ''
+      default: '',
     },
     results: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     offset: {
       type: Number,
       required: false,
-      default: 0
+      default: 0,
     },
     isLoading: {
       type: Boolean,
-      required: false
+      required: false,
     },
     suggestion: {
       type: String,
-      default: null
+      default: null,
     },
     isCardTitleSelectable: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   methods: {
     onClickItem(event, item, index) {
@@ -146,8 +146,8 @@ export default {
     onSelectCardTitle(card) {
       navigateToPath.call(
         this,
-        card?.selectedCard?.link,
-        card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+        card?.selectedCard?.link.match(/https?:\/\/[^\/]+(\/[^?#]*)/)[1], // open link in current environment
+        card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
       )
       this.$nextTick(() => this.$emit('selected-title'))
 
@@ -158,8 +158,8 @@ export default {
     onSelectResult(card) {
       navigateToPath.call(
         this,
-        card?.selectedCard?.link,
-        card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+        card?.selectedCard?.link.match(/https?:\/\/[^\/]+(\/[^?#]*)/)[1], // title click is used for search result, but change also included here
+        card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
       )
       this.$nextTick(() => this.$emit('selected'))
 
@@ -173,8 +173,8 @@ export default {
           this.$route?.path === '/'
             ? 'Homepage'
             : this.$route?.path === '/search'
-            ? 'Search Page'
-            : this.$route?.path,
+              ? 'Search Page'
+              : this.$route?.path,
         label: this.query,
         results: this.results.length,
         clickText: card.selectedCard.title,
@@ -183,7 +183,7 @@ export default {
         targetElement: card.ev.target,
         industry: card?.selectedCard?.industry,
         topic: card?.selectedCard?.topic,
-        language: card?.selectedCard?.language
+        language: card?.selectedCard?.language,
       }
       this.$gtm.push({ event: 'custom.search.site.result', ...attrs })
     },
@@ -191,8 +191,8 @@ export default {
       if (this.$nuxt) {
         this.$router.push('/search?q=' + this.query)
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

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

@@ -22,18 +22,18 @@
           @update="searchType !== 'googlerest' ? onChange : () => {}"
           @keyup.enter="onChange"
         ></b-form-input>
-        <b-input-group-append>
+        <template #append>
           <b-button size="sm" class="search-button" @click="onSearch"
             ><span class="not-extra-small-screen">Search</span>
             <img alt="search icon" :src="searchIcon"
           /></b-button>
-        </b-input-group-append>
+        </template>
       </b-input-group>
       <search-listing
         v-if="loadSearchList && (searchResults || isLoading)"
         :class="{
           [`wcl-search__typeahead`]: isTypeahead,
-          [`wcl-search__modal`]: isTypeahead
+          [`wcl-search__modal`]: isTypeahead,
         }"
         :is-loading="isLoading"
         :is-typeahead="isTypeahead"
@@ -56,35 +56,35 @@
 import axios from 'axios'
 import searchIcon from '../../../assets/icons/search.svg?url'
 import SearchListing from './SearchListing/index.vue'
-import { BButton, BInputGroup, BFormInput, BInputGroupAppend } from 'bootstrap-vue-next'
+import { BButton, BInputGroup, BFormInput } from 'bootstrap-vue-next'
 
 export default {
-  components: { SearchListing, BButton, BInputGroup, BFormInput, BInputGroupAppend },
+  components: { SearchListing, BButton, BInputGroup, BFormInput },
   props: {
     pageLimit: {
       type: Number,
-      required: true
+      required: true,
     },
     contentParser: {
       type: Function,
-      required: true
+      required: true,
     },
     isTypeahead: {
       type: Boolean,
-      required: true
+      required: true,
     },
     initialSearchQuery: {
       type: String,
-      default: ''
+      default: '',
     },
     googleSearchFlag: {
       type: String,
-      default: 'solar'
+      default: 'solar',
     },
     visibleSearchList: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   data() {
     return {
@@ -95,16 +95,16 @@ export default {
       field_language: '8671',
       searchType: this.googleSearchFlag,
       googleSearchScript: false,
-      loadSearchList: this.visibleSearchList
+      loadSearchList: this.visibleSearchList,
     }
   },
   computed: {
     searchClass() {
       return {
         'wcl-search': true,
-        'wcl-search__google': this.searchType !== 'solar'
+        'wcl-search__google': this.searchType !== 'solar',
       }
-    }
+    },
   },
   mounted() {
     if (this.searchType === 'google') {
@@ -134,9 +134,9 @@ export default {
               key: apiKey,
               cx: searchEngineId,
               q: query,
-              start: start
-            }
-          }
+              start: start,
+            },
+          },
         )
         return response
       } catch (error) {
@@ -156,7 +156,7 @@ export default {
         apiKey,
         searchEngineId,
         searchQuery,
-        start
+        start,
       )
       let items = []
       let suggest = response?.data?.spelling?.correctedQuery || ''
@@ -165,7 +165,7 @@ export default {
           apiKey,
           searchEngineId,
           response?.data?.spelling?.correctedQuery,
-          start
+          start,
         )
         items = response?.data?.items
       } else if (response?.data?.items) {
@@ -181,7 +181,7 @@ export default {
           // Return the modified item with the updated title
           return {
             ...item,
-            title: modifiedTitle
+            title: modifiedTitle,
           }
         })
 
@@ -190,7 +190,7 @@ export default {
           numFound: Number(totalResults),
           query: this.searchQuery,
           results: modifiedResults,
-          suggestion: suggest
+          suggestion: suggest,
         }
       } else {
         this.searchResults = {
@@ -198,7 +198,7 @@ export default {
           numFound: 0,
           query: this.searchQuery ?? '',
           results: [],
-          suggestion: suggest
+          suggestion: suggest,
         }
       }
       this.$emit('loading', false)
@@ -214,10 +214,10 @@ export default {
             this.$route?.path === '/'
               ? 'Homepage'
               : this.$route?.path === '/search'
-              ? 'Search Page'
-              : this.$route?.path,
+                ? 'Search Page'
+                : this.$route?.path,
           label: this.searchQuery,
-          results: this.searchResults.numFound
+          results: this.searchResults.numFound,
         }
         if (this.$gtm) {
           this.$gtm.push({ event: 'custom.search.site.submit', ...attrs })
@@ -291,7 +291,7 @@ export default {
           query: searchQuery,
           start: pageNr > 1 ? (pageNr - 1) * pageLimit : 0,
           rows: pageLimit,
-          field_language: this.field_language
+          field_language: this.field_language,
         }).then((res) => {
           if (res.numFound) {
             this.searchResults = {
@@ -299,7 +299,7 @@ export default {
               numFound: Number(res.numFound),
               query: searchQuery,
               results: res.results,
-              suggestion: null
+              suggestion: null,
             }
           } else {
             this.searchResults = {
@@ -307,7 +307,7 @@ export default {
               numFound: 0,
               query: this.searchQuery ?? '',
               results: [],
-              suggestion: null
+              suggestion: null,
             }
           }
           this.$emit('loading', false)
@@ -322,10 +322,10 @@ export default {
                 this.$route?.path === '/'
                   ? 'Homepage'
                   : this.$route?.path === '/search'
-                  ? 'Search Page'
-                  : this.$route?.path,
+                    ? 'Search Page'
+                    : this.$route?.path,
               label: this.searchQuery,
-              results: this.searchResults.numFound
+              results: this.searchResults.numFound,
             }
             if (this.$gtm) {
               this.$gtm.push({ event: 'custom.search.site.submit', ...attrs })
@@ -340,7 +340,9 @@ export default {
       if (this.googleSearchScript === false) {
         const script = document.createElement('script')
         script.async = true
-        script.src = process.env.GOOGLE__URL
+        script.src = this.$config
+          ? this.$config.public.googleSearch
+          : process.env.GOOGLE__URL
         document.head.appendChild(script)
         this.googleSearchScript = true
 
@@ -386,8 +388,8 @@ export default {
 
         this.setupPaginationEvent()
       }
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>
@@ -454,8 +456,8 @@ export default {
       display: none;
     }
   }
-    // Google Search styling
-    &.wcl-search__google {
+  // Google Search styling
+  &.wcl-search__google {
     :deep(form.gsc-search-box) {
       position: relative;
       display: -ms-flexbox;

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

@@ -3,26 +3,12 @@ import SingleImage from './index.vue'
 export default {
   title: 'SubComponents/SingleImage',
   component: SingleImage,
+  tags: ['autodocs'],
   argTypes: {
     size: {
       control: 'select',
       options: ['page', 'content', 'half-content']
-    },
-    caption: {
-      control: 'text'
-    },
-    url: {
-      control: 'text',
-    },
-    rtl: {
-      control: 'boolean'
-    },
-    presentation: {
-      control: 'boolean'
-    },
-    alt: {
-      control: 'text',
-     }
+    }
   }
 }
 

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

@@ -17,6 +17,7 @@ const mockData = {
 export default {
   title: 'SubComponents/VideoThumbnail',
   component: { VideoThumbnail },
+  tags: ['autodocs'],
   argTypes: {
     video: {
       control: 'object',

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

@@ -16,29 +16,28 @@
       </div>
     </a>
     <!-- Modal -->
-    <div v-if="showModal" :id="wcl-video-modal" class="modal" tabindex="-1" aria-modal="true" role="dialog" style="display: block;">
-      <div class="modal-dialog modal-dialog-scrollable">
-        <div class="modal-content">
-          <div class="modal-header">
-            <button type="button" class="btn-close" @click="showModal = !showModal" aria-label="close"></button>
-          </div>
-          <div class="modal-body">
-            <div class="wcl-video-modal__video">
-              <video-media
-                :media-title="video.mediaTitle"
-                :media-description="video.mediaDescription"
-                :video-id="video.id"
-                :provider="video.provider"
-                :transcript="video.transcript"
-                :transcript-title="video.transcriptTitle"
-                :fix-width="video.fixWidth"
-                :rtl="video.rtl"
-              />
-            </div>
-          </div>
-        </div>
+    <b-modal
+      :id="`wcl-video-modal`"
+      v-model="showModal"
+      scrollable
+      class="wcl-video-modal__modal"
+      no-footer
+      size="xl"
+    >
+      <div class="wcl-video-modal__video" v-if="showModal">
+        <video-media
+          :media-title="video.mediaTitle"
+          :media-description="video.mediaDescription"
+          :video-id="video.id"
+          :provider="video.provider"
+          :transcript="video.transcript"
+          :transcript-title="video.transcriptTitle"
+          :fix-width="video.fixWidth"
+          :rtl="video.rtl"
+        />
       </div>
-    </div>
+      <template #footer><div></div></template>
+    </b-modal>
   </div>
 </template>
 
@@ -46,148 +45,61 @@
 import VideoMedia from './../../Paragraphs/VideoPlayer/index.vue'
 import VideoPlay from './../../../assets/icons/video-play.svg?url'
 import IconClose from './../../../assets/icons/icon-close.svg?url'
+import { BModal } from 'bootstrap-vue-next'
+import axios from 'axios'
 
 export default {
   name: 'VideoThumbnail',
   components: {
     VideoMedia,
-    IconClose
+    IconClose,
+    'b-modal': BModal,
   },
   props: {
     video: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
       VideoPlay,
       IconClose,
       showModal: false,
-      videoThumbnail: ''
+      videoThumbnail: '',
     }
   },
   mounted() {
     this.getVideoThumbnail()
   },
   methods: {
-    async getVideoThumbnail() {
-      if (this.video.provider === 'youtube') {
-        this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/maxresdefault.jpg`
-        if (process.env.IS_STORYBOOK !== 'TRUE') {
-          let thumbnailAvailable = await this.$axios?.get(
-            `${window.location.origin}/api/v2/urlExists?url=${this.videoThumbnail}`
-          )
-          if (
-            thumbnailAvailable &&
-            thumbnailAvailable.data &&
-            thumbnailAvailable.data.valid === false
-          ) {
+    async getVideoThumbnail(url) {
+      try {
+        if (this.video.provider === 'youtube') {
+          this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/maxresdefault.jpg`
+          const response = await axios.head(this.videoThumbnail)
+          if (response.status === 200) {
+          } else {
             this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`
           }
+        } else if (this.video.provider === 'vimeo') {
+          let thumbnail = await axios.get(
+            `https://vimeo.com/api/v2/video/${this.video.id}.json`,
+          )
+          if (thumbnail.data) {
+            this.videoThumbnail = thumbnail.data[0].thumbnail_large
+          }
+        }
+      } catch (error) {
+        if (error.response && error.response.status === 404) {
+          this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`
+        } else {
         }
-      } else if (this.video.provider === 'vimeo') {
-        this.getVimeoThumbnail()
       }
     },
-    async getVimeoThumbnail() {
-      let thumbnail = await this.$axios.get(
-        `https://vimeo.com/api/v2/video/${this.video.id}.json`
-      )
-      if (thumbnail.data) {
-        this.videoThumbnail = thumbnail.data[0].thumbnail_large
-      }
-    }
-  }
+  },
 }
 </script>
-<style lang="scss">
-@import '../../../includes/scss/all';
-// The modal styling
-  .modal {
-  background: rgba(0,0,0,0.5)
-}
-
-.modal-backdrop {
-  display: none;
-}
-.modal-dialog {
-  max-width: 1110px;
-  @media only screen and (max-width: 1150px) {
-    margin: {
-      left: 15px;
-      right: 15px;
-      top: 15px;
-    }
-  }
-
-  .modal-content {
-    position: relative;
-    border-radius: 8px;
-  }
-
-  .modal-header {
-    position: absolute;
-    top: 0;
-    height: 45px;
-    background: $white;
-    z-index: 1;
-    width: 100%;
-
-    &__wrap {
-      position: relative;
-      width: 100%;
-      a {
-        position: absolute;
-        right: 0;
-        z-index: 1;
-        &.rtl {
-          right: auto;
-          left: 0;
-        }
-        svg {
-          fill: $black;
-        }
-      }
-    }
-  }
-  .modal-body {
-    padding: 32px;
-    margin-top: 16px;
-    .video-player {
-      @include fp(min-height, 250, 588);
-    }
-
-    .paragraph--video-media {
-      margin: 0;
-      .container {
-        padding: 0;
-        width: 100%;
-      }
-      h3 {
-        margin: 0;
-        font-style: normal;
-        font-weight: bold;
-        font-size: 28px;
-        line-height: 32px;
-        margin-bottom: 16px;
-        display: inline-block;
-        width: 98%;
-      }
-    }
-    .section-group__block {
-      max-width: 100%;
-    }
-  }
-  .modal-header,
-  .modal-footer {
-    border: none;
-  }
-  .modal-footer {
-    display: none;
-  }
-}
-</style>
 <style lang="scss" scoped>
 @import '../../../includes/scss/all';
 // Outside wrapper style

package/src/includes/scss/mixins/src/grid.scss

@@ -7,14 +7,16 @@ $grid-breakpoints: (
   sm: 576px,
   md: 768px,
   lg: 992px,
-  xl: 1200px
+  xl: 1200px,
+  xxl: 1400px
 );
 
 $container-max-widths: (
   sm: 540px,
   md: 720px,
   lg: 960px,
-  xl: 1140px
+  xl: 1140px,
+  xxl: 1320px
 );
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.

package/src/includes/scss/mixins/src/units.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 $current-rootsize: 16px;
 
 // Returns a unitless number
@@ -53,10 +54,11 @@ $current-rootsize: 16px;
 
 
 // Converts a px value to rems. Should only work in absolute em document context (root level), unless $context is specified
-@function px-to-rem($value, $context: $current-rootsize) {
-    @if unit($context) == "rem" {
-        $context: rem-to-px($context);
-    }
+/**/ 
+/* @function px-to-rem($value, $context: $current-rootsize) {
+    //@if unit($context) == "rem" {
+    //    $context: rem-to-px($context);
+    //}
     $result: ();
 
     @each $val in $value {
@@ -67,6 +69,25 @@ $current-rootsize: 16px;
       }
     }
     @return $result;
+}  */
+
+@function px-to-rem($px, $context: $current-rootsize) {
+  @if unit($context) == "rem" {
+      $context: rem-to-px($context);
+  }
+  $result: ();
+
+  // Iterate over each value in the $px list
+  @each $val in $px {
+    @if unit($val) == "px" {
+      // Convert px to rem
+      $val: #{math.div($val, $context)}rem;
+    }
+    // Append converted value to the result list
+    $result: append($result, $val);
+  }
+
+  @return $result;
 }
 
 // Converts a em value to rems. Should only work in absolute em document context (root level), unless $context is specified