@worksafevictoria/wcl7.5 1.1.0-beta.72 → 1.1.0-beta.74

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="tabbedCards.length > 0 && loaded"
-    :ref="`tabbedCards-${_uid}`"
+    :ref="`tabbedCards-${uid}`"
     class="tabbed-cards"
   >
     <div v-for="(r, rIndex) in rows" :key="rIndex">
@@ -28,19 +28,20 @@
             :show-divider="false"
             :header-size="'large'"
             class="tabbed-card"
-            :class="card === selectedCard ? 'isSelected' : ''"
+            :class="checkSelectedCard(card) ? 'isSelected' : ''"
             :card-padding="'small'"
             :card-header-title="card.title"
-            :caret="card === selectedCard ? 'up' : 'down'"
+            :caret="checkSelectedCard(card) ? 'up' : 'down'"
             :caret-position="'bottom'"
             :rtl="rtl || card.rtl"
             :description="card.text"
             :button-role="'link'"
-            :is-selected="card === selectedCard"
+            :is-selected="checkSelectedCard(card)"
             :is-expandable="true"
           />
         </template>
-        <template v-slot:cardGridFooter>
+        <template
+          v-slot:cardGridFooter >
           <column
             v-if="selectedRow === rIndex && selectedCard"
             class="listgroup-column"
@@ -104,16 +105,13 @@ export default {
       screenWidth: 0,
       loaded: false,
       tabList: null,
+      uid: Math.random().toString(36).slice(2, 11)
     }
   },
   computed: {
     rows() {
-      let r = Math.floor(this.tabbedCards.length / this.cols)
-      if (r % 1 != 0) {
-        return r
-      } else {
-        return r + 1
-      }
+      let r = Math.ceil(this.tabbedCards.length / this.cols);
+      return r;
     },
     cols() {
       if (this.screenWidth < 575.98) {
@@ -142,7 +140,7 @@ export default {
   },
   methods: {
     getCardIdPrefix(rIndex, cardIndex) {
-      const cardPrefix = `tabbedcards-${this._uid}-r-${rIndex}`
+      const cardPrefix = `tabbedcards-${this.uid}-r-${rIndex}`
       if (cardIndex !== null && cardIndex !== undefined) {
         return `${cardPrefix}-${cardIndex}`
       }
@@ -153,9 +151,12 @@ export default {
       let end = start + this.cols
       return rows.slice(start, end)
     },
-    async setCurrentRow(rowIndex, card) {
-      const sameCardSelected =
-        card.selectedCard === this.selectedCard || !card.selectedCard
+    checkSelectedCard(card) {
+      return JSON.stringify(card) === JSON.stringify(this.selectedCard);
+    },
+    setCurrentRow(rowIndex, card) {
+      const sameCardSelected = this.checkSelectedCard(card.selectedCard) || !card.selectedCard
+
       this.selectedCard = null
       this.selectedRow = null
       const cardGrids = this.$refs.cardgrid || []
@@ -164,7 +165,6 @@ export default {
           cardGrid.clearCards()
         }
       })
-      await nextTick()
       this.tabList = this.getFocusElements()
       setTimeout(() => {
         if (window && !sameCardSelected) {

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">
+        <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,25 +45,27 @@
 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'
 
 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() {
@@ -76,7 +77,7 @@ export default {
         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}`
+            `${window.location.origin}/api/v2/urlExists?url=${this.videoThumbnail}`,
           )
           if (
             thumbnailAvailable &&
@@ -92,99 +93,15 @@ export default {
     },
     async getVimeoThumbnail() {
       let thumbnail = await this.$axios.get(
-        `https://vimeo.com/api/v2/video/${this.video.id}.json`
+        `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 {
-    top: 0;
-    height: 45px;
-    background: $white;
-    z-index: 1;
-    margin-left: auto;
-    margin-right:0%;
-  
-    &__wrap {
-      position: relative;
-      width: 100%;
-      a {
-        position: absolute;
-        right: 0;
-        z-index: 1;
-        &.rtl {
-          right: auto;
-          left: 0;
-        }
-        svg {
-          fill: $black;
-        }
-      }
-    }
-  }
-  .modal-body {
-    padding: 0px 32px 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;
-  }
-}
-</style>
 <style lang="scss" scoped>
 @import '../../../includes/scss/all';
 // Outside wrapper style

package/src/includes/scss/vars/src/colors.module.scss

@@ -20,6 +20,20 @@ $yellow: #ffd229;
 $lightyellow: #fff6d4;
 $outline: #da47ff;
 $outline-dark: #ffffff;
+// Functional colours
+$wsv-fun-dark-green: #576D2F;
+$wsv-fun-dark-blue: #104f77;
+$wsv-fun-dark-purple: #55356b;
+$wsv-fun-dark-red: #760031;
+$wsv-fun-dark-brown: #763b00;
+$wsv-fun-dark-caramel: #cb7c2d;
+$wsv-fun-light-teal: #7ac2b5;
+$wsv-fun-light-blue: #8ecade;
+$wsv-fun-light-purple: #9871a8;
+$wsv-fun-light-fuchsia: #f16a7e;
+$wsv-fun-light-green: #edeb72;
+$wsv-fun-light-brown: #dbc38b;
+
 
 $theme-colors: (
   'gold': $gold,
@@ -43,7 +57,20 @@ $theme-colors: (
   'yellow': $yellow,
   'lightyellow': $lightyellow,
   'outline': $outline,
-  'outline-dark': $outline-dark
+  'outline-dark': $outline-dark,
+  // Functional colours
+  'wsv-fun-dark-green':$wsv-fun-dark-green,
+  'wsv-fun-dark-blue':$wsv-fun-dark-blue,
+  'wsv-fun-dark-purple':$wsv-fun-dark-purple,
+  'wsv-fun-dark-red':$wsv-fun-dark-red,
+  'wsv-fun-dark-brown':$wsv-fun-dark-brown,
+  'wsv-fun-dark-caramel':$wsv-fun-dark-caramel,
+  'wsv-fun-light-teal':$wsv-fun-light-teal,
+  'wsv-fun-light-blue':$wsv-fun-light-blue,
+  'wsv-fun-light-purple':$wsv-fun-light-purple,
+  'wsv-fun-light-fuchsia':$wsv-fun-light-fuchsia,
+  'wsv-fun-light-green':$wsv-fun-light-green,
+  'wsv-fun-light-brown':$wsv-fun-light-brown
 );
 
 :export {