@worksafevictoria/wcl7.5 1.9.0-beta.15 → 1.9.0-beta.17

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

@@ -6,39 +6,45 @@
     >
       <!-- Top menu -->
       <div class="logo">
-          <!-- Logo -->
-          <nuxt-link class="dark" to="/">
-            <img
-              :alt="
-                isWorkWell
-                  ? 'Work Well Victoria - Logo'
-                  : 'Work Safe Victoria - Logo'
-              "
-              width="127"
-              height="55"
-              :src="isWorkWell ? WorkWellLogo : WorkSafeLogo"
-            />
-          </nuxt-link>
-        <span class="logo__nav">
+        <!-- Mobile Menu -->
+        <div v-if="screen === 'mobile'" class="app-header__mobile-menu-container">
+          <a class="dark" role="button" @click.prevent="showMobileMenu">
+            <menu-icon class="menu-icon" />
+          </a>
+        </div>
+        <!-- Logo -->
+        <nuxt-link class="dark" to="/">
+          <img
+            :class="screen === 'mobile' ? 'LogoImgMobile' : 'LogoImg'"
+            :alt="
+              isWorkWell
+                ? 'Work Well Victoria - Logo'
+                : 'Work Safe Victoria - Logo'
+            "
+            :src="isWorkWell ? WorkWellLogo : WorkSafeLogo"
+          />
+        </nuxt-link>
+        <span :class="screen === 'mobile' ? 'logo__nav_mobile' : 'logo__nav'">
           <!-- Roles added for accessibility -->
           <table role="presentation" >
             <tbody role="presentation">
               <tr role="presentation">
-              <td>
+              <td :class="screen === 'mobile' ? 'td_mobile' : ''">
                 <!-- Language link -->
                 <nuxt-link
-                to="/languages"
-                @click.native="fireAnalytics('Choose your language', '/languages')"
-                title="Language"
-              >
-                <span v-if="!topLevelIconsOnly">Choose your language </span>
-                <img alt="Language Icon" width="15px" height="15px" :src=LanguageIcon />
-              </nuxt-link>
+                  :class="screen === 'mobile' ? 'mobile-link' : ''"
+                  to="/languages"
+                  @click.native="fireAnalytics('Choose your language', '/languages')"
+                  title="Language"
+                >
+                  <span v-if="screen !== 'mobile'">Choose your language </span>
+                  <img alt="Language Icon" width="15px" height="15px" :src=LanguageIcon />
+                </nuxt-link>
               </td>
-              <td>
+              <td :class="screen === 'mobile' ? 'td_mobile' : ''">
                 <!-- Contrast link -->
-                <a href="javascript:void(0)" @click="show = !show" @keyup.esc="show = !show" title="Contrast" ref="selectContrast">
-                  <span v-if="!topLevelIconsOnly">Adjust contrast</span> <img alt="Contrast Icon" width="15px" height="15px" :src=ContrastIcon />
+                <a href="javascript:void(0)" :class="screen === 'mobile' ? 'mobile-link' : ''" @click="show = !show" @keyup.esc="show = !show" title="Contrast" ref="selectContrast">
+                  <span v-if="screen !== 'mobile'">Adjust contrast</span> <img alt="Contrast Icon" width="15px" height="15px" :src=ContrastIcon />
                 </a>
                 <div
                   ref="contrastChoices"
@@ -61,22 +67,23 @@
                   </div>
                 </div>
               </td>
-              <td>
+              <td :class="screen === 'mobile' ? 'td_mobile' : ''">
                 <!-- Search link -->
                 <nuxt-link
+                  style="height: 40px;"
                   class="cta-button cta-button--text-only cta-button--slim"
                   to="/search"
                   title="Search"
-                  ><span v-if="!topLevelButtonIconsOnly">Search  &nbsp;</span> <img alt="Search Icon" width="15px" height="15px" :src=NavSearchIcon />
+                  ><span v-if="screen !== 'mobile'">Search  &nbsp;</span> <img alt="Search Icon" width="15px" height="15px" :src=NavSearchIcon />
                 </nuxt-link>
               </td>
-              <td>
+              <td :class="screen === 'mobile' ? 'td_mobile-last' : ''">
                 <!-- Login link -->
                 <nuxt-link
                   class="cta-button cta-button--text-only cta-button--slim cta-button--dark-no-filter"
                   to="/login"
                   title="Login"
-                  ><span v-if="!topLevelButtonIconsOnly">Login &nbsp;</span><span><img alt="Login Icon" width="15px" height="15px" :src=LoginLeft /></span>
+                  ><span v-if="screen !== 'mobile'">Login &nbsp;</span><span><img alt="Login Icon" width="15px" height="15px" :src=LoginLeft /></span>
                 </nuxt-link>
               </td>
             </tr>
@@ -85,7 +92,7 @@
         </span>
       </div>
       <!-- Bottom menu -->
-      <div class="app-header__wrap" @keyup.esc="closeMegaMenu">
+      <div class="app-header__wrap" :class="screen === 'mobile' ? 'app-header__wrap_mobile' : ''" @keyup.esc="closeMegaMenu">
         <div class="app-header__close-button mobile-close">
           <!-- Close Button -->
           <button
@@ -319,17 +326,6 @@
             </li>
           </ul>  
         </nav>
-        <!-- Mobile Menu -->
-        <div v-if="screen === 'mobile'" class="app-header__mobile-menu-container">
-          <ul id="mobileitems">
-            <li v-if="!isMobileMenuOpen">
-              <a class="dark" role="button" @click.prevent="showMobileMenu">
-                <span>Menu</span>
-                <menu-icon class="menu-icon" />
-              </a>
-            </li>
-          </ul>
-        </div>
       </div>
     </header>
   </div>
@@ -391,8 +387,6 @@ export default {
   data() {
     return {
       screen: null,
-      topLevelIconsOnly: false,
-      topLevelButtonIconsOnly: false,
       isMobileMenuOpen: false,
       isSecondLevelOpen: false,
       isThirdLevelOpen: false,
@@ -466,17 +460,6 @@ export default {
           this.isMobileMenuOpen = true
         }
       }
-     // added code to check if val < 760, when top menu should revert to icons, not labels.
-      if (val < 760) {
-        this.topLevelIconsOnly = true
-      } else {
-        this.topLevelIconsOnly = false
-      }
-      if (val < 500) {
-        this.topLevelButtonIconsOnly = true
-      } else {
-        this.topLevelButtonIconsOnly = false
-      }
     },
   },
   mounted() {

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

@@ -22,10 +22,9 @@
             float: none;
 
             li {
-              display: inline-block;
-              height: 62px;
-              width: 100%;
-              margin: 0;
+             height: 62px;
+             width: 100%;
+             margin: 0;
 
               a {
                 padding: 20px 5px;
@@ -47,7 +46,7 @@
 
                 &:hover,
                 &:focus {
-                  background: $app-header-active;
+                  background: $app-header-hover;
                   color: $app-menu-black;
                   border-bottom: none;
                   svg {
@@ -59,6 +58,7 @@
             }
           }
           .nav-item {
+           
             .sub-nav-container,
             .sub-nav {
               display: none;
@@ -264,6 +264,41 @@
 }
 
 .mobile-close {
-  top: 0px !important;
+  top: 10px !important;
+}
+
+.LogoImgMobile {
+  height: 40px;
+  width: auto;
+}
+
+.logo__nav-mobile {
+  display:inline-block;
+  margin-left: 10px;
+  margin-right: 0px;
+  width: 100%;
+  overflow-y:auto;
+}
+
+.td_mobile {
+    padding: 0px 5px !important;
+    height: 35px;
+    width: 35px;
+  }
+
+.td_mobile-last {
+ padding: 0px 0px 0px 5px !important;
+}
+
+.mobile-link {
+  height: 35px;
+  width: 35px;
+  background-color: #f2f2f2;
+  border: 1px solid #f2f2f2;
+  border-radius: 5px;
 }
 
+.app-header__wrap_mobile {
+  background: none;
+  height: 0px;
+}