@worksafevictoria/wcl7.5 1.1.0-beta.11 → 1.1.0-beta.110

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,6 +4,14 @@ import { taxonomyTagsList } from '../../../mock/related-info'
 export default {
   title: 'Paragraphs/RelatedInformation',
   component: RelatedInformation,
+  tags: ['autodocs'],
+  argTypes: {
+    goToCollectionPage: {
+      table: {
+        disable: true
+      }
+    }
+  },
   args: {
     showTaxonomies: true,
     showTaxonomyHeading: true,

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

@@ -379,7 +379,8 @@ const mockData = {
 
 export default {
   title: 'SubComponents/RichText',
-  component: RichText
+  component: RichText,
+  tags: ['autodocs'],
 }
 
 export const WYSIWYG = {

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

@@ -42,6 +42,7 @@ const arabicItemList = [
 export default {
   title: 'Paragraphs/ScrollSpy',
   component: ScrollSpy,
+  tags: ['autodocs'],
   argTypes: {
     itemList: {
       table: {disable: true}
@@ -51,7 +52,8 @@ export default {
     title: 'On this page',
     itemListEnglish:  englishItemList,
     itemListArabic: arabicItemList,
-    rtl: false
+    rtl: false,
+    scrollSpy: { element: 'scrollspy-nested', offset: 100, method: 'auto' }
     }
 }
 const DefaultContent = (args) => ({

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

@@ -1,10 +1,7 @@
 <template>
   <section-group class="sticky-top">
     <b-navbar class="paragraph--scrollspy" :class="{ rtl: rtl }">
-      <b-list-group
-        v-b-scrollspy="{ offset: 100, method: 'auto' }"
-        class="flex-column"
-      >
+      <b-list-group v-b-scrollspy="scrollSpy" class="flex-column">
         <div class="scrollspy__title">{{ title }}</div>
         <b-list-group-item
           v-for="(item, index) in itemList"
@@ -22,24 +19,41 @@
 
 <script>
 import SectionGroup from '../../Containers/SectionGroup/index.vue'
-import { BNavbar, BListGroup, BListGroupItem } from 'bootstrap-vue-next'
+import {
+  BNavbar,
+  BListGroup,
+  BListGroupItem,
+  vBScrollspy,
+} from 'bootstrap-vue-next'
 
 export default {
   name: 'ScrollSpy',
   components: { SectionGroup, BNavbar, BListGroup, BListGroupItem },
+  directives: { 'b-scrollspy': vBScrollspy },
   props: {
     title: {
       type: String,
-      default: 'On this page'
+      default: 'On this page',
     },
     itemList: {
       type: Array,
-      required: true
+      required: true,
     },
     rtl: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
+    scrollSpy: {
+      type: Object,
+      default: () => {
+        return {
+          element: 'body',
+          offset: 100,
+          method: 'auto',
+          contentQuery: '[id]',
+        }
+      },
+    },
   },
   methods: {
     scrollToAnchor(anchor) {
@@ -47,11 +61,11 @@ export default {
       if (anchorElement) {
         anchorElement.focus()
         anchorElement.scrollIntoView({
-          behavior: 'smooth'
+          behavior: 'smooth',
         })
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

package/src/components/Paragraphs/SelectableCards/Control/index.stories.js

@@ -4,6 +4,7 @@ import { mockSelectableCards } from '../../../../mock/control-selectable-cards'
 export default {
   title: 'Paragraphs/SelectableCards',
   component: SelectableCards,
+  tags: ['autodocs'],
   argTypes: {
     cardType: {
       table: { disable: true }

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

@@ -67,42 +67,45 @@ export default {
     CardGrid,
     CardGridItem,
     CardBody,
-    CardTop
+    CardTop,
+  },
+  emits: {
+    selected: false,
   },
   props: {
     cards: {
       type: Array,
       required: true,
-      default: () => []
+      default: () => [],
     },
     title: {
       type: String,
-      default: null
+      default: null,
     },
     headingTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
     },
     subHeading: {
       type: String,
-      default: null
+      default: null,
     },
     iconIsBordered: {
       type: Boolean,
-      default: true
+      default: true,
     },
     columns: {
       type: Number,
-      default: 4
+      default: 4,
     },
     cardType: {
       type: String,
-      default: null
+      default: null,
     },
     cardTextAlign: {
       type: String,
-      default: null
-    }
+      default: null,
+    },
   },
   methods: {
     selectedCardChangeFocus(card) {
@@ -110,7 +113,7 @@ export default {
     },
     clearCard() {
       this.$refs.cardgrid.clearCards()
-    }
-  }
+    },
+  },
 }
 </script>

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

@@ -57,6 +57,7 @@ const itemListAr = [
 export default {
   title: 'Paragraphs/Statistics',
   component: Statistics,
+  tags: ['autodocs'],
   argTypes: {
     headingTag: {
       control: 'select',

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

@@ -80,6 +80,7 @@ export default {
     border-radius: 10px 10px 10px 10px;
     margin-bottom: 16px;
     border-top: none;
+    opacity: unset;
   }
   :deep(.card-title) {
     line-height: 1.2;

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

@@ -4,33 +4,14 @@ import { tabbedCardsMockLinks } from '../../../mock/tabbed-cards'
 export default {
   title: 'Paragraphs/TabbedCards',
   component: TabbedCards,
-  argTypes: {
-    description: {
-      control: 'text',
-      defaultValue: 'Tabbed cards h2 heading'
-    },
-    heading: {
-      control: 'text',
-      defaultValue: 'Tabbed cards h2 heading'
-    },
-    tabbedCards: {
-      control: 'object',
-      defaultValue: tabbedCardsMockLinks
-    },
-    workwell: {
-      control: 'boolean',
-      defaultValue: false
-    }
+  tags: ['autodocs'],
+  args: {
+    description: 'Tabbed cards h2 heading',
+    heading: 'Tabbed cards h2 heading',
+    tabbedCards: tabbedCardsMockLinks,
+    workwell: false,
+    rtl: false
   }
 }
 
-const Template = (args, { argTypes }) => ({
-  components: { TabbedCards },
-  props: Object.keys(argTypes),
-  template: `
-    <tabbed-cards 
-      v-bind="$props"
-    /> `
-})
-
-export const Default = Template.bind({})
+export const Default = {}

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="tabbedCards.length > 0 && loaded"
-    :ref="`tabbedCards-${_uid}`"
+    :ref="`tabbedCards-${tabbedCards[0].cardid}`"
     class="tabbed-cards"
   >
     <div v-for="(r, rIndex) in rows" :key="rIndex">
@@ -20,7 +20,7 @@
         :content-class="`tabbed-cards-content`"
         class="tabbed-cards__grid"
         @selected="(card, cardIndex) => setCurrentRow(rIndex, card)"
-        @focussed="focussed($event)"
+        @keydown.tab="focussed($event)"
       >
         <template v-slot:cardItem="{ card }">
           <card-grid-item
@@ -28,26 +28,25 @@
             :show-divider="false"
             :header-size="'large'"
             class="tabbed-card"
-            :class="card === selectedCard ? 'isSelected' : ''"
+            :class="checkSelectedCard(card) ? 'isSelected' : ''"
             :card-padding="'small'"
             :card-header-title="card.title"
-            :caret="card === selectedCard ? 'up' : 'down'"
+            :caret="checkSelectedCard(card) ? 'up' : 'down'"
             :caret-position="'bottom'"
             :rtl="rtl || card.rtl"
             :description="card.text"
             :button-role="'link'"
-            :is-selected="card === selectedCard"
+            :is-selected="checkSelectedCard(card)"
             :is-expandable="true"
           />
         </template>
-        <template
-          v-if="selectedRow === rIndex && selectedCard"
-          v-slot:cardGridFooter
-        >
-          <column class="listgroup-column">
+        <template v-slot:cardGridFooter>
+          <column
+            v-if="selectedRow === rIndex && selectedCard"
+            class="listgroup-column"
+          >
             <div ref="listgroup" class="tabbed-cards__listGroup">
-              <component
-                :is="ListGroupComponent"
+              <list-group
                 :list="selectedCard.links"
                 :title="selectedCard.linksTitle"
                 :title-tag="selectedCard.linksTag"
@@ -69,48 +68,48 @@ import CardGrid from './../../Common/CardGrid/index.vue'
 import CardGridItem from './../../Common/CardGridItem/index.vue'
 import Column from './../../Containers/Column/index.vue'
 import Icon from './../../SubComponents/Icon/index.vue'
+import ListGroup from './../../Paragraphs/ListGroup/index.vue'
+import VueScrollTo from 'vue-scrollto'
+import { nextTick } from 'vue'
 
 export default {
   name: 'TabbedCards',
-  components: { CardGrid, CardGridItem, Icon, Column },
+  components: { CardGrid, CardGridItem, Icon, Column, ListGroup },
   props: {
     heading: {
       type: String,
-      default: ''
+      default: '',
     },
     description: {
       type: String,
-      default: ''
+      default: '',
     },
     tabbedCards: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     workwell: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
       selectedCard: undefined,
       selectedRow: undefined,
       screenWidth: 0,
-      loaded: false
+      loaded: false,
+      tabList: null,
     }
   },
   computed: {
     rows() {
-      let r = Math.floor(this.tabbedCards.length / this.cols)
-      if (r % 1 != 0) {
-        return r
-      } else {
-        return r + 1
-      }
+      let r = Math.ceil(this.tabbedCards.length / this.cols)
+      return r
     },
     cols() {
       if (this.screenWidth < 575.98) {
@@ -121,18 +120,17 @@ export default {
         return 3
       }
     },
-    ListGroupComponent() {
-      //List group component import to fix storybook bug
-      return () => import('./../ListGroup/index.vue')
-    }
   },
   mounted() {
     window.addEventListener('resize', this.updateScreenWidth)
     this.screenWidth = document.documentElement.clientWidth
-    this.$root.$on('last-focus-out', () => {
-      this.selectedCard = null
-      this.selectedRow = null
-    })
+    if (this.$bus) {
+      this.$bus.$on('last-focus-out', () => {
+        this.selectedCard = null
+        this.selectedRow = null
+      })
+    }
+
     this.loaded = true
   },
   beforeDestroy() {
@@ -140,7 +138,7 @@ export default {
   },
   methods: {
     getCardIdPrefix(rIndex, cardIndex) {
-      const cardPrefix = `tabbedcards-${this._uid}-r-${rIndex}`
+      const cardPrefix = `tabbedcards-${this.tabbedCards[0].cardid}-r-${rIndex}`
       if (cardIndex !== null && cardIndex !== undefined) {
         return `${cardPrefix}-${cardIndex}`
       }
@@ -151,9 +149,13 @@ export default {
       let end = start + this.cols
       return rows.slice(start, end)
     },
+    checkSelectedCard(card) {
+      return JSON.stringify(card) === JSON.stringify(this.selectedCard)
+    },
     setCurrentRow(rowIndex, card) {
       const sameCardSelected =
-        card.selectedCard === this.selectedCard || !card.selectedCard
+        this.checkSelectedCard(card.selectedCard) || !card.selectedCard
+
       this.selectedCard = null
       this.selectedRow = null
       const cardGrids = this.$refs.cardgrid || []
@@ -162,17 +164,17 @@ export default {
           cardGrid.clearCards()
         }
       })
+      this.tabList = this.getFocusElements()
       setTimeout(() => {
         if (window && !sameCardSelected) {
           this.selectedCard = card.selectedCard
           this.selectedRow = rowIndex
-          let VueScrollTo = require('vue-scrollto')
           let options = {
             container: 'body',
             easing: 'ease-in',
             offset: -100,
             force: true,
-            cancelable: true
+            cancelable: true,
           }
           setTimeout(() => {
             const listGroup = this.$refs.listgroup[0]
@@ -192,68 +194,37 @@ export default {
       return cols
     },
     focussed(ev) {
-      if (ev.shiftKey) {
-        let prevTabbedCard = ev.target?.parentElement?.parentElement?.previousSibling?.getElementsByTagName(
-          'button'
-        )[0]
-        if (
-          prevTabbedCard &&
-          prevTabbedCard.getAttribute('aria-expanded') === 'true'
-        ) {
-          ev.preventDefault()
-          const lG = this.$refs.listgroup
-          let itemsOfLG = lG[0].getElementsByTagName('button')
-          itemsOfLG[itemsOfLG.length - 1].focus()
-        }
-        return
-      }
-      const lG = this.$refs.listgroup
-      const isListGroupOpen = Array.isArray(lG) && lG.length > 0
-      const cardIsSelected = ev.target.parentElement.classList.contains(
-        'isSelected'
-      )
-      if (cardIsSelected && isListGroupOpen) {
-        ev.preventDefault()
-        lG[0].getElementsByTagName('button')[0].focus()
-      } else if (!cardIsSelected && isListGroupOpen) {
-        ev.preventDefault()
-        let nextTabbedCard = ev.target?.parentElement?.parentElement?.nextSibling?.getElementsByTagName(
-          'button'
-        )[0]
-        if (nextTabbedCard) {
-          nextTabbedCard.focus()
-        } else {
-          let itemsOfLG = lG[0].getElementsByTagName('button')
-          let lastItemOfLG = itemsOfLG[itemsOfLG.length - 1]
-          let nextFocusElement = this.focusNextElement(false, lastItemOfLG)
-          nextFocusElement.focus()
-        }
+      ev.preventDefault()
+      let activeElem = ev.target
+      if (!this.tabList) {
+        this.tabList = this.getFocusElements()
+      } else {
+        let newList = this.getFocusElements().filter(
+          (item) => this.tabList.indexOf(item) == -1,
+        )
+        this.tabList.splice(this.tabList.indexOf(activeElem) + 1, 0, ...newList)
       }
-      // if its the next card from the selected
+      let newTab = ev.shiftKey
+        ? this.tabList[this.tabList.indexOf(activeElem) - 1] ||
+          this.tabList[this.tabList.length - 1]
+        : this.tabList[this.tabList.indexOf(activeElem) + 1] || this.tabList[0]
+      newTab.focus()
     },
-    focusNextElement(reverse, activeElem) {
-      /*check if an element is defined or use activeElement*/
-      activeElem =
-        activeElem instanceof HTMLElement ? activeElem : document.activeElement
 
+    getFocusElements() {
       let queryString = [
           'a:not([disabled]):not([tabindex="-1"])',
           '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(
           document.querySelectorAll(queryString),
           (elem) => {
-            /*check for visibility while always include the current activeElement*/
-            return (
-              elem.offsetWidth > 0 ||
-              elem.offsetHeight > 0 ||
-              elem === activeElem
-            )
-          }
+            return elem.offsetWidth > 0 || elem.offsetHeight > 0
+          },
         ),
         indexedList = queryResult
           .slice()
@@ -267,30 +238,24 @@ 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
-     if reverse is false return the next focusable element */
-      return reverse
-        ? focusable[focusable.indexOf(activeElem) - 1] ||
-            focusable[focusable.length - 1]
-        : focusable[focusable.indexOf(activeElem) + 1] || focusable[0]
-    }
-  }
+      return focusable
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>

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

@@ -48,6 +48,7 @@ const mockData = [
 export default {
   title: 'Paragraphs/Tabs',
   component: Tabs,
+  tags: ['autodocs'],
   args: {
     items: mockData,
     rtl: false,