@worksafevictoria/wcl7.5 1.5.0 → 1.7.0

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

@@ -16,29 +16,28 @@
       </div>
     </a>
     <!-- Modal -->
-    <div v-if="showModal" :id="wcl-video-modal" class="modal" tabindex="-1" aria-modal="true" role="dialog" style="display: block;">
-      <div class="modal-dialog modal-dialog-scrollable">
-        <div class="modal-content">
-          <div class="modal-header">
-            <button type="button" class="btn-close" @click="showModal = !showModal" aria-label="close"></button>
-          </div>
-          <div class="modal-body">
-            <div class="wcl-video-modal__video">
-              <video-media
-                :media-title="video.mediaTitle"
-                :media-description="video.mediaDescription"
-                :video-id="video.id"
-                :provider="video.provider"
-                :transcript="video.transcript"
-                :transcript-title="video.transcriptTitle"
-                :fix-width="video.fixWidth"
-                :rtl="video.rtl"
-              />
-            </div>
-          </div>
-        </div>
+    <b-modal
+      :id="`wcl-video-modal`"
+      v-model="showModal"
+      scrollable
+      class="wcl-video-modal__modal"
+      no-footer
+      size="xl"
+    >
+      <div class="wcl-video-modal__video" v-if="showModal">
+        <video-media
+          :media-title="video.mediaTitle"
+          :media-description="video.mediaDescription"
+          :video-id="video.id"
+          :provider="video.provider"
+          :transcript="video.transcript"
+          :transcript-title="video.transcriptTitle"
+          :fix-width="video.fixWidth"
+          :rtl="video.rtl"
+        />
       </div>
-    </div>
+      <template #footer><div></div></template>
+    </b-modal>
   </div>
 </template>
 
@@ -46,145 +45,61 @@
 import VideoMedia from './../../Paragraphs/VideoPlayer/index.vue'
 import VideoPlay from './../../../assets/icons/video-play.svg?url'
 import IconClose from './../../../assets/icons/icon-close.svg?url'
+import { BModal } from 'bootstrap-vue-next'
+import axios from 'axios'
 
 export default {
   name: 'VideoThumbnail',
   components: {
     VideoMedia,
-    IconClose
+    IconClose,
+    'b-modal': BModal,
   },
   props: {
     video: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
       VideoPlay,
       IconClose,
       showModal: false,
-      videoThumbnail: ''
+      videoThumbnail: '',
     }
   },
   mounted() {
     this.getVideoThumbnail()
   },
   methods: {
-    async getVideoThumbnail() {
-      if (this.video.provider === 'youtube') {
-        this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/maxresdefault.jpg`
-        if (process.env.IS_STORYBOOK !== 'TRUE') {
-          let thumbnailAvailable = await this.$axios?.get(
-            `${window.location.origin}/api/v2/urlExists?url=${this.videoThumbnail}`
-          )
-          if (
-            thumbnailAvailable &&
-            thumbnailAvailable.data &&
-            thumbnailAvailable.data.valid === false
-          ) {
+    async getVideoThumbnail(url) {
+      try {
+        if (this.video.provider === 'youtube') {
+          this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/maxresdefault.jpg`
+          const response = await axios.head(this.videoThumbnail)
+          if (response.status === 200) {
+          } else {
             this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`
           }
+        } else if (this.video.provider === 'vimeo') {
+          let thumbnail = await axios.get(
+            `https://vimeo.com/api/v2/video/${this.video.id}.json`,
+          )
+          if (thumbnail.data) {
+            this.videoThumbnail = thumbnail.data[0].thumbnail_large
+          }
+        }
+      } catch (error) {
+        if (error.response && error.response.status === 404) {
+          this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`
+        } else {
         }
-      } else if (this.video.provider === 'vimeo') {
-        this.getVimeoThumbnail()
       }
     },
-    async getVimeoThumbnail() {
-      let thumbnail = await this.$axios.get(
-        `https://vimeo.com/api/v2/video/${this.video.id}.json`
-      )
-      if (thumbnail.data) {
-        this.videoThumbnail = thumbnail.data[0].thumbnail_large
-      }
-    }
-  }
+  },
 }
 </script>
-<style lang="scss">
-@import '../../../includes/scss/all';
-// The modal styling
-  .modal {
-  background: rgba(0,0,0,0.5)
-}
-
-.modal-backdrop {
-  display: none;
-}
-.modal-dialog {
-  max-width: 1110px;
-  @media only screen and (max-width: 1150px) {
-    margin: {
-      left: 15px;
-      right: 15px;
-      top: 15px;
-    }
-  }
-
-  .modal-content {
-    position: relative;
-    border-radius: 8px;
-  }
-
-  .modal-header {
-    top: 0;
-    height: 45px;
-    background: $white;
-    z-index: 1;
-    margin-left: auto;
-    margin-right:0%;
-  
-    &__wrap {
-      position: relative;
-      width: 100%;
-      a {
-        position: absolute;
-        right: 0;
-        z-index: 1;
-        &.rtl {
-          right: auto;
-          left: 0;
-        }
-        svg {
-          fill: $black;
-        }
-      }
-    }
-  }
-  .modal-body {
-    padding: 0px 32px 32px;
-    margin-top: 16px;
-    .video-player {
-      @include fp(min-height, 250, 588);
-    }
-
-    .paragraph--video-media {
-      margin: 0;
-      .container {
-        padding: 0;
-        width: 100%;
-      }
-      h3 {
-        margin: 0;
-        font-style: normal;
-        font-weight: bold;
-        font-size: 28px;
-        line-height: 32px;
-        margin-bottom: 16px;
-        display: inline-block;
-        width: 98%;
-      }
-    }
-    .section-group__block {
-      max-width: 100%;
-    }
-  }
-  .modal-header,
-  .modal-footer {
-    border: none;
-  }
-}
-</style>
 <style lang="scss" scoped>
 @import '../../../includes/scss/all';
 // Outside wrapper style

package/src/includes/scss/vars/src/colors.module.scss

@@ -20,6 +20,20 @@ $yellow: #ffd229;
 $lightyellow: #fff6d4;
 $outline: #da47ff;
 $outline-dark: #ffffff;
+// Functional colours
+$wsv-fun-dark-green: #576D2F;
+$wsv-fun-dark-blue: #104f77;
+$wsv-fun-dark-purple: #55356b;
+$wsv-fun-dark-red: #760031;
+$wsv-fun-dark-brown: #763b00;
+$wsv-fun-dark-caramel: #cb7c2d;
+$wsv-fun-light-teal: #7ac2b5;
+$wsv-fun-light-blue: #8ecade;
+$wsv-fun-light-purple: #9871a8;
+$wsv-fun-light-fuchsia: #f16a7e;
+$wsv-fun-light-green: #edeb72;
+$wsv-fun-light-brown: #dbc38b;
+
 
 $theme-colors: (
   'gold': $gold,
@@ -43,7 +57,20 @@ $theme-colors: (
   'yellow': $yellow,
   'lightyellow': $lightyellow,
   'outline': $outline,
-  'outline-dark': $outline-dark
+  'outline-dark': $outline-dark,
+  // Functional colours
+  'wsv-fun-dark-green':$wsv-fun-dark-green,
+  'wsv-fun-dark-blue':$wsv-fun-dark-blue,
+  'wsv-fun-dark-purple':$wsv-fun-dark-purple,
+  'wsv-fun-dark-red':$wsv-fun-dark-red,
+  'wsv-fun-dark-brown':$wsv-fun-dark-brown,
+  'wsv-fun-dark-caramel':$wsv-fun-dark-caramel,
+  'wsv-fun-light-teal':$wsv-fun-light-teal,
+  'wsv-fun-light-blue':$wsv-fun-light-blue,
+  'wsv-fun-light-purple':$wsv-fun-light-purple,
+  'wsv-fun-light-fuchsia':$wsv-fun-light-fuchsia,
+  'wsv-fun-light-green':$wsv-fun-light-green,
+  'wsv-fun-light-brown':$wsv-fun-light-brown
 );
 
 :export {

package/src/index.js

@@ -5,6 +5,7 @@ import Column from './components/Containers/Column/index.vue'
 import HomepageHeader from './components/Containers/HomepageHeader/index.vue'
 import Subheader from './components/Containers/Subheader/index.vue'
 import SectionGroup from './components/Containers/SectionGroup/index.vue'
+import CarouselComponent from './components/Containers/Carousel/index.vue'
 
 import AppHeader from './components/Global/AppHeader/index.vue'
 import AppFooter from './components/Global/AppFooter/index.vue'
@@ -29,6 +30,7 @@ import TaskFinder from './components/Paragraphs/TaskFinder/index.vue'
 import ListGroup from './components/Paragraphs/ListGroup/index.vue'
 import ScrollSpy from './components/Paragraphs/ScrollSpy/index.vue'
 import Directory from './components/Paragraphs/Directory/index.vue'
+import HscpDirectory from './components/Paragraphs/Directory/HSCP/Records/index.vue'
 import SelectableCards from './components/Paragraphs/SelectableCards/index.vue'
 import VideoMedia from './components/Paragraphs/VideoPlayer/index.vue'
 import VideoGrid from './components/Paragraphs/VideoGrid/index.vue'
@@ -41,6 +43,7 @@ import MarketingBanner from './components/Paragraphs/MarketingBanner/index.vue'
 import RelatedInformation from './components/Paragraphs/RelatedInformation/index.vue'
 import Calculator from './components/Paragraphs/Calculator/index.vue'
 import Chart from './components/Paragraphs/Chart/index.vue'
+import GeoChart from './components/Paragraphs/Map/index.vue'
 
 // SubComponents
 import FormAddressPostcode from './components/SubComponents/FormAddressPostcode/index.vue'
@@ -55,6 +58,9 @@ import Search from './components/SubComponents/Search/index.vue'
 import VideoThumbnail from './components/SubComponents/VideoThumbnail/index.vue'
 import ResourceGroup from './components/SubComponents/ResourceGroup/index.vue'
 
+// Temp Components for testing
+import BrowseContent2 from './components/Paragraphs/BrowseContent/setup.vue'
+
 // Export Global Components
 export {
   Container,
@@ -78,7 +84,8 @@ export {
   Cookies,
   BackToTop,
   GlobalNotice,
-  ContrastMode
+  ContrastMode,
+  CarouselComponent,
 }
 
 // Export Paragraphs
@@ -91,6 +98,7 @@ export {
   ListGroup,
   ScrollSpy,
   Directory,
+  HscpDirectory,
   SelectableCards,
   Statistics,
   ProofPoints,
@@ -100,7 +108,8 @@ export {
   MarketingBanner,
   RelatedInformation,
   Calculator,
-  Chart
+  Chart,
+  GeoChart,
 }
 
 // Export Sub Components
@@ -114,5 +123,18 @@ export {
   Breadcrumb,
   Search,
   VideoThumbnail,
-  ResourceGroup
+  ResourceGroup,
+}
+
+// Export for BrowseContent
+import DirectoryFilters from './components/Global/DirectoryFilters/index.vue'
+import Switcher from './components/Paragraphs/BrowseContent/switcher.vue'
+
+export {
+  // CardGroup, already imported
+  DirectoryFilters,
+  Switcher,
 }
+
+// Temp Components for testing
+export { BrowseContent2 }

package/src/main.js

@@ -1,18 +1,10 @@
 import './assets/main.css'
 
 import { createApp } from 'vue'
-import './style.css'
-import 'bootstrap/dist/css/bootstrap.min.css'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
-import 'bootstrap/dist/css/bootstrap.css'
-import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
-import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
-import 'bootstrap'
-import 'bootstrap-vue'
 import App from './App.vue'
-import BootstrapVue from 'bootstrap-vue'
 import BootstrapVueNext from 'bootstrap-vue-next'
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
 
 createApp(App).mount('#app')
 .use(BootstrapVueNext)
-.use(BootstrapVue)

package/src/mock/carousel-items.js

@@ -1,57 +1,82 @@
 export const mockCarouselItems = [
     {
-      content: 'This is the first slider',
-      image:
-        'https://picsum.photos/1024/480/?image=52',
-      link: 'www.google.com',
-      dateStart: '2024-01-12T09:45:00+11:00',
-      dateEnd: '2024-02-12T09:45:00+11:00',
-      favorite: 'Yes'
+      field_title: 'This is the first slider',
+      field_image: {
+        field_media_image: {
+          uri: {
+            url: '/sites/default/files/2025-01/image-ag-safety-network-veg-001.jpg'
+          }
+        }     
+      }, 
+      field_link: {
+        url: 'https://www.google.com',
+      }, 
+      field_date_start: '2025-02-05',
+      field_date_end: '2025-03-07',
+      field_favorite: true
     },
     {
-        content: 'This is the second slider',
-        image:
-          'https://picsum.photos/1024/480/?image=54',
-        link: '/asbestos-removal-notification',
-        dateStart: '2025-12-01T09:45:00+11:00',
-        dateEnd: '2025-12-12T09:45:00+11:00',
-        favorite: ''
+        field_title: 'This is the second slider',
+        field_image: {
+          field_media_image: {
+            uri: {
+              url: '/sites/default/files/2025-01/large-2023%20WorkSafe%20Awards.jpg'
+            }
+          }
+        }, 
+        field_link: {
+          url: '/news/2019-11/winners-named-distinguished-worksafe-awards',
+        },
+        field_date_start: '2025-02-05',
+        field_date_end: '2025-07-05',
+        field_favorite: false
       },
       {
-        content: 'This is the third slider',
-        image:
-          'https://picsum.photos/1024/480/?image=56',
-        link: '/dangerous-goods-licences',
-        dateStart: '2024-01-12T09:45:00+11:00',
-        dateEnd: '2024-12-12T09:45:00+11:00',
-        favorite: ''
+        field_title: 'This is the third slider',
+        field_image: {
+          field_media_image: {
+            uri: {
+              url: '/sites/default/files/2024-12/header-image-workwell-oelg-project.jpg'
+            }
+          }
+        }, 
+        field_link: {
+          url: '/resources/workwell-ageing-workforce-ready-age-difference',
+        },
+        field_date_start: '2024-01-12',
+        field_date_end: '2024-12-12',
+        favorite: false
       },
       {
-        content: 'This is the fourth slider',
-        image:
-          'https://picsum.photos/1024/480/?image=58',
-        link: '/construction',
-        dateStart: '2025-10-30T09:45:00+11:00',
-        dateEnd: '2025-12-12T09:45:00+11:00',
-        favorite: ''
+        field_title: 'This is the fourth slider',
+        field_image: {
+          field_media_image: {
+            uri: {
+              url: '/sites/default/files/styles/large/public/2018-06/Topics-explosives_0.jpg'
+            }
+          }
+        }, 
+        field_link: {
+          url: '/explosives',
+        },
+        field_date_start: '2025-01-30',
+        field_date_end: '2025-12-12',
+        field_favorite: false
       },
       {
-        content: '',
-        image:
-          'https://picsum.photos/1024/480/?image=60',
-        link: '/construction',
-        dateStart: '2024-10-30T09:45:00+11:00',
-        dateEnd: '2025-12-12T09:45:00+11:00',
-        favorite: ''
+        field_title: '',
+        field_image: {
+          field_media_image: {
+            uri: {
+              url: '/sites/default/files/styles/large/public/2022-07/card-bricklaying-3x2.jpg'
+            }
+          }
+        }, 
+        field_link: {
+          url: '/construction',
+        },
+        field_date_start: '2024-10-30',
+        field_date_end: '2025-12-12',
+        field_favorite: false
       },
-      {
-        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consectetur ligula ex',
-        image:
-          'https://picsum.photos/1024/480/?image=62',
-        link: '/construction',
-        dateStart: '2024-10-30T09:45:00+11:00',
-        dateEnd: '2025-11-12T09:45:00+11:00',
-        favorite: ''
-      },
-  ]
-  
+    ]