@worksafevictoria/wcl7.5 1.1.0-beta.5 → 1.1.0-beta.51

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

@@ -4,68 +4,64 @@ import { storyData, storyDataAr } from './../Constants'
 export default {
   title: 'Paragraphs/ListGroup',
   component: ListGroup,
+  tags: ['autodocs'],
   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/index.vue

@@ -48,7 +48,7 @@
         :taxonomies="{
           industry: card.industry,
           topic: card.topic,
-          language: card.language
+          language: card.language,
         }"
       />
     </template>
@@ -69,7 +69,7 @@ import RichText from './../../Paragraphs/RichText/index.vue'
 import {
   isAbsoluteUrl,
   navigateToPath,
-  isGovSite
+  isGovSite,
 } from './../../../../lib/utility'
 
 export default {
@@ -80,48 +80,48 @@ export default {
       type: Array,
       default() {
         return []
-      }
+      },
     },
     role: {
       type: String,
-      default: 'button'
+      default: 'button',
     },
     darkBackground: {
       type: Boolean,
-      default: false
+      default: false,
     },
     title: {
       type: String,
-      default: ''
+      default: '',
     },
     titleTag: {
       type: String,
-      default: 'h3'
+      default: 'h3',
     },
     subHeading: {
       type: String,
-      default: null
+      default: null,
     },
     footerHeading: {
       type: String,
-      default: null
+      default: null,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showListItemNavigationArrow: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showLargeSpacing: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showListLink: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   methods: {
     getCaret(card) {
@@ -138,37 +138,43 @@ export default {
       // Some custom logic for gov caretaker logic
       if (process.env.CARETAKER && process.env.CARETAKER === 'true') {
         if (!isGovSite(card?.selectedCard?.link)) {
-          this.$store.commit('page/SET_CARETAKER_REF', 'list-group')
-          this.$root.$emit('caretaker-open', card?.selectedCard?.link)
+          // this.$store.commit('page/SET_CARETAKER_REF', 'list-group')
+          // this.$root.$emit('caretaker-open', card?.selectedCard?.link)
+          if (this.$pageStore) {
+            this.$pageStore.caretaker.referrer = 'list-group'
+          }
+          if (this.$bus) {
+            this.$bus.$emit('caretaker-open', card?.selectedCard?.link)
+          }
         } else {
           navigateToPath.call(
             this,
             card?.selectedCard?.link,
-            card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+            card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
           )
         }
       } else {
         navigateToPath.call(
           this,
           card?.selectedCard?.link,
-          card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+          card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
         )
       }
     },
     focussed(ev) {
       const path = ev.path || (ev.composedPath && ev.composedPath())
       const theTabbedCards = path.find(
-        (el) => el['_prevClass'] === 'tabbed-cards'
+        (el) => el['_prevClass'] === 'tabbed-cards',
       )
       if (ev.shiftKey && theTabbedCards) {
         ev.preventDefault()
-        let selectedTabbedCards = theTabbedCards.getElementsByClassName(
-          'isSelected'
-        )
+        let selectedTabbedCards =
+          theTabbedCards.getElementsByClassName('isSelected')
         let selectedCard = selectedTabbedCards[0].getElementsByTagName('button')
-        let thePrevLGItem = ev.target?.parentElement?.parentElement?.previousSibling?.getElementsByTagName(
-          'button'
-        )
+        let thePrevLGItem =
+          ev.target?.parentElement?.parentElement?.previousSibling?.getElementsByTagName(
+            'button',
+          )
         if (thePrevLGItem) {
           thePrevLGItem[0].focus()
         } else {
@@ -176,22 +182,25 @@ export default {
         }
       } else if (!ev.shiftKey && theTabbedCards) {
         ev.preventDefault()
-        let selectedTabbedCards = theTabbedCards.getElementsByClassName(
-          'isSelected'
-        )
-        let nextTabbedCard = selectedTabbedCards[0]?.parentElement?.nextSibling?.getElementsByTagName(
-          'button'
-        )
-        let theNextLGItem = ev.target?.parentElement?.parentElement?.nextSibling?.getElementsByTagName(
-          'button'
-        )
+        let selectedTabbedCards =
+          theTabbedCards.getElementsByClassName('isSelected')
+        let nextTabbedCard =
+          selectedTabbedCards[0]?.parentElement?.nextSibling?.getElementsByTagName(
+            'button',
+          )
+        let theNextLGItem =
+          ev.target?.parentElement?.parentElement?.nextSibling?.getElementsByTagName(
+            'button',
+          )
         if (theNextLGItem) {
           theNextLGItem[0].focus()
         } else if (nextTabbedCard) {
           nextTabbedCard[0].focus()
         } else {
           let nextFocus = this.focusNextElement()
-          this.$root.$emit('last-focus-out')
+          if (this.$bus) {
+            this.$bus.$emit('last-focus-out')
+          }
           nextFocus.focus()
         }
       } else {
@@ -208,7 +217,7 @@ export default {
           'button:not([disabled]):not([tabindex="-1"])',
           'input:not([disabled]):not([tabindex="-1"])',
           'select:not([disabled]):not([tabindex="-1"])',
-          '[tabindex]:not([disabled]):not([tabindex="-1"])'
+          '[tabindex]:not([disabled]):not([tabindex="-1"])',
           /* add custom queries here */
         ].join(','),
         queryResult = Array.prototype.filter.call(
@@ -220,7 +229,7 @@ export default {
               elem.offsetHeight > 0 ||
               elem === activeElem
             )
-          }
+          },
         ),
         indexedList = queryResult
           .slice()
@@ -234,20 +243,20 @@ export default {
               ? a.tabIndex < b.tabIndex
                 ? -1
                 : b.tabIndex < a.tabIndex
-                ? 1
-                : 0
+                  ? 1
+                  : 0
               : a.tabIndex != 0
-              ? -1
-              : b.tabIndex != 0
-              ? 1
-              : 0
+                ? -1
+                : b.tabIndex != 0
+                  ? 1
+                  : 0
           }),
         focusable = [].concat(
           indexedList,
           queryResult.filter((elem) => {
             /* filter out all indexes above 0 */
             return elem.tabIndex == 0 || elem.tabIndex == -1 ? true : false
-          })
+          }),
         )
 
       /* if reverse is true return the previous focusable element
@@ -256,8 +265,8 @@ export default {
         ? focusable[focusable.indexOf(activeElem) - 1] ||
             focusable[focusable.length - 1]
         : focusable[focusable.indexOf(activeElem) + 1] || focusable[0]
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>

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

@@ -4,61 +4,65 @@ import { storyData, storyDataAr } from './Constants'
 export default {
   title: 'Paragraphs/ListGroup',
   component: ListGroup,
+  tags: ['autodocs'],
   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

@@ -4,51 +4,55 @@ import { storyData, storyDataAr } from './Constants'
 export default {
   title: 'Paragraphs/NavigationCards',
   component: ListGroup,
+  tags: ['autodocs'],
   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 +60,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/MarketingBanner/index.stories.js

@@ -3,31 +3,17 @@ import MarketingBanner from './index.vue'
 export default {
   title: 'Paragraphs/MarketingBanner',
   component: MarketingBanner,
+  tags: ['autodocs'],
   argTypes: {
-    image: {
-      control: 'text'
-    },
-    leftText: {
-      control: 'text'
-    },
-    leftBg: {
+   leftBg: {
       control: 'select',
       options: ['yellow', 'black', 'white']
     },
-    rightText: {
-      control: 'text'
-    },
-    rightBg: {
+     rightBg: {
       control: 'select',
       options: ['yellow', 'black', 'white']
     },
-    withLink: {
-      control: 'boolean'
-    },
-    hideLeft: {
-      control: 'boolean'
-    },
-    link: {
+      link: {
       control: 'text',
       table: { disable: true }
     },

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

@@ -106,40 +106,39 @@ const itemListAr = [
 export default {
   title: 'Paragraphs/ProofPoints',
   component: ProofPoints,
+  tags: ['autodocs'],
   argTypes: {
-    title: {
-      control: 'text',
-      defaultValue: 'Section heading'
-    },
     headingTag: {
       control: 'select',
-      options: ['h2', 'h3'],
-      defaultValue: 'h2'
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
+      options: ['h2', 'h3']
     },
-    columns: {
+   columns: {
       control: 'select',
-      options: [3, 4],
-      defaultValue: 3
+      options: [3, 4]
     },
     itemList: {
       table: { disable: true }
     },
     type: {
       control: 'select',
-      options: ['default', 'icon', 'image'],
-      defaultValue: 'icon'
+      options: ['default', 'icon', 'image']
     }
+  },
+  args: {
+    title: 'Section heading',
+    headingTag: 'h2',
+    rtl: false,
+    columns: 3,
+    type: 'icon'
   }
 }
 
-const DefaultProofPoint = (args, { argTypes }) => ({
+const DefaultProofPoint = (args) => ({
   components: { ProofPoints },
-  props: Object.keys(argTypes),
-  template: `<proof-points v-bind="$props" :item-list="dynamicItemList" />`,
+  setup() {
+    return { args };
+  },
+  template: `<proof-points v-bind="args" :item-list="dynamicItemList" />`,
   data() {
     return {
       itemListDefault,
@@ -156,9 +155,9 @@ const DefaultProofPoint = (args, { argTypes }) => ({
       }
       return array.map((item) => {
         const clone = JSON.parse(JSON.stringify(item))
-        if (this.type === 'image') {
+        if (args.type === 'image') {
           clone.icon = undefined
-        } else if (this.type === 'icon') {
+        } else if (args.type === 'icon') {
           clone.image = undefined
         } else {
           clone.icon = undefined

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

@@ -4,29 +4,19 @@ import { taxonomyTagsList } from '../../../mock/related-info'
 export default {
   title: 'Paragraphs/RelatedInformation',
   component: RelatedInformation,
+  tags: ['autodocs'],
   argTypes: {
-    showTaxonomies: {
-      control: 'boolean',
-      defaultValue: true
+    goToCollectionPage: {
+      table: {
+        disable: true
+      }
+    }
   },
-  showTaxonomyHeading: {
-    control: 'boolean',
-      defaultValue: true
-  },
-  taxonomies: {
-    control: 'array',
-    defaultValue: taxonomyTagsList
-  }
+  args: {
+    showTaxonomies: true,
+    showTaxonomyHeading: true,
+    taxonomies: taxonomyTagsList
   }
 }
 
-const Template = (args, { argTypes }) => ({
-  components: { RelatedInformation },
-  props: Object.keys(argTypes),
-  template: `
-    <related-information 
-      v-bind="$props"
-    /> `
-})
-
-export const Default = Template.bind({})
+export const Default = {}