@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,238 @@
+<template>
+  <div class="wcl-search">
+    <b-input-group>
+      <label class="visually-hidden" for="site-search"
+        >Search by keyword (Typed keyword automatically filters below
+        results)</label
+      >
+      <b-form-input
+        id="site-search"
+        v-model="searchQuery"
+        aria-label="searchbar"
+        debounce="600"
+        autocomplete="off"
+        trim
+        @update="onChange"
+      ></b-form-input>
+      <b-input-group-append>
+        <b-button size="sm" @click="onSearch"
+          ><span class="not-extra-small-screen">Search</span>
+          <img alt="search icon" :src="searchIcon"
+        /></b-button>
+      </b-input-group-append>
+    </b-input-group>
+    <search-listing
+      v-if="searchResults || isLoading"
+      :class="{
+        [`wcl-search__typeahead`]: isTypeahead,
+        [`wcl-search__modal`]: isTypeahead
+      }"
+      :is-loading="isLoading"
+      :is-typeahead="isTypeahead"
+      :num-found="searchResults && searchResults.numFound"
+      :query="searchResults && searchResults.query"
+      :results="searchResults ? searchResults.results : []"
+      :offset="searchResults && searchResults.offset"
+      :page-limit="pageLimit"
+      :content-parser="contentParser"
+      @selected="$emit('selected')"
+      @pageChanged="pageChanged"
+    />
+  </div>
+</template>
+
+<script>
+import searchIcon from '../../../assets/icons/search.svg?url'
+import SearchListing from './SearchListing/index.vue'
+import { BButton, BInputGroup, BFormInput, BInputGroupAppend } from 'bootstrap-vue-next'
+
+export default {
+  components: { SearchListing, BButton, BInputGroup, BFormInput, BInputGroupAppend },
+  props: {
+    pageLimit: {
+      type: Number,
+      required: true
+    },
+    contentParser: {
+      type: Function,
+      required: true
+    },
+    isTypeahead: {
+      type: Boolean,
+      required: true
+    },
+    initialSearchQuery: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      searchIcon,
+      searchQuery: '',
+      searchResults: null,
+      isLoading: false,
+      field_language: '8671'
+    }
+  },
+  mounted() {
+    if (this.initialSearchQuery) {
+      this.searchQuery = this.initialSearchQuery
+      this.onSearch()
+    }
+    if (this.isTypeahead && window) {
+      window.document.addEventListener('click', this.closeSearchResults)
+    }
+  },
+  beforeDestroy() {
+    if (this.isTypeahead && window) {
+      window.document.removeEventListener('click', this.closeSearchResults)
+    }
+  },
+  methods: {
+    onSearch() {
+      this.resetSearchResults()
+      this.$emit('query', this.searchQuery)
+      this.performSearch(1, this.searchQuery, this.pageLimit)
+    },
+    resetSearchResults() {
+      this.searchResults = null
+    },
+    closeSearchResults(ev) {
+      if (
+        this.isTypeahead &&
+        this.searchResults &&
+        ev?.target?.id !== 'site-search'
+      ) {
+        this.resetSearchResults()
+        this.searchQuery = null
+        this.$emit('query', null)
+      }
+    },
+    onChange() {
+      if (this.searchQuery && this.searchQuery.length > 2) {
+        this.onSearch()
+      }
+    },
+    pageChanged(newPageNumber) {
+      this.resetSearchResults()
+      this.performSearch(newPageNumber, this.searchQuery, this.pageLimit)
+    },
+    performSearch(pageNr = 1, searchQuery, pageLimit) {
+      if (searchQuery) {
+        this.$emit('loading', true)
+        this.isLoading = true
+        this.contentParser({
+          query: searchQuery,
+          start: pageNr > 1 ? (pageNr - 1) * pageLimit : 0,
+          rows: pageLimit,
+          field_language: this.field_language
+        }).then((res) => {
+          if (res.numFound) {
+            this.searchResults = {
+              offset: Number(res.offset),
+              numFound: Number(res.numFound),
+              query: searchQuery,
+              results: res.results
+            }
+          } else {
+            this.searchResults = {
+              offset: 0,
+              numFound: 0,
+              query: this.searchQuery ?? '',
+              results: []
+            }
+          }
+          this.$emit('loading', false)
+          this.isLoading = false
+          this.$emit('results', this.searchResults)
+          // wait for the page title to be updated and then fire the search event
+          setTimeout(() => {
+            const attrs = {
+              pageTitle: document.title,
+              pageURL: this.$route?.fullPath,
+              location:
+                this.$route?.path === '/'
+                  ? 'Homepage'
+                  : this.$route?.path === '/search'
+                  ? 'Search Page'
+                  : this.$route?.path,
+              label: this.searchQuery,
+              results: this.searchResults.numFound
+            }
+            if (this.$gtm) {
+              this.$gtm.push({ event: 'custom.search.site.submit', ...attrs })
+            }
+          }, 300)
+        })
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+
+.wcl-search {
+  position: relative;
+
+  &__typeahead {
+    margin-top: 8px;
+    width: 100%;
+    position: absolute;
+    z-index: 99;
+    box-shadow: 0 4px 30px rgb(0 0 0 / 18%);
+    background: $white;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+
+  input,
+  button {
+    height: 56px;
+    border: 1px solid $gray;
+  }
+  input {
+    border-radius: 8px 0px 0px 8px;
+    border: 1px solid $gray;
+    border-right: 0;
+
+    @media screen and (max-width: 320px) {
+      width: 220px;
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+  button.btn {
+    background: $orange;
+    color: $black;
+    border: none;
+    font-size: 16px;
+    font-weight: 700;
+    padding-right: 32px;
+    padding-left: 32px;
+    border-radius: 0px 8px 8px 0px;
+
+    @media screen and (max-width: 320px) {
+      padding-right: 16px;
+      padding-left: 16px;
+    }
+
+    img {
+      margin-left: 6px;
+    }
+
+    :focus {
+      box-shadow: 0px;
+    }
+  }
+
+  @include mq('xs') {
+    .not-extra-small-screen {
+      display: none;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,60 @@
+import SingleImage from './index.vue'
+
+export default {
+  title: 'SubComponents/SingleImage',
+  component: SingleImage,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['page', 'content', 'half-content']
+    },
+    caption: {
+      control: 'text'
+    },
+    url: {
+      control: 'text',
+    },
+    rtl: {
+      control: 'boolean'
+    },
+    presentation: {
+      control: 'boolean'
+    },
+    alt: {
+      control: 'text',
+     }
+  }
+}
+
+export const SizeHalfContent = {
+  args: {
+    size: 'half-content',
+    url: 'https://picsum.photos/1110/625/?image=27',
+    caption: 'this is the half content example',
+    alt: 'some alt text',
+    rtl: false,
+    presentation: false
+  }
+}
+
+export const SizePageContent = {
+  args: {
+    size: 'page',
+    url: 'https://picsum.photos/1110/625/?image=26',
+    caption: 'this is another caption',
+    alt: 'some alt text',
+    rtl: false,
+    presentation: false
+  }
+}
+
+export const SizeContent = {
+  args: {
+    size: 'content',
+    url: 'https://picsum.photos/1110/625/?image=66',
+    caption: 'This is the size content example',
+    alt: 'some alt text',
+    rtl: false,
+    presentation: false
+  }
+}

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

@@ -0,0 +1,98 @@
+<template>
+  <section-group :size="size" :rtl="rtl" class="wcl-single-image">
+    <template v-slot:content>
+      <row :class="{ rtl }">
+        <column>
+          <img
+            :src="url"
+            :alt="alt"
+            :role="presentation ? 'presentation' : false"
+            class="wcl-single-image__image"
+            :class="{
+              [`wcl-single-image__image--withCaption`]:
+                caption && caption.length > 0,
+              ['wcl-single-image__image--' + size]: true
+            }"
+          />
+          <div
+            v-if="caption && caption.length > 0"
+            class="wcl-single-image__caption"
+          >
+            {{ caption }}
+          </div>
+        </column>
+      </row>
+    </template>
+  </section-group>
+</template>
+<script>
+import Row from './../../Containers/Row/index.vue'
+import Column from './../../Containers/Column/index.vue'
+import SectionGroup from './../../Containers/SectionGroup/index.vue'
+
+export default {
+  name: 'SingleImage',
+  components: {
+    Row,
+    Column,
+    SectionGroup
+  },
+  props: {
+    // can be page, content, or half-content
+    size: {
+      type: String,
+      default: 'page'
+    },
+    url: {
+      type: String,
+      default: ''
+    },
+    caption: {
+      type: String,
+      default: ''
+    },
+    alt: {
+      type: String,
+      default: ''
+    },
+    presentation: {
+      type: Boolean,
+      default: false
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../includes/scss/mixins/all';
+.wcl-single-image {
+  &__image {
+    display: block;
+    border-radius: 6px;
+    width: 100%;
+    &--withCaption {
+      margin-bottom: 12px;
+    }
+    &--half-content {
+      max-width: 350px;
+    }
+  }
+  &__caption {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 20px;
+    letter-spacing: 0px;
+  }
+  .rtl {
+    @include makeRTL();
+  }
+  // If image needs to be flipped as well on RTL
+  // .rtl-flip {
+  //   @include makeRTLFlip();
+  // }
+}
+</style>

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

@@ -0,0 +1,41 @@
+import Container from '../../Containers/Container/index.vue'
+import Row from '../../Containers/Row/index.vue'
+import Column from '../../Containers/Column/index.vue'
+import VideoThumbnail from './index.vue'
+
+const mockData = {
+  id: '3FLapMJUmZQ',
+  mediaTitle: 'Some video title',
+  provider: 'youtube',
+  transcriptTitle: 'Transcript',
+  transcript:
+    '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.',
+  thumbnailQuality: 'max',
+  fixWidth: false
+}
+
+export default {
+  title: 'SubComponents/VideoThumbnail',
+  component: { VideoThumbnail },
+  argTypes: {
+    video: {
+      control: 'object',
+      defaultValue: mockData
+    }
+  }
+}
+
+const Template = (args, { argTypes }) => ({
+  components: { VideoThumbnail, Container, Row, Column },
+  props: Object.keys(argTypes),
+  template: `
+    <container>
+    <row>
+      <column md="5">
+        <video-thumbnail v-bind="$props" />
+      </column>
+    </row>
+    </container>
+  `
+})
+export const Default = Template.bind({})

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

@@ -0,0 +1,239 @@
+<template>
+  <div v-if="videoThumbnail" class="wcl-video-thumbnail-wrapper">
+    <a href="#" @click.prevent="showModal = true">
+      <div class="video-thumbnail">
+        <img
+          :src="videoThumbnail"
+          alt="video thumbnail"
+          width="100%"
+          class="video-thumbnail__image"
+        />
+        <img
+          :src="VideoPlay"
+          alt="Play button"
+          class="video-thumbnail__button"
+        />
+      </div>
+    </a>
+    <b-modal
+      :id="`wcl-video-modal`"
+      v-model="showModal"
+      scrollable
+      class="wcl-video-modal__modal"
+    >
+      <template #modal-header="{ close }">
+        <div class="modal-header__wrap">
+          <!-- Emulate built in modal header close button action -->
+          <a
+            href="#"
+            class="close-button"
+            :class="{ rtl: video.rtl }"
+            @click.prevent="close()"
+          >
+            <icon-close :src="IconClose" alt="close icon" class="close-icon" />
+          </a>
+        </div>
+      </template>
+      <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>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import VideoMedia from './../../Paragraphs/VideoPlayer/index.vue'
+import VideoPlay from './../../../assets/icons/video-play.svg'
+import IconClose from './../../../assets/icons/icon-close.svg'
+
+export default {
+  name: 'VideoThumbnail',
+  components: {
+    VideoMedia,
+    IconClose
+  },
+  props: {
+    video: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      VideoPlay,
+      IconClose,
+      showModal: false,
+      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
+          ) {
+            this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`
+          }
+        }
+      } 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
+#wcl-video-modal {
+  .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
+.wcl-video-thumbnail-wrapper {
+  margin-bottom: 32px;
+  a {
+    display: block;
+
+    .video-thumbnail {
+      position: relative;
+      overflow: hidden;
+      min-height: 197px;
+      border-radius: 8px;
+
+      &__image {
+        border-radius: 6px;
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+
+      &__button {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        //height: 68px;
+        //width: 68px;
+        @include fp('height', 65, 68);
+        @include fp('width', 65, 68);
+        -ms-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+
+        @include mq('sm') {
+          height: 80px;
+          width: 80px;
+        }
+
+        @include mq('xs') {
+          height: 64px;
+          width: 64px;
+        }
+      }
+    }
+  }
+}
+</style>