@worksafevictoria/wcl7.5 1.1.14 → 1.1.16

package/package.json

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

package/src/components/Global/DirectoryFilters/SingleTaxonomy/index.vue

@@ -159,7 +159,8 @@ export default {
       }
     }
     .modal-body {
-      padding: 32px;
+      padding: 0px 32px 0px;
+      margin-top: 16px;
       fieldset {
         display: flex;
         flex-direction: row;

package/src/components/Global/HeroHeader/index.vue

@@ -98,9 +98,7 @@
               >
             </column>
           </row>
-          <template v-if="showSocial && type !== 'hero'">
-            <social-share :rtl="rtl" />
-          </template>
+          <social-share v-show="showSocial && type !== 'hero'" :rtl="rtl" />
         </container>
       </div>
       <!-- Type Default -->
@@ -152,7 +150,7 @@
       </column>
       <!-- No Col needed for type Hero -->
     </row>
-    <social-share v-if="showSocial && type === 'hero'" :rtl="rtl" />
+    <social-share v-show="showSocial && type === 'hero'" :rtl="rtl" />
   </container>
 </template>
 <script>

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)"
-        @focusin="focussed($event)"
+        @keydown.tab="focussed($event)"
       >
         <template v-slot:cardItem="{ card }">
           <card-grid-item
@@ -40,11 +40,10 @@
             :is-expandable="true"
           />
         </template>
-        <template
-          v-if="selectedRow === rIndex && selectedCard"
+        <template          
           v-slot:cardGridFooter
         >
-          <column class="listgroup-column">
+          <column v-if="selectedRow === rIndex && selectedCard" class="listgroup-column">
             <div ref="listgroup" class="tabbed-cards__listGroup">
               <list-group
                 :list="selectedCard.links"
@@ -69,6 +68,8 @@ 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',
@@ -100,7 +101,8 @@ export default {
       selectedCard: undefined,
       selectedRow: undefined,
       screenWidth: 0,
-      loaded: false
+      loaded: false,
+      tabList: null
     }
   },
   computed: {
@@ -147,7 +149,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
@@ -158,11 +160,12 @@ 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',
@@ -188,44 +191,21 @@ 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"])',
@@ -237,11 +217,9 @@ export default {
         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
+              elem.offsetHeight > 0
             )
           }
         ),
@@ -272,13 +250,7 @@ export default {
             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
     }
   }
 }

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

@@ -15,8 +15,7 @@ export default {
     headingTag: 'h2',
     rtl: false,
     workwell: false
-  },
-  template: '<task-finder v-bind="args" :storybook="true"/>'
+  }
 }
 
 export const Default = {}

package/src/components/SubComponents/FormAddressPostcode/index.stories.js

@@ -3,34 +3,7 @@ import FormAddressPostcode from './index.vue'
 export default {
   title: 'SubComponents/FormAddressPostcode',
   component: FormAddressPostcode,
-  argTypes: {
-    showShadow: {
-      control: 'boolean'
-    },
-    inputPlaceholder: {
-      control: 'text'
-    },
-    showFullAddress: {
-      control: 'boolean'
-    },
-    geocode: {
-      control: 'boolean'
-    },
-    reverseGeocode: {
-      control: 'boolean'
-    },
-    baseUrl: {
-      control: 'text'
-    },
-    inputClassName: {
-      control: 'text'
-    }
-  }
-}
-
-
-export const Default = {
-  
+  tags: ['autodocs'],
   args: {
     showShadow: false,
     inputPlaceholder: 'Search for a suburb or postcode',
@@ -41,3 +14,5 @@ export const Default = {
     inputClassName: 'class-name'
   }
 }
+
+export const Default = {}