@worksafevictoria/wcl7.5 1.1.12 → 1.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.1.12",
+  "version": "1.1.14",
   "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/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/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.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)"
+        @focusin="focussed($event)"
       >
         <template v-slot:cardItem="{ card }">
           <card-grid-item
@@ -46,8 +46,7 @@
         >
           <column 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,10 +68,11 @@ 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'
 
 export default {
   name: 'TabbedCards',
-  components: { CardGrid, CardGridItem, Icon, Column },
+  components: { CardGrid, CardGridItem, Icon, Column, ListGroup },
   props: {
     heading: {
       type: String,
@@ -120,19 +120,15 @@ export default {
       } else {
         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.$root.$on('last-focus-out', () => {
       this.selectedCard = null
       this.selectedRow = null
-    })
+    }) */
     this.loaded = true
   },
   beforeDestroy() {
@@ -193,9 +189,7 @@ export default {
     },
     focussed(ev) {
       if (ev.shiftKey) {
-        let prevTabbedCard = ev.target?.parentElement?.parentElement?.previousSibling?.getElementsByTagName(
-          'button'
-        )[0]
+        let prevTabbedCard = ev.target?.parentElement?.parentElement?.previousSibling?.getElementsByTagName('button')[0]
         if (
           prevTabbedCard &&
           prevTabbedCard.getAttribute('aria-expanded') === 'true'
@@ -209,17 +203,13 @@ export default {
       }
       const lG = this.$refs.listgroup
       const isListGroupOpen = Array.isArray(lG) && lG.length > 0
-      const cardIsSelected = ev.target.parentElement.classList.contains(
-        'isSelected'
-      )
+      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]
+        let nextTabbedCard = ev.target?.parentElement?.parentElement?.nextSibling?.getElementsByTagName('button')[0]
         if (nextTabbedCard) {
           nextTabbedCard.focus()
         } else {

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.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/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>