@worksafevictoria/wcl7.5 1.0.0 → 1.1.0-beta.2

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

@@ -20,22 +20,27 @@ export default {
   argTypes: {
     video: {
       control: 'object',
-      defaultValue: mockData
     }
+  },
+  args: {
+    video: mockData
   }
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args) => ({
   components: { VideoThumbnail, Container, Row, Column },
-  props: Object.keys(argTypes),
+  setup () {
+    return { args }
+  },
   template: `
     <container>
     <row>
       <column md="5">
-        <video-thumbnail v-bind="$props" />
+        <video-thumbnail v-bind="args" />
       </column>
     </row>
     </container>
   `
 })
+
 export const Default = Template.bind({})

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

@@ -15,45 +15,37 @@
         />
       </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>
+    <!-- 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>
-      </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>
   </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'
+import VideoPlay from './../../../assets/icons/video-play.svg?url'
+import IconClose from './../../../assets/icons/icon-close.svg?url'
 
 export default {
   name: 'VideoThumbnail',
@@ -112,83 +104,88 @@ export default {
 <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 {
+  background: rgba(0,0,0,0.5)
+}
 
-    .modal-content {
-      position: relative;
-      border-radius: 8px;
+.modal-backdrop {
+  display: none;
+}
+.modal-dialog {
+  max-width: 1110px;
+  @media only screen and (max-width: 1150px) {
+    margin: {
+      left: 15px;
+      right: 15px;
+      top: 15px;
     }
+  }
 
-    .modal-header {
-      position: absolute;
-      top: 0;
-      height: 45px;
-      background: $white;
-      z-index: 1;
-      width: 100%;
+  .modal-content {
+    position: relative;
+    border-radius: 8px;
+  }
 
-      &__wrap {
-        position: relative;
-        width: 100%;
-        a {
-          position: absolute;
-          right: 0;
-          z-index: 1;
-          &.rtl {
-            right: auto;
-            left: 0;
-          }
-          svg {
-            fill: $black;
-          }
+  .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);
-      }
+  }
+  .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%;
-        }
+    .paragraph--video-media {
+      margin: 0;
+      .container {
+        padding: 0;
+        width: 100%;
       }
-      .section-group__block {
-        max-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%;
       }
     }
-    .modal-header,
-    .modal-footer {
-      border: none;
-    }
-    .modal-footer {
-      display: none;
+    .section-group__block {
+      max-width: 100%;
     }
   }
+  .modal-header,
+  .modal-footer {
+    border: none;
+  }
+  .modal-footer {
+    display: none;
+  }
 }
 </style>
 <style lang="scss" scoped>

package/vite.config.js

@@ -14,6 +14,10 @@ export default defineConfig({
     }
   },
   define: {
-    'process.env.SOME_ENV': `"${process.env.SOME_ENV}"`
+    'process.env.SHOW_COOKIE': `"${process.env.SHOW_COOKIE}"`,
+    'process.env.CONTENT_API_URL': `"${process.env.CONTENT_API_URL}"`,
+    'process.env.IS_STORYBOOK': `"${process.env.IS_STORYBOOK}"`,
+    'process.env.CARETAKER': `"${process.env.CARETAKER}"`,
+    'process.env.SHOW_GLOBAL_NOTICE': `"${process.env.SHOW_GLOBAL_NOTICE}"`
   }
 })

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

@@ -1,8 +0,0 @@
-import GoogleSearch from './index.vue'
-
-export default {
-  title: 'SubComponents/GoogleSearch',
-  component: GoogleSearch
-}
-
-export const Default = {}

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

@@ -1,405 +0,0 @@
-<template>
-  <div class="wcl-search">
-    <div class="gcse-search"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  mounted() {
-    // console.log('Component mounted')
-    this.setupCustomeStyle()
-
-    // Introduce a delay before setting up addEventListener
-    setTimeout(() => {
-      this.setupCustomAttr()
-      this.handleSearchResultLinkTitle()
-    }, 2000) // Adjust the delay time as needed
-  },
-
-  beforeDestroy() {
-    // Remove event listeners before the component is destroyed
-    const targetNode = document.querySelector('input[name="search"]')
-    const buttonNode = document.querySelector('button.gsc-search-button')
-
-    if (targetNode) {
-      // Add keyup.enter event listener
-      targetNode.removeEventListener('keyup', this.handleKeyUp)
-      buttonNode.removeEventListener('click', this.handleKeyUp)
-    }
-    const paginationNodes = document.querySelectorAll('.gsc-cursor-page')
-    paginationNodes.forEach((paginationNode) => {
-      paginationNode.removeEventListener('click', this.handleSearchResultTitle)
-    })
-  },
-
-  methods: {
-    // Method to customize google search style
-    setupCustomeStyle() {
-      const script = document.createElement('script')
-      script.async = true
-      script.src = 'https://cse.google.com/cse.js?cx=53b1506aa03c64160'
-      document.head.appendChild(script)
-
-      // Create a new style element
-      const style = document.createElement('style')
-      style.id = 'searchStyle' // Assign an ID to the style element
-      // The CSS we are going to inject
-      const cssVar = 'table.gssb_c {display: none !important;}'
-      // Inject the style element into the head
-      document.head.appendChild(style)
-      // Set the text content of the style element to the CSS text
-      style.textContent = cssVar
-    },
-
-    // Method to add google search input attributes
-    setupCustomAttr() {
-      console.log('setupCustomInputAttr ...')
-
-      const targetNode = document.querySelector('input[name="search"]')
-      const buttonNode = document.querySelector('button.gsc-search-button')
-
-      if (targetNode) {
-        // Add keyup.enter event listener
-        targetNode.addEventListener('keyup', this.handleKeyUp)
-        buttonNode.addEventListener('click', this.handleKeyUp)
-      }
-
-      this.setupPaginationEvent()
-    },
-
-    setupPaginationEvent() {
-      console.log('setupPaginationEvent ....')
-      // Introduce a delay before setting up addEventListener on pagination
-      setTimeout(() => {
-        this.handleSearchResultLinkTitle()
-        const paginationNodes = document.querySelectorAll('.gsc-cursor-page')
-        console.log('paginationNodes length ..', paginationNodes.length)
-
-        if (paginationNodes && paginationNodes.length > 0) {
-          console.log('FOUND PAGINATION ....', paginationNodes)
-
-          // Loop through each element and add a click event listener
-          paginationNodes.forEach((paginationNode) => {
-            // Check if the click event listener has already been added
-            if (!paginationNode.clickEventListenerAdded) {
-              // Add a click event listener
-              paginationNode.addEventListener(
-                'click',
-                this.handleSearchResultTitle
-              )
-              // Mark that the click event listener has been added
-              paginationNode.clickEventListenerAdded = true
-              console.log('Adding a click event listener')
-            }
-          })
-        }
-      }, 2000) // Adjust the delay time as needed
-    },
-
-    // Method to trim text after '|'
-    handleSearchResultTitle() {
-      //alert('handleSearchResultTitle ....')
-      this.setupPaginationEvent()
-    },
-
-    handleSearchResultLinkTitle() {
-      //alert('handleSearchResultLinkTitle ....')
-      // Get all targetNodes with class "a.gs-title"
-      var targetNodes = document.querySelectorAll('a.gs-title')
-      console.log('search list title targetNodes :- ', targetNodes)
-
-      // Loop through each element and hide the text after the "|"
-      targetNodes.forEach(function(element) {
-        // Get the text content
-        var text = element.textContent || element.innerText
-
-        // Find the index of the "|" symbol
-        var pipeIndex = text.indexOf('|')
-        console.log('text :- ', text)
-        // If the "|" symbol is found, update the text content to display only the part before "|"
-        if (pipeIndex !== -1) {
-          element.textContent = text.substring(0, pipeIndex).trim()
-        }
-      })
-    },
-
-    handleKeyUp(event) {
-      if (event.key === 'Enter' || event.type === 'click') {
-        let keyword = event.key
-          ? event.target.value
-          : document.querySelector('input[name="search"]').value
-
-        // console.log('Enter key pressed. Value:', keyword)
-
-        // Check if the URL does not contain "/search"
-        if (keyword && !window.location.href.includes('/search')) {
-          let origin = window.location.origin
-          let hash = window.location.hash
-          let pathname = 'search'
-          let URL = origin + '/' + pathname + hash
-          // console.log('URL does not contains "/search" ...', URL)
-          window.location.assign(URL)
-        }
-
-        this.setupPaginationEvent
-      }
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-@import '../../../includes/scss/all';
-
-.wcl-search {
-  :deep(form.gsc-search-box) {
-    position: relative;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -ms-flex-align: stretch;
-    align-items: stretch;
-    width: 100%;
-  }
-  :deep(.gsib_a) {
-    padding: 0 !important;
-    height: 56px;
-  }
-  :deep(.gsib_b) {
-    position: absolute;
-    right: 5px;
-    top: 15px;
-  }
-  :deep(.gcsc-more-maybe-branding-root) {
-    display: none;
-  }
-  :deep(table.gsc-input) {
-    position: relative;
-  }
-  :deep(td.gsc-input) {
-    border: none;
-    padding: 0;
-    width: 100%;
-  }
-  :deep(.gsc-input-box) {
-    border: none;
-  }
-  :deep(input.gsc-input) {
-    border-radius: 8px 0px 0px 8px;
-    border: 1px solid $gray !important;
-    border-right: 0 !important;
-    background: none !important;
-    color: #495057;
-    height: 56px !important;
-    position: relative;
-    -ms-flex: 1 1 auto;
-    flex: 1 1 auto;
-    padding: 0.375rem 0.75rem !important;
-
-    @media screen and (max-width: 320px) {
-      width: 220px;
-    }
-
-    &:focus {
-      box-shadow: none;
-    }
-  }
-  :deep(.gsc-search-button) {
-    display: -ms-flexbox;
-    display: flex;
-    margin-left: 0px;
-    height: 56px;
-    margin-top: 0px;
-  }
-  :deep(button.gsc-search-button) {
-    background: $orange;
-    border: none;
-    border-radius: 0px 8px 8px 0px;
-    color: $black;
-    display: flex;
-    align-items: center;
-    height: 56px !important;
-    font-size: 16px;
-    font-weight: 700;
-    padding-right: 32px;
-    padding-left: 32px;
-
-    &:before {
-      content: 'Search';
-    }
-    @media screen and (max-width: 767px) {
-      margin-top: 6px;
-    }
-    @media screen and (max-width: 320px) {
-      padding-right: 16px;
-      padding-left: 16px;
-    }
-
-    svg {
-      fill: black;
-      height: 18px;
-      width: 18px;
-      margin-left: 10px;
-    }
-
-    :focus {
-      box-shadow: 0px;
-    }
-  }
-
-  :deep(.gsst_a .gscb_a) {
-    color: #191919;
-  }
-  :deep(.gsc-result-info) {
-    color: #191919;
-    font-size: 16px;
-    font-weight: 400;
-  }
-  :deep(.gsc-above-wrapper-area) {
-    padding: 20px 0;
-    border-bottom: none;
-  }
-  /* search list start */
-  :deep(.gsc-url-top) {
-    display: none;
-  }
-  :deep(.gsc-table-result) {
-    line-height: 1.6;
-    padding: 0 5px;
-    font-size: 16px;
-    font-weight: 400;
-    width: 80%;
-    b {
-      color: #191919;
-      font-size: 16px;
-      font-weight: normal;
-    }
-  }
-  :deep(.gsc-resultsRoot.gsc-tabData) {
-    width: 100%;
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: 15px;
-    padding-right: 15px;
-
-    &:hover {
-      border: none;
-    }
-  }
-  :deep(.gs-bidi-start-align.gs-snippet) {
-    color: #191919 !important;
-    line-height: 24px;
-  }
-  :deep(.gsc-thumbnail-inside) {
-    position: relative;
-    padding: 0;
-
-    &::after {
-      content: ' ';
-      position: absolute;
-      height: 16px;
-      width: 11px;
-      top: 5px;
-      right: 16px;
-      background-repeat: no-repeat;
-      background-image: url(../../../assets/icons/chev-right.svg);
-      background-size: 100%;
-    }
-    div.gs-title {
-      width: 90%;
-      margin-bottom: 12px;
-      overflow: visible;
-    }
-    a.gs-title {
-      color: #191919 !important;
-      font-weight: 700;
-      line-height: 24px;
-      font-size: 20px;
-      border: 3px solid transparent;
-      padding-left: 5px;
-      padding-right: 5px;
-      text-decoration: underline;
-
-      &:hover {
-        border: 3px solid #da47ff;
-        color: #006bff !important;
-        b {
-          color: #006bff !important;
-        }
-      }
-
-      b {
-        color: #191919 !important;
-        font-size: 20px;
-      }
-    }
-  }
-  :deep(.gsc-orderby-label) {
-    font-size: 16px;
-    font-weight: 700;
-    color: #191919;
-  }
-  :deep(.gsc-selected-option-container) {
-    background-color: white;
-    border-radius: 10px;
-    margin-top: 0px;
-    padding-top: 6px;
-    margin-right: 0;
-    margin-left: 4px;
-    padding-left: 20px;
-    padding-bottom: 6px;
-    height: 40px;
-    .gsc-selected-option {
-      font-size: 16px;
-      font-weight: 400;
-      line-height: 24px;
-      margin-right: 20px;
-    }
-  }
-  :deep(.gsc-control-cse .gsc-option-selector) {
-    margin-top: 0;
-    margin-right: 10px;
-  }
-  :deep(.gsc-expansionArea > .gsc-webResult.gsc-result) {
-    border: 0;
-    flex: 0 0 100%;
-    max-width: 100%;
-    padding: 0;
-    &:first-child {
-      border-top: 1px solid #bababa;
-    }
-    > div {
-      border-bottom: 1px solid #bababa;
-      padding: 32px 0;
-    }
-  }
-
-  :deep(.gsc-results .gsc-cursor-box .gsc-cursor-current-page) {
-    background-color: lightgrey;
-  }
-  :deep(.gsc-results .gsc-cursor-box .gsc-cursor-page) {
-    border: 1px solid grey;
-    color: #333333;
-    padding: 10px 12px;
-    border-radius: 5px;
-    font-size: 16px;
-    font-weight: 400;
-  }
-  :deep(.gsc-results .gsc-cursor-box) {
-    margin-top: 50px;
-  }
-
-  /* search list end */
-  @include mq('xs') {
-    .not-extra-small-screen {
-      display: none;
-    }
-  }
-}
-@media screen and (max-width: 767px) {
-  :deep(.gssb_c) {
-    width: 85% !important;
-  }
-}
-</style>