@worksafevictoria/wcl7.5 1.4.0 → 1.6.0

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

@@ -1,29 +1,29 @@
 import HomepageHeader from './index.vue'
 import { mockCarouselItems } from '../../../mock/carousel-items'
 
-const fetchMenu = () =>
-  Promise.resolve([
+
+const headerLinks = [
     {
-      title: 'Report an incident',
-      relative: '/report-incident'
+      text: 'Report an incident',
+      path: '/report-incident'
     },
     {
-      title: 'Report a case of COVID-19',
-      relative: '/report-confirmed-positive-case-covid-19'
+      text: 'Report a case of COVID-19',
+      path: '/report-confirmed-positive-case-covid-19'
     },
     {
-      title: 'Make a claim',
-      relative: '/before-claim'
+      text: 'Make a claim',
+      path: '/before-claim'
     },
     {
-      title: 'Apply for a licence',
-      relative: '/apply-for-licence'
+      text: 'Apply for a licence',
+      path: '/apply-for-licence'
     },
     {
-      title: 'Pay or renew your insurance',
-      relative: '/pay-or-renew-your-workcover-insurance-premium'
+      text: 'Pay or renew your insurance',
+      path: '/pay-or-renew-your-workcover-insurance-premium'
     }
-  ])
+  ]
 
   const contentParser = () => {
     return Promise.resolve({
@@ -52,10 +52,10 @@ export default {
     }
   },
   args: {
-    fetchMenu: fetchMenu,
     slideList: mockCarouselItems,
     isStorybook: true,
-    contentParser: contentParser
+    contentParser: contentParser,
+    headerLinks: headerLinks,
   }
 }
 

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

@@ -1,45 +1,54 @@
+<!-- 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">
-    <div class="container">
+  <div class="homepage-header"> 
+    <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
+      :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>
-    </div> 
+      </container>
+    </div>
   </div>
 </template>
+
 <script>
 import Search from './../../SubComponents/Search/index.vue'
 import CtaButton from './../../SubComponents/CtaButton/index.vue'
@@ -47,6 +56,7 @@ 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',
@@ -55,57 +65,47 @@ export default {
     CtaButton,
     CarouselComponent,
     Row,
-    Column
+    Column,
+    // mockCarouselItems
   },
   props: {
     contentParser: {
       type: Function,
       required: true,
     },
-    fetchMenu: {
-      type: Function,
-      required: true,
-    },
-    slideList: {
+   slideList: {
       type: Array,
       required: true,
+      // default: mockCarouselItems
     },
     isStorybook: {
       type: Boolean,
       default: false
-    }
-  },
-  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>
 
-<!-- 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 {
+  position:relative;
+  margin-bottom: 10px;
+  display: block;
   border-bottom: none !important;
+  height: auto;
+  align-items: normal;
 
   :deep(.wysiwyg) {
     h1 {
@@ -122,17 +122,44 @@ even though the component itself is no longer imported. -->
     }
   }
 
-  :deep(.wcl-hero-header__content-wrapper) {
-    @include fp('top', 75, 250);
-    margin-top: 0;
+  &__content-wrapper {
+    width: 100%;
+    position: relative;
+    margin-top: 80px;
+    @include mq('mm') {
+      margin-top: 10px !important;
+    }
 
-    @media screen and (max-width: 540px) {
-        padding-right: 35px;
+    &__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(.wcl-hero-header__wrap) {
+  :deep(.homepage-header__wrap) {
     display: block;
     align-items: normal;
   }
@@ -151,9 +178,11 @@ even though the component itself is no longer imported. -->
   }
 
   &__search {
-    // margin-top: 10px;
+    margin-top: 10px;
     z-index: 1;
     width: auto;
+    position: relative;
+    
 
     @include mq('xs') {
       padding-right: 0;

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

@@ -102,7 +102,11 @@ export default {
   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)

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.vue

@@ -425,7 +425,9 @@ 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: '',
@@ -436,15 +438,20 @@ export default {
   },
   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() {
@@ -522,7 +529,7 @@ export default {
         //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({