@worksafevictoria/wcl7.5 1.4.0 → 1.6.0

package/src/components/Common/CardGridItem/index.vue

@@ -15,10 +15,10 @@
           ? isSelectable && selected
             ? 'true'
             : 'false'
-          : null
+          : false
       "
       :aria-expanded="
-        isExpandable ? (isSelectable && selected ? 'true' : 'false') : null
+        isExpandable ? (isSelectable && selected ? 'true' : 'false') : false
       "
       :data-href="link"
       @click="cardClicked($event)"
@@ -33,8 +33,8 @@
             [`card-grid-item__control-radio`]:
               isSelectable && buttonRole === 'radio',
             [`card-grid-item__selected-radio`]:
-              selected && buttonRole === 'radio'
-          }
+              selected && buttonRole === 'radio',
+          },
         ]"
       >
         <slot name="cardTop"></slot>
@@ -52,7 +52,7 @@
         :icon-is-bordered="iconIsBordered"
         :class="{
           [`text-left`]: iconPosition === 'top-left',
-          rtl: rtl
+          rtl: rtl,
         }"
       >
       </card-grid-item-icon>
@@ -63,19 +63,20 @@
             {
               rtl: rtl,
               [`card-grid-item__caretContainer__control-radio`]:
-                isSelectable && buttonRole === 'radio'
-            }
+                isSelectable && buttonRole === 'radio',
+            },
           ]"
         >
-        <div>
           <b-card-title
             v-if="cardHeaderTitle !== null && cardHeaderTitle !== undefined"
             :tag="headerTag"
             class="card-grid-item__header"
             :class="{
               [`card-grid-item__header--${headerSize}`]: true,
-              [`card-grid-item__header--align-${headerTextAlign}`]: true
+              [`card-grid-item__header--align-${headerTextAlign}`]: true,
+              'card-grid-item__header--cursor': isCardTitleSelectable,
             }"
+            @click="cardTitleClicked($event)"
           >
             <span>{{ cardHeaderTitle }}</span> &nbsp;
             <card-grid-item-caret
@@ -100,9 +101,7 @@
             >
             </card-grid-item-icon>
           </b-card-title>
-        </div>
-          <div>
-            <card-grid-item-caret
+          <card-grid-item-caret
             v-if="caretPosition === 'top'"
             :caret="caret"
             :rtl="rtl"
@@ -123,22 +122,19 @@
             class="d-inline card-grid-item-icon--top-right"
             :class="{
               [`text-right`]: iconPosition === 'top-right',
-              rtl: rtl
+              rtl: rtl,
             }"
             :rtl="rtl"
           >
           </card-grid-item-icon>
-
           <span v-if="pillText" class="visually-hidden">{{ pillText }}</span>
-          </div>
-
         </div>
         <b-card-text
           v-if="$slots.cardDescription || description"
           text-tag="div"
           class="card-grid-item__body"
           :class="{
-            rtl: rtl
+            rtl: rtl,
           }"
         >
           <div
@@ -146,7 +142,7 @@
             :class="{
               [descriptionClass]: !!descriptionClass,
               [`card-grid-item__description--withIcon`]:
-                iconPosition === 'before-description'
+                iconPosition === 'before-description',
             }"
           >
             <card-grid-item-icon
@@ -185,7 +181,7 @@
         v-if="caretPosition === 'bottom'"
         class="card-grid-item__caretContainer card-grid-item__caretContainer--bottom"
         :class="{
-          rtl: !rtl
+          rtl: !rtl,
         }"
       >
         <card-grid-item-caret :caret="caret" :rtl="rtl" />
@@ -200,52 +196,60 @@
 import CardGridItemIcon from './card-grid-item-icon.vue'
 import CardGridItemCaret from './card-grid-item-caret.vue'
 import RichText from '../../Paragraphs/RichText/index.vue'
-import parseISO from 'date-fns/parseISO'
+import { parseISO } from 'date-fns'
 import { isAbsoluteUrl, isGovSite } from '../../../../lib/utility'
 import { BCard, BCardBody, BCardTitle, BCardText } from 'bootstrap-vue-next'
 
 export default {
   name: 'CardGridItem',
-  components: {CardGridItemIcon, CardGridItemCaret, RichText, BCard, BCardBody, BCardTitle, BCardText  },
+  components: {
+    CardGridItemIcon,
+    CardGridItemCaret,
+    RichText,
+    BCard,
+    BCardBody,
+    BCardTitle,
+    BCardText,
+  },
   props: {
     backgroundVariant: {
       type: String,
       default: 'white',
       validator: (value) =>
-        ['white', 'transparent', 'light'].indexOf(value) >= 0
+        ['white', 'transparent', 'light'].indexOf(value) >= 0,
     },
     imageSrc: {
       type: String,
-      default: null
+      default: null,
     },
     imageAlt: {
       type: String,
-      default: null
+      default: null,
     },
     description: {
       type: String,
-      default: null
+      default: null,
     },
     stripDescriptionHtml: {
-      type: Boolean
+      type: Boolean,
     },
     descriptionClass: {
       type: String,
-      default: ''
+      default: '',
     },
     glyphSrc: {
       type: [Object, String],
-      default: null
+      default: null,
     },
     glyphIconComponent: {
       type: String,
-      default: null
+      default: null,
     },
     iconSize: {
       type: String,
       default: 'small',
       validator: (value) =>
-        ['xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0
+        ['xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0,
     },
     iconPosition: {
       type: String,
@@ -256,108 +260,113 @@ export default {
           'top-left',
           'top-right',
           'after-title',
-          'before-description'
-        ].indexOf(value) >= 0
+          'before-description',
+        ].indexOf(value) >= 0,
     },
     iconIsBordered: {
       type: Boolean,
-      default: true
+      default: true,
     },
     showDivider: {
-      type: Boolean
+      type: Boolean,
     },
     cardHeaderTitle: {
       type: String,
-      default: null
+      default: null,
     },
     invertOnSelectBackground: {
       type: String,
       default: 'none',
-      validator: (value) => ['none', 'yellow', 'black'].indexOf(value) >= 0
+      validator: (value) => ['none', 'yellow', 'black'].indexOf(value) >= 0,
     },
     borderOnSelectBackground: {
       type: String,
       default: 'none',
       validator: (value) =>
-        ['none', 'yellow', 'black', 'blue'].indexOf(value) >= 0
+        ['none', 'yellow', 'black', 'blue'].indexOf(value) >= 0,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     headerSize: {
       type: String,
       default: 'custom',
       validator: (value) =>
         ['medium', 'large', 'extra-large', 'extra-2x-large', 'custom'].indexOf(
-          value
-        ) >= 0
+          value,
+        ) >= 0,
     },
     headerTextAlign: {
       type: String,
       default: 'left',
-      validator: (value) => ['left', 'center', 'right'].indexOf(value) >= 0
+      validator: (value) => ['left', 'center', 'right'].indexOf(value) >= 0,
     },
     headerTag: {
       type: String,
       required: false,
-      default: 'h3'
+      default: 'h3',
     },
     caret: {
       type: String,
       default: undefined,
       validator: (value) =>
-        ['down', 'up', 'right', 'left', 'external'].indexOf(value) >= 0
+        ['down', 'up', 'right', 'left', 'external'].indexOf(value) >= 0,
     },
     caretPosition: {
       type: String,
       default: 'top',
-      validator: (value) => ['top', 'bottom', 'after-title'].indexOf(value) >= 0
+      validator: (value) =>
+        ['top', 'bottom', 'after-title'].indexOf(value) >= 0,
     },
     cardPadding: {
       type: String,
       default: 'none',
       validator: (value) =>
-        ['none', 'xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0
+        ['none', 'xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0,
     },
     borderType: {
       type: String,
       default: 'none',
       validator: (value) =>
-        ['none', 'thin', 'shadow', 'thick', 'dark'].indexOf(value) >= 0
+        ['none', 'thin', 'shadow', 'thick', 'dark'].indexOf(value) >= 0,
     },
     cardTextAlign: {
       type: String,
-      default: 'left'
+      default: 'left',
     },
     disableSelect: {
       type: Boolean,
-      default: false
+      default: false,
     },
     pillText: {
       type: String,
-      default: ''
+      default: '',
     },
     buttonRole: {
       type: String,
-      default: 'link'
+      default: 'link',
     },
     isSelected: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isExpandable: {
       type: Boolean,
-      default: false
+      default: false,
     },
     link: {
       type: [String, Boolean],
-      default: false
+      default: false,
     },
     taxonomies: {
       type: Object,
-      default: () => {}
-    }
+      default: () => {},
+    },
+    isCardTitleSelectable: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: () => ({
     isSelectable: false,
@@ -367,7 +376,7 @@ export default {
     isMobileView: false,
     isTabletView: false,
     selected: false,
-    isAbsoluteUrl
+    isAbsoluteUrl,
   }),
   computed: {
     cardClass() {
@@ -394,12 +403,12 @@ export default {
         [`card-grid-item__card--border-${this.borderType}`]: true,
         [`card-grid-item__card--bg-${this.backgroundVariant}`]: true,
         [`card-grid-item__card--select-${this.buttonRole}`]: true,
-        [`card-grid-item__card--align-${this.cardTextAlign}`]: true
+        [`card-grid-item__card--align-${this.cardTextAlign}`]: true,
       }
     },
     urlHostname() {
       return window.location.protocol + '//' + window.location.host
-    }
+    },
   },
   mounted() {
     this.selected = this.isSelected
@@ -422,10 +431,16 @@ export default {
       if (this.isSelectable) {
         this.parentGrid.cardSelected(this, ev)
       }
+
       if (this.$gtm) {
         this.fireGTM()
       }
     },
+    cardTitleClicked(ev) {
+      if (this.isCardTitleSelectable) {
+        this.parentGrid.cardTitleSelected(this, ev)
+      }
+    },
     getParentGridItem() {
       let counter = 0
       const maxParentDepth = 10
@@ -462,8 +477,8 @@ export default {
       if (theEl && theEl.length > 0) {
         var content = {
           content: this.$diffInDays(
-            parseISO(theEl[0]?.componentOptions?.propsData?.card?.created)
-          )
+            parseISO(theEl[0]?.componentOptions?.propsData?.card?.created),
+          ),
         }
       }
       if (this.$gtm) {
@@ -478,43 +493,46 @@ export default {
           label: this.cardHeaderTitle,
           data: linkURL,
           ...content,
-          ...this.taxonomies
+          ...this.taxonomies,
         }
         // fire the default event
         this.$gtm.push({
           event: 'custom.interaction.tile.click',
           group: this?.parentGrid?.title,
-          ...attrs
+          ...attrs,
         })
         if (this.pillText === 'News') {
           this.$gtm.push({
             event: 'custom.interaction.news.click',
             group: 'News',
-            ...attrs
+            ...attrs,
           })
         }
         if (this.pillText === 'Event') {
           this.$gtm.push({
             event: 'custom.interaction.event.click',
             group: 'Event',
-            ...attrs
+            ...attrs,
           })
         }
         if (this.pillText === 'Safety alert') {
           this.$gtm.push({
             event: 'custom.interaction.safety.click',
             group: 'Safety alert',
-            ...attrs
+            ...attrs,
           })
         }
         if (
           (this.link,
-          this.isAbsoluteUrl(this.link) && process.env.CARETAKER === 'false')
+          this.isAbsoluteUrl(this.link) &&
+            (this.$config
+              ? this.$config.public.caretaker
+              : process.env.CARETAKER) === 'false')
         ) {
           this.$gtm.push({
             event: 'custom.interaction.outboundlink',
             category: this.cardHeaderTitle,
-            label: this.link
+            label: this.link,
           })
         }
       }
@@ -523,16 +541,18 @@ export default {
         this.link &&
         this.isAbsoluteUrl(this.link) &&
         isGovSite(this.link) &&
-        process.env.CARETAKER === 'true'
+        (this.$config
+          ? this.$config.public.caretaker
+          : process.env.CARETAKER) === 'true'
       ) {
         this.$gtm.push({
           event: 'custom.interaction.outboundlink',
           category: this.cardHeaderTitle,
-          label: this.link
+          label: this.link,
         })
       }
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -845,6 +865,10 @@ export default {
     &--align-right {
       direction: rtl;
     }
+
+    &--cursor {
+      cursor: pointer;
+    }
   }
 }
 

package/src/components/Containers/Carousel/index.vue

@@ -7,16 +7,16 @@
       controls
       indicators
       keyboard
+      :fade="true"
       background="#ababab"
     >
       <b-carousel-slide
         v-for="item in filteredCarouselItems"
         :key="item.id"
-        
-        :img-src="item.image"
-        @click.prevent="handleClick(item.link)"
+        :img-src="getImageURL(item.field_image.field_media_image?.uri?.url)"
+        @click.prevent="handleClick(item.field_link.url)"
       >
-      <h4>{{ item.content}}</h4>
+      <h4>{{ item.field_title}}</h4>
       </b-carousel-slide>
     </b-carousel>
   </div>
@@ -54,10 +54,10 @@ export default {
       var todayDate = new Date()
       
       for (var i = 0, length = this.carouselItems.length; i < length; i++) {
-        if (this.carouselItems[i].favorite === 'Yes') {
+        if (this.carouselItems[i].field_favorite === true) {
           this.carouselItems[i].active = 'Yes'
-        } else if (new Date(this.carouselItems[i].dateStart).valueOf() <= todayDate.valueOf()) {
-          if (new Date(this.carouselItems[i].dateEnd).valueOf() >= todayDate.valueOf()) {
+        } else if (new Date(this.carouselItems[i].field_date_start).valueOf() <= todayDate.valueOf()) {
+          if (new Date(this.carouselItems[i].field_date_end).valueOf() >= todayDate.valueOf()) {
             this.carouselItems[i].active = 'Yes'
           }
         }
@@ -84,6 +84,12 @@ export default {
       }
     },
 
+    getImageURL(imagePath) {
+      let apiPath = this.$config ? this.$config.public.apiURL : process.env.CONTENT_API_URL;
+      let fullPath = apiPath.concat(imagePath)
+      return fullPath
+    },
+
     formatDate(date) {
       return [
         date.getFullYear(),
@@ -103,6 +109,7 @@ export default {
 .carousel {
   position: relative;
   padding-bottom: 7rem;
+  max-width: 540px;
 }
 
 .carousel-inner {

package/src/components/Containers/HomepageHeader/index.stories.js

@@ -2,43 +2,66 @@ import HomepageHeader from './index.vue'
 
 const header = {
   title: 'This is sentence 1. This is sentence 2.',
-  description: 'description text'
+  description: 'description text',
 }
 
-const fetchMenu = () =>
-  Promise.resolve([
-    {
-      title: 'Report an incident',
-      relative: '/report-incident'
-    },
-    {
-      title: 'Report a case of COVID-19',
-      relative: '/report-confirmed-positive-case-covid-19'
-    },
-    {
-      title: 'Make a claim',
-      relative: '/before-claim'
-    },
-    {
-      title: 'Apply for a licence',
-      relative: '/apply-for-licence'
-    },
-    {
-      title: 'Pay or renew your insurance',
-      relative: '/pay-or-renew-your-workcover-insurance-premium'
-    }
-  ])
+// This is generated server side with useAsyncData
+// const fetchMenu = () =>
+//   Promise.resolve([
+//     {
+//       title: 'Report an incident',
+//       relative: '/report-incident'
+//     },
+//     {
+//       title: 'Report a case of COVID-19',
+//       relative: '/report-confirmed-positive-case-covid-19'
+//     },
+//     {
+//       title: 'Make a claim',
+//       relative: '/before-claim'
+//     },
+//     {
+//       title: 'Apply for a licence',
+//       relative: '/apply-for-licence'
+//     },
+//     {
+//       title: 'Pay or renew your insurance',
+//       relative: '/pay-or-renew-your-workcover-insurance-premium'
+//     }
+//   ])
+const headerLinks = [
+  {
+    text: 'Report an incident',
+    path: '/report-incident',
+  },
+  {
+    text: 'Report a case of COVID-19',
+    path: '/report-confirmed-positive-case-covid-19',
+  },
+  {
+    text: 'Make a claim',
+    path: '/before-claim',
+  },
+  {
+    text: 'Apply for a licence',
+    path: '/apply-for-licence',
+  },
+  {
+    text: 'Pay or renew your insurance',
+    path: '/pay-or-renew-your-workcover-insurance-premium',
+  },
+]
 
 const contentParser = () => {
   return Promise.resolve({
     results: [
       {
         title: 'Content title 1',
-        description: 'Content description 2'
-      }
+        description: 'Content description 2',
+      },
     ],
     offset: 0,
-    numFound: 1000
+    numFound: 1000,
   })
 }
 
@@ -48,31 +71,32 @@ export default {
   argTypes: {
     fetchMenu: {
       control: 'function',
-      table: { disable: true }
+      table: { disable: true },
     },
     contentParser: {
       control: 'function',
-      table: { disable: true }
-    }
+      table: { disable: true },
+    },
   },
   args: {
     heroHeader: header,
-    fetchMenu: fetchMenu,
-    contentParser: contentParser
-  }
+    // fetchMenu: fetchMenu,
+    contentParser: contentParser,
+    headerLinks: headerLinks,
+  },
 }
 
 const DefaultHH = (args) => ({
   components: { HomepageHeader },
   setup() {
-    return { args };
+    return { args }
   },
   mounted() {
     setTimeout(() => {
       this.$refs.hh.renderMenu()
     })
   },
-  template: '<homepage-header v-bind="args" ref="hh" />'
+  template: '<homepage-header v-bind="args" ref="hh" />',
 })
 
-export const Default = DefaultHH.bind({})
+export const Default = DefaultHH.bind({})

package/src/components/Containers/HomepageHeader/index.vue

@@ -30,7 +30,7 @@
     <template v-slot:side>
       <div>
         <cta-button
-          v-for="(link, i) in links"
+          v-for="(link, i) in headerLinks"
           :key="i"
           class="iebtn"
           :url="link.path"
@@ -73,36 +73,12 @@ export default {
       type: Object,
       required: true,
     },
-    fetchMenu: {
-      type: Function,
-      required: true,
-    },
-  },
-  // TODO useAsyncData <script setup>
-  // async fetch() {
-  //   console.log("NEVA")
-  //   await this.renderMenu()
-  // },
-  // Temp use of mounted to replace fetch
-  async mounted() {
-    await this.renderMenu()
+    headerLinks: { type: Array, required: true },
   },
 
   data: () => ({
-    links: [],
     earthIcon,
   }),
-  methods: {
-    async renderMenu() {
-      const menu = await this.fetchMenu()
-      this.links = (Array.isArray(menu) ? menu : []).map((item) => {
-        return {
-          text: item.title,
-          path: item.relative || item.absolute,
-        }
-      })
-    },
-  },
 }
 </script>
 <style lang="scss" scoped>