@worksafevictoria/wcl7.5 1.3.0 → 1.5.0

package/lib/utility.js

@@ -49,7 +49,7 @@ function navigateToPath(path, newTab) {
     hrefTag.click()
   } else {
     const hrefTag = Object.assign(document.createElement('a'), {
-      target: isAbsolute ? '_blank' : '_self',
+      target: newTab ? '_blank' : '_self',
       href: url
     })
     hrefTag.click()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {
@@ -88,7 +88,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "1.77.6",
-    "sass-loader": "^13.3.2",
     "semantic-release": "^19.0.3",
     "storybook": "^7.5.1",
     "stylelint": "^15.11.0",

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

@@ -31,7 +31,7 @@
       >
         <column
           v-for="(item, index) in cards"
-          :key="`${redrawCounter}-${index}-${_uid}`"
+          :key="`${redrawCounter}-${index}-${$options._uid}`"
           ref="cardColumns"
           :lg="largeViewPort"
           :md="mediumViewPort"
@@ -58,6 +58,7 @@ import Column from './../../Containers/Column/index.vue'
 import SectionGroup from './../../Containers/SectionGroup/index.vue'
 import debounce from 'lodash/debounce'
 
+
 export default {
   name: 'CardGrid',
   components: { Row, Column, SectionGroup },
@@ -188,7 +189,7 @@ export default {
       return 6
     },
     uniqueClass() {
-      return 'cardGrid' + this._uid
+      return `cardGrid-${this.$options._uid}`
     }
   },
   watch: {
@@ -228,10 +229,24 @@ export default {
     window.removeEventListener('resize', this.setColumnSizeDebounce)
   },
   methods: {
+    cardTitleSelected(selectedCard, ev) {
+      this.clearCards()
+      selectedCard.selected = !!!selectedCard.selected
+      const selectedCardModelIndex = this.getChildIndex(selectedCard)
+
+      this.$emit('selected-title', {
+        selectedCard: selectedCard.selected
+          ? this.cards[selectedCardModelIndex]
+          : null,
+        selectedCardModelIndex,
+        ev
+      })
+    },
     cardSelected(selectedCard, ev) {
       this.clearCards()
       selectedCard.selected = !!!selectedCard.selected
       const selectedCardModelIndex = this.getChildIndex(selectedCard)
+
       this.$emit('selected', {
         selectedCard: selectedCard.selected
           ? this.cards[selectedCardModelIndex]

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)"
@@ -67,15 +67,16 @@
             }
           ]"
         >
-        <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"
@@ -128,10 +127,7 @@
             :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"
@@ -357,6 +353,10 @@ export default {
     taxonomies: {
       type: Object,
       default: () => {}
+    },
+    isCardTitleSelectable: {
+      type: Boolean,
+      default: false
     }
   },
   data: () => ({
@@ -422,10 +422,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
@@ -845,6 +851,10 @@ export default {
     &--align-right {
       direction: rtl;
     }
+
+    &--cursor {
+      cursor: pointer;
+    }
   }
 }
 

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

@@ -0,0 +1,30 @@
+import CarouselComponent from './index.vue'
+import { mockCarouselItems } from '../../../mock/carousel-items'
+
+export default {
+  title: 'Website-Redesign/Carousel',
+  component: CarouselComponent,
+  data() {
+    return {
+      mockCarouselItems
+    }
+  },
+  args: {
+    carouselItems: mockCarouselItems,
+    storybook: true
+  },
+  
+}
+
+const DefaultCarousel = (args) => ({
+  components: { CarouselComponent },
+  setup() {
+    return { args }
+  },
+  template: `<div style="width: 50%; height: auto;">
+  <h2>Carousel Component</h2>
+  <carousel-component v-bind="args"></carousel-component>
+  </div>`
+})
+
+export const Default = DefaultCarousel.bind({})

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

@@ -0,0 +1,165 @@
+<template>
+    <div>
+    <b-carousel
+      id="carousel-1"
+      v-model="slide"
+      interval=0
+      controls
+      indicators
+      keyboard
+      background="#ababab"
+    >
+      <b-carousel-slide
+        v-for="item in filteredCarouselItems"
+        :key="item.id"
+        
+        :img-src="item.image"
+        @click.prevent="handleClick(item.link)"
+      >
+      <h4>{{ item.content}}</h4>
+      </b-carousel-slide>
+    </b-carousel>
+  </div>
+</template>
+
+<script>
+import { BCarousel, BCarouselSlide } from 'bootstrap-vue-next'
+import { isAbsoluteUrl, navigateToPath } from '../../../../lib/utility'
+
+export default {
+  name: 'CarouselComponent',
+  data() {
+    return {
+      slide: 0,
+    }
+  },
+  components: {
+      BCarousel,
+      BCarouselSlide
+  },
+  props: {
+    carouselItems: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+    storybook: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    filteredCarouselItems() {
+      
+      var todayDate = new Date()
+      
+      for (var i = 0, length = this.carouselItems.length; i < length; i++) {
+        if (this.carouselItems[i].favorite === 'Yes') {
+          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()) {
+            this.carouselItems[i].active = 'Yes'
+          }
+        }
+      }
+      
+      let filtered = this.carouselItems.filter(e => 
+        e.active === 'Yes');
+      return filtered
+    }
+  },
+  methods: {
+
+    handleClick(link) {
+      if (link) {
+        if (isAbsoluteUrl(link)) {
+          navigateToPath(link, true)
+        } else {
+          if (this.storybook) {
+            alert('This link will go to: ' + link)
+          } else {
+            this.$router.push({ path: link })
+          }
+        }
+      }
+    },
+
+    formatDate(date) {
+      return [
+        date.getFullYear(),
+        ('0' + date.getDate()).slice(-2),
+        ('0' + (date.getMonth() + 1)).slice(-2)
+      ].join('-')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import '../../../includes/scss/all';
+</style>
+
+<style>
+.carousel {
+  position: relative;
+  padding-bottom: 7rem;
+}
+
+.carousel-inner {
+  overflow: visible;
+}
+
+.carousel-indicators {
+  padding-bottom: 3rem;
+  float: right;
+  right: 2% !important;
+  width: 20%;
+  justify-content: end;
+  margin-left: 80%;
+  margin-right: 0;
+}
+
+.carousel-indicators button {
+  width: 10px !important;
+  height: 10px !important;
+  border-radius: 50% !important;
+  background-color: black !important;
+}
+
+.carousel-indicators button:focus,
+.carousel-indicators button:active {
+  outline: none !important;
+  box-shadow: none;
+
+}
+
+.carousel-caption {
+  color: black;
+  top: 100%;
+  left: 0;
+  right: 20%;
+  text-align: left;
+  text-decoration: underline;
+}
+
+.carousel-control-next,
+.carousel-control-prev {
+  bottom: 7rem;
+}
+
+.carousel-control-prev:focus,
+.carousel-control-prev:active,
+.carousel-control-next:focus,
+.carousel-control-next:active {
+  outline: none !important;
+  box-shadow: none;
+}
+
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  height: 50px !important;
+  width: 50px !important;
+  outline:none !important;
+}
+
+</style>

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

@@ -0,0 +1,75 @@
+import HomepageHeader from './index.vue'
+import { mockCarouselItems } from '../../../mock/carousel-items'
+
+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 contentParser = () => {
+    return Promise.resolve({
+      results: [
+        {
+          title: 'Content title 1',
+          description: 'Content description 2'
+        }
+      ],
+      offset: 0,
+      numFound: 1000
+    })
+  }
+
+export default {
+  title: 'Website_Redesign/HomepageHeader',
+  component: HomepageHeader,
+  argTypes: {
+    fetchMenu: {
+      control: 'function',
+      table: { disable: true }
+    },
+    contentParser: {
+      control: 'function',
+      table: { disable: true }
+    }
+  },
+  args: {
+    fetchMenu: fetchMenu,
+    slideList: mockCarouselItems,
+    isStorybook: true,
+    contentParser: contentParser
+  }
+}
+
+const DefaultHH = (args) => ({
+  components: { HomepageHeader },
+  setup() {
+    return { args };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.$refs.hh.renderMenu()
+    })
+  },
+  template: '<homepage-header v-bind="args" ref="hh" />'
+})
+
+export const Default = DefaultHH.bind({})

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

@@ -0,0 +1,198 @@
+<template>
+  <div class="homepage-header">
+    <div class="container">
+      <search
+          :page-limit="3"
+          :page-number="1"
+          :is-typeahead="true"
+          :content-parser="contentParser"
+          tabindex="0"
+          class="homepage-header__search"
+        />
+        <row class="wcl-hero-header__content-wrapper container">
+          <column class="wcl-hero-header__content-wrapper__content-col col-12 col-md-7 wcl-hero-header__content-wrapper__content-col--split wcl-rich-text--ltr">
+            <carousel-component 
+            :carouselItems="this.slideList"
+            :storybook="this.isStorybook"
+            />
+          </column>
+          <column class="wcl-hero-header__side col-md-4 offset-md-1">
+            <cta-button
+              v-for="(link, i) in links"
+              :key="i"
+              class="iebtn"
+              :url="link.path"
+              type="dark"
+              :stretch="true"
+              >{{ link.text }}</cta-button
+            >
+            <cta-button
+              class="iebtn"
+              url="/choose-your-language"
+              type="dark"
+              :stretch="true"
+              :glyph="earthIcon"
+              :is-centred="false"
+              >Choose your language</cta-button
+            >
+          </column>
+        </row>
+    </div> 
+  </div>
+</template>
+<script>
+import Search from './../../SubComponents/Search/index.vue'
+import CtaButton from './../../SubComponents/CtaButton/index.vue'
+import earthIcon from './../../../assets/icons/earth.svg?url'
+import CarouselComponent from './../../Containers/Carousel/index.vue'
+import Row from './../../Containers/Row/index.vue'
+import Column from './../../Containers/Column/index.vue'
+
+export default {
+  name: 'HomepageHeader',
+  components: {
+    Search,
+    CtaButton,
+    CarouselComponent,
+    Row,
+    Column
+  },
+  props: {
+    contentParser: {
+      type: Function,
+      required: true,
+    },
+    fetchMenu: {
+      type: Function,
+      required: true,
+    },
+    slideList: {
+      type: Array,
+      required: true,
+    },
+    isStorybook: {
+      type: Boolean,
+      default: false
+    }
+  },
+  async mounted() {
+    await this.renderMenu()
+  },
+
+  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>
+
+<!-- styles from the heroheader are still used for consistency, 
+even though the component itself is no longer imported. -->
+
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+@import './../../Global/HeroHeader/styles.scss';
+
+.homepage-header {
+  border-bottom: none !important;
+
+  :deep(.wysiwyg) {
+    h1 {
+      @media screen and (max-width: 390px) {
+        font-size: 32px;
+        line-height: 32px;
+      }
+
+      @media screen and (max-width: 767px) {
+        font-size: 36px;
+        line-height: 36px;
+        margin-bottom: 16px;
+      }
+    }
+  }
+
+  :deep(.wcl-hero-header__content-wrapper) {
+    @include fp('top', 75, 250);
+    margin-top: 0;
+
+    @media screen and (max-width: 540px) {
+        padding-right: 35px;
+      }
+
+  }
+
+  :deep(.wcl-hero-header__wrap) {
+    display: block;
+    align-items: normal;
+  }
+
+  :deep(.wcl-cta) {
+
+    margin-left: 0 !important;
+
+    &:last-of-type {
+      img {
+        position: absolute;
+        right: 16px;
+        top: 19px;
+      }
+    }
+  }
+
+  &__search {
+    // margin-top: 10px;
+    z-index: 1;
+    width: auto;
+
+    @include mq('xs') {
+      padding-right: 0;
+    }
+
+    :deep(.gsc-results-wrapper-visible) {
+      display: none !important;
+    }
+  }
+
+  @media all and (-ms-high-contrast: none) {
+    ::-ms-backdrop,
+    .iebtn {
+      bottom: 280px;
+      left: 650px;
+    }
+
+    /* IE11 */
+
+    @media screen\9, screen and (max-width: 1150px) {
+      .iebtn {
+        bottom: 330px;
+        left: 480px;
+      }
+    }
+
+    @media screen\9, screen and (max-width: 950px) {
+      .iebtn {
+        bottom: 350px;
+        left: 450px;
+      }
+    }
+
+    @media screen\9, screen and (max-width: 767px) {
+      .iebtn {
+        left: 2px;
+        top: 10px;
+      }
+    }
+  }
+}
+</style>

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

@@ -104,8 +104,14 @@ export default {
       // Some custom logic for gov caretaker logic
       if (process.env.CARETAKER && process.env.CARETAKER === 'true') {
         if (!isGovSite(card?.selectedCard?.linkHref)) {
-          this.$store.commit('page/SET_CARETAKER_REF', 'subheader')
-          this.$root.$emit('caretaker-open', card?.selectedCard?.linkHref)
+          // this.$store.commit('page/SET_CARETAKER_REF', 'subheader')
+          // this.$root.$emit('caretaker-open', card?.selectedCard?.linkHref)
+          if (this.$pageStore) {
+            this.$pageStore.caretaker.referrer = 'subheader'
+          }
+          if (this.$bus) {
+            this.$bus.$emit('caretaker-open', card?.selectedCard?.linkHref)
+          }
         } else {
           navigateToPath.call(
             this,