@worksafevictoria/wcl7.5 1.8.0 → 1.9.0-beta.10

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>
@@ -56,7 +54,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 +63,6 @@ export default {
     CarouselComponent,
     Row,
     Column,
-    // mockCarouselItems
   },
   props: {
     contentParser: {
@@ -76,7 +72,6 @@ export default {
    slideList: {
       type: Array,
       required: true,
-      // default: mockCarouselItems
     },
     isStorybook: {
       type: Boolean,