@worksafevictoria/wcl7.5 1.1.4 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

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

@@ -19,75 +19,26 @@ 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
-    }
+  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/VideoGrid/index.stories.js

@@ -107,45 +107,28 @@ export default {
   title: 'Paragraphs/VideoGrid',
   component: { VideoGrid, Container, Row, Column },
   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
+      options: ['h2', 'h3']
     }
+  },
+  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
@@ -156,7 +139,7 @@ const YoutubeContent = (args, { argTypes }) => ({
     <row>
       <column>
         <video-grid
-          v-bind="$props"
+          v-bind="args"
         />
       </column>
     </row>
@@ -165,3 +148,4 @@ const YoutubeContent = (args, { argTypes }) => ({
 })
 
 export const Youtube = YoutubeContent.bind({})
+