@worksafevictoria/wcl7.5 1.1.0-beta.90 → 1.1.0-beta.91

package/package.json

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

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

@@ -7,6 +7,7 @@
       controls
       indicators
       keyboard
+      fade="true"
       background="#ababab"
     >
       <b-carousel-slide

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

@@ -1,6 +1,7 @@
 import HomepageHeader from './index.vue'
 import { mockCarouselItems } from '../../../mock/carousel-items'
 
+
 const fetchMenu = () =>
   Promise.resolve([
     {

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

@@ -1,45 +1,54 @@
+<!-- When implemented, importing mock values for carousel to be removed.  This was only for testing locally, while values not available from drupal. -->
+
 <template>
-  <div class="homepage-header">
-    <div class="container">
+  <div class="homepage-header"> 
+    <container>
       <search
-          :page-limit="3"
-          :page-number="1"
-          :is-typeahead="true"
-          :content-parser="contentParser"
-          tabindex="0"
-          class="homepage-header__search"
-        />
-        <row class="wcl-hero-header__content-wrapper container">
-          <column class="wcl-hero-header__content-wrapper__content-col col-12 col-md-7 wcl-hero-header__content-wrapper__content-col--split wcl-rich-text--ltr">
-            <carousel-component 
-            :carouselItems="this.slideList"
-            :storybook="this.isStorybook"
-            />
-          </column>
-          <column class="wcl-hero-header__side col-md-4 offset-md-1">
-            <cta-button
-              v-for="(link, i) in links"
-              :key="i"
-              class="iebtn"
-              :url="link.path"
-              type="dark"
-              :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
+      :page-limit="3"
+      :page-number="1"
+      :is-typeahead="true"
+      :content-parser="contentParser"
+      tabindex="0"
+      class="homepage-header__search"
+    />
+    </container>
+      
+    <div class="homepage-header__content-wrapper">
+      <container class="homepage-header__content-wrapper__content">
+        <row>
+          <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"
             >
+              <carousel-component 
+                :carouselItems="this.slideList"
+                :storybook="this.isStorybook"
+              />
           </column>
+          <column
+              md="4"
+              :offset-md="1"
+              class="homepage-header__side col-md-4 offset-md-1"
+            >
+              <div>
+                <cta-button
+                  v-for="(link, i) in links"
+                  :key="i"
+                  class="iebtn"
+                  :url="link.path"
+                  type="dark"
+                  :stretch="true"
+                  >{{ link.text }}</cta-button
+                >
+              </div>
+            </column>
         </row>
-    </div> 
+      </container>
+    </div>
   </div>
 </template>
+
 <script>
 import Search from './../../SubComponents/Search/index.vue'
 import CtaButton from './../../SubComponents/CtaButton/index.vue'
@@ -47,6 +56,7 @@ import earthIcon from './../../../assets/icons/earth.svg?url'
 import CarouselComponent from './../../Containers/Carousel/index.vue'
 import Row from './../../Containers/Row/index.vue'
 import Column from './../../Containers/Column/index.vue'
+// import { mockCarouselItems } from '../../../mock/carousel-items'
 
 export default {
   name: 'HomepageHeader',
@@ -55,7 +65,8 @@ export default {
     CtaButton,
     CarouselComponent,
     Row,
-    Column
+    Column,
+    // mockCarouselItems
   },
   props: {
     contentParser: {
@@ -69,6 +80,7 @@ export default {
     slideList: {
       type: Array,
       required: true,
+      // default: mockCarouselItems
     },
     isStorybook: {
       type: Boolean,
@@ -97,15 +109,18 @@ export default {
 }
 </script>
 
-<!-- styles from the heroheader are still used for consistency, 
-even though the component itself is no longer imported. -->
-
 <style lang="scss" scoped>
 @import '../../../includes/scss/all';
 @import './../../Global/HeroHeader/styles.scss';
 
+
 .homepage-header {
+  position:relative;
+  margin-bottom: 10px;
+  display: block;
   border-bottom: none !important;
+  height: auto;
+  align-items: normal;
 
   :deep(.wysiwyg) {
     h1 {
@@ -122,17 +137,44 @@ even though the component itself is no longer imported. -->
     }
   }
 
-  :deep(.wcl-hero-header__content-wrapper) {
-    @include fp('top', 75, 250);
-    margin-top: 0;
+  &__content-wrapper {
+    width: 100%;
+    position: relative;
+    margin-top: 80px;
+    @include mq('mm') {
+      margin-top: 10px !important;
+    }
 
-    @media screen and (max-width: 540px) {
-        padding-right: 35px;
+    &__content {
+      @include mq('md') {
+        max-width: 100%;
+        margin: 0;
+        padding: 0 30px;
       }
+      &-col {
+        max-width: 69%;
+        z-index: 2;
+        @include mq('mm') {
+          max-width: 100%;
+          padding-right: 45px;
+        }
+        @include mq('xs') {
+          padding-right: 0px;
+          padding-left: 0px;
+        }
+
+        &--split {
+          padding-right: 0;
+        }
 
+        .header-rich-text-wrap {
+          max-width: 100%;
+        }
+      }
+    }
   }
 
-  :deep(.wcl-hero-header__wrap) {
+  :deep(.homepage-header__wrap) {
     display: block;
     align-items: normal;
   }
@@ -151,9 +193,11 @@ even though the component itself is no longer imported. -->
   }
 
   &__search {
-    // margin-top: 10px;
+    margin-top: 10px;
     z-index: 1;
     width: auto;
+    position: relative;
+    
 
     @include mq('xs') {
       padding-right: 0;

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

@@ -31,9 +31,10 @@
     border: $app-header-active;
 
     > a > span {
+      // border-bottom: 3px solid $app-header-active;
       background-color: $app-header-active;
     }
-  }
+    }
   .isActiveChild {
     > a {
       background: $app-header-active;
@@ -48,7 +49,6 @@
 
   // First Level Overrides
   &__close {
-    
     &-button {
       display: flex;
       vertical-align: middle;
@@ -113,7 +113,6 @@
         margin-right: 0;
       }
 
-  
       .search-string {
         @media screen and (max-width: 1065px) and (min-width: 981px) {
           display: none;
@@ -192,15 +191,15 @@
   }
 
   &__nav-menu {
-      
+
     .nav-item {
       .sub-nav-container {
         display: none;
         position: fixed;
         background: $app-menu-black;
-        top: 180px;
-        left: 25px;
-        right: 25px;
+        top: 165px;
+        left: 10px;
+        right: 10px;
         bottom: 10px;
         border-radius: 3px;
 
@@ -212,16 +211,15 @@
         &__innermore {
           overflow-x: auto;
           height: max-content;
-          left: 25px;
-          right: 25px;
-          top: 180px;
+          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;
@@ -248,11 +246,9 @@
 
       &:last-of-type {
         > a {
-
           svg {
             height: 23px;
             width: 23px;
-
           }
           & > span {
             margin-right: 10px;
@@ -307,14 +303,13 @@
           }
           > .sub-nav-group {
             li.isActiveChild {
+              
               .sub-nav {
                 display: block;
-                
 
                 .selected-title {
                   text-align: left;
                   top: 12px;
-                  
 
                   a {
                     padding: 5px 5px 15px 5px;