@worksafevictoria/wcl7.5 1.5.0 → 1.7.0

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({

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) {

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

@@ -31,9 +31,10 @@
     border: $app-header-active;
 
     > a > span {
+      // border-bottom: 3px solid $app-header-active;
       background-color: $app-header-active;
     }
-  }
+    }
   .isActiveChild {
     > a {
       background: $app-header-active;
@@ -48,7 +49,6 @@
 
   // First Level Overrides
   &__close {
-    
     &-button {
       display: flex;
       vertical-align: middle;
@@ -113,7 +113,6 @@
         margin-right: 0;
       }
 
-  
       .search-string {
         @media screen and (max-width: 1065px) and (min-width: 981px) {
           display: none;
@@ -192,15 +191,15 @@
   }
 
   &__nav-menu {
-      
+
     .nav-item {
       .sub-nav-container {
         display: none;
         position: fixed;
         background: $app-menu-black;
-        top: 180px;
-        left: 25px;
-        right: 25px;
+        top: 165px;
+        left: 10px;
+        right: 10px;
         bottom: 10px;
         border-radius: 3px;
 
@@ -212,16 +211,15 @@
         &__innermore {
           overflow-x: auto;
           height: max-content;
-          left: 25px;
-          right: 25px;
-          top: 180px;
+          left: 10px;
+          right: 10px;
+          top: 165px;
           position: fixed;
           padding-top: 15px !important;
           background-color: $app-menu-black !important;
           border-radius: 3px;
         }
 
-
         &__wrap {
           position: relative;
           margin: 0 auto;
@@ -248,11 +246,9 @@
 
       &:last-of-type {
         > a {
-
           svg {
             height: 23px;
             width: 23px;
-
           }
           & > span {
             margin-right: 10px;
@@ -307,14 +303,13 @@
           }
           > .sub-nav-group {
             li.isActiveChild {
+              
               .sub-nav {
                 display: block;
-                
 
                 .selected-title {
                   text-align: left;
                   top: 12px;
-                  
 
                   a {
                     padding: 5px 5px 15px 5px;

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

@@ -12,23 +12,23 @@
 <script>
 import Icon from '../../SubComponents/Icon/index.vue'
 import ChevUp from '../../../assets/icons/chev-up.svg?raw'
-import debounce from 'lodash/debounce'
+import { debounce } from 'lodash-es'
 
 export default {
   name: 'BackToTop',
   components: {
-    Icon
+    Icon,
   },
   props: {
     storybook: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
       ChevUp,
-      showBackToTop: false
+      showBackToTop: false,
     }
   },
   computed: {
@@ -38,7 +38,7 @@ export default {
       } else {
         return this.showBackToTop
       }
-    }
+    },
   },
   mounted() {
     this.handleDebouncedScroll = debounce(this.showHideBtbBtn, 100)
@@ -57,8 +57,8 @@ export default {
     },
     showHideBtbBtn() {
       this.showBackToTop = window.scrollY > window.innerHeight / 2
-    }
-  }
+    },
+  },
 }
 </script>
 

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

@@ -4,31 +4,37 @@ const defaultValue = {
   header: 'field_cookie_heading',
   content: {
     default: 'field_cookie_content',
-    small: 'field_cookie_content_small'
+    small: 'field_cookie_content_small',
   },
   modal: {
     heading: 'field_modal_heading',
     functional: {
       heading: 'field_functional_heading',
-      description: 'field_functional_description'
+      description: 'field_functional_description',
     },
     analytics: {
       heading: 'field_analytics_heading',
-      description: 'field_analytics_description'
+      description: 'field_analytics_description',
     },
     marketing: {
       heading: 'field_marketing_heading',
-      description: 'field_marketing_description'
-    }
-  }
+      description: 'field_marketing_description',
+    },
+  },
 }
 export default {
   title: 'Global/Cookies',
   component: Cookies,
   args: {
     cookieHeader: 'Accept and Reject Cookies',
-    cookieContent: defaultValue
-    }
-  }
+    cookieContent: defaultValue,
+  },
+}
 
-export const Default = {}
+export const Default = {
+  loaders: [
+    () => {
+      window.localStorage.removeItem('cookieBannerDisplayed')
+    },
+  ],
+}