@worksafevictoria/wcl7.5 1.5.0 → 1.6.0

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

@@ -1,10 +1,7 @@
 <template>
   <section-group class="sticky-top">
     <b-navbar class="paragraph--scrollspy" :class="{ rtl: rtl }">
-      <b-list-group
-        v-b-scrollspy="scrollSpy"
-        class="flex-column"
-      >
+      <b-list-group v-b-scrollspy="scrollSpy" class="flex-column">
         <div class="scrollspy__title">{{ title }}</div>
         <b-list-group-item
           v-for="(item, index) in itemList"
@@ -22,29 +19,41 @@
 
 <script>
 import SectionGroup from '../../Containers/SectionGroup/index.vue'
-import { BNavbar, BListGroup, BListGroupItem, vBScrollspy } from 'bootstrap-vue-next'
+import {
+  BNavbar,
+  BListGroup,
+  BListGroupItem,
+  vBScrollspy,
+} from 'bootstrap-vue-next'
 
 export default {
   name: 'ScrollSpy',
   components: { SectionGroup, BNavbar, BListGroup, BListGroupItem },
-  directives: { 'b-scrollspy':vBScrollspy },
+  directives: { 'b-scrollspy': vBScrollspy },
   props: {
     title: {
       type: String,
-      default: 'On this page'
+      default: 'On this page',
     },
     itemList: {
       type: Array,
-      required: true
+      required: true,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     scrollSpy: {
       type: Object,
-      default: () => {return{ element: 'body', offset: 100, method: 'auto' }}
-    }
+      default: () => {
+        return {
+          element: 'body',
+          offset: 100,
+          method: 'auto',
+          contentQuery: '[id]',
+        }
+      },
+    },
   },
   methods: {
     scrollToAnchor(anchor) {
@@ -52,11 +61,11 @@ export default {
       if (anchorElement) {
         anchorElement.focus()
         anchorElement.scrollIntoView({
-          behavior: 'smooth'
+          behavior: 'smooth',
         })
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

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

@@ -67,42 +67,45 @@ export default {
     CardGrid,
     CardGridItem,
     CardBody,
-    CardTop
+    CardTop,
+  },
+  emits: {
+    selected: false,
   },
   props: {
     cards: {
       type: Array,
       required: true,
-      default: () => []
+      default: () => [],
     },
     title: {
       type: String,
-      default: null
+      default: null,
     },
     headingTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
     },
     subHeading: {
       type: String,
-      default: null
+      default: null,
     },
     iconIsBordered: {
       type: Boolean,
-      default: true
+      default: true,
     },
     columns: {
       type: Number,
-      default: 4
+      default: 4,
     },
     cardType: {
       type: String,
-      default: null
+      default: null,
     },
     cardTextAlign: {
       type: String,
-      default: null
-    }
+      default: null,
+    },
   },
   methods: {
     selectedCardChangeFocus(card) {
@@ -110,7 +113,7 @@ export default {
     },
     clearCard() {
       this.$refs.cardgrid.clearCards()
-    }
-  }
+    },
+  },
 }
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="tabbedCards.length > 0 && loaded"
-    :ref="`tabbedCards-${_uid}`"
+    :ref="`tabbedCards-${tabbedCards[0].cardid}`"
     class="tabbed-cards"
   >
     <div v-for="(r, rIndex) in rows" :key="rIndex">
@@ -28,15 +28,15 @@
             :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>
@@ -108,12 +108,8 @@ export default {
   },
   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 +138,7 @@ export default {
   },
   methods: {
     getCardIdPrefix(rIndex, cardIndex) {
-      const cardPrefix = `tabbedcards-${this._uid}-r-${rIndex}`
+      const cardPrefix = `tabbedcards-${this.tabbedCards[0].cardid}-r-${rIndex}`
       if (cardIndex !== null && cardIndex !== undefined) {
         return `${cardPrefix}-${cardIndex}`
       }
@@ -153,9 +149,13 @@ export default {
       let end = start + this.cols
       return rows.slice(start, end)
     },
-    async setCurrentRow(rowIndex, card) {
+    checkSelectedCard(card) {
+      return JSON.stringify(card) === JSON.stringify(this.selectedCard)
+    },
+    setCurrentRow(rowIndex, card) {
       const sameCardSelected =
-        card.selectedCard === this.selectedCard || !card.selectedCard
+        this.checkSelectedCard(card.selectedCard) || !card.selectedCard
+
       this.selectedCard = null
       this.selectedRow = null
       const cardGrids = this.$refs.cardgrid || []
@@ -164,7 +164,6 @@ export default {
           cardGrid.clearCards()
         }
       })
-      await nextTick()
       this.tabList = this.getFocusElements()
       setTimeout(() => {
         if (window && !sameCardSelected) {

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

@@ -16,9 +16,9 @@
         <b-tabs v-model="tabIndex">
           <b-tab
             v-for="(item, index) in items"
-            :key="`${index}-${_uid}`"
+            :key="`${index}-${$.uid}`"
             :title="item.title"
-            :title-link-class="`tab-item-${index}-${_uid}`"
+            :title-link-class="`tab-item-${index}-${$.uid}`"
           >
             <rich-text
               :content="item.content.value"
@@ -34,9 +34,9 @@
           ><rich-text
             :tag="titleTag"
             :content="title"
-            :without-container="true"/></column
+            :without-container="true" /></column
       ></row>
-      <row v-for="(item, index) in items" :key="`${index}-${_uid}`">
+      <row v-for="(item, index) in items" :key="`${index}-${$.uid}`">
         <column>
           <rich-text :content="getPdfContent(item)" :without-container="true" />
         </column>
@@ -61,29 +61,29 @@ export default {
     Row,
     Column,
     BTab,
-    BTabs
+    BTabs,
   },
   props: {
     title: {
       type: String,
-      default: null
+      default: null,
     },
     titleTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
     },
     items: {
       type: Array,
-      required: true
+      required: true,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     workwell: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
@@ -91,18 +91,20 @@ export default {
       scrollIntoViewOptions: {
         behavior: 'smooth',
         block: 'center',
-        inline: 'nearest'
-      }
+        inline: 'nearest',
+      },
     }
   },
   computed: {
     activeTabEl() {
-      let el = document.querySelector(`.tab-item-${this.tabIndex}-${this._uid}`)
+      let el = document.querySelector(
+        `.tab-item-${this.tabIndex}-${this.$.uid}`,
+      )
       return el
     },
     isPDF() {
       return typeof this.$isPDF === 'function' ? this.$isPDF() : false
-    }
+    },
   },
   methods: {
     handleTabNav(direction) {
@@ -118,8 +120,8 @@ export default {
     },
     getPdfContent(item) {
       return `<${this.titleTag}>${item.title}</${this.titleTag}>${item.content.value}`
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>

package/src/components/Paragraphs/TextMedia/MediaTypes/Video/index.vue

@@ -10,20 +10,20 @@ import VideoThumbnail from './../../../../SubComponents/VideoThumbnail/index.vue
 export default {
   name: 'VideoThumbnailFrame',
   components: {
-    VideoThumbnail
+    VideoThumbnail,
   },
   props: {
     video: {
       type: Object,
-      required: true
-    }
-  }
+      required: true,
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>
-.thumbnail-wrapper {
-  :deep(.wcl-video-thumbnail-wrapper a img.video-thumbnail__image) {
-    max-height: 250px;
-  }
-}
+// .thumbnail-wrapper {
+//   :deep(.wcl-video-thumbnail-wrapper a img.video-thumbnail__image) {
+//     max-height: 250px;
+//   }
+// }
 </style>

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

@@ -8,7 +8,7 @@
   >
     <template v-slot:content>
       <row align-v="center">
-        <column sm="5" :order="flip ? 2 : 1">
+        <column class="wcl-media-text__image" sm="5" :order="flip ? 2 : 1">
           <media-image
             v-if="mediaType === 'image' && image"
             :image-alt="image && image.alt ? image.alt : ''"
@@ -52,61 +52,61 @@ export default {
     MediaImage,
     MediaVideo,
     RichText,
-    SectionGroup
+    SectionGroup,
   },
   props: {
     mediaType: {
       type: String,
-      required: true
+      required: true,
     },
     content: {
       type: String,
       required: false,
-      default: ''
+      default: '',
     },
     titleText: {
       type: String,
       required: false,
-      default: ''
+      default: '',
     },
     titleTag: {
       type: String,
       required: false,
-      default: 'h3'
+      default: 'h3',
     },
     image: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     video: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     hasBgColor: {
       type: Boolean,
-      default: false
+      default: false,
     },
     flip: {
       type: Boolean,
-      default: false
+      default: false,
     },
     hideImageMob: {
       type: Boolean,
-      default: false
+      default: false,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     workwell: {
       type: Boolean,
-      default: false
+      default: false,
     },
     storybook: {
       type: Boolean,
-      default: false
-    }
-  }
+      default: false,
+    },
+  },
 }
 </script>
 
@@ -135,6 +135,10 @@ export default {
     }
   }
 
+  // &__image {
+  //   flex: 0 0 36%;
+  // }
+
   &.hideImageMob {
     @include mq('xs') {
       img {

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

@@ -13,7 +13,7 @@ const mockData = {
   cta: {
     text: 'Click here',
     url: 'https://www.example.com',
-    workwell: false
+    workwell: false,
   },
   videos: [
     {
@@ -26,7 +26,7 @@ const mockData = {
       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.',
       rtl: false,
-      fixWidth: false
+      fixWidth: false,
     },
     {
       mediaTitle: 'Youtube Video',
@@ -38,7 +38,7 @@ const mockData = {
       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.',
       rtl: false,
-      fixWidth: false
+      fixWidth: false,
     },
     {
       mediaTitle: 'Youtube Video',
@@ -50,7 +50,7 @@ const mockData = {
       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.',
       rtl: false,
-      fixWidth: false
+      fixWidth: false,
     },
     {
       mediaTitle: 'Youtube Video',
@@ -62,7 +62,7 @@ const mockData = {
       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.',
       rtl: false,
-      fixWidth: false
+      fixWidth: false,
     },
     {
       mediaTitle: 'Youtube Video',
@@ -74,7 +74,7 @@ const mockData = {
       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.',
       rtl: false,
-      fixWidth: false
+      fixWidth: false,
     },
     {
       mediaTitle: 'Youtube Video',
@@ -86,7 +86,7 @@ const mockData = {
       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.',
       rtl: false,
-      fixWidth: false
+      fixWidth: false,
     },
     {
       mediaTitle: 'Youtube Video',
@@ -98,9 +98,34 @@ const mockData = {
       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.',
       rtl: false,
-      fixWidth: false
-    }
-  ]
+      fixWidth: false,
+    },
+    {
+      // <img src="https://i.vimeocdn.com/video/1480292651-b8fe54c9f954427644325f094a8138dbe17d3437e55bb2c6e9cbb52053a690f7-d_640x360?&amp;r=pad" srcset="https://i.vimeocdn.com/video/1480292651-b8fe54c9f954427644325f094a8138dbe17d3437e55bb2c6e9cbb52053a690f7-d_960x540?&amp;r=pad 2x, https://i.vimeocdn.com/video/1480292651-b8fe54c9f954427644325f094a8138dbe17d3437e55bb2c6e9cbb52053a690f7-d_1280x720?&amp;r=pad 3x, https://i.vimeocdn.com/video/1480292651-b8fe54c9f954427644325f094a8138dbe17d3437e55bb2c6e9cbb52053a690f7-d_1920x1080?&amp;r=pad 4x" alt="WorkSafe Recovery Service Model - Tech Enabler" class="sc-1nghd6u-1 bJrnPX">
+      mediaTitle: 'Vimeo Video',
+      mediaDescription:
+        'Vestibulum rutrum quam vitae fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis iaculis nulla iaculis vitae. Donec sagittis faucibus lacus eget blandit.',
+      id: '720522862',
+      provider: 'vimeo',
+      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.',
+      rtl: false,
+      fixWidth: false,
+    },
+    {
+      mediaTitle: 'Vimeo Video',
+      mediaDescription:
+        'Vestibulum rutrum quam vitae fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis iaculis nulla iaculis vitae. Donec sagittis faucibus lacus eget blandit.',
+      id: '735637035',
+      provider: 'vimeo',
+      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.',
+      rtl: false,
+      fixWidth: false,
+    },
+  ],
 }
 
 export default {
@@ -110,8 +135,8 @@ export default {
   argTypes: {
     titleTag: {
       control: 'select',
-      options: ['h2', 'h3']
-    }
+      options: ['h2', 'h3'],
+    },
   },
   args: {
     gridTitle: mockData.title,
@@ -120,19 +145,19 @@ export default {
     videoList: mockData.videos,
     rtl: mockData.rtl,
     threeColumns: mockData.threeColumns,
-    greyBackground:  mockData.greyBackground,
-    cta:  mockData.cta
-  }
+    greyBackground: mockData.greyBackground,
+    cta: mockData.cta,
+  },
 }
 
 const YoutubeContent = (args, { argTypes }) => ({
   components: { VideoGrid, Container, Row, Column },
   setup() {
-    return { args };
+    return { args }
   },
   data() {
     return {
-      videos: mockData.videos
+      videos: mockData.videos,
     }
   },
   template: `
@@ -145,8 +170,7 @@ const YoutubeContent = (args, { argTypes }) => ({
       </column>
     </row>
     </container>
-  `
+  `,
 })
 
 export const Youtube = YoutubeContent.bind({})
-

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

@@ -48,42 +48,42 @@ export default {
     VideoThumbnail,
     Column,
     CardGrid,
-    CardGridItem
+    CardGridItem,
   },
   props: {
     gridTitle: {
       type: String,
-      default: null
+      default: null,
     },
     titleTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
     },
     gridDescription: {
       type: String,
-      default: null
+      default: null,
     },
     videoList: {
       type: Array,
-      required: true
+      required: true,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     threeColumns: {
       type: Boolean,
-      default: false
+      default: false,
     },
     greyBackground: {
       type: Boolean,
-      default: false
+      default: false,
     },
     cta: {
       type: Object,
-      default: null
-    }
-  }
+      default: null,
+    },
+  },
 }
 </script>
 
@@ -103,7 +103,7 @@ export default {
 
   &.items-2 {
     :deep(.wcl-video-thumbnail-wrapper a .video-thumbnail__image) {
-      max-height: 304px;
+      // max-height: 304px;
       @include mq('mm') {
         max-height: auto;
       }
@@ -111,7 +111,7 @@ export default {
   }
   &.items-3 {
     :deep(.wcl-video-thumbnail-wrapper a .video-thumbnail__image) {
-      max-height: 200px;
+      // max-height: 225px;
       @include mq('mm') {
         max-height: auto;
       }