@worksafevictoria/wcl7.5 1.13.0-beta.17 → 1.13.0-beta.19

package/package.json

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

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

@@ -21,7 +21,10 @@
         :img-alt="item.imageAlt"
         @click.prevent="handleClick(item.linkURL)"
       >
-        <h4>{{ item.title }}</h4>
+        <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>
@@ -118,17 +121,28 @@ methods: {
     position: relative;
     margin-bottom: 10px;
   }
+
+  .carousel-inner {
+    border-radius: 8px  ;
+  } 
 /* Introduced changes to make image responsive */
   .carousel img {
     object-fit: cover;
-    max-height: 420px;
+    max-height: 392px;
+    height: auto;
     width: 100%;
   }
 
+  .carousel-indicators {
+    justify-content: end !important;
+    margin-right: 10px !important;
+  }
+
   .carousel-indicators button {
     width: 10px !important;
     height: 10px !important;
     border-radius: 50% !important;
+    background-color: yellow !important;
   }
 
   .carousel-indicators button:focus,
@@ -138,14 +152,24 @@ methods: {
   }
 
   .carousel-caption {
+    display: flex;
+    font-size: 24px;
+    font-weight: normal;
+    flex-direction: column;
+    align-items: flex-start; 
+    text-align: left !important;
+    width: 100%;
     color: white;
-    text-decoration: underline;
     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,
@@ -158,9 +182,12 @@ 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 {

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

@@ -13,7 +13,7 @@
       
     <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 col-lg-8 homepage-header__content-wrapper__content-col--split wcl-rich-text--ltr"
@@ -25,6 +25,7 @@
               />
           </column>
           <column  
+              id="header-links"
               class="homepage-header__side col-12 col-md-5 col-lg-4"
             >
               <div>
@@ -33,8 +34,9 @@
                   :key="i"
                   class="iebtn"
                   :url="link.path"
-                  type="dark"
                   :stretch="true"
+                  type="dark"
+                 
                   >{{ link.text }}</cta-button
                 >
               </div>
@@ -83,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>
 
@@ -99,6 +129,8 @@ export default {
   border-bottom: none !important;
   height: auto;
   align-items: normal;
+  padding-top: 30px;
+  padding-bottom: 30px;
 
   :deep(.wysiwyg) {
     h1 {
@@ -171,7 +203,6 @@ export default {
   }
 
   &__search {
-    margin-top: 10px;
     z-index: 1;
     width: auto;
     position: relative;
@@ -218,5 +249,4 @@ export default {
   }
 }
 
-
 </style>

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

@@ -506,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);
       }
@@ -536,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) {
@@ -587,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 &&