@worksafevictoria/wcl7.5 1.1.0-beta.1 → 1.1.0-beta.100

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

@@ -8,38 +8,15 @@ import {
 export default {
   title: 'Paragraphs/TaskFinder',
   component: TaskFinder,
-  argTypes: {
-    taskList: {
-      control: 'object',
-      defaultValue: taskFinderTempData
-    },
-    title: {
-      control: 'text',
-      defaultValue: taskFinderTempTitle
-    },
-    text: {
-      control: 'text',
-      defaultValue: taskFinderTempText
-    },
-    headingTag: {
-      control: 'text',
-      defaultValue: 'h2'
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    workwell: {
-      control: 'boolean',
-      defaultValue: false
-    }
+  tags: ['autodocs'],
+  args: {
+    taskList: taskFinderTempData,
+    title: taskFinderTempTitle,
+    text: taskFinderTempText,
+    headingTag: 'h2',
+    rtl: false,
+    workwell: false
   }
 }
 
-const DefaultContent = (args, { argTypes }) => ({
-  components: { TaskFinder },
-  props: Object.keys(argTypes),
-  template: '<task-finder v-bind="$props" :storybook="true"/>'
-})
-
-export const Default = DefaultContent.bind({})
+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/pdf/index.vue

@@ -25,7 +25,7 @@
 
 <script>
 import { isAbsoluteUrl } from '../../../../../lib/utility'
-import Row from './../../../Containers/Container/index.vue'
+import Row from './../../../Containers/Row/index.vue'
 import Container from './../../../Containers/Container/index.vue'
 import Column from './../../../Containers/Column/index.vue'
 import RichText from './../../../Paragraphs/RichText/index.vue'

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,75 +19,27 @@ const MockVideo = {
 export default {
   title: 'Paragraphs/Text + Media',
   component: TextMedia,
-  argTypes: {
-    content: {
-      control: 'text',
-      defaultValue:
-        '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: {
-      control: 'text',
-      defaultValue: 'A sample media item'
-    },
-    titleTag: {
-      control: 'text',
-      defaultValue: 'h3'
-    },
-    hasBgColor: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    flip: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    workwell: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    video: {
-      control: 'object'
-    },
-    image: {
-      control: 'object'
-    },
-    mediaType: {
-      control: 'text'
-    },
-    storybook: {
-      control: 'boolean',
-      defaultValue: true
-    },
-    hideImageMob: {
-      control: 'boolean',
-      defaultValue: false
-    }
+  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',
+    titleTag: 'h3',
+    hasBgColor: false,
+    flip: false,
+    rtl: false,
+    workwell: false,
+    storybook: true,
+    hideImageMob: false
   }
 }
 
-const TextWithImageDefault = (args, { argTypes }) => ({
-  components: { TextMedia },
-  props: Object.keys(argTypes),
-  template: `<text-media v-bind="$props" />`
-})
-
-export const TextWithImage = TextWithImageDefault.bind({})
+export const TextWithImage = {}
 TextWithImage.args = {
   mediaType: 'image',
   image: MockImage
 }
 
-const TextWithVideoDefault = (args, { argTypes }) => ({
-  components: { TextMedia },
-  props: Object.keys(argTypes),
-  template: `<text-media v-bind="$props" />`
-})
-
-export const TextWithVideo = TextWithVideoDefault.bind({})
+export const TextWithVideo = {}
 TextWithVideo.args = {
   mediaType: 'video',
   video: MockVideo

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,57 +98,66 @@ 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: {
-    gridTitle: {
-      control: 'text',
-      defaultValue: mockData.title
-    },
     titleTag: {
       control: 'select',
       options: ['h2', 'h3'],
-      defaultValue: 'h2'
-    },
-    gridDescription: {
-      control: 'text',
-      defaultValue: mockData.description
-    },
-    videoList: {
-      control: 'object',
-      defaultValue: mockData.videos
     },
-    rtl: {
-      control: 'boolean',
-      defaultValue: mockData.rtl
-    },
-    threeColumns: {
-      control: 'boolean',
-      defaultValue: mockData.threeColumns
-    },
-    greyBackground: {
-      control: 'boolean',
-      defaultValue: mockData.greyBackground
-    },
-    cta: {
-      control: 'object',
-      defaultValue: mockData.cta
-    }
-  }
+  },
+  args: {
+    gridTitle: mockData.title,
+    titleTag: 'h2',
+    gridDescription: mockData.description,
+    videoList: mockData.videos,
+    rtl: mockData.rtl,
+    threeColumns: mockData.threeColumns,
+    greyBackground: mockData.greyBackground,
+    cta: mockData.cta,
+  },
 }
 
 const YoutubeContent = (args, { argTypes }) => ({
   components: { VideoGrid, Container, Row, Column },
-  props: Object.keys(argTypes),
+  setup() {
+    return { args }
+  },
   data() {
     return {
-      videos: mockData.videos
+      videos: mockData.videos,
     }
   },
   template: `
@@ -156,12 +165,12 @@ const YoutubeContent = (args, { argTypes }) => ({
     <row>
       <column>
         <video-grid
-          v-bind="$props"
+          v-bind="args"
         />
       </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;
       }

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

@@ -19,18 +19,12 @@ const mediaDesc = 'Vestibulum rutrum quam vitae fringilla tincidunt. Suspendisse
 export default {
   title: 'Paragraphs/VideoPlayer',
   component: { VideoMedia,  Container, Row, Column },
+  tags: ['autodocs'],
   argTypes: {
     titleTag: {
       control: 'select',
       options: ['h2', 'h3']
     },
-    mediaTitle: {
-      control: 'text'
-    },
-    mediaDescription: {
-      control: 'text'
-        
-    },
     videoId: {
       control: 'select',
       options: [mockData.videoId.YouTube, mockData.videoId.Vimeo]
@@ -38,12 +32,6 @@ export default {
     provider: {
       control: 'select',
       options: [mockData.provider.YouTube, mockData.provider.Vimeo],
-    },
-    transcriptTitle: {
-      control: 'text'
-    },
-    transcript: {
-      control: 'text'
     }
   }
 }