npm - @worksafevictoria/wcl7.5 - Versions diffs - 1.9.0-beta.13 → 1.9.0-beta.15 - Mend

@worksafevictoria/wcl7.5 1.9.0-beta.13 → 1.9.0-beta.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/package.json +1 -1
package/src/components/Global/AppHeaderNew/includes.scss +4 -2
package/src/components/Global/AppHeaderNew/index.vue +59 -331
package/src/components/Global/AppHeaderNew/styles.scss +49 -45
package/src/components/Paragraphs/Tabs/index.vue +4 -4
package/src/components/Paragraphs/TabulatedData/index.vue +18 -18
package/src/components/SubComponents/VideoThumbnail/index.vue +30 -29
package/src/index.js +1 -1

package/package.json CHANGED Viewed

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

package/src/components/Global/AppHeaderNew/includes.scss CHANGED Viewed

@@ -16,7 +16,7 @@ $app-menu-gold: #fecc56;
 $primary-color: $app-menu-gold;
 $app-menu-white: #ffffff;
 $app-menu-black: #191919;
-$app-menu-grey: lightgrey;
+$app-menu-grey: #f2f2f2;
 $app-menu-green: #356041;
 $app-menu-border-color: rgba(255, 255, 255, 0.3);
 // $app-menu-border-color: $app-menu-black;
@@ -24,8 +24,10 @@ $app-menu-border-color: rgba(255, 255, 255, 0.3);
 $app-header-background-colour: $app-menu-grey !default;
 $app-header-text-colour: $app-menu-black !default;
 $app-header-hover: $app-menu-gold !default;
-$app-header-active: $app-menu-yellow !default;
+$app-header-active: $app-menu-black !default;
 $app-subheader-text-colour: $app-menu-white !default;
+$app-header-active-text-colour: $app-menu-white !default;
 @if ($primary-color == #478157) {
   $app-header-background-colour: $app-menu-green !global;

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

@@ -6,6 +6,7 @@
     >
       <!-- Top menu -->
       <div class="logo">
+          <!-- Logo -->
           <nuxt-link class="dark" to="/">
             <img
               :alt="
@@ -19,31 +20,34 @@
             />
           </nuxt-link>
         <span class="logo__nav">
-          <table>
-            <tbody>
-              <tr>
+          <!-- Roles added for accessibility -->
+          <table role="presentation" >
+            <tbody role="presentation">
+              <tr role="presentation">
               <td>
+                <!-- Language link -->
                 <nuxt-link
                 to="/languages"
                 @click.native="fireAnalytics('Choose your language', '/languages')"
                 title="Language"
               >
                 <span v-if="!topLevelIconsOnly">Choose your language </span>
-                <img alt="Language Icon" width="20px" height="20px" :src=LanguageIcon />
+                <img alt="Language Icon" width="15px" height="15px" :src=LanguageIcon />
               </nuxt-link>
               </td>
               <td>
+                <!-- Contrast link -->
                 <a href="javascript:void(0)" @click="show = !show" @keyup.esc="show = !show" title="Contrast" ref="selectContrast">
-                  <span v-if="!topLevelIconsOnly">Adjust contrast</span> <img alt="Contrast Icon" width="20px" height="20px" :src=ContrastIcon />
+                  <span v-if="!topLevelIconsOnly">Adjust contrast</span> <img alt="Contrast Icon" width="15px" height="15px" :src=ContrastIcon />
                 </a>
                 <div
                   ref="contrastChoices"
                   class="flex-container"
                   v-if="show"
                 >
-                  <div class="contrast_slide--box-list">
+                  <div class="flex-item contrast_slide--box-list">
                     <div v-for="list in lists" :key="list.value">
-                      <label>
+                      <label :class="{'last-radio': list.label==='Greyscale'}">
                         <input
                           type="radio"
                           :name="list.name"
@@ -58,19 +62,21 @@
                 </div>
               </td>
               <td>
+                <!-- Search link -->
                 <nuxt-link
                   class="cta-button cta-button--text-only cta-button--slim"
                   to="/search"
                   title="Search"
-                  ><span v-if="!topLevelButtonIconsOnly">Search  &nbsp;</span> <img alt="Search Icon" width="20px" height="20px" :src=NavSearchIcon />
+                  ><span v-if="!topLevelButtonIconsOnly">Search  &nbsp;</span> <img alt="Search Icon" width="15px" height="15px" :src=NavSearchIcon />
                 </nuxt-link>
               </td>
               <td>
+                <!-- Login link -->
                 <nuxt-link
                   class="cta-button cta-button--text-only cta-button--slim cta-button--dark-no-filter"
                   to="/login"
                   title="Login"
-                  ><span v-if="!topLevelButtonIconsOnly">Login &nbsp;</span><span><img alt="Login Icon" width="20px" height="20px" :src=LoginLeft /></span>
+                  ><span v-if="!topLevelButtonIconsOnly">Login &nbsp;</span><span><img alt="Login Icon" width="15px" height="15px" :src=LoginLeft /></span>
                 </nuxt-link>
               </td>
             </tr>
@@ -80,7 +86,8 @@
       </div>
       <!-- Bottom menu -->
       <div class="app-header__wrap" @keyup.esc="closeMegaMenu">
-        <div class="app-header__close-button mobile-close">
+        <div class="app-header__close-button mobile-close">
+          <!-- Close Button -->
           <button
             v-if="
               (isMobileMenuOpen && screen === 'mobile' && !isSecondLevelOpen)
@@ -93,15 +100,7 @@
               Close menu
           </button>
         </div>
-        <div
-          v-if="
-            (!isSecondLevelOpen && screen === 'desktop') ||
-            (!isMobileMenuOpen && screen === 'mobile')
-          "
-          class="app-header__app-branding"
-        >
-        </div>
+        <!-- Bottom menu Items -->
         <nav
           v-if="isMobileMenuOpen || screen === 'desktop'"
           :class="{
@@ -151,6 +150,7 @@
               >
                 <span>{{ firstLevelLink.title }}</span>
               </nuxt-link>
+              <!-- Sub-Menu 2nd Level -->
               <div v-if="isSecondLevelOpen" class="sub-nav-container">
                 <div class="app-header__close-button">
                   <button
@@ -187,6 +187,7 @@
                         screen === 'mobile' && isSecondLevelOpen,
                     }"
                   >
+                    <!-- Selected Title -->
                     <div
                       class="selected-title"
                       :class="{ 'selected-title--chrome': isChrome }"
@@ -203,6 +204,7 @@
                       </nuxt-link>
                       <span v-else>{{ firstLevelLink.title }}</span>
                     </div>
+                    <!-- Selected Items -->
                     <div class="selected-items">
                       <ul v-if="firstLevelLink.below" class="sub-nav-group">
                         <li
@@ -252,6 +254,7 @@
                           >
                             <span>{{ secondLevelLink.title }}</span>
                           </nuxt-link>
+                          <!-- Sub Menu - Third Level Menu -->
                           <div v-if="isThirdLevelOpen" class="sub-nav">
                             <div class="sub-nav__wrap">
                               <div class="selected-title">
@@ -311,246 +314,20 @@
                 </div>
               </div>
             </li>
-            <!-- More action button in bottom menu -->
-            <li class="nav-item" id="moreDesktop" v-if="screen === 'desktop' && this.moreList.length > 0">
-              <a class="dark" role="button" @click="showMore = !showMore">
-                <span>More</span>
-                <caret-down class="caret-down" style="padding-top: 4px; height: 16px; width: 16px"/>
-              </a>
-              <div
-                v-if="showMore"
-                class="styled-scrollbar"
-              >
-              <div >
-                <div class="sub-nav-container__innermore">
-                <ul id="moreMenu">
-                  <li v-for="(firstLevelLink, parentIndex) in this.moreList"
-                    :key="firstLevelLink.key"
-                    :ref="`firstLevelMenuItemM-${parentIndex}`"
-                    class="nav-item more-menu"
-                  >
-                    <a
-                      v-if="firstLevelLink.below"
-                      class="dark"
-                      href
-                      role="button"
-                      aria-expanded="false"
-                      @click.prevent="firstLevelClick(firstLevelLink,`firstLevelMenuItemM-${parentIndex}`,)"
-                      @mouseover="mouseHover('firstLevelMenuItemM', parentIndex)"
-                      @mouseleave="mouseLeave('firstLevelMenuItemM', parentIndex)"
-                      @focusin="mouseHover('firstLevelMenuItemM', parentIndex)"
-                      @focusout="mouseLeave('firstLevelMenuItemM', parentIndex)"
-                    >
-                      <span>{{ firstLevelLink.title }}</span>
-                      <caret-right
-                        v-if="!isSecondLevelOpen && !isThirdLevelOpen"
-                        class="caret-right"
-                      />
-                    </a>
-                    <a
-                      v-else-if="!firstLevelLink.relative"
-                      :href="firstLevelLink.absolute"
-                      target="_blank"
-                      @click.native="showMore = !showMore"
-                      class="dark"
-                    >
-                      <span>{{ firstLevelLink.title }}</span>
-                    </a>
-                    <nuxt-link
-                      v-else
-                      class="dark"
-                      :to="firstLevelLink.relative"
-                      @click.native="showMore = !showMore; fireAnalytics(firstLevelLink.title, firstLevelLink.relative)"
-                    >
-                      <span>{{ firstLevelLink.title }}</span>
-                      <caret-right
-                        v-if="!isSecondLevelOpen && !isThirdLevelOpen"
-                        class="caret-right"
-                      />
-                    </nuxt-link>
-                    <div v-if="isSecondLevelOpen" class="sub-nav-container">
-                      <div class="app-header__close-button">
-                        <button
-                        v-if="screen === 'mobile'"
-                          ref="menuBackButton"
-                          class="dark"
-                          @click="mobileGoBack"
-                          @keydown.tab="submenuFocus"
-                        >
-                          <caret-left/>
-                          {{ isThirdLevelOpen ? firstLevelItemName : 'Main menu' }}
-                        </button>
-                        <button
-                          v-if="
-                            (isSecondLevelOpen && screen === 'desktop') ||
-                            (isMobileMenuOpen && screen === 'mobile')
-                          "
-                          ref="closeMenuButton"
-                          class="dark"
-                          @click="closeMegaMenu"
-                        >
-                        <img :alt="Close" width="12" height="12" :src="Close"/>
-                          Close menu
-                        </button>
-                      </div>
-                      <div
-                        class="sub-nav-container__inner"
-                        :class="{ 'styled-scrollbar': screen === 'desktop' }"
-                      >
-                        <div
-                          class="sub-nav-container__wrap"
-                          :class="{'styled-scrollbar': screen === 'mobile' && isSecondLevelOpen,}"
-                        >
-                          <div
-                            class="selected-title"
-                            :class="{ 'selected-title--chrome': isChrome }"
-                          >
-                            <nuxt-link
-                              v-if="firstLevelLink.relative"
-                              :ref="`secondLevelSelectedTitleM-${parentIndex}`"
-                              :to="firstLevelLink.relative"
-                              class="dark"
-                              @click.native="fireAnalytics(firstLevelLink.title, firstLevelLink.relative)"
-                              @keydown.tab.native="backBtnFocus($event)"
-                            >
-                              <span>{{ firstLevelLink.title }}</span>
-                            </nuxt-link>
-                            <span v-else>{{ firstLevelLink.title }}</span>
-                          </div>
-                          <div class="selected-items">
-                            <ul v-if="firstLevelLink.below" class="sub-nav-group">
-                              <li
-                                v-for="(
-                                  secondLevelLink, secondIndex
-                                ) in firstLevelLink.below"
-                                :key="secondLevelLink.key"
-                                :ref="`secondLevelMenuItemM-${parentIndex}-${secondIndex}`"
-                                class="sub-nav-parent-item"
-                              >
-                                <a
-                                  v-if="secondLevelLink.below"
-                                  href
-                                  class="dark"
-                                  role="button"
-                                  aria-expanded="false"
-                                  @keydown.tab="searchFocus(secondIndex,firstLevelLink.below.length,$event,)"
-                                  @click.prevent="secondLevelClick(secondLevelLink,`secondLevelMenuItemM-${parentIndex}-${secondIndex}`,)"
-                                  @mouseover="mouseHover('secondLevelMenuItemM',parentIndex,secondIndex,)"
-                                  @mouseleave="mouseLeave('secondLevelMenuItemM',parentIndex,secondIndex,)"
-                                  @focusin="mouseHover('secondLevelMenuItemM',parentIndex,secondIndex,)"
-                                  @focusout="mouseLeave('secondLevelMenuItemM',parentIndex,secondIndex,)"
-                                >
-                                  <span>{{ secondLevelLink.title }}</span>
-                                  <caret-right
-                                    v-if="!(screen === 'mobile' && isThirdLevelOpen)"
-                                    class="caret-right"
-                                  />
-                                </a>
-                                <a
-                                  v-else-if="!secondLevelLink.relative"
-                                  :href="secondLevelLink.absolute"
-                                  class="dark"
-                                >
-                                  <span>{{ secondLevelLink.title }}</span>
-                                </a>
-                                <nuxt-link
-                                  v-else
-                                  class="dark"
-                                  :to="secondLevelLink.relative"
-                                  @keydown.tab.native="searchFocus( secondIndex,firstLevelLink.below.length,$event,)"
-                                  @mouseover.native="mouseHover('secondLevelMenuItemM',parentIndex,secondIndex,)"
-                                  @mouseleave.native="mouseLeave('secondLevelMenuItemM',parentIndex,secondIndex,)"
-                                  @focusin.native="mouseHover('secondLevelMenuItemM',parentIndex,secondIndex,)"
-                                  @focusout.native="mouseLeave('secondLevelMenuItemM',parentIndex,secondIndex,)"
-                                  @click.native="fireAnalytics(secondLevelLink.title, secondLevelLink.relative)"
-                                >
-                                  <span>{{ secondLevelLink.title }}</span>
-                                </nuxt-link>
-                                <div v-if="isThirdLevelOpen" class="sub-nav">
-                                  <div class="sub-nav__wrap">
-                                    <div class="selected-title">
-                                      <nuxt-link
-                                        v-if="secondLevelLink.relative"
-                                        :ref="`secondLevelSelectedTitleM-${parentIndex}-${secondIndex}`"
-                                        :to="secondLevelLink.relative"
-                                        class="dark"
-                                        @click.native="fireAnalytics(secondLevelLink.title, secondLevelLink.relative)"
-                                        @keydown.tab.native="backBtnFocus($event)"
-                                      >
-                                        <span>{{ secondLevelLink.title }}</span>
-                                      </nuxt-link>
-                                      <span v-else>{{ secondLevelLink.title }}</span>
-                                    </div>
-                                    <div class="selected-sub-nav">
-                                      <ul
-                                        v-if="secondLevelLink.below"
-                                        class="sub-nav-group"
-                                      >
-                                        <li
-                                          v-for="(
-                                            thirdLevelLink, thirdIndex
-                                          ) in secondLevelLink.below"
-                                          :key="thirdLevelLink.key"
-                                          :ref="`thirdLevelMenuItemM-${parentIndex}-${secondIndex}-${thirdIndex}`"
-                                        >
-                                          <nuxt-link
-                                            v-if="thirdLevelLink.relative"
-                                            class="dark"
-                                            :to="thirdLevelLink.relative"
-                                            @keydown.tab.native="searchFocus(thirdIndex,secondLevelLink.below.length,$event,)"
-                                            @mouseover.native="mouseHover('thirdLevelMenuItemM',parentIndex,secondIndex,thirdIndex,)"
-                                            @mouseleave.native="mouseLeave('thirdLevelMenuItemM',parentIndex,secondIndex,thirdIndex,)"
-                                            @focusin.native="mouseHover('thirdLevelMenuItemM',parentIndex,secondIndex,thirdIndex,)"
-                                            @focusout.native="mouseLeave('thirdLevelMenuItemM',parentIndex,secondIndex,thirdIndex,)"
-                                            @click.native="fireAnalytics(thirdLevelLink.title, thirdLevelLink.relative)"
-                                          >
-                                            <span>{{ thirdLevelLink.title }}</span>
-                                          </nuxt-link>
-                                          <a
-                                            v-else
-                                            class="dark"
-                                            :href="thirdLevelLink.absolute"
-                                          >
-                                            <span>{{ thirdLevelLink.title }}</span>
-                                          </a>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </div>
-                                </div>
-                              </li>
-                            </ul>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </li>
-                </ul>
-              </div>
-              </div>
-              </div>
-            </li>
             <li v-if="isWorkWell && screen === 'desktop'" class="nav-item hide">
               <a href="#" class="dark" @focus="resetTab"></a>
             </li>
-          </ul>
+          </ul>
         </nav>
+        <!-- Mobile Menu -->
         <div v-if="screen === 'mobile'" class="app-header__mobile-menu-container">
           <ul id="mobileitems">
             <li v-if="!isMobileMenuOpen">
-            <a class="dark" role="button" @click.prevent="showMobileMenu">
-              <span>Menu</span>
-              <menu-icon class="menu-icon" />
-            </a>
-          </li>
+              <a class="dark" role="button" @click.prevent="showMobileMenu">
+                <span>Menu</span>
+                <menu-icon class="menu-icon" />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -559,7 +336,7 @@
 </template>
 <script>
-import ModalSearch from './ModalSearch/index.vue'
 import Close from './../../../assets/icons/close.svg?url'
 import WorkSafeLogo from './../../../assets/icons/WSV-reversed.svg?url'
 import WorkWellLogo from './../../../assets/icons/AppFooter/logo-workwell-reversed.svg?url'
@@ -579,16 +356,11 @@ import { ref } from "vue";
 export default {
   setup() {
       const show = ref(false);
-      const showMore = ref(false);
-      const moreList = [];
       return {
         show,
-        showMore,
-        moreList
       };
     },
   components: {
-    ModalSearch,
     Close,
     CaretRight,
     CaretDown,
@@ -705,14 +477,10 @@ export default {
       } else {
         this.topLevelButtonIconsOnly = false
       }
-      this.updateMoreMenu(val)
     },
   },
   mounted() {
-    this.$nextTick(() => {
-    window.addEventListener('resize', this.updateMoreMenu())
-    })
-    this.updateMoreMenu()
     let selectedMode = document
       .getElementById('contrastStyle')
       ?.getAttribute('data-sel')
@@ -725,8 +493,7 @@ export default {
     window.removeEventListener('scroll', this.resetContrast)
   },
   destroyed() {
-    window.removeEventListener('resize', this.screenWidth),
-    window.removeEventListener('resize', this.updateMoreMenu)
+    window.removeEventListener('resize', this.screenWidth);
   },
   created() {
     if (typeof window !== 'undefined' && window) {
@@ -746,64 +513,29 @@ export default {
     screenWidth() {
       this.windowWidth = window.innerWidth;
     },
-    updateMoreMenu(screenVal) {
-      const nItems = document.getElementById('navitems')
-      var scrollWidth = nItems?.scrollWidth
-      if (scrollWidth > this.windowWidth) {
-        scrollWidth = scrollWidth + this.addWidth
-        while (scrollWidth > this.windowWidth) {
-          if ( this.headerMenu.length > 1) {   // check that there's more than one item in header
-            var tempItem = this.headerMenu.pop()
-            this.moreList.unshift(tempItem)
-            scrollWidth = scrollWidth - tempItem.title.length
-         } else {
-          scrollWidth = this.windowWidth
-         }
-        }
-      } else if ( this.moreList.length > 0 ) {
-        let tempWidth = scrollWidth
-        let ctr = 1
-        while (ctr <= this.moreList.length) {
-          var tempItem1 = this.moreList[0]
-          tempWidth = tempWidth + tempItem1.title.length
-          if (tempWidth > this.windoWidth) {  //stop if newWidth would be greater than the windowWidth
-            ctr = this.moreList.length
-          } else {  // move item fron dropdownArray to headerArray
-            var tempItem2 = this.moreList.shift()
-            this.headerMenu.push(tempItem2)
-            scrollWidth = tempWidth
-          }
-          ctr++
-        }
-      }
-    },
     firstLevelClick(item, ref) {
       // Reset screen to fix whitespace
-      if (window && window.scrollTo && this.screen === 'desktop') {
-        window.scrollTo(0, 0)
+      if (window && window.scrollTo && this.screen === "desktop") {
+        window.scrollTo(0, 0);
       }
-      let selectedItem = this.$refs[ref][0]
-      let previouslyOpenItem = this.getActiveParent()
+      let selectedItem = this.$refs[ref][0];
+      let previouslyOpenItem = this.getActiveParent();
       // Set this for mobile
-      this.firstLevelItemName = item.title
-      this.firstLevelItemRef = ref
+      this.firstLevelItemName = item.title;
+      this.firstLevelItemRef = ref;
       // Set the first item to the variable
       if (previouslyOpenItem.length) {
-        previouslyOpenItem = previouslyOpenItem[0]
+        previouslyOpenItem = previouslyOpenItem[0];
       }
       // If the menu is not open, open it
       if (item.below && this.isSecondLevelOpen === false) {
-        selectedItem.classList.add('isActiveParent')
-        selectedItem
-          .getElementsByTagName('a')[0]
-          .setAttribute('aria-expanded', 'true')
-        this.isSecondLevelOpen = true
-        this.letBodyOverflow(false)
+        selectedItem.classList.add("isActiveParent");
+        selectedItem.getElementsByTagName("a")[0].setAttribute("aria-expanded", "true");
+        this.isSecondLevelOpen = true;
+        this.letBodyOverflow(false);
       }
       // If the menu is already open and the same item is clicked,
       // close it
@@ -812,33 +544,29 @@ 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)
+        selectedItem.classList.remove("isActiveParent");
+        selectedItem.getElementsByTagName("a")[0].setAttribute("aria-expanded", "false");
+        this.isSecondLevelOpen = false;
+        this.letBodyOverflow(true);
       }
       // If the link has no children then go to that page
       else if (!item.below) {
-        if (item.relative !== '/') {
-          this.$router.push(item.relative)
+        if (item.relative !== "/") {
+          this.$router.push(item.relative);
         }
       }
       // Otherwise just remove the existing open menu and add
       // the isActive class on the new selected item
       else {
-        previouslyOpenItem.classList.remove('isActiveParent')
-        selectedItem.classList.add('isActiveParent')
+        previouslyOpenItem.classList.remove("isActiveParent");
+        selectedItem.classList.add("isActiveParent");
         previouslyOpenItem
-          .getElementsByTagName('a')[0]
-          .setAttribute('aria-expanded', 'false')
-        selectedItem
-          .getElementsByTagName('a')[0]
-          .setAttribute('aria-expanded', 'true')
+          .getElementsByTagName("a")[0]
+          .setAttribute("aria-expanded", "false");
+        selectedItem.getElementsByTagName("a")[0].setAttribute("aria-expanded", "true");
       }
-      if (this.screen === 'mobile') {
-        this.focusOnNext(selectedItem)
+      if (this.screen === "mobile") {
+        this.focusOnNext(selectedItem);
       }
     },
     secondLevelClick(item, ref) {
@@ -902,7 +630,6 @@ export default {
       this.isMobileMenuOpen = true
       this.letBodyOverflow(false)
-      // this.showMore = false
       this.$nextTick(() => {
         this.$refs['firstLevelMenuItem-0'][0].firstElementChild.focus()
       })
@@ -1194,7 +921,8 @@ export default {
       if (this.show) {
         this.show = !this.show
       }
-    }
+    },
   },
 }
 </script>

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

@@ -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;
@@ -420,10 +392,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 +411,7 @@
       }
     }
   }
   table {
     display: inline-block;
   }
@@ -587,7 +568,6 @@
   }
   &--box {
-    // position: relative;
     display: none;
     &.clicked {
@@ -603,10 +583,17 @@
       text-align: left;
       position: fixed;
       z-index: 1000;
+      label {
+        margin-bottom: 5px !important;
+      }
+      .last-radio {
+        margin-bottom: 0 !important;
+      }
     }
     label {
       display: block;
-      padding: 6px 0;
+      padding: 10px 0;
       input[type='radio'] {
         border: 2px solid #bebebe;
@@ -634,6 +621,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/Paragraphs/Tabs/index.vue CHANGED Viewed

@@ -13,8 +13,8 @@
       :class="`paragraph--tabs ${workwell ? 'workwell' : ''}`"
     >
       <template v-slot:cardItem>
-        <b-tabs v-model="tabIndex">
-          <b-tab
+        <BTabs v-model:index="tabIndex" card>
+          <BTab
             v-for="(item, index) in items"
             :key="`${index}-${$.uid}`"
             :title="item.title"
@@ -24,8 +24,8 @@
               :content="item.content.value"
               :without-container="true"
             />
-          </b-tab>
-        </b-tabs>
+          </BTab>
+        </BTabs>
       </template>
     </card-grid>
     <container v-else class="pdf-tabs">

package/src/components/Paragraphs/TabulatedData/index.vue CHANGED Viewed

@@ -5,7 +5,7 @@
     :size="'content'"
   >
     <div :class="isFluid ? 'table-scrolled' : ''">
-      <b-table
+      <BTable
         v-if="items"
         :items="items"
         :fields="fields"
@@ -46,20 +46,20 @@
         <template #cell()="data">
           <rich-text :content="data.value" />
         </template>
-      </b-table>
+      </BTable>
     </div>
   </section-group>
 </template>
 <script>
-import SectionGroup from "./../../Containers/SectionGroup/index.vue";
-import RichText from "../../Paragraphs/RichText/index.vue";
-import { BTable } from "bootstrap-vue-next";
-import CaretUp from "./../../../assets/icons/caret-up.svg?url";
-import CaretDown from "./../../../assets/icons/caret-down.svg?url";
+import SectionGroup from './../../Containers/SectionGroup/index.vue'
+import RichText from '../../Paragraphs/RichText/index.vue'
+import { BTable } from 'bootstrap-vue-next'
+import CaretUp from './../../../assets/icons/caret-up.svg?url'
+import CaretDown from './../../../assets/icons/caret-down.svg?url'
 export default {
-  name: "TabulatedData",
+  name: 'TabulatedData',
   components: { SectionGroup, RichText, BTable },
   props: {
     items: {
@@ -80,7 +80,7 @@ export default {
     },
     caption: {
       type: String,
-      default: "",
+      default: '',
       required: false,
     },
     sortBy: {
@@ -91,33 +91,33 @@ export default {
   },
   data() {
     return {
-      newSortBy: this.sortBy ? [{ key: this.sortBy, order: "asc" }] : [],
+      newSortBy: this.sortBy ? [{ key: this.sortBy, order: 'asc' }] : [],
       //sortDesc: false,
       CaretUp,
       CaretDown,
-    };
+    }
   },
   computed: {
     isFluid() {
-      return this.isFixedWidth;
+      return this.isFixedWidth
     },
   },
   methods: {
     accessSort(fieldVar) {
-      const currentSort = fieldVar.thAttr["aria-sort"];
-      if (currentSort === "ascending") {
-        this.newSortBy = [{ key: fieldVar.key, order: "desc" }];
+      const currentSort = fieldVar.thAttr['aria-sort']
+      if (currentSort === 'ascending') {
+        this.newSortBy = [{ key: fieldVar.key, order: 'desc' }]
       } else {
-        this.newSortBy = [{ key: fieldVar.key, order: "asc" }];
+        this.newSortBy = [{ key: fieldVar.key, order: 'asc' }]
       }
     },
   },
-};
+}
 </script>
 <style lang="scss">
 .paragraph--tabulated-data {
-  @import "../../../includes/scss/all";
+  @import '../../../includes/scss/all';
   .section-group__block {
     margin-top: -32px;

package/src/components/SubComponents/VideoThumbnail/index.vue CHANGED Viewed

@@ -17,15 +17,16 @@
       </div>
     </a>
     <!-- Modal -->
-    <b-modal
-      :id="`wcl-video-modal-${video.id}`"
+    <BModal
+      v-if="showModal"
       v-model="showModal"
+      :id="`wcl-video-modal-${video.id}`"
       scrollable
       class="wcl-video-modal__modal"
       no-footer
       size="xl"
     >
-      <div class="wcl-video-modal__video" v-if="showModal">
+      <div class="wcl-video-modal__video">
         <video-media
           :media-title="video.mediaTitle"
           :media-description="video.mediaDescription"
@@ -38,23 +39,23 @@
         />
       </div>
       <template #footer><div></div></template>
-    </b-modal>
+    </BModal>
   </div>
 </template>
 <script>
-import VideoMedia from "./../../Paragraphs/VideoPlayer/index.vue";
-import VideoPlay from "./../../../assets/icons/video-play.svg?url";
-import IconClose from "./../../../assets/icons/icon-close.svg?url";
-import { BModal } from "bootstrap-vue-next";
-import axios from "axios";
+import VideoMedia from './../../Paragraphs/VideoPlayer/index.vue'
+import VideoPlay from './../../../assets/icons/video-play.svg?url'
+import IconClose from './../../../assets/icons/icon-close.svg?url'
+import { BModal } from 'bootstrap-vue-next'
+import axios from 'axios'
 export default {
-  name: "VideoThumbnail",
+  name: 'VideoThumbnail',
   components: {
     VideoMedia,
     IconClose,
-    "b-modal": BModal,
+    'b-modal': BModal,
   },
   props: {
     video: {
@@ -67,42 +68,42 @@ export default {
       VideoPlay,
       IconClose,
       showModal: false,
-      videoThumbnail: "",
-    };
+      videoThumbnail: '',
+    }
   },
   mounted() {
-    this.getVideoThumbnail();
+    this.getVideoThumbnail()
   },
   methods: {
     async getVideoThumbnail(url) {
       try {
-        if (this.video.provider === "youtube") {
-          this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/maxresdefault.jpg`;
-          const response = await axios.head(this.videoThumbnail);
+        if (this.video.provider === 'youtube') {
+          this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/maxresdefault.jpg`
+          const response = await axios.head(this.videoThumbnail)
           if (response.status === 200) {
           } else {
-            this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`;
+            this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`
           }
-        } else if (this.video.provider === "vimeo") {
+        } else if (this.video.provider === 'vimeo') {
           let thumbnail = await axios.get(
-            `https://vimeo.com/api/v2/video/${this.video.id}.json`
-          );
+            `https://vimeo.com/api/v2/video/${this.video.id}.json`,
+          )
           if (thumbnail.data) {
-            this.videoThumbnail = thumbnail.data[0].thumbnail_large;
+            this.videoThumbnail = thumbnail.data[0].thumbnail_large
           }
         }
       } catch (error) {
         if (error.response && error.response.status === 404) {
-          this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`;
+          this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`
         } else {
         }
       }
     },
   },
-};
+}
 </script>
 <style lang="scss" scoped>
-@import "../../../includes/scss/all";
+@import '../../../includes/scss/all';
 // Outside wrapper style
 .wcl-video-thumbnail-wrapper {
   margin-bottom: 32px;
@@ -128,17 +129,17 @@ export default {
         left: 50%;
         //height: 68px;
         //width: 68px;
-        @include fp("height", 65, 68);
-        @include fp("width", 65, 68);
+        @include fp('height', 65, 68);
+        @include fp('width', 65, 68);
         -ms-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
-        @include mq("sm") {
+        @include mq('sm') {
           height: 80px;
           width: 80px;
         }
-        @include mq("xs") {
+        @include mq('xs') {
           height: 64px;
           width: 64px;
         }

package/src/index.js CHANGED Viewed

@@ -7,7 +7,7 @@ import Subheader from './components/Containers/Subheader/index.vue'
 import SectionGroup from './components/Containers/SectionGroup/index.vue'
 import CarouselComponent from './components/Containers/Carousel/index.vue'
-import AppHeader from './components/Global/AppHeader/index.vue'
+import AppHeader from './components/Global/AppHeaderNew/index.vue'
 import AppFooter from './components/Global/AppFooter/index.vue'
 import HeroHeader from './components/Global/HeroHeader/index.vue'
 import SocialShare from './components/Global/SocialShare/index.vue'