@worksafevictoria/wcl7.5 1.1.0-beta.11 → 1.1.0-beta.111

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

@@ -0,0 +1,227 @@
+<!-- When implemented, importing mock values for carousel to be removed.  This was only for testing locally, while values not available from drupal. -->
+
+<template>
+  <div class="homepage-header"> 
+    <container>
+      <search
+      :page-limit="3"
+      :page-number="1"
+      :is-typeahead="true"
+      :content-parser="contentParser"
+      tabindex="0"
+      class="homepage-header__search"
+    />
+    </container>
+      
+    <div class="homepage-header__content-wrapper">
+      <container class="homepage-header__content-wrapper__content">
+        <row>
+          <column
+              class="homepage-header__content-wrapper__content-col col-12 col-md-7 homepage-header__content-wrapper__content-col--split wcl-rich-text--ltr"
+              :xs="7"
+              :md="7"
+            >
+              <carousel-component 
+                :carouselItems="this.slideList"
+                :storybook="this.isStorybook"
+              />
+          </column>
+          <column
+              md="4"
+              :offset-md="1"
+              class="homepage-header__side col-md-4 offset-md-1"
+            >
+              <div>
+                <cta-button
+                  v-for="(link, i) in headerLinks"
+                  :key="i"
+                  class="iebtn"
+                  :url="link.path"
+                  type="dark"
+                  :stretch="true"
+                  >{{ link.text }}</cta-button
+                >
+              </div>
+            </column>
+        </row>
+      </container>
+    </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'
+// import { mockCarouselItems } from '../../../mock/carousel-items'
+
+export default {
+  name: 'HomepageHeader',
+  components: {
+    Search,
+    CtaButton,
+    CarouselComponent,
+    Row,
+    Column,
+    // mockCarouselItems
+  },
+  props: {
+    contentParser: {
+      type: Function,
+      required: true,
+    },
+   slideList: {
+      type: Array,
+      required: true,
+      // default: mockCarouselItems
+    },
+    isStorybook: {
+      type: Boolean,
+      default: false
+    },
+    headerLinks: { 
+      type: Array, 
+      required: true 
+    },
+  },
+
+  data: () => ({
+    earthIcon,
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+@import './../../Global/HeroHeader/styles.scss';
+
+
+.homepage-header {
+  position:relative;
+  margin-bottom: 10px;
+  display: block;
+  border-bottom: none !important;
+  height: auto;
+  align-items: normal;
+
+  :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;
+      }
+    }
+  }
+
+  &__content-wrapper {
+    width: 100%;
+    position: relative;
+    margin-top: 80px;
+    @include mq('mm') {
+      margin-top: 10px !important;
+    }
+
+    &__content {
+      @include mq('md') {
+        max-width: 100%;
+        margin: 0;
+        padding: 0 30px;
+      }
+      &-col {
+        max-width: 69%;
+        z-index: 2;
+        @include mq('mm') {
+          max-width: 100%;
+          padding-right: 45px;
+        }
+        @include mq('xs') {
+          padding-right: 0px;
+          padding-left: 0px;
+        }
+
+        &--split {
+          padding-right: 0;
+        }
+
+        .header-rich-text-wrap {
+          max-width: 100%;
+        }
+      }
+    }
+  }
+
+  :deep(.homepage-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;
+    position: relative;
+    
+
+    @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/SectionGroup/index.vue

@@ -50,7 +50,7 @@
             <slot name="preContent"></slot>
           </column>
         </row>
-
+        
         <div
           class="section-group__content section-group__row"
           :class="{

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

@@ -35,12 +35,12 @@
             v-if="card.description"
             class="subheader__description"
             :class="{
-              [`w-100 text-left`]: alignLeft
+              [`w-100 text-left`]: alignLeft,
             }"
           >
             <strong
               v-if="singleLineCards && card.title"
-              v-html="card.title + ':'"
+              v-html="card.title + ': '"
             >
             </strong>
             <span v-html="card.description"></span>
@@ -61,67 +61,77 @@ export default {
   props: {
     itemList: {
       type: Array,
-      required: true
+      required: true,
     },
     cardColumnSize: {
       type: Number,
-      default: null
+      default: null,
     },
     singleLineCards: {
-      type: Boolean
+      type: Boolean,
     },
     background: {
       type: String,
-      default: 'none'
+      default: 'none',
     },
     heading: {
       type: String,
-      default: ''
+      default: '',
     },
     alignLeft: {
-      type: Boolean
+      type: Boolean,
     },
     showIcon: {
       type: Boolean,
-      default: true
+      default: true,
     },
     iconPosition: {
       type: String,
-      default: null
+      default: null,
     },
     type: {
       type: String,
-      default: ''
-    }
+      default: '',
+    },
   },
   data() {
     return {
-      isSingleColumn: false
+      isSingleColumn: false,
     }
   },
   methods: {
     selectedCard(card) {
       // Some custom logic for gov caretaker logic
-      if (process.env.CARETAKER && process.env.CARETAKER === 'true') {
+      if (
+        (this.$config
+          ? this.$config.public.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,
             card?.selectedCard?.linkHref,
-            card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+            card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
           )
         }
       } else {
         navigateToPath.call(
           this,
           card?.selectedCard?.linkHref,
-          card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+          card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
         )
       }
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>

package/src/components/Global/AlertStrip/index.stories.js

@@ -3,6 +3,7 @@ import AlertStrip from './index.vue'
 export default {
   title: 'Global/AlertStrip',
   component: AlertStrip,
+  tags: ['autodocs'],
   args: {
     isWarning: false,
     desc: 'Refresh the page in order to show alert strip after dismissing it.',

package/src/components/Global/AppFooter/FooterSocialShare/index.vue

@@ -22,7 +22,7 @@
 
 <script>
 import facebookIcon from '../../../../assets/icons/AppFooter/facebook-ws-footer.svg?url'
-import twitterIcon from '../../../../assets/icons/AppFooter/twitter-ws-footer.svg?url'
+import twitterIcon from '../../../../assets/icons/AppFooter/x-ws-footer.svg?url'
 import linkedInIcon from '../../../../assets/icons/AppFooter/linkedin-ws-footer.svg?url'
 import instagramIcon from '../../../../assets/icons/instagram.svg?url'
 import youtubeIcon from '../../../../assets/icons/AppFooter/youtube-ws-footer.svg?url'

package/src/components/Global/AppFooter/index.stories.js

@@ -7,6 +7,7 @@ dateInput = dateInput.toString()
 export default {
   title: 'Global/AppFooter',
   component: AppFooter,
+  tags: ['autodocs'],
   data() {
     return {
       footerMenu

package/src/components/Global/AppFooter/index.vue

@@ -11,7 +11,7 @@
           <column>
             <div class="mobilescreen">Reviewed on {{ updateDate }}</div>
             <div v-if="!submitted">
-              <div style="margin-right:10px; display:inline">
+              <div style="margin-right: 10px; display: inline">
                 <strong>Was this page helpful?</strong>
               </div>
               <input
@@ -86,7 +86,7 @@
                     Cancel
                   </button>
                   <cta-button
-                    style="float:right;"
+                    style="float: right"
                     :url="''"
                     :rtl="rtl"
                     @clicked="submitFeedback()"
@@ -181,7 +181,7 @@
                     :key="subIndex"
                     class="app-footer-menu__item"
                     :class="{
-                      'app-footer-menu__item--hide': !menuItem.isOpen
+                      'app-footer-menu__item--hide': !menuItem.isOpen,
                     }"
                   >
                     <a
@@ -249,7 +249,7 @@
                   <li
                     class="app-footer-menu__item app-footer-menu__address app-footer-menu__item--link"
                     :class="{
-                      'app-footer-menu__item--hide': !contactMenuIsOpen
+                      'app-footer-menu__item--hide': !contactMenuIsOpen,
                     }"
                   >
                     <p>
@@ -261,7 +261,7 @@
                   <li
                     class="app-footer-menu__item app-footer-menu__item--link"
                     :class="{
-                      'app-footer-menu__item--hide': !contactMenuIsOpen
+                      'app-footer-menu__item--hide': !contactMenuIsOpen,
                     }"
                   >
                     <a class="dark" href="tel:+611800136089">1800 136 089</a>
@@ -269,7 +269,7 @@
                   <li
                     class="app-footer-menu__item app-footer-menu__item--link"
                     :class="{
-                      'app-footer-menu__item--hide': !contactMenuIsOpen
+                      'app-footer-menu__item--hide': !contactMenuIsOpen,
                     }"
                   >
                     <nuxt-link class="dark" to="/contact-worksafe"
@@ -337,7 +337,7 @@
             <button
               class="app-footer__main__subscribe-col__btn"
               :class="{
-                'app-footer__main__subscribe-btn--workwell': isWorkwell
+                'app-footer__main__subscribe-btn--workwell': isWorkwell,
               }"
               @click="subscribe"
             >
@@ -385,25 +385,25 @@ export default {
     Container,
     Row,
     Icon,
-    CtaButton
+    CtaButton,
   },
   props: {
     footerMenu: {
       type: Array,
-      required: true
+      required: true,
     },
     changedDate: {
       type: String,
-      required: true
+      required: true,
     },
     isWorkwell: {
       type: Boolean,
-      default: false
+      default: false,
     },
     storybook: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
@@ -425,26 +425,33 @@ export default {
       showForm: false,
       submitted: false,
       endpoint:
-        process.env.CONTENT_API_URL + '/webform_rest/submit?_format=json',
+        (this.$config
+          ? this.$config.public.apiURL
+          : process.env.CONTENT_API_URL) + '/webform_rest/submit?_format=json',
       response: {
         webform_id: 'page_feedback_form',
         page_url: '',
         was_the_information_on_this_page_helpful_: '',
-        message: ''
-      }
+        message: '',
+      },
     }
   },
   computed: {
     updateDate() {
-      // https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
-      return format(new Date(this.changedDate), 'dd/MM/yyyy')
+      // Change to remove hydration date
+      return new Date(this.changedDate)
+        .toLocaleString('en-AU', {
+          timeZone: 'Australia/Sydney',
+        })
+        .split(',')[0]
     },
     isMobile() {
       return this.windowWidth < 768
     },
-    processID() {
-      return `${Date.now()}-${Math.floor(Math.random() * 10000)}`
-    }
+    // Why send junk id
+    // processID() {
+    //   return `${Date.now()}-${Math.floor(Math.random() * 10000)}`
+    // },
   },
   watch: {
     $route() {
@@ -452,10 +459,10 @@ export default {
       this.submitted = false
     },
     showForm: {
-      handler: function() {
+      handler: function () {
         this.initialiseFeedback()
-      }
-    }
+      },
+    },
   },
   mounted() {
     this.$nextTick(() => {
@@ -510,7 +517,8 @@ export default {
       const attrs = {
         event: 'custom.interaction.helpful',
         label: this.response.was_the_information_on_this_page_helpful_,
-        title: this.$store?.state?.page?.content?.title
+        //title: this.$store?.state?.page?.content?.title,
+        title: this.$pageStore?.content?.title,
       }
       if (this.$gtm) {
         this.$gtm.push({ event: 'custom.interaction.helpful', ...attrs })
@@ -518,20 +526,21 @@ export default {
     },
     fireGtagFeedback() {
       const attrs = {
-        title: this.$store?.state?.page?.content?.title,
+        //title: this.$store?.state?.page?.content?.title,
+        title: this.$pageStore?.content?.title,
         label: this.response.was_the_information_on_this_page_helpful_,
-        processID: this.processID
+        // processID: this.processID, why send GTM junk id
       }
       if (this.$gtm) {
         this.$gtm.push({
           event: 'custom.interaction.helpful.feedback',
-          ...attrs
+          ...attrs,
         })
       }
     },
     backToTop() {
-      if (!this.storybook) {
-        this.$nuxt.$emit('scrollToTop')
+      if (this.$bus) {
+        this.$bus.$emit('scrollToTop')
       }
     },
     isAbsoluteUrl(uri) {
@@ -617,13 +626,13 @@ export default {
           this.$gtm.push({
             event: 'custom.interaction.outboundlink',
             category: item.title,
-            label: item.absolute
+            label: item.absolute,
           })
         }
         window.open(item.absolute)
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

package/src/components/Global/AppFooter/styles.scss

@@ -257,6 +257,9 @@ $whitesmoke: #f3f3f3 !default;
         :deep(path) {
           fill: white;
         }
+        :deep(.icon) {
+          filter: invert(100%) sepia(5%) saturate(49%) hue-rotate(165deg) brightness(119%) contrast(100%);
+        }
       }
 
       @media screen and (max-width: 767px) {