@worksafevictoria/wcl7.5 1.9.0-beta.14 → 1.9.0-beta.16

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

@@ -32,11 +32,13 @@
               <label for="frNo" class="option">No</label>
             </div>
             <div v-if="submitted">
-              <img class="feedback-tick" alt="feedback tick" :src="Tick" />Thank you for
-              your feedback
+              <img class="feedback-tick" alt="feedback tick" :src="Tick" />Thank
+              you for your feedback
             </div>
           </column>
-          <column class="app-footer__page-info__reviewed-date fullscreen" :xs="6"
+          <column
+            class="app-footer__page-info__reviewed-date fullscreen"
+            :xs="6"
             >Reviewed on {{ updateDate }}</column
           >
         </row>
@@ -55,8 +57,9 @@
                   <strong>Tell us more (optional)</strong>
                 </div>
                 <div>
-                  We are unable to respond to questions via this form. If you have a
-                  question and would like to receive a reply, please use one of the
+                  We are unable to respond to questions via this form. If you
+                  have a question and would like to receive a reply, please use
+                  one of the
                   <a
                     class="feedback-link"
                     href="https://www.worksafe.vic.gov.au/contact-worksafe"
@@ -92,7 +95,10 @@
         </row>
       </container>
     </div>
-    <div class="app-footer__main" :class="{ 'app-footer__main--workwell': isWorkwell }">
+    <div
+      class="app-footer__main"
+      :class="{ 'app-footer__main--workwell': isWorkwell }"
+    >
       <container>
         <row valign="center" class="app-footer__main__social-share">
           <column :xs="12" :sm="2"
@@ -101,7 +107,9 @@
               :width="isWorkwell ? 99 : 101"
               :src="isWorkwell ? WorkWellLogo : WorkSafeLogo"
               :alt="
-                !isWorkwell ? 'Work Safe Victoria - Logo' : 'Work Well Victoria - Logo'
+                !isWorkwell
+                  ? 'Work Safe Victoria - Logo'
+                  : 'Work Well Victoria - Logo'
               "
           /></column>
           <column :xs="12" :sm="10">
@@ -148,7 +156,7 @@
                     'dark',
                     { nolink: !menuItem.absolute },
                   ]"
-                  :tabindex="!menuItem.absolute ? 0 : undefined"
+                  :tabindex="!menuItem.absolute ? 0 : -1"
                   target="_blank"
                   :aria-expanded="
                     isMobile && !menuItem.absolute
@@ -216,7 +224,11 @@
               >
                 <a
                   :aria-expanded="
-                    isMobile ? (contactMenuIsOpen ? 'true' : 'false') : undefined
+                    isMobile
+                      ? contactMenuIsOpen
+                        ? 'true'
+                        : 'false'
+                      : undefined
                   "
                   role="button"
                   class="app-footer-menu__title--link dark nolink"
@@ -239,7 +251,10 @@
                   class="app-footer-menu__title__caret"
                   alt="collapse icon"
                 />
-                <ul class="submenu" :class="contactMenuIsOpen ? 'isOpen' : false">
+                <ul
+                  class="submenu"
+                  :class="contactMenuIsOpen ? 'isOpen' : false"
+                >
                   <li
                     class="app-footer-menu__item app-footer-menu__address app-footer-menu__item--link"
                     :class="{
@@ -299,13 +314,14 @@
               alt="Pride Flag"
             />
             <p>
-              WorkSafe Victoria acknowledges Aboriginal and Torres Strait Islander people
-              as the Traditional Custodians of the land and acknowledges and pays respect
-              to their Elders, past and present.
+              WorkSafe Victoria acknowledges Aboriginal and Torres Strait
+              Islander people as the Traditional Custodians of the land and
+              acknowledges and pays respect to their Elders, past and present.
             </p>
             <p>
-              WorkSafe Victoria is committed to safe and inclusive work places, policies
-              and services for people of LGBTIQ communities and their families.
+              WorkSafe Victoria is committed to safe and inclusive work places,
+              policies and services for people of LGBTIQ communities and their
+              families.
             </p>
           </column>
           <column :md="1" class="app-footer__main__empty-col" />
@@ -352,27 +368,27 @@
 </template>
 
 <script>
-import Row from "./../../Containers/Row/index.vue";
-import Container from "./../../Containers/Container/index.vue";
-import Column from "./../../Containers/Column/index.vue";
-import FooterSocialShare from "./FooterSocialShare/index.vue";
-import CaretUp from "./../../../assets/icons/caret-up.svg?url";
-import CaretDown from "./../../../assets/icons/caret-down.svg?url";
-import WorkSafeLogo from "./../../../assets/icons/AppFooter/worksafe-footer-logo.svg?url";
-import VicGovLogo from "./../../../assets/icons/brand-VicStateGov-logo-reversed.svg?url";
-import ExternalLink from "./../../../assets/icons/external-link-16px.svg?url";
-import ExternalLinkRaw from "./../../../assets/icons/external-link.svg?url";
-import AboriginalFlag from "./../../../assets/icons/AppFooter/australian-aboriginal-flag.svg?url";
-import PrideFlag from "./../../../assets/icons/AppFooter/pride-flag.svg?url";
-import TorresStraitFlag from "./../../../assets/icons/AppFooter/torres-strait-islanders-flag.svg?url";
-import WorkWellLogo from "./../../../assets/icons/AppFooter/logo-workwell-reversed.svg?url";
-import { format } from "date-fns";
-import Icon from "./../../SubComponents/Icon/index.vue";
-import CtaButton from "./../../SubComponents/CtaButton/index.vue";
-import Tick from "./../../../assets/icons/tick.svg?url";
+import Row from './../../Containers/Row/index.vue'
+import Container from './../../Containers/Container/index.vue'
+import Column from './../../Containers/Column/index.vue'
+import FooterSocialShare from './FooterSocialShare/index.vue'
+import CaretUp from './../../../assets/icons/caret-up.svg?url'
+import CaretDown from './../../../assets/icons/caret-down.svg?url'
+import WorkSafeLogo from './../../../assets/icons/AppFooter/worksafe-footer-logo.svg?url'
+import VicGovLogo from './../../../assets/icons/brand-VicStateGov-logo-reversed.svg?url'
+import ExternalLink from './../../../assets/icons/external-link-16px.svg?url'
+import ExternalLinkRaw from './../../../assets/icons/external-link.svg?url'
+import AboriginalFlag from './../../../assets/icons/AppFooter/australian-aboriginal-flag.svg?url'
+import PrideFlag from './../../../assets/icons/AppFooter/pride-flag.svg?url'
+import TorresStraitFlag from './../../../assets/icons/AppFooter/torres-strait-islanders-flag.svg?url'
+import WorkWellLogo from './../../../assets/icons/AppFooter/logo-workwell-reversed.svg?url'
+import { format } from 'date-fns'
+import Icon from './../../SubComponents/Icon/index.vue'
+import CtaButton from './../../SubComponents/CtaButton/index.vue'
+import Tick from './../../../assets/icons/tick.svg?url'
 
 export default {
-  name: "AppFooter",
+  name: 'AppFooter',
   components: {
     FooterSocialShare,
     Column,
@@ -419,27 +435,28 @@ export default {
       showForm: false,
       submitted: false,
       endpoint:
-        (this.$config ? this.$config.public.apiURL : 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: "",
+        webform_id: 'page_feedback_form',
+        page_url: '',
+        was_the_information_on_this_page_helpful_: '',
+        message: '',
       },
-    };
+    }
   },
   computed: {
     updateDate() {
       // Change to remove hydration date
       return new Date(this.changedDate)
-        .toLocaleString("en-AU", {
-          timeZone: "Australia/Sydney",
+        .toLocaleString('en-AU', {
+          timeZone: 'Australia/Sydney',
         })
-        .split(",")[0];
+        .split(',')[0]
     },
     isMobile() {
-      return this.windowWidth < 768;
+      return this.windowWidth < 768
     },
     // Why send junk id
     // processID() {
@@ -448,73 +465,73 @@ export default {
   },
   watch: {
     $route() {
-      this.showForm = false;
-      this.submitted = false;
+      this.showForm = false
+      this.submitted = false
     },
     showForm: {
       handler: function () {
-        this.initialiseFeedback();
+        this.initialiseFeedback()
       },
     },
   },
   mounted() {
     this.$nextTick(() => {
-      window.addEventListener("resize", this.onResize);
-    });
-    this.onResize();
+      window.addEventListener('resize', this.onResize)
+    })
+    this.onResize()
   },
   beforeDestroy() {
-    window.removeEventListener("resize", this.onResize);
+    window.removeEventListener('resize', this.onResize)
   },
   methods: {
     initialiseFeedback() {
       if (!this.showForm) {
-        var rbY = document.getElementById("frYes");
-        rbY.checked = false;
-        var rbN = document.getElementById("frNo");
-        rbN.checked = false;
+        var rbY = document.getElementById('frYes')
+        rbY.checked = false
+        var rbN = document.getElementById('frNo')
+        rbN.checked = false
       }
     },
     setResponse(event) {
-      var answer = event.target.value;
-      this.response.was_the_information_on_this_page_helpful_ = answer;
-      this.response.page_url = window.location.href;
-      this.showForm = true;
-      this.fireGtagHelpful();
+      var answer = event.target.value
+      this.response.was_the_information_on_this_page_helpful_ = answer
+      this.response.page_url = window.location.href
+      this.showForm = true
+      this.fireGtagHelpful()
     },
     cancelFeedback() {
-      this.showForm = false;
+      this.showForm = false
     },
     async submitFeedback() {
       if (this.$gtm) {
         try {
-          const res = await this.$axios.post(this.endpoint, this.response);
+          const res = await this.$axios.post(this.endpoint, this.response)
           if (res.data && res.data.sid) {
-            this.submitted = true;
-            this.showForm = false;
-            this.fireGtagFeedback();
+            this.submitted = true
+            this.showForm = false
+            this.fireGtagFeedback()
           }
         } catch (e) {
           // eslint-disable-next-line no-console
-          console.error("Error submitting webform");
+          console.error('Error submitting webform')
         }
       } else {
-        this.submitted = true;
-        this.showForm = false;
+        this.submitted = true
+        this.showForm = false
       }
     },
     isSet(ans) {
-      return this.response.was_the_information_on_this_page_helpful_ === ans;
+      return this.response.was_the_information_on_this_page_helpful_ === ans
     },
     fireGtagHelpful() {
       const attrs = {
-        event: "custom.interaction.helpful",
+        event: 'custom.interaction.helpful',
         label: this.response.was_the_information_on_this_page_helpful_,
         //title: this.$store?.state?.page?.content?.title,
         title: this.$pageStore?.content?.title,
-      };
+      }
       if (this.$gtm) {
-        this.$gtm.push({ event: "custom.interaction.helpful", ...attrs });
+        this.$gtm.push({ event: 'custom.interaction.helpful', ...attrs })
       }
     },
     fireGtagFeedback() {
@@ -523,49 +540,49 @@ export default {
         title: this.$pageStore?.content?.title,
         label: this.response.was_the_information_on_this_page_helpful_,
         // processID: this.processID, why send GTM junk id
-      };
+      }
       if (this.$gtm) {
         this.$gtm.push({
-          event: "custom.interaction.helpful.feedback",
+          event: 'custom.interaction.helpful.feedback',
           ...attrs,
-        });
+        })
       }
     },
     backToTop() {
       if (this.$bus) {
-        this.$bus.$emit("scrollToTop");
+        this.$bus.$emit('scrollToTop')
       }
     },
     isAbsoluteUrl(uri) {
-      let r = new RegExp("^(?:[a-z]+:)?//", "i");
-      return r.test(uri);
+      let r = new RegExp('^(?:[a-z]+:)?//', 'i')
+      return r.test(uri)
     },
     subscribe() {
       window.location =
-        "https://comms.worksafe.vic.gov.au/link/id/zzzz5c2d405926ec7534Pzzzz4ff385a2d38d8616/page.html?prompt=1";
+        'https://comms.worksafe.vic.gov.au/link/id/zzzz5c2d405926ec7534Pzzzz4ff385a2d38d8616/page.html?prompt=1'
     },
     handleMenuItemClick(menuFooter, index) {
       // splice is needed for vue to pick up that changes to the footerMenu array and re-render the screen
       if (this.isMobile) {
         for (let i = 0; i < menuFooter.length; i++) {
-          let newMenuItem = menuFooter[i];
-          this.contactMenuIsOpen = false;
+          let newMenuItem = menuFooter[i]
+          this.contactMenuIsOpen = false
           if (i === index) {
-            newMenuItem.isOpen = !newMenuItem.isOpen;
+            newMenuItem.isOpen = !newMenuItem.isOpen
           } else {
-            newMenuItem.isOpen = false;
+            newMenuItem.isOpen = false
           }
-          menuFooter.splice(i, 1, newMenuItem);
+          menuFooter.splice(i, 1, newMenuItem)
         }
       }
     },
     handleContactItemClick(menuFooter) {
       if (this.isMobile) {
         for (let i = 0; i < menuFooter.length; i++) {
-          let newMenuItem = menuFooter[i];
-          this.contactMenuIsOpen = !this.contactMenuIsOpen;
-          newMenuItem.isOpen = false;
-          menuFooter.splice(i, 1, newMenuItem);
+          let newMenuItem = menuFooter[i]
+          this.contactMenuIsOpen = !this.contactMenuIsOpen
+          newMenuItem.isOpen = false
+          menuFooter.splice(i, 1, newMenuItem)
         }
       }
     },
@@ -574,14 +591,14 @@ export default {
         if (event.keyCode === 32 || event.keyCode === 13) {
           //splice is needed for vue to pick up that changes to the menuFooter array and re-render the screen
           for (let i = 0; i < menuFooter.length; i++) {
-            let newMenuItem = menuFooter[i];
-            this.contactMenuIsOpen = false;
+            let newMenuItem = menuFooter[i]
+            this.contactMenuIsOpen = false
             if (i === index) {
-              newMenuItem.isOpen = !newMenuItem.isOpen;
+              newMenuItem.isOpen = !newMenuItem.isOpen
             } else {
-              newMenuItem.isOpen = false;
+              newMenuItem.isOpen = false
             }
-            menuFooter.splice(i, 1, newMenuItem);
+            menuFooter.splice(i, 1, newMenuItem)
           }
         }
       }
@@ -590,26 +607,26 @@ export default {
       if (this.isMobile) {
         if (event.keyCode === 32 || event.keyCode === 13) {
           for (let i = 0; i < menuFooter.length; i++) {
-            let newMenuItem = menuFooter[i];
-            this.contactMenuIsOpen = !this.contactMenuIsOpen;
-            newMenuItem.isOpen = false;
-            menuFooter.splice(i, 1, newMenuItem);
+            let newMenuItem = menuFooter[i]
+            this.contactMenuIsOpen = !this.contactMenuIsOpen
+            newMenuItem.isOpen = false
+            menuFooter.splice(i, 1, newMenuItem)
           }
         }
       }
     },
     onResize() {
-      this.windowWidth = window.innerWidth;
-      let titles = document.getElementsByClassName("app-footer-menu__title");
+      this.windowWidth = window.innerWidth
+      let titles = document.getElementsByClassName('app-footer-menu__title')
       if (Array.isArray(titles)) {
         if (this.isMobile) {
           titles.forEach((t) => {
-            t.setAttribute("tabIndex", "0");
-          });
+            t.setAttribute('tabIndex', '0')
+          })
         } else {
           titles.forEach((t) => {
-            t.removeAttribute("tabIndex");
-          });
+            t.removeAttribute('tabIndex')
+          })
         }
       }
     },
@@ -617,18 +634,18 @@ export default {
       if (item.absolute) {
         if (this.$gtm) {
           this.$gtm.push({
-            event: "custom.interaction.outboundlink",
+            event: 'custom.interaction.outboundlink',
             category: item.title,
             label: item.absolute,
-          });
+          })
         }
-        window.open(item.absolute);
+        window.open(item.absolute)
       }
     },
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./styles";
+@import './styles';
 </style>

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

@@ -16,7 +16,7 @@ $app-menu-gold: #fecc56;
 $primary-color: $app-menu-gold;
 $app-menu-white: #ffffff;
 $app-menu-black: #191919;
-$app-menu-grey: lightgrey;
+$app-menu-grey: #f2f2f2;
 $app-menu-green: #356041;
 $app-menu-border-color: rgba(255, 255, 255, 0.3);
 // $app-menu-border-color: $app-menu-black;
@@ -24,8 +24,10 @@ $app-menu-border-color: rgba(255, 255, 255, 0.3);
 $app-header-background-colour: $app-menu-grey !default;
 $app-header-text-colour: $app-menu-black !default;
 $app-header-hover: $app-menu-gold !default;
-$app-header-active: $app-menu-yellow !default;
+$app-header-active: $app-menu-black !default;
 $app-subheader-text-colour: $app-menu-white !default;
+$app-header-active-text-colour: $app-menu-white !default;
+
 
 @if ($primary-color == #478157) {
   $app-header-background-colour: $app-menu-green !global;