@worksafevictoria/wcl7.5 1.9.0-beta.1 → 1.9.0-beta.11

package/src/components/Global/AppHeaderNew/ModalSearch/index.vue

@@ -7,12 +7,16 @@
       @click="$emit('closed')"
     >
       Close menu
-      <img class="app-search__close-icon" width="22" height="18" :src="Close" />
+      <img
+        class="app-search__close-icon"
+        width="22"
+        height="18"
+        :src="Close"
+        alt="search close icon"
+      />
     </button>
     <form @submit.prevent>
-      <label
-        class="app-search__label font-weight-bold"
-        for="app-search--search-input-box"
+      <label class="app-search__label font-weight-bold" for="app-search--search-input-box"
         >Search WorkSafe</label
       >
       <search
@@ -32,40 +36,40 @@
 </template>
 
 <script>
-import Close from '../../../../assets/icons/close.svg?url'
-import Search from '../../../SubComponents/Search/index.vue'
+import Close from "../../../../assets/icons/close.svg?url";
+import Search from "../../../SubComponents/Search/index.vue";
 
 export default {
-  name: 'ModalSearch',
+  name: "ModalSearch",
   components: { Search },
   props: {
     searchQuery: {
       type: String,
-      default: ''
+      default: "",
     },
     contentParser: {
       type: Function,
-      required: true
+      required: true,
     },
     googleSearchFlag: {
       type: String,
-      default: 'googlerest'
-    }
+      default: "googlerest",
+    },
   },
   data() {
     return {
       pageLimit: 20,
       pageNumber: 1,
       searchResults: null,
-      Close
-    }
+      Close,
+    };
   },
   mounted() {
-    this.$refs.searchInputBox.$el.querySelector('input').focus()
-  }
-}
+    this.$refs.searchInputBox.$el.querySelector("input").focus();
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-@import './styles';
+@import "./styles";
 </style>

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

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

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

@@ -2,7 +2,7 @@
   <div>
     <header
       v-if="headerMenu"
-      :class="'app-header' + (this.screen === 'mobile' ? ' ' + 'isMobile' : '')"
+      :class="'app-header' + (screen === 'mobile' ? ' ' + 'isMobile' : '')"
     >
       <!-- Top menu -->
       <div class="logo">
@@ -33,10 +33,11 @@
               </nuxt-link>
               </td>
               <td>
-                <a href="javascript:void(0)" @click="show = !show" title="Contrast">
-                  <span v-if="!topLevelIconsOnly">Adjust control</span> <img alt="Contrast Icon" width="20px" height="20px" :src=ContrastIcon />
+                <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="20px" height="20px" :src=ContrastIcon />
                 </a>
                 <div
+                  ref="contrastChoices"
                   class="flex-container"
                   v-if="show"
                 >
@@ -82,7 +83,7 @@
         <div class="app-header__close-button mobile-close">                 
           <button
             v-if="
-              (isMobileMenuOpen && this.screen === 'mobile' && !isSecondLevelOpen)
+              (isMobileMenuOpen && screen === 'mobile' && !isSecondLevelOpen)
             "
             ref="closeMenuButton"
             class="dark"
@@ -94,17 +95,17 @@
         </div>
         <div
           v-if="
-            (!isSecondLevelOpen && this.screen === 'desktop') ||
-            (!isMobileMenuOpen && this.screen === 'mobile')
+            (!isSecondLevelOpen && screen === 'desktop') ||
+            (!isMobileMenuOpen && screen === 'mobile')
           "
           class="app-header__app-branding"
         >
           
         </div>
         <nav
-          v-if="isMobileMenuOpen || this.screen === 'desktop'"
+          v-if="isMobileMenuOpen || screen === 'desktop'"
           :class="{
-            'styled-scrollbar': this.screen === 'mobile' && !isSecondLevelOpen,
+            'styled-scrollbar': screen === 'mobile' && !isSecondLevelOpen,
           }"
         >
           <ul class="app-header__nav-menu" id="navitems">
@@ -128,7 +129,7 @@
               >
                 <span>{{ firstLevelLink.title }}</span>
 
-                <caret-down v-if="this.screen === 'desktop'" class="caret-down" />
+                <caret-down v-if="screen === 'desktop'" class="caret-down" />
                 <caret-right
                   v-else-if="!isSecondLevelOpen && !isThirdLevelOpen"
                   class="caret-right"
@@ -153,7 +154,7 @@
               <div v-if="isSecondLevelOpen" class="sub-nav-container">
                 <div class="app-header__close-button">
                   <button
-                  v-if="this.screen === 'mobile'"
+                  v-if="screen === 'mobile'"
                     ref="menuBackButton"
                     class="dark"
                     @click="mobileGoBack"
@@ -164,8 +165,8 @@
                   </button>
                   <button
                     v-if="
-                      (isSecondLevelOpen && this.screen === 'desktop') ||
-                      (isMobileMenuOpen && this.screen === 'mobile')
+                      (isSecondLevelOpen && screen === 'desktop') ||
+                      (isMobileMenuOpen && screen === 'mobile')
                     "
                     ref="closeMenuButton"
                     class="dark"
@@ -177,13 +178,13 @@
                 </div>
                 <div
                   class="sub-nav-container__inner"
-                  :class="{ 'styled-scrollbar': this.screen === 'desktop' }"
+                  :class="{ 'styled-scrollbar': screen === 'desktop' }"
                 >
                   <div
                     class="sub-nav-container__wrap"
                     :class="{
                       'styled-scrollbar':
-                        this.screen === 'mobile' && isSecondLevelOpen,
+                        screen === 'mobile' && isSecondLevelOpen,
                     }"
                   >
                     <div
@@ -227,7 +228,7 @@
                           >
                             <span>{{ secondLevelLink.title }}</span>
                             <caret-right
-                              v-if="!(this.screen === 'mobile' && isThirdLevelOpen)"
+                              v-if="!(screen === 'mobile' && isThirdLevelOpen)"
                               class="caret-right"
                             />
                           </a>
@@ -313,7 +314,7 @@
 
             <!-- More action button in bottom menu -->
 
-            <li class="nav-item" id="moreDesktop" v-if="this.screen === 'desktop' && this.moreList.length > 0">
+            <li class="nav-item" id="moreDesktop" v-if="screen === 'desktop' && this.moreList.length > 0">
               <a class="dark" role="button" @click="showMore = !showMore">
                 <span>More</span>
                 <caret-down class="caret-down" style="padding-top: 4px; height: 16px; width: 16px"/>
@@ -374,7 +375,7 @@
                     <div v-if="isSecondLevelOpen" class="sub-nav-container">
                       <div class="app-header__close-button">
                         <button
-                        v-if="this.screen === 'mobile'"
+                        v-if="screen === 'mobile'"
                           ref="menuBackButton"
                           class="dark"
                           @click="mobileGoBack"
@@ -385,8 +386,8 @@
                         </button>
                         <button
                           v-if="
-                            (isSecondLevelOpen && this.screen === 'desktop') ||
-                            (isMobileMenuOpen && this.screen === 'mobile')
+                            (isSecondLevelOpen && screen === 'desktop') ||
+                            (isMobileMenuOpen && screen === 'mobile')
                           "
                           ref="closeMenuButton"
                           class="dark"
@@ -398,11 +399,11 @@
                       </div>
                       <div
                         class="sub-nav-container__inner"
-                        :class="{ 'styled-scrollbar': this.screen === 'desktop' }"
+                        :class="{ 'styled-scrollbar': screen === 'desktop' }"
                       >
                         <div
                           class="sub-nav-container__wrap"
-                          :class="{'styled-scrollbar': this.screen === 'mobile' && isSecondLevelOpen,}"
+                          :class="{'styled-scrollbar': screen === 'mobile' && isSecondLevelOpen,}"
                         >
                           <div
                             class="selected-title"
@@ -445,7 +446,7 @@
                                 >
                                   <span>{{ secondLevelLink.title }}</span>
                                   <caret-right
-                                    v-if="!(this.screen === 'mobile' && isThirdLevelOpen)"
+                                    v-if="!(screen === 'mobile' && isThirdLevelOpen)"
                                     class="caret-right"
                                   />
                                 </a>
@@ -535,14 +536,14 @@
                 
               </div>
             </li>
-            <li v-if="isWorkWell && this.screen === 'desktop'" class="nav-item hide">
+            <li v-if="isWorkWell && screen === 'desktop'" class="nav-item hide">
               <a href="#" class="dark" @focus="resetTab"></a>
             </li>
           </ul>
  
           
         </nav>
-        <div v-if="this.screen === 'mobile'" class="app-header__mobile-menu-container">
+        <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">
@@ -661,6 +662,9 @@ export default {
       selectedValue: null
     }
   },
+
+  emits: ['handleContrast'],
+
   computed: {
     showSecondLevelCaret() {
       return (
@@ -709,6 +713,16 @@ export default {
     window.addEventListener('resize', this.updateMoreMenu())
     })
     this.updateMoreMenu()
+    let selectedMode = document
+      .getElementById('contrastStyle')
+      ?.getAttribute('data-sel')
+    this.selectedValue = selectedMode ?? 'default'
+    window.addEventListener('click', this.handleOutsideClick)
+    window.addEventListener('scroll', this.resetContrast)
+  },
+  beforeDestroy() {
+    window.removeEventListener('click', this.handleOutsideClick)
+    window.removeEventListener('scroll', this.resetContrast)
   },
   destroyed() {
     window.removeEventListener('resize', this.screenWidth),
@@ -1112,8 +1126,18 @@ export default {
     goToLocation(path) {
       this.$router.push(path)
     },
+    handleOutsideClick(event) {
+      const contentChoices = this.$refs.contrastChoices
+      const contentSelect = this.$refs.selectContrast
+
+      // Check if the click is outside the content - both radios and Adjust contrast link
+      if ((contentChoices && !contentChoices.contains(event.target)) && (contentSelect && !contentSelect.contains(event.target))) {
+        this.show = !this.show
+      }
+    },
     handleContrast(event) {
       const selMode = event.target.value
+      this.selectedValue = selMode
       // the css we are going to inject
       let cssVar = ''
       if (selMode === 'high_contrast') {
@@ -1165,6 +1189,11 @@ export default {
       style.setAttribute('data-sel', selMode) // Set a data attribute on the style element
       // panel collapsing after making selection
       this.show = !this.show
+    },
+    resetContrast() {
+      if (this.show) {
+        this.show = !this.show
+      }
     }
   },
 }

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

@@ -246,10 +246,7 @@
 
       &:last-of-type {
         > a {
-          svg {
-            height: 23px;
-            width: 23px;
-          }
+          
           & > span {
             margin-right: 10px;
             @media screen and (max-width: 1010px) and (min-width: 981px) {

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

@@ -3,19 +3,19 @@
     <button class="btbButton" @click="backToTop">
       <span>Back to top</span>
       <span class="btbButton--iconContainer">
-        <icon :glyph="ChevUp" :width="24" :height="16" />
+        <icon :glyph="ChevUp" :width="24" :height="16" icon-alt="Back to top icon" />
       </span>
     </button>
   </div>
 </template>
 
 <script>
-import Icon from '../../SubComponents/Icon/index.vue'
-import ChevUp from '../../../assets/icons/chev-up.svg?raw'
-import { debounce } from 'lodash-es'
+import Icon from "../../SubComponents/Icon/index.vue";
+import ChevUp from "../../../assets/icons/chev-up.svg?raw";
+import { debounce } from "lodash-es";
 
 export default {
-  name: 'BackToTop',
+  name: "BackToTop",
   components: {
     Icon,
   },
@@ -29,39 +29,39 @@ export default {
     return {
       ChevUp,
       showBackToTop: false,
-    }
+    };
   },
   computed: {
     showButton() {
       if (this.storybook) {
-        return true
+        return true;
       } else {
-        return this.showBackToTop
+        return this.showBackToTop;
       }
     },
   },
   mounted() {
-    this.handleDebouncedScroll = debounce(this.showHideBtbBtn, 100)
-    window.addEventListener('scroll', this.showHideBtbBtn)
+    this.handleDebouncedScroll = debounce(this.showHideBtbBtn, 100);
+    window.addEventListener("scroll", this.showHideBtbBtn);
   },
   beforeDestroy() {
-    window.removeEventListener('scroll', this.showHideBtbBtn)
+    window.removeEventListener("scroll", this.showHideBtbBtn);
   },
   methods: {
     backToTop() {
       if (!this.storybook) {
-        window.scrollTo(0, 0)
+        window.scrollTo(0, 0);
       } else {
-        console.log('Is storybook, so not going back to top')
+        console.log("Is storybook, so not going back to top");
       }
     },
     showHideBtbBtn() {
-      this.showBackToTop = window.scrollY > window.innerHeight / 2
+      this.showBackToTop = window.scrollY > window.innerHeight / 2;
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import './styles.scss';
+@import "./styles.scss";
 </style>

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

@@ -20,7 +20,7 @@ export default {
         <br>
         <h2>Image</h2>
         <p>This is an image</p>
-        <img src='https://picsum.photos/900/600/?image=26' width="400" height="200"/>
+        <img src='https://picsum.photos/900/600/?image=26' alt="photo image" width="400" height="200"/>
         <br>
         <br>
         <h2>Background Image</h2>