@worksafevictoria/wcl7.5 1.1.0-beta.6 → 1.1.0-beta.8

package/package.json

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

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

@@ -1,6 +1,7 @@
 import ScrollSpy from './index.vue'
+import { BCol, BRow, BContainer } from 'bootstrap-vue-next'
 
-const itemList = [
+const englishItemList = [
   {
     text: 'Section one heading',
     id: 'item-1'
@@ -42,30 +43,22 @@ export default {
   title: 'Paragraphs/ScrollSpy',
   component: ScrollSpy,
   argTypes: {
-    title: {
-      control: 'text',
-      defaultValue: 'On this page'
-    },
     itemList: {
-      control: 'array'
-    },
-    itemListEnglish: {
-      control: 'array',
-      defaultValue: itemList
-    },
-    itemListArabic: {
-      control: 'array',
-      defaultValue: arabicItemList
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
+      table: {disable: true}
+    }
+  },
+  args: {
+    title: 'On this page',
+    itemListEnglish:  englishItemList,
+    itemListArabic: arabicItemList,
+    rtl: false
     }
-  }
 }
-const DefaultContent = (args, { argTypes }) => ({
-  components: { ScrollSpy },
-  props: Object.keys(argTypes),
+const DefaultContent = (args) => ({
+  components: { ScrollSpy, BCol, BRow, BContainer },
+  setup() {
+    return { args }
+  },
   data() {
     return {
       text: `
@@ -79,7 +72,7 @@ const DefaultContent = (args, { argTypes }) => ({
           ipsum commodo tempor sunt in proident.
         `,
       arabicText: `هنالك العديد من الأنواع المتوفرة لنصوص لوريم إيبسوم، ولكن الغالبية تم تعديلها بشكل ما عبر إدخال بعض النوادر أو الكلمات العشوائية إلى النص. إن كنت تريد أن تستخدم نص لوريم إيبسوم ما، عليك أن تتحقق أولاً أن ليس هناك أي كلمات أو عبارات محرجة أو غير لائقة مخبأة في هذا النص. بينما تعمل جميع مولّدات نصوص لوريم إيبسوم على الإنترنت على إعادة تكرار مقاطع من نص لوريم إيبسوم نفسه عدة مرات بما تتطلبه الحاجة، يقوم مولّدنا هذا باستخدام كلمات من قاموس يحوي على أكثر من 200 كلمة لا تينية، مضاف إليها مجموعة من الجمل النموذجية، لتكوين نص لوريم إيبسوم ذو شكل منطقي قريب إلى النص الحقيقي. وبالتالي يكون النص الناتح خالي من التكرار، أو أي كلمات أو عبارات غير لائقة أو ما شابه. وهذا ما يجعله أول مولّد نص لوريم إيبسوم حقيقي على الإنترنت.`,
-      itemList,
+      englishItemList,
       arabicItemList
     }
   },
@@ -126,7 +119,7 @@ const DefaultContent = (args, { argTypes }) => ({
         </div>
       </b-col>
       <b-col cols="4">
-      <scroll-spy v-bind="$props" :item-list="itemListEnglish" />
+      <scroll-spy v-bind="args" :item-list="args.itemListEnglish" />
       </b-col>
     </b-row>
 
@@ -174,11 +167,10 @@ const DefaultContent = (args, { argTypes }) => ({
         </div>
       </b-col>
       <b-col cols="4">
-      <scroll-spy v-bind="$props" :item-list="arabicItemList" />
+      <scroll-spy v-bind="args" :item-list="args.arabicItemList" />
       </b-col>
     </b-row>
     </b-container>`
 })
 
 export const Default = DefaultContent.bind({})
-Default.parameters = { controls: { exclude: ['itemList'] } }

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

@@ -22,10 +22,11 @@
 
 <script>
 import SectionGroup from '../../Containers/SectionGroup/index.vue'
+import { BNavbar, BListGroup, BListGroupItem } from 'bootstrap-vue-next'
 
 export default {
   name: 'ScrollSpy',
-  components: { SectionGroup },
+  components: { SectionGroup, BNavbar, BListGroup, BListGroupItem },
   props: {
     title: {
       type: String,

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({})
+