@worksafevictoria/wcl7.5 1.1.7 → 1.1.9

package/package.json

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

package/src/components/Common/CardGridItem/card-grid-item-icon.vue

@@ -54,7 +54,7 @@
 </template>
 <script>
 import Icon from './../../SubComponents/Icon/index.vue'
-import arrowRight from './../../../assets/icons/right-arrow.svg?raw'
+import arrowRight from './../../../assets/icons/right-arrow.svg?component'
 
 export default {
   name: 'CardGridItemIcon',

package/src/components/Common/CardGridItem/index.vue

@@ -67,9 +67,10 @@
             }
           ]"
         >
+        <div>
           <b-card-title
             v-if="cardHeaderTitle !== null && cardHeaderTitle !== undefined"
-            :title-tag="headerTag"
+            :tag="headerTag"
             class="card-grid-item__header"
             :class="{
               [`card-grid-item__header--${headerSize}`]: true,
@@ -99,7 +100,9 @@
             >
             </card-grid-item-icon>
           </b-card-title>
-          <card-grid-item-caret
+        </div>
+          <div>
+            <card-grid-item-caret
             v-if="caretPosition === 'top'"
             :caret="caret"
             :rtl="rtl"
@@ -125,7 +128,10 @@
             :rtl="rtl"
           >
           </card-grid-item-icon>
+
           <span v-if="pillText" class="visually-hidden">{{ pillText }}</span>
+          </div>
+
         </div>
         <b-card-text
           v-if="$slots.cardDescription || description"
@@ -200,7 +206,7 @@ import { BCard, BCardBody, BCardTitle, BCardText } from 'bootstrap-vue-next'
 
 export default {
   name: 'CardGridItem',
-  components: { CardGridItemIcon, CardGridItemCaret, RichText, BCard, BCardBody, BCardTitle, BCardText  },
+  components: {CardGridItemIcon, CardGridItemCaret, RichText, BCard, BCardBody, BCardTitle, BCardText  },
   props: {
     backgroundVariant: {
       type: String,

package/src/components/Paragraphs/ListGroup/Link/list-link.stories.js

@@ -5,67 +5,62 @@ export default {
   title: 'Paragraphs/ListGroup',
   component: ListGroup,
   argTypes: {
-    darkBackground: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    items: {
-      control: 'object',
-      defaultValue: storyData.links
-    },
-    rtlItems: {
-      control: 'object',
-      defaultValue: storyDataAr.links
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    titleTag: {
-      control: 'text',
-      defaultValue: 'h3'
-    },
-    showListItemNavigationArrow: {
-      control: 'boolean',
-      defaultValue: true
+    list: {
+      table: {
+        disable: true
+      }
     },
-    showLargeSpacing: {
-      control: 'boolean',
-      defaultValue: false
+    title: {
+      table: {
+        disable: true
+      }
     },
-    list: {
+    role: {
       table: {
         disable: true
       }
     },
-    showListLink: {
-      control: 'boolean',
-      defaultValue: true
+    subHeading: {
+      table: {
+        disable: true
+      }
     },
-    title: {
+    footerHeading: {
       table: {
         disable: true
       }
     }
+  },
+  args: {
+    darkBackground: false,
+    items: storyData.links,
+    rtlItems: storyDataAr.links,
+    rtl: false,
+    titleTag: 'h3',
+    showListItemNavigationArrow: true,
+    showLargeSpacing: false,
+    showListLink: true
   }
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args) => ({
   components: { ListGroup },
+  setup() {
+    return { args };
+  },
   data() {
     return {
       storyData,
       storyDataAr
     }
   },
-  props: Object.keys(argTypes),
   template: `<list-group
-    v-bind="$props"
-    :list="rtl ? rtlItems : items"
-    :title="(rtl ? storyDataAr.title : storyData.title)"
-    :sub-heading="(rtl ? storyDataAr.subHeading : storyData.subHeading)"
-    :footer-heading="(rtl ? storyDataAr.footer : storyDataAr.footer)"
-    :show-list-link="showListLink"  />`
+    v-bind="args"
+    :list="args.rtl ? args.rtlItems : args.items"
+    :title="(args.rtl ? storyDataAr.title : storyData.title)"
+    :sub-heading="(args.rtl ? storyDataAr.subHeading : storyData.subHeading)"
+    :footer-heading="(args.rtl ? storyDataAr.footer : storyDataAr.footer)"
+    :show-list-link="args.showListLink" />`
 })
 
 export const Link = Template.bind({})

package/src/components/Paragraphs/ListGroup/list-group.stories.js

@@ -5,60 +5,63 @@ export default {
   title: 'Paragraphs/ListGroup',
   component: ListGroup,
   argTypes: {
-    darkBackground: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    items: {
-      control: 'object',
-      defaultValue: storyData.links
-    },
-    rtlItems: {
-      control: 'object',
-      defaultValue: storyDataAr.links
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
+    list: {
+      table: {
+        disable: true
+      }
     },
-    titleTag: {
-      control: 'text',
-      defaultValue: 'h3'
+    title: {
+      table: {
+        disable: true
+      }
     },
-    showListItemNavigationArrow: {
-      control: 'boolean',
-      defaultValue: true
+    role: {
+      table: {
+        disable: true
+      }
     },
-    showLargeSpacing: {
-      control: 'boolean',
-      defaultValue: false
+    subHeading: {
+      table: {
+        disable: true
+      }
     },
-    list: {
+    footerHeading: {
       table: {
         disable: true
       }
     },
-    title: {
+    showListLink: {
       table: {
         disable: true
       }
     }
+  },
+  args: {
+    darkBackground: false,
+    items: storyData.links,
+    rtlItems: storyDataAr.links,
+    rtl: false,
+    titleTag: 'h3',
+    showListItemNavigationArrow: true,
+    showLargeSpacing: false
   }
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args) => ({
   components: { ListGroup },
+  setup() {
+    return { args }
+  },
   data() {
     return {
       storyData,
       storyDataAr
     }
   },
-  props: Object.keys(argTypes),
   template: `<list-group
-    v-bind="$props"
-    :list="rtl ? rtlItems : items"
-    :title="(rtl ? storyDataAr.title : storyData.title)" />`
+    v-bind="args"
+    :list="args.rtl ? args.rtlItems : args.items"
+    :title="(args.rtl ? storyDataAr.title : storyData.title)" />`
 })
 
 export const Default = Template.bind({})

package/src/components/Paragraphs/ListGroup/navigation-card.stories.js

@@ -5,50 +5,53 @@ export default {
   title: 'Paragraphs/NavigationCards',
   component: ListGroup,
   argTypes: {
-    darkBackground: {
-      control: 'boolean',
-      defaultValue: true
-    },
-    items: {
-      control: 'object',
-      defaultValue: storyData.links
-    },
-    rtlItems: {
-      control: 'object',
-      defaultValue: storyDataAr.links
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
+    list: {
+      table: {
+        disable: true
+      }
     },
-    titleTag: {
-      control: 'text',
-      defaultValue: 'h2'
+    title: {
+      table: {
+        disable: true
+      }
     },
-    showListItemNavigationArrow: {
-      control: 'boolean',
-      defaultValue: false
+    role: {
+      table: {
+        disable: true
+      }
     },
-    showLargeSpacing: {
-      control: 'boolean',
-      defaultValue: false
+    subHeading: {
+      table: {
+        disable: true
+      }
     },
-    list: {
+    footerHeading: {
       table: {
         disable: true
       }
     },
-    title: {
+    showListLink: {
       table: {
         disable: true
       }
     }
+  },
+  args: {
+    darkBackground: true,
+    items: storyData.links,
+    rtlItems: storyDataAr.links,
+    rtl: false,
+    titleTag: 'h2',
+    showListItemNavigationArrow: true,
+    showLargeSpacing: false
   }
 }
 
 const Template = (args, { argTypes }) => ({
   components: { ListGroup },
-  props: Object.keys(argTypes),
+  setup () {
+    return { args }
+  },
   data() {
     return {
       storyData,
@@ -56,9 +59,9 @@ const Template = (args, { argTypes }) => ({
     }
   },
   template: `<list-group
-    v-bind="$props"
-    :list="rtl ? rtlItems : items"
-    :title="(rtl ? storyDataAr.title : storyData.title)"
+    v-bind="args"
+    :list="args.rtl ? args.rtlItems : args.items"
+    :title="(args.rtl ? storyDataAr.title : storyData.title)"
   />
 `
 })

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
-    }
-  }
+  args: {
+    taskList: taskFinderTempData,
+    title: taskFinderTempTitle,
+    text: taskFinderTempText,
+    headingTag: 'h2',
+    rtl: false,
+    workwell: false
+  },
+  template: '<task-finder v-bind="args" :storybook="true"/>'
 }
 
-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/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'