@worksafevictoria/wcl7.5 1.1.0-beta.11 → 1.1.0-beta.111

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/TabulatedData/index.stories.js

@@ -4,20 +4,21 @@ import { fields, fieldsAr, items, itemsAr } from './Constants'
 export default {
   title: 'Paragraphs/TabulatedData',
   component: TabulatedData,
+  tags: ['autodocs'],
   data() {
     return {
       TabulatedData,
       fields,
       fieldsAr,
       items,
-      itemsAr
+      itemsAr,
     }
   },
   argTypes: {
     isFixedWidth: {
       control: 'boolean',
-      table: { disable: true }
-    }
+      table: { disable: true },
+    },
   },
   args: {
     rtl: false,
@@ -27,13 +28,13 @@ export default {
     fields: fields.links,
     rtlFields: fieldsAr.links,
     caption: 'The table caption',
-    initialSortBy: 'rank'
+    sortBy: 'rank',
   },
   template: `<tabulated-data
                 v-bind="args"
                 :items="rtl ? args.rtlItems : args.items"
                 :fields="rtl ? args.rtlFields : args.fields"
-              /> `
+              /> `,
 }
 
 export const Default = {}

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

@@ -7,24 +7,43 @@
     <div :class="isFluid ? 'table-scrolled' : ''">
       <b-table
         v-if="items"
-          :items="items"
-          :fields="fields"
-          :class="`${rtl ? 'rtl' : ''} ${isFluid ? 'isScrolled' : ''}`"
-          class="table border"
-          :striped="true"
-          v-model:sort-desc="sortDesc" 
-          v-model:sort-by="sortBy"
-          :borderless="false"
-          :responsive="!isFluid"
-          :stacked="!isFluid ? 'sm' : false"
+        :items="items"
+        :fields="fields"
+        :class="`${rtl ? 'rtl' : ''} ${isFluid ? 'isScrolled' : ''}`"
+        class="table border"
+        :striped="true"
+        :sort-by="newSortBy"
+        :borderless="false"
+        :responsive="!isFluid"
+        :stacked="!isFluid ? 'sm' : false"
       >
         <template #head()="data">
-          <span class="iconHeader table-active" tabindex="0" @keypress.enter="accessSort(data.field)" scope="colgroup">
+          <span
+            class="iconHeader table-active"
+            tabindex="0"
+            @keypress.enter="accessSort(data.field)"
+            scope="colgroup"
+          >
             {{ data.label }}
             <span class="sortImg" v-if="data.field.sortable">
-            <img v-if="data.field.thAttr['aria-sort'] === 'none'" :src="sortIconNeutral" alt="image indicating no sort" style="width: 0.55rem; height: 0.90rem;"/>
-            <img v-if="data.field.thAttr['aria-sort'] === 'ascending'" :src="sortIconAsc" alt="image indicating ascending sort" style="width: 0.55rem; height: 0.90rem;"/>
-            <img v-else-if="data.field.thAttr['aria-sort'] === 'descending'" :src="sortIconDesc" alt="image indicating descending sort" style="width: 0.55rem; height: 0.90rem;"/>
+              <img
+                v-if="data.field.thAttr['aria-sort'] === 'none'"
+                :src="sortIconNeutral"
+                alt="image indicating no sort"
+                style="width: 0.55rem; height: 0.9rem"
+              />
+              <img
+                v-if="data.field.thAttr['aria-sort'] === 'ascending'"
+                :src="sortIconAsc"
+                alt="image indicating ascending sort"
+                style="width: 0.55rem; height: 0.9rem"
+              />
+              <img
+                v-else-if="data.field.thAttr['aria-sort'] === 'descending'"
+                :src="sortIconDesc"
+                alt="image indicating descending sort"
+                style="width: 0.55rem; height: 0.9rem"
+              />
             </span>
           </span>
         </template>
@@ -43,62 +62,67 @@ import { BTable } from 'bootstrap-vue-next'
 
 export default {
   name: 'TabulatedData',
-  components: { SectionGroup, RichText, BTable},
+  components: { SectionGroup, RichText, BTable },
   props: {
     items: {
       type: Array,
-      required: true
+      required: true,
     },
     fields: {
       type: Array,
-      default: undefined
+      default: undefined,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isFixedWidth: {
       type: Boolean,
-      default: false
+      default: false,
     },
     caption: {
       type: String,
       default: '',
-      required: false
+      required: false,
     },
-    initialSortBy: {
+    sortBy: {
       type: String,
       default: undefined,
-      required: false
-    }
+      required: false,
+    },
   },
   data() {
     return {
-      sortBy: this.initialSortBy,
-      sortDesc: false,
+      newSortBy: this.sortBy ? [{ key: this.sortBy, order: 'asc' }] : [],
+      //sortDesc: false,
       sortIconNeutral:
         "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
       sortIconDesc:
         "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
       sortIconAsc:
-        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"
+        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
     }
   },
   computed: {
     isFluid() {
       return this.isFixedWidth
-    }
+    },
   },
   methods: {
-   accessSort(fieldVar) {
-    this.sortBy = fieldVar.key
-      if (fieldVar.thAttr['aria-sort'] === 'none' || fieldVar.thAttr['aria-sort'] === 'descending' ) {
-        this.sortDesc = false
+    accessSort(fieldVar) {
+      //this.sortBy = fieldVar.key
+      if (
+        fieldVar.thAttr['aria-sort'] === 'none' ||
+        fieldVar.thAttr['aria-sort'] === 'descending'
+      ) {
+        this.newSortBy = [{ key: fieldVar.key, order: 'asc' }]
+        //this.sortDesc = false
       } else {
-        this.sortDesc = true
-      }    
-    }
-  }
+        this.newSortBy = [{ key: fieldVar.key, order: 'desc' }]
+        //this.sortDesc = true
+      }
+    },
+  },
 }
 </script>
 
@@ -141,5 +165,9 @@ export default {
     vertical-align: middle;
     margin-left: 5px;
   }
+
+  .b-table-sortable-column svg {
+    display: none;
+  }
 }
 </style>

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

@@ -8,6 +8,7 @@ import {
 export default {
   title: 'Paragraphs/TaskFinder',
   component: TaskFinder,
+  tags: ['autodocs'],
   args: {
     taskList: taskFinderTempData,
     title: taskFinderTempTitle,
@@ -15,8 +16,7 @@ export default {
     headingTag: 'h2',
     rtl: false,
     workwell: false
-  },
-  template: '<task-finder v-bind="args" :storybook="true"/>'
+  }
 }
 
 export const Default = {}

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

@@ -21,7 +21,7 @@
             :selected-task="selectedTask"
             :is-child="false"
             :is-mobile-or-tablet-view="isMobileOrTabletView"
-            @selected="(task) => taskClick(task, true)"
+            @selection="(task) => taskClick(task, true)"
           >
             <task-finder-column
               v-if="isMobileOrTabletView && selectedTask"
@@ -31,7 +31,7 @@
               :selected-task="selectedTask"
               :is-mobile-or-tablet-view="isMobileOrTabletView"
               :is-child="true"
-              @selected="(task) => taskClick(task, false)"
+              @selection="(task) => taskClick(task, false)"
             >
             </task-finder-column>
           </task-finder-column>
@@ -49,7 +49,7 @@
             :selected-task="selectedTask"
             :is-mobile-or-tablet-view="isMobileOrTabletView"
             :is-child="true"
-            @selected="(task) => taskClick(task, false)"
+            @selection="(task) => taskClick(task, false)"
           >
           </task-finder-column>
         </column>

package/src/components/Paragraphs/TaskFinder/task-finder-column.vue

@@ -16,7 +16,7 @@
       isChild ? 'task-finder-column__child' : 'task-finder-column__parent'
     "
     :style="cards.length > 6 ? false : 'overflow-y: auto'"
-    @selected="(card) => $emit('selected', { card })"
+    @selected="(card) => $emit('selection', { card })"
   >
     <template v-slot:cardItem="{ card }">
       <card-grid-item

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.stories.js

@@ -19,6 +19,7 @@ const MockVideo = {
 export default {
   title: 'Paragraphs/Text + Media',
   component: TextMedia,
+  tags: ['autodocs'],
   args: {
     content: '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.</p>',
     titleText: 'A sample media item',

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,19 +98,45 @@ 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 {
   title: 'Paragraphs/VideoGrid',
   component: { VideoGrid, Container, Row, Column },
+  tags: ['autodocs'],
   argTypes: {
     titleTag: {
       control: 'select',
-      options: ['h2', 'h3']
-    }
+      options: ['h2', 'h3'],
+    },
   },
   args: {
     gridTitle: mockData.title,
@@ -119,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: `
@@ -144,8 +170,7 @@ const YoutubeContent = (args, { argTypes }) => ({
       </column>
     </row>
     </container>
-  `
+  `,
 })
 
 export const Youtube = YoutubeContent.bind({})
-