@worksafevictoria/wcl7.5 1.9.0 → 1.11.0

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

@@ -39,8 +39,9 @@ const headerLinks = [
   }
 
 export default {
-  title: 'Website_Redesign/HomepageHeader',
+  title: 'Containers/HomepageHeader',
   component: HomepageHeader,
+  tags: ['autodocs'],
   argTypes: {
     fetchMenu: {
       control: 'function',
@@ -59,17 +60,4 @@ export default {
   }
 }
 
-const DefaultHH = (args) => ({
-  components: { HomepageHeader },
-  setup() {
-    return { args };
-  },
-  mounted() {
-    setTimeout(() => {
-      this.$refs.hh.renderMenu()
-    })
-  },
-  template: '<homepage-header v-bind="args" ref="hh" />'
-})
-
-export const Default = DefaultHH.bind({})
+export const New = {}

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

@@ -1,5 +1,3 @@
-<!-- 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>
@@ -22,8 +20,9 @@
               :md="7"
             >
               <carousel-component 
-                :carouselItems="this.slideList"
-                :storybook="this.isStorybook"
+                :carousel-items="slideList"
+                :storybook="isStorybook"
+                :is-paragraph="false"
               />
           </column>
           <column
@@ -56,7 +55,6 @@ 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',
@@ -66,7 +64,6 @@ export default {
     CarouselComponent,
     Row,
     Column,
-    // mockCarouselItems
   },
   props: {
     contentParser: {
@@ -76,7 +73,6 @@ export default {
    slideList: {
       type: Array,
       required: true,
-      // default: mockCarouselItems
     },
     isStorybook: {
       type: Boolean,

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

@@ -17,8 +17,6 @@
               <input
                 id="frYes"
                 type="radio"
-                :aria-checked="isSet('Yes') ? 'true' : 'false'"
-                role="radio"
                 name="feedback-radio"
                 value="Yes"
                 @change="setResponse($event)"
@@ -27,8 +25,6 @@
               <input
                 id="frNo"
                 type="radio"
-                :aria-checked="isSet('No') ? 'true' : 'false'"
-                role="radio"
                 name="feedback-radio"
                 value="No"
                 @change="setResponse($event)"
@@ -36,13 +32,11 @@
               <label for="frNo" class="option">No</label>
             </div>
             <div v-if="submitted">
-              <img class="feedback-tick" alt="" :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>
@@ -61,9 +55,8 @@
                   <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"
@@ -99,10 +92,7 @@
         </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"
@@ -111,9 +101,7 @@
               :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">
@@ -140,7 +128,7 @@
                   height="12"
                   width="17"
                   class="app-footer-menu__title__caret"
-                  alt=""
+                  alt="expand icon"
                 />
                 <img
                   v-show="menuItem.isOpen"
@@ -148,25 +136,33 @@
                   height="12"
                   width="17"
                   class="app-footer-menu__title__caret"
-                  alt=""
+                  alt="collapse icon"
                 />
 
                 <a
                   v-if="menuItem.absolute === menuItem.relative"
-                  :role="!menuItem.absolute ? 'button' : false"
-                  :href="menuItem.absolute"
-                  class="app-footer-menu__title--link dark"
-                  :class="!menuItem.absolute ? 'nolink' : false"
+                  :role="!menuItem.absolute ? 'button' : null"
+                  :href="menuItem.absolute || undefined"
+                  :class="[
+                    'app-footer-menu__title--link',
+                    'dark',
+                    { nolink: !menuItem.absolute },
+                  ]"
+                  :tabindex="!menuItem.absolute ? 0 : undefined"
                   target="_blank"
                   :aria-expanded="
-                    isMobile ? (menuItem.isOpen ? 'true' : 'false') : false
+                    isMobile && !menuItem.absolute
+                      ? menuItem.isOpen
+                        ? 'true'
+                        : 'false'
+                      : undefined
                   "
                   @click.prevent="handleAbsoluteClick(menuItem)"
                   ><h2>{{ menuItem.title }}</h2>
                 </a>
                 <nuxt-link
                   v-else
-                  :to="menuItem.relative"
+                  :to="menuItem.title"
                   class="app-footer-menu__title--link dark"
                 >
                   <h2>{{ menuItem.title }}</h2>
@@ -189,14 +185,14 @@
                       :href="subItem.absolute"
                       target="_blank"
                       class="app-footer-menu__item--link dark"
-                      @click.prevent="handleAbsoluteClick(subItem)"
+                      @click="handleAbsoluteClick(subItem)"
                       >{{ subItem.title
                       }}<img
                         :src="ExternalLink"
                         height="12"
                         width="12"
                         class="app-footer-menu__item--icon"
-                        alt="external link"
+                        alt="External link"
                       />
                     </a>
                     <nuxt-link
@@ -220,10 +216,11 @@
               >
                 <a
                   :aria-expanded="
-                    isMobile ? (contactMenuIsOpen ? 'true' : 'false') : false
+                    isMobile ? (contactMenuIsOpen ? 'true' : 'false') : undefined
                   "
                   role="button"
                   class="app-footer-menu__title--link dark nolink"
+                  tabindex="0"
                   ><h2>Contact</h2></a
                 >
                 <img
@@ -232,7 +229,7 @@
                   height="12"
                   width="17"
                   class="app-footer-menu__title__caret"
-                  alt=""
+                  alt="expand icon"
                 />
                 <img
                   v-show="contactMenuIsOpen"
@@ -240,12 +237,9 @@
                   height="12"
                   width="17"
                   class="app-footer-menu__title__caret"
-                  alt=""
+                  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="{
@@ -305,14 +299,13 @@
               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" />
@@ -348,6 +341,7 @@
                 height="24"
                 class="app-footer__main__subscribe--icon"
                 :glyph="ExternalLinkRaw"
+                icon-alt="External link icon"
               />
             </button>
           </column>
@@ -358,27 +352,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,
@@ -425,28 +419,27 @@ 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() {
@@ -455,73 +448,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() {
@@ -530,49 +523,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);
         }
       }
     },
@@ -581,14 +574,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);
           }
         }
       }
@@ -597,26 +590,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");
+          });
         }
       }
     },
@@ -624,18 +617,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/AppHeader/ModalSearch/index.vue

@@ -7,7 +7,13 @@
       @click="$emit('closed')"
     >
       Close menu
-      <img class="app-search__close-icon" width="22" height="18" :src="Close" />
+      <img
+        class="app-search__close-icon"
+        alt="search close icon"
+        width="22"
+        height="18"
+        :src="Close"
+      />
     </button>
     <form @submit.prevent>
       <label class="app-search__label font-weight-bold" for="app-search--search-input-box"

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

@@ -18,7 +18,7 @@ const contentParser = () => {
 export default {
   title: 'Global/AppHeader',
   component: AppHeader,
-  tags: ['autodocs'],
+  
   data() {
     return {
       appHeaderData
@@ -71,4 +71,4 @@ const DefaultContent = (args) => ({
   `
 })
 
-export const Default = DefaultContent.bind({})
+export const Former = DefaultContent.bind({})