@worksafevictoria/wcl7.5 1.1.13 → 1.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {
@@ -40,11 +40,11 @@
   "dependencies": {
     "@formio/vue": "^5.0.0",
     "@fortawesome/fontawesome-free": "^6.4.2",
-    "@storybook/cli": "^7.6.3",
+    "@storybook/cli": "^7.6.20",
     "axios": "^1.6.0",
     "bootstrap": "^5.3.2",
     "bootstrap-vue": "^2.23.1",
-    "bootstrap-vue-next": "^0.15.5",
+    "bootstrap-vue-next": "^0.23.2",
     "date-fns": "^2.30.0",
     "formiojs": "4.13.13",
     "storybook-addon-deep-controls": "^0.6.2",
@@ -85,7 +85,7 @@
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.69.5",
+    "sass": "1.77.6",
     "sass-loader": "^13.3.2",
     "semantic-release": "^19.0.3",
     "storybook": "^7.5.1",

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/GlobalNotice/index.stories.js

@@ -5,4 +5,10 @@ export default {
     component: GlobalNotice
   }
   
-  export const Default = {}
+  export const Default = {
+    loaders: [
+      () => { 
+        window.localStorage.removeItem('globalModalHidden')
+      }
+    ]
+  }

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-if="showSocial && type !== 'hero'" :rtl="rtl" />
         </container>
       </div>
       <!-- Type Default -->

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

@@ -51,7 +51,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

@@ -2,7 +2,7 @@
   <section-group class="sticky-top">
     <b-navbar class="paragraph--scrollspy" :class="{ rtl: rtl }">
       <b-list-group
-        v-b-scrollspy="{ offset: 100, method: 'auto' }"
+        v-b-scrollspy="scrollSpy"
         class="flex-column"
       >
         <div class="scrollspy__title">{{ title }}</div>
@@ -22,11 +22,12 @@
 
 <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,
@@ -39,6 +40,10 @@ export default {
     rtl: {
       type: Boolean,
       default: false
+    },
+    scrollSpy: {
+      type: Object,
+      default: () => {return{ element: 'body', offset: 100, method: 'auto' }}
     }
   },
   methods: {

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/TabulatedData/index.vue

@@ -12,8 +12,7 @@
           :class="`${rtl ? 'rtl' : ''} ${isFluid ? 'isScrolled' : ''}`"
           class="table border"
           :striped="true"
-          v-model:sort-desc="sortDesc" 
-          v-model:sort-by="sortBy"
+          :sort-by="sortBy"
           :borderless="false"
           :responsive="!isFluid"
           :stacked="!isFluid ? 'sm' : false"
@@ -74,8 +73,8 @@ export default {
   },
   data() {
     return {
-      sortBy: this.initialSortBy,
-      sortDesc: false,
+      sortBy: [{key:this.initialSortBy, 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:
@@ -91,11 +90,13 @@ export default {
   },
   methods: {
    accessSort(fieldVar) {
-    this.sortBy = fieldVar.key
+    //this.sortBy = fieldVar.key
       if (fieldVar.thAttr['aria-sort'] === 'none' || fieldVar.thAttr['aria-sort'] === 'descending' ) {
-        this.sortDesc = false
+        this.sortBy = [{key:fieldVar.key, order:'asc'}]
+        //this.sortDesc = false
       } else {
-        this.sortDesc = true
+        this.sortBy = [{key:fieldVar.key, order:'desc'}]
+        //this.sortDesc = true
       }    
     }
   }
@@ -141,5 +142,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

@@ -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/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/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/Webform/index.stories.js

@@ -36,6 +36,31 @@ export default {
         table: {
             disable: true
           }
+      },
+      changed: {
+        table: {
+          disable: true
+        }
+      },
+      submitted: {
+        table: {
+          disable: true
+        }
+      },
+      rendered: {
+        table: {
+          disable: true
+        }
+      },
+      nextPage: {
+        table: {
+          disable: true
+        }
+      },
+      prevPage: {
+        table: {
+          disable: true
+        }
       }
     },
     args: {

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

@@ -24,7 +24,7 @@
 
 <script>
 import FormHandler from '../../SubComponents/FormInstance/components/handler/index.vue'
-import colors from '../../../includes/scss/vars/src/colors.scss'
+import colors from '../../../includes/scss/vars/src/colors.scss?inline'
 
 export default {
   name: 'WebformPara',

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

package/src/components/SubComponents/Search/index.vue

@@ -22,12 +22,12 @@
           @update="searchType !== 'googlerest' ? onChange : () => {}"
           @keyup.enter="onChange"
         ></b-form-input>
-        <b-input-group-append>
+        <template #append>
           <b-button size="sm" class="search-button" @click="onSearch"
             ><span class="not-extra-small-screen">Search</span>
             <img alt="search icon" :src="searchIcon"
           /></b-button>
-        </b-input-group-append>
+        </template>
       </b-input-group>
       <search-listing
         v-if="loadSearchList && (searchResults || isLoading)"
@@ -56,10 +56,10 @@
 import axios from 'axios'
 import searchIcon from '../../../assets/icons/search.svg?url'
 import SearchListing from './SearchListing/index.vue'
-import { BButton, BInputGroup, BFormInput, BInputGroupAppend } from 'bootstrap-vue-next'
+import { BButton, BInputGroup, BFormInput } from 'bootstrap-vue-next'
 
 export default {
-  components: { SearchListing, BButton, BInputGroup, BFormInput, BInputGroupAppend },
+  components: { SearchListing, BButton, BInputGroup, BFormInput },
   props: {
     pageLimit: {
       type: Number,

package/src/components/SubComponents/VideoThumbnail/index.vue

@@ -127,13 +127,13 @@ export default {
   }
 
   .modal-header {
-    position: absolute;
     top: 0;
     height: 45px;
     background: $white;
     z-index: 1;
-    width: 100%;
-
+    margin-left: auto;
+    margin-right:0%;
+  
     &__wrap {
       position: relative;
       width: 100%;
@@ -152,7 +152,7 @@ export default {
     }
   }
   .modal-body {
-    padding: 32px;
+    padding: 0px 32px 32px;
     margin-top: 16px;
     .video-player {
       @include fp(min-height, 250, 588);
@@ -183,9 +183,6 @@ export default {
   .modal-footer {
     border: none;
   }
-  .modal-footer {
-    display: none;
-  }
 }
 </style>
 <style lang="scss" scoped>