@worksafevictoria/wcl7.5 1.8.0 → 1.9.0-beta.10

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>

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

@@ -12,14 +12,8 @@
         : false
     "
   >
-    <row
-      v-if="type === 'hero'"
-      class="wcl-hero-header__wrap wcl-hero-header__showmore"
-    >
-      <container
-        class="wcl-hero-header__content-wrapper__content"
-        :class="{ rtl }"
-      >
+    <row v-if="type === 'hero'" class="wcl-hero-header__wrap wcl-hero-header__showmore">
+      <container class="wcl-hero-header__content-wrapper__content" :class="{ rtl }">
         <row>
           <column class="wcl-hero-header__content-wrapper__content-col">
             <div>
@@ -28,7 +22,12 @@
                 class="btn btn-link wcl-hero-header__showmore--link"
                 @click="showMore"
               >
-                <icon width="16px" height="10.61px" :glyph="CaretDown" />
+                <icon
+                  width="16px"
+                  height="10.61px"
+                  :glyph="CaretDown"
+                  icon-alt="expand icon"
+                />
                 <span class="wcl-hero-header__showmore--text">Show more</span>
               </button>
             </div>
@@ -38,18 +37,14 @@
     </row>
     <row class="wcl-hero-header__wrap">
       <div class="wcl-hero-header__content-wrapper">
-        <container
-          class="wcl-hero-header__content-wrapper__content"
-          :class="{ rtl }"
-        >
+        <container class="wcl-hero-header__content-wrapper__content" :class="{ rtl }">
           <row>
             <column
               :xs="generateGridValue(type)"
               class="wcl-hero-header__content-wrapper__content-col"
               :md="7"
               :class="{
-                [`wcl-hero-header__content-wrapper__content-col--split`]:
-                  $slots.side,
+                [`wcl-hero-header__content-wrapper__content-col--split`]: $slots.side,
               }"
             >
               <breadcrumb
@@ -64,10 +59,7 @@
                 :content="strippedTitle"
                 class="wcl-hero-header__title"
               />
-              <div
-                v-if="subTitle || $slots.description"
-                class="header-rich-text-wrap"
-              >
+              <div v-if="subTitle || $slots.description" class="header-rich-text-wrap">
                 <rich-text
                   v-if="subTitle"
                   :content="subTitle"
@@ -120,9 +112,7 @@
       <column
         v-if="type === 'collection' && showMask"
         :sm="'7'"
-        :style="
-          image && image.url ? `background-image:url(${image.url})` : false
-        "
+        :style="image && image.url ? `background-image:url(${image.url})` : false"
         class="wcl-hero-header__right type-collection"
         :class="{ 'rtl-flip': rtl }"
         :offset-sm="rtl ? 0 : 5"
@@ -131,6 +121,7 @@
           <img
             src="../../../assets/images/hero-header-mask.png"
             role="presentation"
+            alt="hero header mask"
           />
         </div>
       </column>
@@ -143,9 +134,7 @@
         :class="{ 'rtl-flip': rtl }"
         :offset-md="rtl ? 0 : 7"
         :offset-xs="rtl ? 0 : 7"
-        :style="
-          image && image.url ? `background-image:url(${image.url})` : false
-        "
+        :style="image && image.url ? `background-image:url(${image.url})` : false"
       >
         &nbsp;
       </column>
@@ -155,19 +144,19 @@
   </container>
 </template>
 <script>
-import SocialShare from './../SocialShare/index.vue'
-import Container from './../../Containers/Container/index.vue'
-import Row from './../../Containers/Row/index.vue'
-import Column from './../../Containers/Column/index.vue'
-import Breadcrumb from './../../SubComponents/Breadcrumb/index.vue'
-import CtaButton from './../../SubComponents/CtaButton/index.vue'
-import Icon from './../../SubComponents/Icon/index.vue'
-import HeroHeaderChevron from './../../../assets/images/hero-header-chevron.svg?component'
-import CaretDown from './../../../assets/icons/chev-down-white.svg?url'
-import RichText from './../../Paragraphs/RichText/index.vue'
+import SocialShare from "./../SocialShare/index.vue";
+import Container from "./../../Containers/Container/index.vue";
+import Row from "./../../Containers/Row/index.vue";
+import Column from "./../../Containers/Column/index.vue";
+import Breadcrumb from "./../../SubComponents/Breadcrumb/index.vue";
+import CtaButton from "./../../SubComponents/CtaButton/index.vue";
+import Icon from "./../../SubComponents/Icon/index.vue";
+import HeroHeaderChevron from "./../../../assets/images/hero-header-chevron.svg?component";
+import CaretDown from "./../../../assets/icons/chev-down-white.svg?url";
+import RichText from "./../../Paragraphs/RichText/index.vue";
 
 export default {
-  name: 'HeroHeader',
+  name: "HeroHeader",
   components: {
     Container,
     Row,
@@ -182,15 +171,15 @@ export default {
   props: {
     type: {
       type: String,
-      default: 'default',
+      default: "default",
     },
     title: {
       type: String,
-      default: '',
+      default: "",
     },
     description: {
       type: String,
-      default: '',
+      default: "",
     },
     image: {
       type: Object,
@@ -234,33 +223,33 @@ export default {
       socialShareToggle: false,
       HeroHeaderChevron,
       CaretDown,
-    }
+    };
   },
   computed: {
     generatedClass() {
-      let c = `wcl-hero-header type-${this.type}`
+      let c = `wcl-hero-header type-${this.type}`;
       if (this.bgColor) {
-        c = c + ' -with-bg'
+        c = c + " -with-bg";
       }
-      return c
+      return c;
     },
     subTitle() {
-      let content = undefined
+      let content = undefined;
       if (this.description) {
-        if (typeof this.description === 'string') {
-          content = this.description
-        } else if (typeof this.description === 'object') {
-          content = this.description.processed
+        if (typeof this.description === "string") {
+          content = this.description;
+        } else if (typeof this.description === "object") {
+          content = this.description.processed;
         }
       }
-      if (content && !content.startsWith('<') && !this.tag?.startsWith('h')) {
-        content = `<p class="intro">${content}</p>`
+      if (content && !content.startsWith("<") && !this.tag?.startsWith("h")) {
+        content = `<p class="intro">${content}</p>`;
       }
-      return content
+      return content;
     },
     strippedTitle() {
-      if (this.type === 'hero' && this.title.length > 122) {
-        return this.title.slice(0, 122) + '...'
+      if (this.type === "hero" && this.title.length > 122) {
+        return this.title.slice(0, 122) + "...";
       }
       // Will reintroduce if business requirement
       // if (this.title?.includes('.')) {
@@ -269,7 +258,7 @@ export default {
       //     return sentences.map((sentence) => sentence.trim()).join('.<br/>')
       //   }
       // }
-      return this.title
+      return this.title;
     },
     // Will reintroduce if business requirement
     //   strippedDescription() {
@@ -282,57 +271,57 @@ export default {
   },
   mounted() {
     if (this.$bus) {
-      this.$bus.$on('scrollToTop', () => {
+      this.$bus.$on("scrollToTop", () => {
         setTimeout(() => {
-          const title = this.$refs.title
+          const title = this.$refs.title;
           if (title) {
-            title.$el.setAttribute('tabindex', 0)
-            title.$el.focus()
+            title.$el.setAttribute("tabindex", 0);
+            title.$el.focus();
           }
-        }, 500)
-      })
+        }, 500);
+      });
     }
   },
   beforeDestroy() {
     if (this.$bus) {
-      this.$bus.$off('scrollToTop')
+      this.$bus.$off("scrollToTop");
     }
   },
   methods: {
     generateGridValue(type) {
       switch (type) {
         //the prop type default
-        case 'default':
-          return '6'
-        case 'image':
-          return '6'
+        case "default":
+          return "6";
+        case "image":
+          return "6";
         default:
-          return '7'
+          return "7";
       }
     },
     showMore(ev) {
       if (ev?.target?.scrollIntoView) {
         ev.target.scrollIntoView({
-          behavior: 'smooth',
+          behavior: "smooth",
           alignToTop: true,
-          block: 'start',
-        })
+          block: "start",
+        });
       }
     },
     fireGTM() {
       let attrs = {
         label: this.cta.uri,
         document_title: this.cta.filename,
-      }
+      };
       if (this.$gtm) {
-        this.$gtm.push({ event: 'custom.interaction.download', ...attrs })
+        this.$gtm.push({ event: "custom.interaction.download", ...attrs });
       }
     },
   },
-}
+};
 </script>
 <style lang="scss" scoped>
-@import './styles';
+@import "./styles";
 
 .wysiwyg {
   :deep(.cta-button:last-child) {