@worksafevictoria/wcl7.5 1.10.0 → 1.12.0

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

@@ -1,9 +1,10 @@
 <template>
-    <div>
+  <div>
     <b-carousel
       id="carousel-1"
+      :class="{carouselPara: isParagraph}"
       v-model="slide"
-      interval=0
+      interval="0"
       controls
       indicators
       keyboard
@@ -13,160 +14,170 @@
       <b-carousel-slide
         v-for="item in filteredCarouselItems"
         :key="item.id"
-        :img-src="getImageURL(item.field_image.field_media_image?.uri?.url)"
-        @click.prevent="handleClick(item.field_link.url)"
+        :img-src="getImageURL(item.imageURL)"
+        :img-alt="item.imageAlt"
+        @click.prevent="handleClick(item.linkURL)"
       >
-      <h4>{{ item.field_title}}</h4>
+      <h4>{{ item.title }}</h4>
       </b-carousel-slide>
     </b-carousel>
   </div>
 </template>
 
 <script>
-import { BCarousel, BCarouselSlide } from 'bootstrap-vue-next'
-import { isAbsoluteUrl, navigateToPath } from '../../../../lib/utility'
+import { BCarousel, BCarouselSlide } from "bootstrap-vue-next"
+import { isAbsoluteUrl, navigateToPath } from "../../../../lib/utility"
 
 export default {
-  name: 'CarouselComponent',
-  data() {
-    return {
-      slide: 0,
-    }
+name: "CarouselComponent",
+data() {
+  return {
+    slide: 0,
+  }
+},
+components: {
+  BCarousel,
+  BCarouselSlide,
+},
+props: {
+  carouselItems: {
+    type: Array,
+    required: true,
+    default: () => [],
   },
-  components: {
-      BCarousel,
-      BCarouselSlide
+  storybook: {
+    type: Boolean,
+    default: false,
   },
-  props: {
-    carouselItems: {
-      type: Array,
-      required: true,
-      default: () => [],
-    },
-    storybook: {
-      type: Boolean,
-      default: false
-    }
+  isParagraph: {
+    type: Boolean,
+    default: false,
   },
-  computed: {
-    filteredCarouselItems() {
-      
-      var todayDate = new Date()
-      
-      for (var i = 0, length = this.carouselItems.length; i < length; i++) {
-        if (this.carouselItems[i].field_favorite === true) {
+},
+computed: {
+  filteredCarouselItems() {
+    
+    var todayDate = new Date();
+    
+    for (var i = 0, length = this.carouselItems.length; i < length; i++) {
+      if (this.carouselItems[i].favourite === true) {
+        this.carouselItems[i].active = 'Yes';
+      } else if (new Date(this.carouselItems[i].dateStart).valueOf() <= todayDate.valueOf()) {
+        if (new Date(this.carouselItems[i].dateEnd).valueOf() >= todayDate.valueOf()) {
           this.carouselItems[i].active = 'Yes'
-        } else if (new Date(this.carouselItems[i].field_date_start).valueOf() <= todayDate.valueOf()) {
-          if (new Date(this.carouselItems[i].field_date_end).valueOf() >= todayDate.valueOf()) {
-            this.carouselItems[i].active = 'Yes'
-          }
         }
       }
-      
-      let filtered = this.carouselItems.filter(e => 
-        e.active === 'Yes');
-      return filtered
     }
-  },
-  methods: {
-
-    handleClick(link) {
-      if (link) {
-        if (isAbsoluteUrl(link)) {
-          navigateToPath(link, true)
+    
+    let filtered = this.carouselItems.filter(e => e.active === "Yes");
+    return filtered;
+  }
+},
+methods: {
+
+  handleClick(link) {
+    if (link) {
+      if (isAbsoluteUrl(link)) {
+        navigateToPath(link, true);
+      } else {
+        if (this.storybook) {
+          alert('This link will go to: ' + link);
         } else {
-          if (this.storybook) {
-            alert('This link will go to: ' + link)
-          } else {
-            this.$router.push({ path: link })
-          }
+          this.$router.push({ path: link });
         }
       }
-    },
-
-    getImageURL(imagePath) {
-      let apiPath = this.$config ? this.$config.public.apiURL : process.env.CONTENT_API_URL;
-      let fullPath = apiPath.concat(imagePath)
-      return fullPath
-    },
-
-    formatDate(date) {
-      return [
-        date.getFullYear(),
-        ('0' + date.getDate()).slice(-2),
-        ('0' + (date.getMonth() + 1)).slice(-2)
-      ].join('-')
     }
+  },
+
+  getImageURL(imagePath) {
+    let apiPath = this.$config ? this.$config.public.apiURL : process.env.CONTENT_API_URL;
+    let fullPath = apiPath.concat(imagePath);
+     return fullPath;
+  },
+
+  formatDate(date) {
+    return [
+      date.getFullYear(),
+      ('0' + date.getDate()).slice(-2),
+      ('0' + (date.getMonth() + 1)).slice(-2)
+    ].join('-');
   }
 }
+}
 </script>
 
 <style lang="scss" scoped>
-  @import '../../../includes/scss/all';
+  @use '../../../includes/scss/all';
 </style>
 
 <style>
-.carousel {
-  position: relative;
-  padding-bottom: 7rem;
-  max-width: 540px;
-}
+  .carousel {
+    position: relative;
+    padding-bottom: 7rem;
+    max-width: 540px;
+  }
 
-.carousel-inner {
-  overflow: visible;
-}
+  .carousel-inner {
+    overflow: visible;
+  }
 
-.carousel-indicators {
-  padding-bottom: 3rem;
-  float: right;
-  right: 2% !important;
-  width: 20%;
-  justify-content: end;
-  margin-left: 80%;
-  margin-right: 0;
-}
+  .carousel-indicators {
+    padding-bottom: 3rem;
+    float: right;
+    right: 2% !important;
+    width: 20%;
+    justify-content: end;
+    margin-left: 80%;
+    margin-right: 0;
+  }
 
-.carousel-indicators button {
-  width: 10px !important;
-  height: 10px !important;
-  border-radius: 50% !important;
-  background-color: black !important;
-}
+  .carousel-indicators button {
+    width: 10px !important;
+    height: 10px !important;
+    border-radius: 50% !important;
+    background-color: black !important;
+  }
 
-.carousel-indicators button:focus,
-.carousel-indicators button:active {
-  outline: none !important;
-  box-shadow: none;
+  .carousel-indicators button:focus,
+  .carousel-indicators button:active {
+    outline: none !important;
+    box-shadow: none;
+  }
 
-}
+  .carousel-caption {
+    color: black;
+    top: 100%;
+    left: 0;
+    right: 20%;
+    text-align: left;
+    text-decoration: underline;
+  }
 
-.carousel-caption {
-  color: black;
-  top: 100%;
-  left: 0;
-  right: 20%;
-  text-align: left;
-  text-decoration: underline;
-}
+  .carousel-control-next,
+  .carousel-control-prev {
+    bottom: 7rem;
+  }
 
-.carousel-control-next,
-.carousel-control-prev {
-  bottom: 7rem;
-}
+  .carousel-control-prev:focus,
+  .carousel-control-prev:active,
+  .carousel-control-next:focus,
+  .carousel-control-next:active {
+    outline: none !important;
+    box-shadow: none;
+  }
 
-.carousel-control-prev:focus,
-.carousel-control-prev:active,
-.carousel-control-next:focus,
-.carousel-control-next:active {
-  outline: none !important;
-  box-shadow: none;
-}
+  .carousel-control-prev-icon,
+  .carousel-control-next-icon {
+    height: 50px !important;
+    width: 50px !important;
+    outline:none !important;
+  }
 
-.carousel-control-prev-icon,
-.carousel-control-next-icon {
-  height: 50px !important;
-  width: 50px !important;
-  outline:none !important;
-}
+  .carouselPara {
+    margin-left: auto;
+    margin-right: auto;
+    width: 75%;
+    height: auto;
+  }
 
 </style>

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

@@ -99,4 +99,4 @@ const DefaultHH = (args) => ({
   template: '<homepage-header v-bind="args" ref="hh" />',
 })
 
-export const Default = DefaultHH.bind({})
+export const Former = DefaultHH.bind({})

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

@@ -39,8 +39,9 @@ const headerLinks = [
   }
 
 export default {
-  title: 'Website_Redesign/HomepageHeader',
+  title: 'Containers/HomepageHeader',
   component: HomepageHeader,
+  tags: ['autodocs'],
   argTypes: {
     fetchMenu: {
       control: 'function',
@@ -59,17 +60,4 @@ export default {
   }
 }
 
-const DefaultHH = (args) => ({
-  components: { HomepageHeader },
-  setup() {
-    return { args };
-  },
-  mounted() {
-    setTimeout(() => {
-      this.$refs.hh.renderMenu()
-    })
-  },
-  template: '<homepage-header v-bind="args" ref="hh" />'
-})
-
-export const Default = DefaultHH.bind({})
+export const New = {}

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

@@ -1,5 +1,3 @@
-<!-- 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"> 
     <container>
@@ -22,8 +20,9 @@
               :md="7"
             >
               <carousel-component 
-                :carouselItems="this.slideList"
-                :storybook="this.isStorybook"
+                :carousel-items="slideList"
+                :storybook="isStorybook"
+                :is-paragraph="false"
               />
           </column>
           <column
@@ -56,7 +55,6 @@ 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',
@@ -66,7 +64,6 @@ export default {
     CarouselComponent,
     Row,
     Column,
-    // mockCarouselItems
   },
   props: {
     contentParser: {
@@ -76,7 +73,6 @@ export default {
    slideList: {
       type: Array,
       required: true,
-      // default: mockCarouselItems
     },
     isStorybook: {
       type: Boolean,

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

@@ -17,8 +17,6 @@
               <input
                 id="frYes"
                 type="radio"
-                :aria-checked="isSet('Yes') ? 'true' : 'false'"
-                role="radio"
                 name="feedback-radio"
                 value="Yes"
                 @change="setResponse($event)"
@@ -27,8 +25,6 @@
               <input
                 id="frNo"
                 type="radio"
-                :aria-checked="isSet('No') ? 'true' : 'false'"
-                role="radio"
                 name="feedback-radio"
                 value="No"
                 @change="setResponse($event)"
@@ -36,8 +32,8 @@
               <label for="frNo" class="option">No</label>
             </div>
             <div v-if="submitted">
-              <img class="feedback-tick" alt="" :src="Tick" />Thank you for your
-              feedback
+              <img class="feedback-tick" alt="feedback tick" :src="Tick" />Thank
+              you for your feedback
             </div>
           </column>
           <column
@@ -140,7 +136,7 @@
                   height="12"
                   width="17"
                   class="app-footer-menu__title__caret"
-                  alt=""
+                  alt="expand icon"
                 />
                 <img
                   v-show="menuItem.isOpen"
@@ -148,25 +144,33 @@
                   height="12"
                   width="17"
                   class="app-footer-menu__title__caret"
-                  alt=""
+                  alt="collapse icon"
                 />
 
                 <a
                   v-if="menuItem.absolute === menuItem.relative"
-                  :role="!menuItem.absolute ? 'button' : false"
-                  :href="menuItem.absolute"
-                  class="app-footer-menu__title--link dark"
-                  :class="!menuItem.absolute ? 'nolink' : false"
+                  :role="!menuItem.absolute ? 'button' : null"
+                  :href="menuItem.absolute || undefined"
+                  :class="[
+                    'app-footer-menu__title--link',
+                    'dark',
+                    { nolink: !menuItem.absolute },
+                  ]"
+                  :tabindex="!menuItem.absolute ? 0 : -1"
                   target="_blank"
                   :aria-expanded="
-                    isMobile ? (menuItem.isOpen ? 'true' : 'false') : false
+                    isMobile && !menuItem.absolute
+                      ? menuItem.isOpen
+                        ? 'true'
+                        : 'false'
+                      : undefined
                   "
                   @click.prevent="handleAbsoluteClick(menuItem)"
                   ><h2>{{ menuItem.title }}</h2>
                 </a>
                 <nuxt-link
                   v-else
-                  :to="menuItem.relative"
+                  :to="menuItem.title"
                   class="app-footer-menu__title--link dark"
                 >
                   <h2>{{ menuItem.title }}</h2>
@@ -189,14 +193,14 @@
                       :href="subItem.absolute"
                       target="_blank"
                       class="app-footer-menu__item--link dark"
-                      @click.prevent="handleAbsoluteClick(subItem)"
+                      @click="handleAbsoluteClick(subItem)"
                       >{{ subItem.title
                       }}<img
                         :src="ExternalLink"
                         height="12"
                         width="12"
                         class="app-footer-menu__item--icon"
-                        alt="external link"
+                        alt="External link"
                       />
                     </a>
                     <nuxt-link
@@ -220,10 +224,15 @@
               >
                 <a
                   :aria-expanded="
-                    isMobile ? (contactMenuIsOpen ? 'true' : 'false') : false
+                    isMobile
+                      ? contactMenuIsOpen
+                        ? 'true'
+                        : 'false'
+                      : undefined
                   "
                   role="button"
                   class="app-footer-menu__title--link dark nolink"
+                  tabindex="0"
                   ><h2>Contact</h2></a
                 >
                 <img
@@ -232,7 +241,7 @@
                   height="12"
                   width="17"
                   class="app-footer-menu__title__caret"
-                  alt=""
+                  alt="expand icon"
                 />
                 <img
                   v-show="contactMenuIsOpen"
@@ -240,7 +249,7 @@
                   height="12"
                   width="17"
                   class="app-footer-menu__title__caret"
-                  alt=""
+                  alt="collapse icon"
                 />
                 <ul
                   class="submenu"
@@ -348,6 +357,7 @@
                 height="24"
                 class="app-footer__main__subscribe--icon"
                 :glyph="ExternalLinkRaw"
+                icon-alt="External link icon"
               />
             </button>
           </column>

package/src/components/Global/AppHeader/ModalSearch/index.vue

@@ -7,7 +7,13 @@
       @click="$emit('closed')"
     >
       Close menu
-      <img class="app-search__close-icon" width="22" height="18" :src="Close" />
+      <img
+        class="app-search__close-icon"
+        alt="search close icon"
+        width="22"
+        height="18"
+        :src="Close"
+      />
     </button>
     <form @submit.prevent>
       <label class="app-search__label font-weight-bold" for="app-search--search-input-box"

package/src/components/Global/AppHeader/index.stories.js

@@ -18,7 +18,7 @@ const contentParser = () => {
 export default {
   title: 'Global/AppHeader',
   component: AppHeader,
-  tags: ['autodocs'],
+  
   data() {
     return {
       appHeaderData
@@ -71,4 +71,4 @@ const DefaultContent = (args) => ({
   `
 })
 
-export const Default = DefaultContent.bind({})
+export const Former = DefaultContent.bind({})

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

@@ -7,12 +7,16 @@
       @click="$emit('closed')"
     >
       Close menu
-      <img class="app-search__close-icon" width="22" height="18" :src="Close" />
+      <img
+        class="app-search__close-icon"
+        width="22"
+        height="18"
+        :src="Close"
+        alt="search close icon"
+      />
     </button>
     <form @submit.prevent>
-      <label
-        class="app-search__label font-weight-bold"
-        for="app-search--search-input-box"
+      <label class="app-search__label font-weight-bold" for="app-search--search-input-box"
         >Search WorkSafe</label
       >
       <search
@@ -32,40 +36,40 @@
 </template>
 
 <script>
-import Close from '../../../../assets/icons/close.svg?url'
-import Search from '../../../SubComponents/Search/index.vue'
+import Close from "../../../../assets/icons/close.svg?url";
+import Search from "../../../SubComponents/Search/index.vue";
 
 export default {
-  name: 'ModalSearch',
+  name: "ModalSearch",
   components: { Search },
   props: {
     searchQuery: {
       type: String,
-      default: ''
+      default: "",
     },
     contentParser: {
       type: Function,
-      required: true
+      required: true,
     },
     googleSearchFlag: {
       type: String,
-      default: 'googlerest'
-    }
+      default: "googlerest",
+    },
   },
   data() {
     return {
       pageLimit: 20,
       pageNumber: 1,
       searchResults: null,
-      Close
-    }
+      Close,
+    };
   },
   mounted() {
-    this.$refs.searchInputBox.$el.querySelector('input').focus()
-  }
-}
+    this.$refs.searchInputBox.$el.querySelector("input").focus();
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-@import './styles';
+@import "./styles";
 </style>

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

@@ -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.stories.js

@@ -16,7 +16,7 @@ const contentParser = () => {
 
 
 export default {
-  title: 'Website_Redesign/AppHeader',
+  title: 'Global/AppHeader',
   component: AppHeader,
   tags: ['autodocs'],
   data() {
@@ -71,4 +71,4 @@ const DefaultContent = (args) => ({
   `
 })
 
-export const Default = DefaultContent.bind({})
+export const New = DefaultContent.bind({})