@worksafevictoria/wcl7.5 1.1.0-beta.7 → 1.1.0-beta.71

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'
@@ -41,31 +42,25 @@ const arabicItemList = [
 export default {
   title: 'Paragraphs/ScrollSpy',
   component: ScrollSpy,
+  tags: ['autodocs'],
   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,
+    scrollSpy: { element: 'scrollspy-nested', offset: 100, method: 'auto' }
     }
-  }
 }
-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 +74,7 @@ const DefaultContent = (args, { argTypes }) => ({
           ipsum commodo tempor sunt in proident.
         `,
       arabicText: `هنالك العديد من الأنواع المتوفرة لنصوص لوريم إيبسوم، ولكن الغالبية تم تعديلها بشكل ما عبر إدخال بعض النوادر أو الكلمات العشوائية إلى النص. إن كنت تريد أن تستخدم نص لوريم إيبسوم ما، عليك أن تتحقق أولاً أن ليس هناك أي كلمات أو عبارات محرجة أو غير لائقة مخبأة في هذا النص. بينما تعمل جميع مولّدات نصوص لوريم إيبسوم على الإنترنت على إعادة تكرار مقاطع من نص لوريم إيبسوم نفسه عدة مرات بما تتطلبه الحاجة، يقوم مولّدنا هذا باستخدام كلمات من قاموس يحوي على أكثر من 200 كلمة لا تينية، مضاف إليها مجموعة من الجمل النموذجية، لتكوين نص لوريم إيبسوم ذو شكل منطقي قريب إلى النص الحقيقي. وبالتالي يكون النص الناتح خالي من التكرار، أو أي كلمات أو عبارات غير لائقة أو ما شابه. وهذا ما يجعله أول مولّد نص لوريم إيبسوم حقيقي على الإنترنت.`,
-      itemList,
+      englishItemList,
       arabicItemList
     }
   },
@@ -126,7 +121,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 +169,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

@@ -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,23 +19,41 @@
 
 <script>
 import SectionGroup from '../../Containers/SectionGroup/index.vue'
+import {
+  BNavbar,
+  BListGroup,
+  BListGroupItem,
+  vBScrollspy,
+} from 'bootstrap-vue-next'
 
 export default {
   name: 'ScrollSpy',
-  components: { SectionGroup },
+  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) {
@@ -46,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

@@ -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
@@ -40,14 +40,13 @@
             :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,38 +68,42 @@ 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: {
@@ -121,18 +124,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() {
@@ -151,7 +153,7 @@ export default {
       let end = start + this.cols
       return rows.slice(start, end)
     },
-    setCurrentRow(rowIndex, card) {
+    async setCurrentRow(rowIndex, card) {
       const sameCardSelected =
         card.selectedCard === this.selectedCard || !card.selectedCard
       this.selectedCard = null
@@ -162,17 +164,18 @@ export default {
           cardGrid.clearCards()
         }
       })
+      await nextTick()
+      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 +195,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 +239,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,

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

@@ -4,20 +4,21 @@ import { fields, fieldsAr, items, itemsAr } from './Constants'
 export default {
   title: 'Paragraphs/TabulatedData',
   component: TabulatedData,
+  tags: ['autodocs'],
   data() {
     return {
       TabulatedData,
       fields,
       fieldsAr,
       items,
-      itemsAr
+      itemsAr,
     }
   },
   argTypes: {
     isFixedWidth: {
       control: 'boolean',
-      table: { disable: true }
-    }
+      table: { disable: true },
+    },
   },
   args: {
     rtl: false,
@@ -27,13 +28,13 @@ export default {
     fields: fields.links,
     rtlFields: fieldsAr.links,
     caption: 'The table caption',
-    initialSortBy: 'rank'
+    sortBy: 'rank',
   },
   template: `<tabulated-data
                 v-bind="args"
                 :items="rtl ? args.rtlItems : args.items"
                 :fields="rtl ? args.rtlFields : args.fields"
-              /> `
+              /> `,
 }
 
 export const Default = {}