@worksafevictoria/wcl7.5 1.3.0 → 1.5.0

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

@@ -26,7 +26,7 @@
         class="card_group__card"
         :class="{
           [`card_group__card--${card.colour}`]: card.pillText,
-          [`card_group__card--none`]: !card.pillText
+          [`card_group__card--none`]: !card.pillText,
         }"
         :card-header-title="card.title"
         :caret="getCaret(card)"
@@ -40,7 +40,7 @@
         :taxonomies="{
           industry: card.industry,
           topic: card.topic,
-          language: card.language
+          language: card.language,
         }"
       >
         <template v-slot:cardTop>
@@ -55,9 +55,9 @@
     <template
       v-if="
         loading ||
-          (cards.length === 0 && !loading) ||
-          $slots.cardGroupFooter ||
-          (!loading && showLoadMore)
+        (cards.length === 0 && !loading) ||
+        $slots.cardGroupFooter ||
+        (!loading && showLoadMore)
       "
       v-slot:cardGridFooter
     >
@@ -93,7 +93,7 @@ import Column from './../../Containers/Column/index.vue'
 import {
   isAbsoluteUrl,
   navigateToPath,
-  isGovSite
+  isGovSite,
 } from './../../../../lib/utility'
 import CardBody from './cardbody.vue'
 import CardTop from './cardtop.vue'
@@ -109,57 +109,57 @@ export default {
     CardBody,
     CardTop,
     CtaButton,
-    BSpinner
-},
+    BSpinner,
+  },
   props: {
     bundle: {
       type: Array,
       required: false,
-      default: () => []
+      default: () => [],
     },
     caret: {
       type: String,
       default: undefined,
       validator: (value) =>
-        ['down', 'up', 'right', 'left', 'external'].indexOf(value) >= 0
+        ['down', 'up', 'right', 'left', 'external'].indexOf(value) >= 0,
     },
     cards: {
       type: Array,
       required: true,
-      default: () => []
+      default: () => [],
     },
     background: {
       type: String,
-      default: 'none'
+      default: 'none',
     },
     title: {
       type: String,
-      default: null
+      default: null,
     },
     titleTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     loading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     columns: {
       type: Number,
-      default: 3
+      default: 3,
     },
     showLoadMore: {
       type: Boolean,
-      default: false
+      default: false,
     },
     emptyCardsText: {
       type: String,
-      default: 'No results returned'
-    }
+      default: 'No results returned',
+    },
   },
   computed: {
     allCardsRTL() {
@@ -167,7 +167,7 @@ export default {
         return this.rtl
       }
       return this.cards.every((card) => this.rtl || card.rtl)
-    }
+    },
   },
   methods: {
     getCaret(card) {
@@ -181,24 +181,30 @@ export default {
       // Some custom logic for gov caretaker logic
       if (process.env.CARETAKER && process.env.CARETAKER === 'true') {
         if (!isGovSite(card?.selectedCard?.link)) {
-          this.$store.commit('page/SET_CARETAKER_REF', 'card-group')
-          this.$root.$emit('caretaker-open', card?.selectedCard?.link)
+          // this.$store.commit('page/SET_CARETAKER_REF', 'card-group')
+          // this.$root.$emit('caretaker-open', card?.selectedCard?.link)
+          if (this.$pageStore) {
+            this.$pageStore.caretaker.referrer = 'card-group'
+          }
+          if (this.$bus) {
+            this.$bus.$emit('caretaker-open', card?.selectedCard?.link)
+          }
         } else {
           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,
         )
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

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

@@ -75,77 +75,77 @@ export default {
   components: {
     arrowRight,
     arrowLeft,
-    icon
+    icon,
   },
   props: {
     type: {
       type: String,
       default: 'default',
       validator: (value) =>
-        ['default', 'white', 'gray', 'workwell', 'dark'].indexOf(value) >= 0
+        ['default', 'white', 'gray', 'workwell', 'dark'].indexOf(value) >= 0,
     },
     url: {
       type: String,
       required: false,
-      default: ''
+      default: '',
     },
     alt: {
       type: String,
-      default: ''
+      default: '',
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     glyph: {
       type: [Object, String],
       required: false,
-      default: () => null
+      default: () => null,
     },
     glyphHeight: {
       type: Number,
       required: false,
-      default: 15
+      default: 15,
     },
     glyphWidth: {
       type: Number,
       required: false,
-      default: 25
+      default: 25,
     },
     workwell: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isCentred: {
       type: Boolean,
-      default: false
+      default: false,
     },
     textOnly: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isFluid: {
       type: Boolean,
-      default: true
+      default: true,
     },
     stretch: {
       type: Boolean,
-      default: false
+      default: false,
     },
     slim: {
       type: Boolean,
-      default: false
+      default: false,
     },
     focusOutline: {
       type: String,
       default: 'default',
-      validator: (value) => ['default', 'light', 'dark'].indexOf(value) >= 0
-    }
+      validator: (value) => ['default', 'light', 'dark'].indexOf(value) >= 0,
+    },
   },
   data() {
     return {
       arrowRight,
-      arrowLeft
+      arrowLeft,
     }
   },
   computed: {
@@ -188,12 +188,12 @@ export default {
       return this.isCentred
         ? { ['wcl-cta__arrow']: hasArrow }
         : {
-            ['wcl-cta__arrow']: hasArrow
+            ['wcl-cta__arrow']: hasArrow,
           }
     },
     textClass() {
       return this.isCentred ? {} : {}
-    }
+    },
   },
   methods: {
     clicked() {
@@ -201,15 +201,17 @@ export default {
       var attrs
       if (theEl && theEl.length > 0) {
         attrs = {
-          group: this.$store?.state?.page?.content?.title,
+          //group: this.$store?.state?.page?.content?.title,
+          group: this.$pageStore?.content?.title,
           label: theEl[0]?.innerText?.split('\n')[0],
-          data: this.url
+          data: this.url,
         }
       } else {
         attrs = {
-          group: this.$store?.state?.page?.content?.title,
+          //group: this.$store?.state?.page?.content?.title,
+          group: this.$pageStore?.content?.title,
           label: '',
-          data: this.url
+          data: this.url,
         }
       }
       // push event to gtm
@@ -225,8 +227,8 @@ export default {
         this.$router.push(this.url)
       }
       this.$emit('clicked')
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>

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

@@ -307,7 +307,8 @@ export default {
     },
     async loadMoreCards(init) {
       const attrs = {
-        group: this.$store?.state?.page?.content?.title,
+        group: this.$pageStore?.content?.title,
+        //group: this.$store?.state?.page?.content?.title,
       }
       if (this.$gtm && !init) {
         this.$gtm.push({ event: 'custom.interaction.showmore.click', ...attrs })
@@ -439,8 +440,14 @@ export default {
       // Some custom logic for gov caretaker logic
       if (process.env.CARETAKER && process.env.CARETAKER === 'true') {
         if (!isGovSite(card?.selectedCard?.link)) {
-          this.$store.commit('page/SET_CARETAKER_REF', 'list-group')
-          this.$root.$emit('caretaker-open', card?.selectedCard?.link)
+          // this.$store.commit('page/SET_CARETAKER_REF', 'list-group')
+          // this.$root.$emit('caretaker-open', card?.selectedCard?.link)
+          if (this.$pageStore) {
+            this.$pageStore.caretaker.referrer = 'list-group'
+          }
+          if (this.$bus) {
+            this.$bus.$emit('caretaker-open', card?.selectedCard?.link)
+          }
         } else {
           navigateToPath.call(
             this,
@@ -493,7 +500,9 @@ export default {
           nextTabbedCard[0].focus()
         } else {
           let nextFocus = this.focusNextElement()
-          this.$root.$emit('last-focus-out')
+          if (this.$bus) {
+            this.$bus.$emit('last-focus-out')
+          }
           nextFocus.focus()
         }
       } else {

package/src/includes/scss/mixins/src/grid.scss

@@ -7,14 +7,16 @@ $grid-breakpoints: (
   sm: 576px,
   md: 768px,
   lg: 992px,
-  xl: 1200px
+  xl: 1200px,
+  xxl: 1400px
 );
 
 $container-max-widths: (
   sm: 540px,
   md: 720px,
   lg: 960px,
-  xl: 1140px
+  xl: 1140px,
+  xxl: 1320px
 );
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.

package/src/includes/scss/mixins/src/units.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 $current-rootsize: 16px;
 
 // Returns a unitless number
@@ -53,10 +54,11 @@ $current-rootsize: 16px;
 
 
 // Converts a px value to rems. Should only work in absolute em document context (root level), unless $context is specified
-@function px-to-rem($value, $context: $current-rootsize) {
-    @if unit($context) == "rem" {
-        $context: rem-to-px($context);
-    }
+/**/ 
+/* @function px-to-rem($value, $context: $current-rootsize) {
+    //@if unit($context) == "rem" {
+    //    $context: rem-to-px($context);
+    //}
     $result: ();
 
     @each $val in $value {
@@ -67,6 +69,25 @@ $current-rootsize: 16px;
       }
     }
     @return $result;
+}  */
+
+@function px-to-rem($px, $context: $current-rootsize) {
+  @if unit($context) == "rem" {
+      $context: rem-to-px($context);
+  }
+  $result: ();
+
+  // Iterate over each value in the $px list
+  @each $val in $px {
+    @if unit($val) == "px" {
+      // Convert px to rem
+      $val: #{math.div($val, $context)}rem;
+    }
+    // Append converted value to the result list
+    $result: append($result, $val);
+  }
+
+  @return $result;
 }
 
 // Converts a em value to rems. Should only work in absolute em document context (root level), unless $context is specified

package/src/mock/app-header-new.js

@@ -681,23 +681,35 @@ const appHeaderData = [
   {
     title: 'Extra Link Two',
     absolute: 'https://content-v2.api.worksafe.vic.gov.au/licences',
+    relative: '/licences',
+    below: [
+      {
+        title: 'Contact WorkSafe',
+        absolute: 'https://content-v2.api.worksafe.vic.gov.au/contact-worksafe',
+        relative: '/contact-worksafe'
+      },
+      {
+        title: 'Report an incident',
+        absolute: 'https://content-v2.api.worksafe.vic.gov.au/report-incident',
+        relative: '/report-incident'
+      }
+    ]
+  },
+  {
+    title: 'Extra Link Three',
+    absolute: 'https://content-v2.api.worksafe.vic.gov.au/licences',
+    relative: '/licences'
+  },
+  {
+    title: 'External Link',
+    absolute: 'http://google.com',
+    relative: ''
+  },
+  {
+    title: 'Extra Link Five',
+    absolute: 'https://content-v2.api.worksafe.vic.gov.au/licences',
     relative: '/licences'
   },
-  // {
-  //   title: 'Extra Link Three',
-  //   absolute: 'https://content-v2.api.worksafe.vic.gov.au/licences',
-  //   relative: '/licences'
-  // },
-  // {
-  //   title: 'Extra Link Four',
-  //   absolute: 'https://content-v2.api.worksafe.vic.gov.au/licences',
-  //   relative: '/licences'
-  // },
-  // {
-  //   title: 'Extra Link Five',
-  //   absolute: 'https://content-v2.api.worksafe.vic.gov.au/licences',
-  //   relative: '/licences'
-  // },
 ]
 
 export { appHeaderData }

package/src/mock/carousel-items.js

@@ -0,0 +1,57 @@
+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'
+    },
+    {
+        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: ''
+      },
+      {
+        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: ''
+      },
+      {
+        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: ''
+      },
+      {
+        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: ''
+      },
+      {
+        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: ''
+      },
+  ]
+