@worksafevictoria/wcl7.5 1.13.0 → 1.14.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.13.0",
+  "version": "1.14.0-beta.1",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

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

@@ -1,26 +1,32 @@
 <template>
   <div>
-    <b-carousel
+    <BCarousel
       id="carousel-1"
       :class="{carouselPara: isParagraph}"
       v-model="slide"
       interval="0"
       controls
       indicators
+      label-indicators="Select a slide to display"
       keyboard
       :fade="true"
       background="#ababab"
+      img-width="100%"
+      img-height="auto"
     >
-      <b-carousel-slide
+      <BCarouselSlide
         v-for="item in filteredCarouselItems"
         :key="item.id"
         :img-src="getImageURL(item.imageURL)"
         :img-alt="item.imageAlt"
         @click.prevent="handleClick(item.linkURL)"
       >
-      <h4>{{ item.title }}</h4>
-      </b-carousel-slide>
-    </b-carousel>
+        <span 
+          :class="carousel-caption" 
+          :aria-label="item.title ? item.title : 'No caption available'"
+          :style="item.title === null || item.title === '' ? 'height: 32px;' : null">{{ item.title }}</span>
+      </BCarouselSlide>
+    </BCarousel>
   </div>
 </template>
 
@@ -113,29 +119,30 @@ methods: {
 <style>
   .carousel {
     position: relative;
-    padding-bottom: 7rem;
-    max-width: 540px;
+    margin-bottom: 10px;
   }
 
   .carousel-inner {
-    overflow: visible;
+    border-radius: 8px  ;
+  } 
+/* Introduced changes to make image responsive */
+  .carousel img {
+    object-fit: cover;
+    max-height: 392px;
+    height: auto;
+    width: 100%;
   }
 
   .carousel-indicators {
-    padding-bottom: 3rem;
-    float: right;
-    right: 2% !important;
-    width: 20%;
-    justify-content: end;
-    margin-left: 80%;
-    margin-right: 0;
+    justify-content: end !important;
+    margin-right: 10px !important;
   }
 
   .carousel-indicators button {
     width: 10px !important;
     height: 10px !important;
     border-radius: 50% !important;
-    background-color: black !important;
+    background-color: yellow !important;
   }
 
   .carousel-indicators button:focus,
@@ -145,17 +152,24 @@ methods: {
   }
 
   .carousel-caption {
-    color: black;
-    top: 100%;
-    left: 0;
-    right: 20%;
-    text-align: left;
-    text-decoration: underline;
+    display: flex;
+    font-size: 24px;
+    font-weight: normal;
+    flex-direction: column;
+    align-items: flex-start; 
+    text-align: left !important;
+    width: 100%;
+    color: white;
+    background-color: black;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    padding: 1rem !important;
   }
 
   .carousel-control-next,
   .carousel-control-prev {
-    bottom: 7rem;
+    bottom: 4rem;
   }
 
   .carousel-control-prev:focus,
@@ -168,16 +182,19 @@ methods: {
 
   .carousel-control-prev-icon,
   .carousel-control-next-icon {
-    height: 50px !important;
-    width: 50px !important;
-    outline:none !important;
+    height: 60px !important;
+    width: 60px !important;
+  }
+
+  .carousel-item {
+    position: relative;
   }
 
   .carouselPara {
     margin-left: auto;
     margin-right: auto;
-    width: 75%;
-    height: auto;
+    height: 50%;
+    width:50%;
   }
 
 </style>

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

@@ -38,16 +38,7 @@
           :stretch="true"
           >{{ link.text }}</cta-button
         >
-        <cta-button
-          class="iebtn"
-          url="/choose-your-language"
-          type="dark"
-          :stretch="true"
-          :glyph="earthIcon"
-          :is-centred="false"
-          >Choose your language</cta-button
-        >
-      </div>
+     </div>
     </template>
   </hero-header>
 </template>
@@ -86,7 +77,7 @@ export default {
 
 .homepage-header {
   border-bottom: none !important;
-
+  
   :deep(.wysiwyg) {
     h1 {
       @media screen and (max-width: 390px) {

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

@@ -1,6 +1,7 @@
 import HomepageHeader from './index.vue'
 import { mockCarouselItems } from '../../../mock/carousel-items'
 
+// Introduced an additional headerLink
 
 const headerLinks = [
     {
@@ -22,6 +23,10 @@ const headerLinks = [
     {
       text: 'Pay or renew your insurance',
       path: '/pay-or-renew-your-workcover-insurance-premium'
+    },
+    {
+      text: 'Contact Worksafe',
+      path: '/contact-worksafe'
     }
   ]
 

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

@@ -13,11 +13,10 @@
       
     <div class="homepage-header__content-wrapper">
       <container class="homepage-header__content-wrapper__content">
-        <row>
+        <row id="header-row">
+          <!-- changes made to bootstrap grid breakpoints -->
           <column
-              class="homepage-header__content-wrapper__content-col col-12 col-md-7 homepage-header__content-wrapper__content-col--split wcl-rich-text--ltr"
-              :xs="7"
-              :md="7"
+              class="homepage-header__content-wrapper__content-col col-12 col-md-7 col-lg-8 homepage-header__content-wrapper__content-col--split wcl-rich-text--ltr"
             >
               <carousel-component 
                 :carousel-items="slideList"
@@ -25,10 +24,9 @@
                 :is-paragraph="false"
               />
           </column>
-          <column
-              md="4"
-              :offset-md="1"
-              class="homepage-header__side col-md-4 offset-md-1"
+          <column  
+              id="header-links"
+              class="homepage-header__side col-12 col-md-5 col-lg-4"
             >
               <div>
                 <cta-button
@@ -36,8 +34,9 @@
                   :key="i"
                   class="iebtn"
                   :url="link.path"
-                  type="dark"
                   :stretch="true"
+                  type="dark"
+                 
                   >{{ link.text }}</cta-button
                 >
               </div>
@@ -86,7 +85,35 @@ export default {
 
   data: () => ({
     earthIcon,
-  })
+  }),
+  mounted() {
+    window.addEventListener('resize', this.setCarouselHeight)
+    this.setCarouselHeight()
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.setCarouselHeight)
+  },
+  methods: {
+    setCarouselHeight() {
+      this.$nextTick(() => {
+        const sideMenu = this.$el.querySelector('.homepage-header__side')
+        const carousel = this.$el.querySelector('.carousel')
+        const carouselItem = this.$el.querySelector('.carousel-item')
+               
+        if (sideMenu && carousel && window.innerWidth >= 450  ) {
+          const menuHeight = sideMenu.offsetHeight
+          const newHeight = menuHeight - 16  // 16px padding adjustment
+          carousel.style.height = `${newHeight}px`
+          if (carouselItem) {
+            carouselItem.style.height = `${newHeight}px`
+          }
+        } else if (carousel) {
+            carousel.removeAttribute('style') // Reset to default styles
+            carouselItem.removeAttribute('style') // Reset to default styles
+        }
+      })
+    },
+  }  
 }
 </script>
 
@@ -102,6 +129,8 @@ export default {
   border-bottom: none !important;
   height: auto;
   align-items: normal;
+  padding-top: 30px;
+  padding-bottom: 30px;
 
   :deep(.wysiwyg) {
     h1 {
@@ -174,7 +203,6 @@ export default {
   }
 
   &__search {
-    margin-top: 10px;
     z-index: 1;
     width: auto;
     position: relative;
@@ -220,4 +248,5 @@ export default {
     }
   }
 }
+
 </style>

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

@@ -5,7 +5,7 @@
       :class="'app-header' + (screen === 'mobile' ? ' ' + 'isMobile' : '')"
     >
       <!-- Top menu -->
-      <div class="logo">
+      <div :class="screen === 'mobile' ? 'logoMobile' : 'logo'">
         <!-- Mobile Menu -->
         <div v-if="screen === 'mobile'" class="app-header__mobile-menu-container">
           <a class="dark" role="button" @click.prevent="showMobileMenu">
@@ -15,7 +15,7 @@
         <!-- Logo -->
         <nuxt-link class="dark" to="/">
           <img
-            :class="screen === 'mobile' ? 'LogoImgMobile' : 'LogoImg'"
+            :class="screen === 'mobile' ? 'logoImgMobile' : 'logoImg'"
             :alt="
               isWorkWell
                 ? 'Work Well Victoria - Logo'
@@ -26,36 +26,38 @@
         </nuxt-link>
         <span :class="screen === 'mobile' ? 'logo__nav_mobile' : 'logo__nav'">
           <!-- Roles added for accessibility -->
-          <table role="presentation" >
+          <table role="presentation" style="margin-right: 0;">
             <tbody role="presentation">
               <tr role="presentation">
-              <td :class="screen === 'mobile' ? 'td_mobile' : ''">
+              <td :class="screen === 'mobile' ? 'td_mobile mobile-link' : ''">
                 <!-- Language link -->
+            
                 <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 />
+                  <img :class="screen === 'mobile' ? 'imgMobile' : ''" alt="Language Icon" width="15px" height="15px" :src=LanguageIcon />
                 </nuxt-link>
+                
               </td>
-              <td :class="screen === 'mobile' ? 'td_mobile' : ''">
+              <td :class="screen === 'mobile' ? 'td_mobile mobile-link' : ''">
                 <!-- Contrast link -->
-                <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 href="javascript:void(0)" @click="show = !show" @keyup.esc="show = !show" title="Contrast" ref="selectContrast">
+                  <span v-if="screen !== 'mobile'">Adjust contrast</span> <img :class="screen === 'mobile' ? 'imgMobile' : ''" alt="Contrast Icon" width="15px" height="15px" :src=ContrastIcon />
                 </a>
                 <div
                   ref="contrastChoices"
-                  class="flex-container"
+                  :class="screen === 'mobile' ? 'flex-container_contrast_mobile' : 'flex-container_contrast'"
                   v-if="show"
                 >
-                  <div class="flex-item contrast_slide--box-list">
-                    <div v-for="list in lists" :key="list.value">
-                      <label :class="{'last-radio': list.label==='Greyscale'}">
+                  <div class="flex-item_contrast contrast_slide--box-list">
+                    <div v-for="list in lists" :key="list.value" >
+                     <label :for="list.id" :class="{'last-radio': list.label==='Greyscale'}">
                         <input
                           type="radio"
+                          :id="list.id"
                           :name="list.name"
                           :value="list.value"
                           :checked="list.value === selectedValue"
@@ -74,7 +76,7 @@
                   class="cta-button cta-button--text-only cta-button--slim"
                   to="/search"
                   title="Search"
-                  ><span v-if="screen !== 'mobile'">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" style="margin-top: 2px;" width="15px" height="15px" :src=NavSearchIcon />
                 </nuxt-link>
               </td>
               <td :class="screen === 'mobile' ? 'td_mobile-last' : ''">
@@ -411,18 +413,25 @@ export default {
       NavSearchIcon,
       lists: [
         {
+          id: 'contrast1',
           name: 'contrast',
           value: 'default',
-          label: 'Light contrast (default)'
+          label: 'Light contrast (default)',
+          labelmobile: 'Light'
         },
         {
+          id: 'contrast2',
           name: 'contrast',
           value: 'high_contrast',
-          label: 'Increased contrast'
+          label: 'Increased contrast',
+          labelmobile: 'Increased'
         },
-        { name: 'contrast', 
-          value: 'grayscale', 
-          label: 'Greyscale' 
+        {
+          id: 'contrast3',
+          name: 'contrast',
+          value: 'grayscale',
+          label: 'Greyscale',
+          labelmobile: 'Greyscale'
         }
       ],
       selectedValue: null
@@ -497,7 +506,6 @@ export default {
       this.windowWidth = window.innerWidth;
     },
     firstLevelClick(item, ref) {
-      // Reset screen to fix whitespace
       if (window && window.scrollTo && this.screen === "desktop") {
         window.scrollTo(0, 0);
       }
@@ -527,10 +535,8 @@ export default {
         this.isSecondLevelOpen === true &&
         selectedItem === previouslyOpenItem
       ) {
-        selectedItem.classList.remove("isActiveParent");
-        selectedItem.getElementsByTagName("a")[0].setAttribute("aria-expanded", "false");
-        this.isSecondLevelOpen = false;
-        this.letBodyOverflow(true);
+        this.closeMegaMenu();
+       
       }
       // If the link has no children then go to that page
       else if (!item.below) {
@@ -578,6 +584,7 @@ export default {
       }
       // If the menu is already open and the same item is clicked,
       // close it
+
       else if (
         item.below &&
         this.isThirdLevelOpen === true &&

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

@@ -3,6 +3,7 @@
 .app-header {
   &.isMobile {
     padding: 0;
+    width: 100vw;
 
     .app-header {
       &__wrap {
@@ -20,6 +21,8 @@
 
           ul {
             float: none;
+            padding-left: 15px;
+            padding-right: 10px;
 
             li {
              height: 62px;
@@ -71,6 +74,8 @@
         display: table-cell;
         vertical-align: middle;
         text-align: left;
+        margin-left: 0px;
+        margin-right: 10px;
 
         svg {
             filter: invert(100%) sepia(5%) saturate(49%) hue-rotate(165deg)
@@ -177,6 +182,7 @@
                 margin-bottom: 5px;
                 padding: 0;
                 top: 0;
+                margin-left: 10px;
 
                 span {
                   color: $app-header-active;
@@ -267,38 +273,70 @@
   top: 10px !important;
 }
 
-.LogoImgMobile {
+.logoMobile {
+  height: 85px;
+  padding: 15px 0%;
+  display: flex;
+  align-items: center;
+  margin-right: 0px;
+  margin-left: 10px;
+  background-color: white;
+  width: 100%;
+ }
+
+.logoImgMobile {
   height: 40px;
   width: auto;
 }
 
-.logo__nav-mobile {
-  display:inline-block;
-  margin-left: 10px;
-  margin-right: 0px;
-  width: 100%;
+.logo__nav_mobile {
+  display:flex;
+  margin-left: 15px;
+  margin-right: 25px;
+  width: 60% !important;
   overflow-y:auto;
+  justify-content: flex-end;
+
+  table {
+    border-collapse: separate;
+    border-spacing: 5px;
+  }
+  
+  }
+
+.imgMobile {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .td_mobile {
-    padding: 0px 5px !important;
     height: 35px;
     width: 35px;
   }
 
 .td_mobile-last {
- padding: 0px 0px 0px 5px !important;
+ padding: 0px !important;
 }
 
 .mobile-link {
-  height: 35px;
-  width: 35px;
+  width: 40px !important;
+  height: 40px !important;
   background-color: #f2f2f2;
   border: 1px solid #f2f2f2;
-  border-radius: 5px;
+  border-radius: 8px;
+
+  &:focus, &:hover {
+    border: 1px solid #BABABA;
+  }
 }
 
 .app-header__wrap_mobile {
   background: none;
   height: 0px;
-}
+}
+
+.flex-container_contrast_mobile {
+  margin-left: -167px;
+}
+

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

@@ -4,8 +4,8 @@
   color: $app-menu-white;
   z-index: 27;
   position: relative;
-  padding: 0px 10px;
-  width: 100%;
+  padding: 0px;
+  width: 100vw;
   font-size: 14px;
 
   &__wrap {
@@ -18,6 +18,9 @@
     padding: 0px 15px;
     display: table;
     width: 100%;
+    border-bottom-style: solid;
+    border-bottom-color: white;
+    border-bottom-width: 2px;
 
     > nav {
       width: 100%;
@@ -42,9 +45,14 @@
   }
   .isActiveChild {
     > a {
-      background: $app-header-active;
-      color: $app-header-text-colour;
+      background: $app-header-hover;
+      color: black;
       border-bottom: 1px solid transparent;
+
+      svg.caret-right {
+        filter: invert(0%) sepia(12%) saturate(108%) hue-rotate(344deg)
+        brightness(94%) contrast(80%);
+      }
     }
   }
 
@@ -378,16 +386,19 @@
 
 .logo {
   height: 85px;
-  padding: 15px 15px 15px 0px;
+  padding: 15px 0%;
   width: 100%;
   display: flex;
   align-items: center;
-  margin-right: 0%;
+  margin-right: 50px;
+  margin-left: -10px;
   background-color: white;
+  width: 100vw;
 
   &__nav {
     display:inline-block;
     margin-left: 15px;
+    margin-right: 10px; 
     color: #000;
     width: 100%;
     text-align: right;
@@ -421,9 +432,10 @@
   }
 }
 
-.LogoImg {
+.logoImg {
   height: 55px;
   width: auto;
+  margin-left: 20px;
 }
 
 .semi-circle {
@@ -470,11 +482,7 @@
     }
   }
 }
-@mixin opened-slide {
-  left: 100%;
-  -webkit-transform: translateX(-100%);
-  transform: translateX(-100%);
-}
+
 .contrast_slide {
   &_container {
     background: white;
@@ -490,21 +498,6 @@
     margin: 0;
     right: 0;
     position: absolute;
-
-    // &.closed {}
-    &.opened {
-      > .contrast_slide_hoverbar {
-        @include opened-slide;
-      }
-    }
-
-    @media (min-width: 768px) {
-      &:hover {
-        > .contrast_slide_hoverbar {
-          @include opened-slide;
-        }
-      }
-    }
   }
 
   &_hoverbar {
@@ -604,14 +597,13 @@
       padding: 10px 0;
 
       input[type='radio'] {
-        border: 2px solid #bebebe;
+        border: 3px solid #bebebe;
         border-radius: 50%;
-        box-shadow: 0 0 0px 0px #bebebe inset;
-        height: 24px;
+        height: 25px;
         outline: none;
         vertical-align: middle;
         margin-right: 5px;
-        width: 24px;
+        width: 25px;
         appearance: none;
 
         &:before {
@@ -633,11 +625,11 @@
   }
 }
 
-.flex-container {
+.flex-container_contrast {
   margin-left: -5px;
 }
 
-.flex-item {
+.flex-item_contrast {
   border: 1px solid;
   border-color: #BABABA;
   padding: 10px;
@@ -647,5 +639,6 @@
   input[type="radio"] {
     accent-color: black;
     margin-right: 5px;
+    vertical-align: middle;
   }
 }