@worksafevictoria/wcl7.5 1.10.0 → 1.12.0

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;
+}

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

@@ -4,7 +4,7 @@
   color: $app-menu-white;
   z-index: 27;
   position: relative;
-  padding: 10px;
+  padding: 0px 10px;
   width: 100%;
   font-size: 14px;
 
@@ -14,7 +14,7 @@
     overflow-y: scroll;
     background: $app-header-background-colour;
     border-radius: 3px;
-    height: 70px;
+    height: 44px;
     padding: 0px 15px;
     display: table;
     width: 100%;
@@ -29,12 +29,17 @@
   .isActiveParent {
     background-color: $app-header-active;
     border: $app-header-active;
+   
 
     > a > span {
-      // border-bottom: 3px solid $app-header-active;
       background-color: $app-header-active;
+      color: $app-header-active-text-colour;
     }
-    }
+
+    :focus {
+        outline: none !important;
+      }
+  }
   .isActiveChild {
     > a {
       background: $app-header-active;
@@ -96,7 +101,7 @@
 
     li {
       display: inline;
-      padding: 0;
+      padding: 12px;
       margin-right: 18px;
 
       @media screen and (max-width: 1065px) and (min-width: 981px) {
@@ -197,7 +202,7 @@
         display: none;
         position: fixed;
         background: $app-menu-black;
-        top: 165px;
+        top: 128px;
         left: 10px;
         right: 10px;
         bottom: 10px;
@@ -208,18 +213,6 @@
           position: relative;
         }
 
-        &__innermore {
-          overflow-x: auto;
-          height: max-content;
-          left: 10px;
-          right: 10px;
-          top: 165px;
-          position: fixed;
-          padding-top: 15px !important;
-          background-color: $app-menu-black !important;
-          border-radius: 3px;
-        }
-
         &__wrap {
           position: relative;
           margin: 0 auto;
@@ -249,9 +242,9 @@
           
           & > span {
             margin-right: 10px;
-            @media screen and (max-width: 1010px) and (min-width: 981px) {
-              margin-right: 5px;
-            }
+            // @media screen and (max-width: 1010px) and (min-width: 981px) {
+            //   margin-right: 5px;
+            // }
           }
         }
       }
@@ -335,21 +328,6 @@
     }
   }
 
-  //
-  // Search Container
-  //
-  .search-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: $app-menu-white;
-    color: $app-header-background-colour;
-    bottom: 0;
-    overflow-y: scroll;
-    z-index: 1;
-  }
-
   .styled-scrollbar {
     overflow-y: scroll;
     white-space: normal !important;
@@ -377,12 +355,6 @@
   }
 }
 
-.more-menu {
-  height: 56px;
-  vertical-align: middle;
-  padding: 0px 10px !important;
-}
-
 .skip-link {
   @include visually-hidden;
   color: $app-menu-black;
@@ -411,6 +383,7 @@
   display: flex;
   align-items: center;
   margin-right: 0%;
+  background-color: white;
 
   &__nav {
     display:inline-block;
@@ -420,10 +393,18 @@
     text-align: right;
     font-weight: bold;
     overflow-y:auto;
+
+    a:focus {
+      border: 1px solid #BABABA !important;
+      border-radius: 8px;
+      outline: none !important;
+    }
   }
+
   a {
     color: black;
     text-decoration: none;
+    padding: 10px;
     
     &.router-link-exact-active {
       span {
@@ -431,6 +412,7 @@
       }
     }
   }
+  
   table {
     display: inline-block;
   }
@@ -438,6 +420,12 @@
     padding: 10px;
   }
 }
+
+.LogoImg {
+  height: 55px;
+  width: auto;
+}
+
 .semi-circle {
   display:block;
   width: 20px;
@@ -587,7 +575,6 @@
   }
 
   &--box {
-    // position: relative;
     display: none;
 
     &.clicked {
@@ -603,10 +590,18 @@
       text-align: left;
       position: fixed;
       z-index: 1000;
+
+      label {
+        margin-bottom: 5px !important;
+        color:black
+      }
+      .last-radio {
+        margin-bottom: 0 !important;
+      }
     }
     label {
       display: block;
-      padding: 6px 0;
+      padding: 10px 0;
 
       input[type='radio'] {
         border: 2px solid #bebebe;
@@ -634,6 +629,23 @@
           }
         }
       }
-    }
+    }  
+  }
+}
+
+.flex-container {
+  margin-left: -5px;
+}
+
+.flex-item {
+  border: 1px solid;
+  border-color: #BABABA;
+  padding: 10px;
+  margin: 7px 5px 5px;
+  border-radius: 8px;
+
+  input[type="radio"] {
+    accent-color: black;
+    margin-right: 5px;
   }
 }

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

@@ -2,19 +2,23 @@
   <div>
     <row v-if="!loading" class="wcl-directory-filters">
       <column v-if="bundle" md="4" sm="6">
-        <label class="visually-hidden" for="search-directory"
+        <!-- Hidden label for screen readers -->
+        <label class="col-form-label visually-hidden" for="search-directory"
           >Search by keyword (Typed keyword automatically filters below
           results)</label
         >
-        <b-form-input
+        <!-- Search Input uses aria-label -->
+        <BFormInput
           id="search-directory"
           v-model="searchQuery"
           class="search"
           autocomplete="off"
           placeholder="Keyword"
           debounce="500"
+          aria-label="Search by keyword (Typed keyword automatically filters below
+          results)"
           :style="`background-image: url(${searchIcon})`"
-        ></b-form-input>
+        ></BFormInput>
       </column>
       <column v-if="bundle === 'isp'" md="4" sm="6">
         <form-address-postcode
@@ -28,7 +32,9 @@
         />
       </column>
       <span class="d-none">{{ filters }}</span>
-      <span class="d-none">{{ filters.taxonomies.map(taxonomy => taxonomy.name).join(', ') }}</span>
+      <span class="d-none">{{
+        filters.taxonomies.map((taxonomy) => taxonomy.name).join(', ')
+      }}</span>
       <column
         :md="!bundle ? 12 : bundle === 'isp' ? 4 : 8"
         :sm="!bundle ? 12 : bundle === 'isp' ? 6 : 12"
@@ -71,38 +77,38 @@ export default {
     SingleTaxonomy,
     FormAddressPostcode,
     FilterButton,
-    BFormInput
+    BFormInput,
   },
   props: {
     filters: {
       type: Object,
-      required: true
+      required: true,
     },
     bundle: {
       type: String,
-      default: ''
+      default: '',
     },
     results: {
       type: Number,
-      required: true
+      required: true,
     },
     isFiltering: {
       type: Boolean,
-      required: false
-    }
+      required: false,
+    },
   },
   data() {
     return {
       searchQuery: '',
       loading: true,
       hideReset: true,
-      searchIcon
+      searchIcon,
     }
   },
   computed: {
     baseURL() {
       return window ? window.location.origin : ''
-    }
+    },
   },
   watch: {
     searchQuery() {
@@ -112,7 +118,7 @@ export default {
         this.hideReset = false
       }
       this.$emit('onSearch', this.searchQuery)
-    }
+    },
   },
   mounted() {
     // wait for hydration,
@@ -125,9 +131,9 @@ export default {
       const allFiltersUnselected = Object.values(this.$refs).every(
         (taxonomy) => {
           return Object.values(taxonomy[0].selectedFilters).every(
-            (filter) => filter.filter((item) => !item.preselected).length === 0
+            (filter) => filter.filter((item) => !item.preselected).length === 0,
           )
-        }
+        },
       )
       if (allFiltersUnselected && !this.searchQuery) {
         this.hideReset = true
@@ -147,8 +153,8 @@ export default {
       })
       this.searchQuery = ''
       this.$emit('onReset')
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>
@@ -165,7 +171,7 @@ export default {
     background-position: 96% 12px;
     margin-bottom: 16px;
     transition: none;
-    background-image: url('./../../../assets/icons/search.svg')
+    background-image: url('./../../../assets/icons/search.svg');
   }
   &__filterButton {
     display: inline-block;