@worksafevictoria/wcl7.5 1.17.0 → 1.18.0-beta.1

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

@@ -7,7 +7,7 @@ export default {
   component: SectionGroup,
   argTypes: {
     backgroundImage: {
-      control: 'boolean'
+      control: 'boolean',
     },
     backgroundVariant: {
       control: 'select',
@@ -18,69 +18,70 @@ export default {
         'grey',
         'yellow',
         'white',
-        'lightblue'
-      ]
+        'lightblue',
+        'lavendergray',
+      ],
     },
     applyBackgroundOn: {
       control: 'select',
-      options: ['content', 'block', 'container', 'section']
+      options: ['content', 'block', 'container', 'section'],
     },
     titleTag: {
       control: 'select',
-      options: ['h2', 'h3']
+      options: ['h2', 'h3'],
     },
     footer: {
-      control: 'boolean'
+      control: 'boolean',
     },
     preContent: {
-      control: 'boolean'
+      control: 'boolean',
     },
     headerRight: {
-      control: 'boolean'
+      control: 'boolean',
     },
     size: {
       control: 'select',
-      options: ['half-content', 'content', 'page', 'full']
+      options: ['half-content', 'content', 'page', 'full'],
     },
     headingRightSlot: {
-      control: 'text'
+      control: 'text',
     },
     preContentSlot: {
-      control: 'text'
+      control: 'text',
     },
     contentSlot: {
-      control: 'text'
+      control: 'text',
     },
     footerSlot: {
-      control: 'text'
+      control: 'text',
     },
     top: {
       control: 'text',
-      table: { disable: true }
+      table: { disable: true },
     },
     headerTop: {
       control: 'text',
-      table: { disable: true }
+      table: { disable: true },
     },
     headerBottom: {
       control: 'text',
-      table: { disable: true }
+      table: { disable: true },
     },
     content: {
       control: 'text',
-      table: { disable: true }
+      table: { disable: true },
     },
     default: {
       control: 'text',
-      table: { disable: true }
-    }
-  }
-};
+      table: { disable: true },
+    },
+  },
+}
 
 const Template = (args) => ({
   components: { SectionGroup, Row, Column },
   setup() {
-    return { args };
+    return { args }
   },
   template: `
     <div>
@@ -119,10 +120,10 @@ const Template = (args) => ({
   
         {{args.sectionBottom}}
     </div>
-    `
-});
- 
-export const Default =  Template.bind({});
+    `,
+})
+
+export const Default = Template.bind({})
 
 Default.args = {
   noPaddingTop: false,
@@ -144,5 +145,5 @@ Default.args = {
   footer: true,
   preContent: true,
   headerRight: true,
-  size: 'page'
+  size: 'page',
 }

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

@@ -114,6 +114,7 @@ export default {
           'white',
           'lightblue',
           'lightred',
+          'lavendergray',
         ].indexOf(value) >= 0,
     },
     applyBackgroundOn: {
@@ -200,9 +201,13 @@ export default {
           case 'lightred':
             bgColour = colors.lightred
             break
+          case 'lavendergray':
+            bgColour = colors.lavendergray
+            break
           default:
             bgColour = 'transparent'
         }
+
         styles = {
           ...(styles || {}),
           [`background-color`]: bgColour,

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

@@ -351,6 +351,7 @@ import CtaButton from '../../SubComponents/CtaButton/index.vue'
 import chevronIcon from '../../../assets/icons/caret-right.svg?url'
 import { ref } from "vue";
 
+
 export default {
   setup() {
       const show = ref(false);
@@ -613,7 +614,7 @@ export default {
     },
     
     showMobileMenu() {
-      // Reset screen to top to fix whitespace issues
+       // Reset screen to top to fix whitespace issues
       if (window) {
         window.scrollTo(0, 0)
       }
@@ -776,7 +777,14 @@ export default {
           .getElementsByTagName('a')[0]
           .setAttribute('aria-expanded', 'false')
         this.isSecondLevelOpen = false
+        // fix introduced to re-open mobile menu after going back from 2nd level, ie "Main Menu" action
+        this.closeMegaMenu()
+        this.$nextTick(() => {
+          this.showMobileMenu()
+        })
+        
       }
+      
     },
     searchFocus(index, length, event) {
       if (index === length - 1 && this.isMobileMenuOpen && !event.shiftKey) {

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

@@ -1,9 +1,12 @@
 @import './includes.scss';
 
+// $app-menu-white is used for mobile menu text colour instead of $app-header-text-colour
+
 .app-header {
   &.isMobile {
     padding: 0;
     width: 100vw;
+    overflow-x: visible;
 
     .app-header {
       &__wrap {
@@ -185,7 +188,7 @@
                 margin-left: 10px;
 
                 span {
-                  color: $app-header-active;
+                  color: $app-menu-white;
                   font-size: 18px !important;
                 }
 
@@ -247,7 +250,7 @@
                             border-bottom: none;
 
                             span {
-                              color: $app-header-active;
+                              color: $app-menu-white;
 
                               &:hover,
                               &:focus {

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

@@ -5,8 +5,9 @@
   z-index: 27;
   position: relative;
   padding: 0px;
-  width: 100vw;
+  width: 100%;
   font-size: 14px;
+  overflow-x: hidden;
 
   &__wrap {
     position: relative;
@@ -386,11 +387,11 @@
 
 .logo {
   height: 85px;
-  padding: 15px 0%;
+  padding: 15px 10px 15px 0px;
   width: 100%;
   display: flex;
   align-items: center;
-  margin-right: 50px;
+  margin-right: 0;
   margin-left: -10px;
   background-color: white;
   width: 100vw;
@@ -398,12 +399,12 @@
   &__nav {
     display:inline-block;
     margin-left: 15px;
-    margin-right: 10px; 
+    margin-right: 0; 
     color: #000;
     width: 100%;
     text-align: right;
     font-weight: bold;
-    overflow-y:auto;
+    overflow-y: auto;
 
     a:focus {
       border: 1px solid #BABABA !important;

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

@@ -12,8 +12,14 @@
         : 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>
@@ -37,14 +43,18 @@
     </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
@@ -59,7 +69,10 @@
                 :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"
@@ -96,7 +109,7 @@
       </div>
       <!-- Type Default -->
       <column
-        v-if="type === 'default' && showMask"
+        v-if="type === 'default'"
         :md="'5'"
         :xs="'5'"
         class="wcl-hero-header__right"
@@ -104,7 +117,7 @@
         :offset-md="rtl ? 0 : 7"
         :offset-xs="rtl ? 0 : 7"
       >
-        <div class="wcl-hero-header__mask">
+        <div class="wcl-hero-header__mask" v-if="showMask">
           <hero-header-chevron />
         </div>
       </column>
@@ -112,7 +125,9 @@
       <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"
@@ -134,7 +149,9 @@
         :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>
@@ -144,19 +161,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,
@@ -171,15 +188,15 @@ export default {
   props: {
     type: {
       type: String,
-      default: "default",
+      default: 'default',
     },
     title: {
       type: String,
-      default: "",
+      default: '',
     },
     description: {
       type: String,
-      default: "",
+      default: '',
     },
     image: {
       type: Object,
@@ -223,33 +240,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('.')) {
@@ -258,7 +275,7 @@ export default {
       //     return sentences.map((sentence) => sentence.trim()).join('.<br/>')
       //   }
       // }
-      return this.title;
+      return this.title
     },
     // Will reintroduce if business requirement
     //   strippedDescription() {
@@ -271,57 +288,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) {