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

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 = {}

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

@@ -7,24 +7,43 @@
     <div :class="isFluid ? 'table-scrolled' : ''">
       <b-table
         v-if="items"
-          :items="items"
-          :fields="fields"
-          :class="`${rtl ? 'rtl' : ''} ${isFluid ? 'isScrolled' : ''}`"
-          class="table border"
-          :striped="true"
-          v-model:sort-desc="sortDesc" 
-          v-model:sort-by="sortBy"
-          :borderless="false"
-          :responsive="!isFluid"
-          :stacked="!isFluid ? 'sm' : false"
+        :items="items"
+        :fields="fields"
+        :class="`${rtl ? 'rtl' : ''} ${isFluid ? 'isScrolled' : ''}`"
+        class="table border"
+        :striped="true"
+        :sort-by="newSortBy"
+        :borderless="false"
+        :responsive="!isFluid"
+        :stacked="!isFluid ? 'sm' : false"
       >
         <template #head()="data">
-          <span class="iconHeader table-active" tabindex="0" @keypress.enter="accessSort(data.field)" scope="colgroup">
+          <span
+            class="iconHeader table-active"
+            tabindex="0"
+            @keypress.enter="accessSort(data.field)"
+            scope="colgroup"
+          >
             {{ data.label }}
             <span class="sortImg" v-if="data.field.sortable">
-            <img v-if="data.field.thAttr['aria-sort'] === 'none'" :src="sortIconNeutral" alt="image indicating no sort" style="width: 0.55rem; height: 0.90rem;"/>
-            <img v-if="data.field.thAttr['aria-sort'] === 'ascending'" :src="sortIconAsc" alt="image indicating ascending sort" style="width: 0.55rem; height: 0.90rem;"/>
-            <img v-else-if="data.field.thAttr['aria-sort'] === 'descending'" :src="sortIconDesc" alt="image indicating descending sort" style="width: 0.55rem; height: 0.90rem;"/>
+              <img
+                v-if="data.field.thAttr['aria-sort'] === 'none'"
+                :src="sortIconNeutral"
+                alt="image indicating no sort"
+                style="width: 0.55rem; height: 0.9rem"
+              />
+              <img
+                v-if="data.field.thAttr['aria-sort'] === 'ascending'"
+                :src="sortIconAsc"
+                alt="image indicating ascending sort"
+                style="width: 0.55rem; height: 0.9rem"
+              />
+              <img
+                v-else-if="data.field.thAttr['aria-sort'] === 'descending'"
+                :src="sortIconDesc"
+                alt="image indicating descending sort"
+                style="width: 0.55rem; height: 0.9rem"
+              />
             </span>
           </span>
         </template>
@@ -43,62 +62,67 @@ import { BTable } from 'bootstrap-vue-next'
 
 export default {
   name: 'TabulatedData',
-  components: { SectionGroup, RichText, BTable},
+  components: { SectionGroup, RichText, BTable },
   props: {
     items: {
       type: Array,
-      required: true
+      required: true,
     },
     fields: {
       type: Array,
-      default: undefined
+      default: undefined,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isFixedWidth: {
       type: Boolean,
-      default: false
+      default: false,
     },
     caption: {
       type: String,
       default: '',
-      required: false
+      required: false,
     },
-    initialSortBy: {
+    sortBy: {
       type: String,
       default: undefined,
-      required: false
-    }
+      required: false,
+    },
   },
   data() {
     return {
-      sortBy: this.initialSortBy,
-      sortDesc: false,
+      newSortBy: this.sortBy ? [{ key: this.sortBy, order: 'asc' }] : [],
+      //sortDesc: false,
       sortIconNeutral:
         "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
       sortIconDesc:
         "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
       sortIconAsc:
-        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e"
+        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
     }
   },
   computed: {
     isFluid() {
       return this.isFixedWidth
-    }
+    },
   },
   methods: {
-   accessSort(fieldVar) {
-    this.sortBy = fieldVar.key
-      if (fieldVar.thAttr['aria-sort'] === 'none' || fieldVar.thAttr['aria-sort'] === 'descending' ) {
-        this.sortDesc = false
+    accessSort(fieldVar) {
+      //this.sortBy = fieldVar.key
+      if (
+        fieldVar.thAttr['aria-sort'] === 'none' ||
+        fieldVar.thAttr['aria-sort'] === 'descending'
+      ) {
+        this.newSortBy = [{ key: fieldVar.key, order: 'asc' }]
+        //this.sortDesc = false
       } else {
-        this.sortDesc = true
-      }    
-    }
-  }
+        this.newSortBy = [{ key: fieldVar.key, order: 'desc' }]
+        //this.sortDesc = true
+      }
+    },
+  },
 }
 </script>
 
@@ -141,5 +165,9 @@ export default {
     vertical-align: middle;
     margin-left: 5px;
   }
+
+  .b-table-sortable-column svg {
+    display: none;
+  }
 }
 </style>

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
-    }
+  tags: ['autodocs'],
+  args: {
+    taskList: taskFinderTempData,
+    title: taskFinderTempTitle,
+    text: taskFinderTempText,
+    headingTag: 'h2',
+    rtl: false,
+    workwell: false
   }
 }
 
-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/index.vue

@@ -21,7 +21,7 @@
             :selected-task="selectedTask"
             :is-child="false"
             :is-mobile-or-tablet-view="isMobileOrTabletView"
-            @selected="(task) => taskClick(task, true)"
+            @selection="(task) => taskClick(task, true)"
           >
             <task-finder-column
               v-if="isMobileOrTabletView && selectedTask"
@@ -31,7 +31,7 @@
               :selected-task="selectedTask"
               :is-mobile-or-tablet-view="isMobileOrTabletView"
               :is-child="true"
-              @selected="(task) => taskClick(task, false)"
+              @selection="(task) => taskClick(task, false)"
             >
             </task-finder-column>
           </task-finder-column>
@@ -49,7 +49,7 @@
             :selected-task="selectedTask"
             :is-mobile-or-tablet-view="isMobileOrTabletView"
             :is-child="true"
-            @selected="(task) => taskClick(task, false)"
+            @selection="(task) => taskClick(task, false)"
           >
           </task-finder-column>
         </column>

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'

package/src/components/Paragraphs/TaskFinder/task-finder-column.vue

@@ -16,7 +16,7 @@
       isChild ? 'task-finder-column__child' : 'task-finder-column__parent'
     "
     :style="cards.length > 6 ? false : 'overflow-y: auto'"
-    @selected="(card) => $emit('selected', { card })"
+    @selected="(card) => $emit('selection', { card })"
   >
     <template v-slot:cardItem="{ card }">
       <card-grid-item

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

@@ -19,6 +19,7 @@ const MockVideo = {
 export default {
   title: 'Paragraphs/Text + Media',
   component: TextMedia,
+  tags: ['autodocs'],
   args: {
     content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>',
     titleText: 'A sample media item',

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

@@ -8,7 +8,7 @@
   >
     <template v-slot:content>
       <row align-v="center">
-        <column sm="5" :order="flip ? 2 : 1">
+        <column class="wcl-media-text__image" sm="5" :order="flip ? 2 : 1">
           <media-image
             v-if="mediaType === 'image' && image"
             :image-alt="image && image.alt ? image.alt : ''"
@@ -135,6 +135,10 @@ export default {
     }
   }
 
+  &__image {
+    flex: 0 0 36%;
+  }
+
   &.hideImageMob {
     @include mq('xs') {
       img {

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

@@ -106,6 +106,7 @@ const mockData = {
 export default {
   title: 'Paragraphs/VideoGrid',
   component: { VideoGrid, Container, Row, Column },
+  tags: ['autodocs'],
   argTypes: {
     titleTag: {
       control: 'select',

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

@@ -19,18 +19,12 @@ const mediaDesc = 'Vestibulum rutrum quam vitae fringilla tincidunt. Suspendisse
 export default {
   title: 'Paragraphs/VideoPlayer',
   component: { VideoMedia,  Container, Row, Column },
+  tags: ['autodocs'],
   argTypes: {
     titleTag: {
       control: 'select',
       options: ['h2', 'h3']
     },
-    mediaTitle: {
-      control: 'text'
-    },
-    mediaDescription: {
-      control: 'text'
-        
-    },
     videoId: {
       control: 'select',
       options: [mockData.videoId.YouTube, mockData.videoId.Vimeo]
@@ -38,12 +32,6 @@ export default {
     provider: {
       control: 'select',
       options: [mockData.provider.YouTube, mockData.provider.Vimeo],
-    },
-    transcriptTitle: {
-      control: 'text'
-    },
-    transcript: {
-      control: 'text'
     }
   }
 }