@worksafevictoria/wcl7.5 1.1.0-beta.4 → 1.1.0-beta.40

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

@@ -47,7 +47,8 @@
         :class="{
           [`card_group__card--${card.colour}`]: card.pillText,
           [`card_group__card--none`]: !card.pillText,
-          [`card_group__card--${cardResourseType}`]: 'card_group__card--resourse-group'
+          [`card_group__card--${cardResourseType}`]:
+            'card_group__card--resourse-group',
         }"
         :card-header-title="card.title"
         :caret="getCaret(card)"
@@ -61,7 +62,7 @@
         :taxonomies="{
           industry: card.industry,
           topic: card.topic,
-          language: card.language
+          language: card.language,
         }"
       >
         <template v-slot:cardTop>
@@ -85,9 +86,9 @@
     <template
       v-if="
         loader ||
-          (displayedCards.length === 0 && !loader) ||
-          $slots.cardGroupFooter ||
-          (!loader && showLoadMore && hasMorePages)
+        (displayedCards.length === 0 && !loader) ||
+        $slots.cardGroupFooter ||
+        (!loader && showLoadMore && hasMorePages)
       "
       v-slot:cardGridFooter
     >
@@ -129,7 +130,7 @@ import Switcher from './switcher.vue'
 import {
   isAbsoluteUrl,
   navigateToPath,
-  isGovSite
+  isGovSite,
 } from './../../../../lib/utility'
 import { BSpinner } from 'bootstrap-vue-next'
 
@@ -145,80 +146,92 @@ export default {
     CtaButton,
     DirectoryFilters,
     Switcher,
-    BSpinner
+    BSpinner,
   },
   props: {
     background: {
       type: String,
-      default: 'white'
+      default: 'white',
     },
     title: {
       type: String,
-      default: ''
+      default: '',
     },
     titleTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     bundle: {
       type: Array,
-      default: () => ['']
+      default: () => [''],
     },
     columns: {
       type: Number,
-      default: 3
+      default: 3,
     },
     initialDisplyLimit: {
       type: Number,
-      default: 0
+      default: 0,
     },
     fetchContent: {
       type: Function,
-      required: true
+      required: true,
     },
     fetchFilters: {
       type: Function,
       required: false,
-      default: null
+      default: null,
     },
     enableBundleFilter: {
-      type: Boolean
+      type: Boolean,
     },
     getBundleAlias: {
       type: Function,
       required: false,
-      default: null
+      default: null,
     },
     type: {
       type: String,
-      required: true
+      required: true,
     },
     resourceType: {
       type: String,
-      default: 'resource-group'
+      default: 'resource-group',
     },
     showLoadMore: {
       type: Boolean,
-      default: false
+      default: false,
     },
     emptyCardsText: {
       type: String,
-      default: 'No results returned'
+      default: 'No results returned',
     },
     loading: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
-  async fetch() {
+  // Temp use of mounted to replace fetch
+  async mounted() {
     if (this.displayedCards.length === 0) {
+      console.log(
+        '🚀 ~ mounted ~ this.displayedCards.length:',
+        this.displayedCards.length,
+      )
       await this.loadFiltersAndContent()
     }
   },
+  // TODO useAsyncData <script setup>
+  // async fetch() {
+  //   if (this.displayedCards.length === 0) {
+  //     await this.loadFiltersAndContent()
+  //   }
+  // },
+
   data() {
     return {
       loader: this.loading,
@@ -231,8 +244,8 @@ export default {
       filters: {
         taxonomies: [],
         selected: {},
-        availableBundles: []
-      }
+        availableBundles: [],
+      },
     }
   },
   computed: {
@@ -241,7 +254,7 @@ export default {
         return this.rtl
       }
       return this.displayedCards.every((card) => this.rtl || card.rtl)
-    }
+    },
   },
   fetchOnServer: true,
   fetchKey: 'wcl-card-group',
@@ -249,13 +262,17 @@ export default {
     async loadFiltersAndContent() {
       await Promise.all([
         this.fetchFilters ? this.loadFilters() : Promise.resolve(),
-        this.loadMoreCards(true)
+        this.loadMoreCards(true),
       ])
+      console.log(
+        '🚀 ~ loadFiltersAndContent ~ this.fetchFilters:',
+        this.fetchFilters,
+      )
     },
     init() {
       this.allCards = {
         total: 0,
-        cards: []
+        cards: [],
       }
       this.displayLimit = 0
       this.hasMorePages = false
@@ -269,8 +286,8 @@ export default {
       if (shouldMakeNewFetchCall) {
         const cardBundles = await Promise.all(
           bundles.map((bundle, index) =>
-            this.getBundle(bundle, addMoreBy, index)
-          )
+            this.getBundle(bundle, addMoreBy, index),
+          ),
         )
 
         allCards = this.getShuffledCards(cardBundles)
@@ -288,7 +305,7 @@ export default {
     },
     async loadMoreCards(init) {
       const attrs = {
-        group: this.$store?.state?.page?.content?.title
+        group: this.$store?.state?.page?.content?.title,
       }
       if (this.$gtm && !init) {
         this.$gtm.push({ event: 'custom.interaction.showmore.click', ...attrs })
@@ -307,7 +324,7 @@ export default {
         this.displayedCards,
         this.allCards,
         addMoreBy,
-        bundles
+        bundles,
       )
 
       this.hasMorePages = this.allCards.total > this.allCards.cards.length
@@ -321,11 +338,11 @@ export default {
       const cache = (this.bundleCache[bundle] = this.bundleCache[bundle] || {
         response: {
           results: [],
-          numFound: 0
+          numFound: 0,
         },
         qs: {
-          start
-        }
+          start,
+        },
       })
 
       if (cache.qs.start === undefined) {
@@ -339,7 +356,7 @@ export default {
       const qs = {
         bundle,
         rows,
-        start
+        start,
       }
       return this.fetchContent(qs, this.filters.selected, index).then(
         (response) => {
@@ -347,14 +364,14 @@ export default {
           cache.response.numFound = response.numFound
           cache.response.results.push(...response.results)
           return cache.response
-        }
+        },
       )
     },
     getShuffledCards(cardBundles) {
       const shuffled = []
       const bundleWithMostCards = cardBundles.reduce(
         (a, b) => (a.results.length > b.results.length ? a : b),
-        { results: [] }
+        { results: [] },
       ).results.length
 
       for (let i = 0; i < bundleWithMostCards; i++) {
@@ -373,6 +390,7 @@ export default {
     },
     loadFilters() {
       return this.fetchFilters().then((taxonomies) => {
+        console.log('🚀 ~ returnthis.fetchFilters ~ taxonomies:', taxonomies)
         this.filters.taxonomies = taxonomies
         return Promise.resolve(taxonomies)
       })
@@ -425,31 +443,31 @@ export default {
           navigateToPath.call(
             this,
             card?.selectedCard?.link,
-            card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+            card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
           )
         }
       } else {
         navigateToPath.call(
           this,
           card?.selectedCard?.link,
-          card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+          card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
         )
       }
     },
     focussed(ev) {
       const path = ev.path || (ev.composedPath && ev.composedPath())
       const theTabbedCards = path.find(
-        (el) => el['_prevClass'] === 'tabbed-cards'
+        (el) => el['_prevClass'] === 'tabbed-cards',
       )
       if (ev.shiftKey && theTabbedCards) {
         ev.preventDefault()
-        let selectedTabbedCards = theTabbedCards.getElementsByClassName(
-          'isSelected'
-        )
+        let selectedTabbedCards =
+          theTabbedCards.getElementsByClassName('isSelected')
         let selectedCard = selectedTabbedCards[0].getElementsByTagName('button')
-        let thePrevLGItem = ev.target?.parentElement?.parentElement?.previousSibling?.getElementsByTagName(
-          'button'
-        )
+        let thePrevLGItem =
+          ev.target?.parentElement?.parentElement?.previousSibling?.getElementsByTagName(
+            'button',
+          )
         if (thePrevLGItem) {
           thePrevLGItem[0].focus()
         } else {
@@ -457,15 +475,16 @@ export default {
         }
       } else if (!ev.shiftKey && theTabbedCards) {
         ev.preventDefault()
-        let selectedTabbedCards = theTabbedCards.getElementsByClassName(
-          'isSelected'
-        )
-        let nextTabbedCard = selectedTabbedCards[0]?.parentElement?.nextSibling?.getElementsByTagName(
-          'button'
-        )
-        let theNextLGItem = ev.target?.parentElement?.parentElement?.nextSibling?.getElementsByTagName(
-          'button'
-        )
+        let selectedTabbedCards =
+          theTabbedCards.getElementsByClassName('isSelected')
+        let nextTabbedCard =
+          selectedTabbedCards[0]?.parentElement?.nextSibling?.getElementsByTagName(
+            'button',
+          )
+        let theNextLGItem =
+          ev.target?.parentElement?.parentElement?.nextSibling?.getElementsByTagName(
+            'button',
+          )
         if (theNextLGItem) {
           theNextLGItem[0].focus()
         } else if (nextTabbedCard) {
@@ -489,7 +508,7 @@ export default {
           '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(
@@ -501,7 +520,7 @@ export default {
               elem.offsetHeight > 0 ||
               elem === activeElem
             )
-          }
+          },
         ),
         indexedList = queryResult
           .slice()
@@ -515,20 +534,20 @@ 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
@@ -537,8 +556,8 @@ export default {
         ? focusable[focusable.indexOf(activeElem) - 1] ||
             focusable[focusable.length - 1]
         : focusable[focusable.indexOf(activeElem) + 1] || focusable[0]
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>
@@ -551,6 +570,7 @@ $borderRadius: 8px;
     &--resource-list {
       :deep(.section-group__content) {
         display: flex;
+
         > .row {
           flex: 0 0 70%;
         }
@@ -558,6 +578,7 @@ $borderRadius: 8px;
     }
   }
 }
+
 .card_group {
   &--resource-list {
     :deep(.card-body) {
@@ -566,6 +587,7 @@ $borderRadius: 8px;
     }
   }
 }
+
 .card_group__card--resource-group {
   :deep(.card-body) {
     padding-left: $cardTextPadding !important;

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

@@ -3,26 +3,12 @@ import SingleImage from './index.vue'
 export default {
   title: 'SubComponents/SingleImage',
   component: SingleImage,
+  tags: ['autodocs'],
   argTypes: {
     size: {
       control: 'select',
       options: ['page', 'content', 'half-content']
-    },
-    caption: {
-      control: 'text'
-    },
-    url: {
-      control: 'text',
-    },
-    rtl: {
-      control: 'boolean'
-    },
-    presentation: {
-      control: 'boolean'
-    },
-    alt: {
-      control: 'text',
-     }
+    }
   }
 }
 

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

@@ -17,6 +17,7 @@ const mockData = {
 export default {
   title: 'SubComponents/VideoThumbnail',
   component: { VideoThumbnail },
+  tags: ['autodocs'],
   argTypes: {
     video: {
       control: 'object',

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>

package/src/mock/jest.fileMock.js

@@ -0,0 +1 @@
+module.exports = '';

package/vite.config.js

@@ -14,10 +14,11 @@ export default defineConfig({
     }
   },
   define: {
-    'process.env.SHOW_COOKIE': `"${process.env.SHOW_COOKIE}"`,
+     'process.env.SHOW_COOKIE': `"${process.env.SHOW_COOKIE}"`,
     'process.env.CONTENT_API_URL': `"${process.env.CONTENT_API_URL}"`,
     'process.env.IS_STORYBOOK': `"${process.env.IS_STORYBOOK}"`,
     'process.env.CARETAKER': `"${process.env.CARETAKER}"`,
-    'process.env.SHOW_GLOBAL_NOTICE': `"${process.env.SHOW_GLOBAL_NOTICE}"`
+    'process.env.SHOW_GLOBAL_NOTICE': `"${process.env.SHOW_GLOBAL_NOTICE}"`,
+    'process.env.GOOGLE__URL': `"${process.env.GOOGLE__URL}"`
   }
 })

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

@@ -1,8 +0,0 @@
-import FullForm from './index.vue'
-
-export default {
-    title: 'Form/FormInstance',
-    component: FullForm,
-}
-
-export const Default = {}