@worksafevictoria/wcl7.5 1.1.0-beta.11 → 1.1.0-beta.111

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

@@ -0,0 +1,30 @@
+import CarouselComponent from './index.vue'
+import { mockCarouselItems } from '../../../mock/carousel-items'
+
+export default {
+  title: 'Website-Redesign/Carousel',
+  component: CarouselComponent,
+  data() {
+    return {
+      mockCarouselItems
+    }
+  },
+  args: {
+    carouselItems: mockCarouselItems,
+    storybook: true
+  },
+  
+}
+
+const DefaultCarousel = (args) => ({
+  components: { CarouselComponent },
+  setup() {
+    return { args }
+  },
+  template: `<div style="width: 50%; height: auto;">
+  <h2>Carousel Component</h2>
+  <carousel-component v-bind="args"></carousel-component>
+  </div>`
+})
+
+export const Default = DefaultCarousel.bind({})

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

@@ -0,0 +1,172 @@
+<template>
+    <div>
+    <b-carousel
+      id="carousel-1"
+      v-model="slide"
+      interval=0
+      controls
+      indicators
+      keyboard
+      :fade="true"
+      background="#ababab"
+    >
+      <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)"
+      >
+      <h4>{{ item.field_title}}</h4>
+      </b-carousel-slide>
+    </b-carousel>
+  </div>
+</template>
+
+<script>
+import { BCarousel, BCarouselSlide } from 'bootstrap-vue-next'
+import { isAbsoluteUrl, navigateToPath } from '../../../../lib/utility'
+
+export default {
+  name: 'CarouselComponent',
+  data() {
+    return {
+      slide: 0,
+    }
+  },
+  components: {
+      BCarousel,
+      BCarouselSlide
+  },
+  props: {
+    carouselItems: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+    storybook: {
+      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) {
+          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)
+        } else {
+          if (this.storybook) {
+            alert('This link will go to: ' + link)
+          } else {
+            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('-')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import '../../../includes/scss/all';
+</style>
+
+<style>
+.carousel {
+  position: relative;
+  padding-bottom: 7rem;
+  max-width: 540px;
+}
+
+.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 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-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-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;
+}
+
+</style>

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

@@ -2,43 +2,66 @@ import HomepageHeader from './index.vue'
 
 const header = {
   title: 'This is sentence 1. This is sentence 2.',
-  description: 'description text'
+  description: 'description text',
 }
 
-const fetchMenu = () =>
-  Promise.resolve([
-    {
-      title: 'Report an incident',
-      relative: '/report-incident'
-    },
-    {
-      title: 'Report a case of COVID-19',
-      relative: '/report-confirmed-positive-case-covid-19'
-    },
-    {
-      title: 'Make a claim',
-      relative: '/before-claim'
-    },
-    {
-      title: 'Apply for a licence',
-      relative: '/apply-for-licence'
-    },
-    {
-      title: 'Pay or renew your insurance',
-      relative: '/pay-or-renew-your-workcover-insurance-premium'
-    }
-  ])
+// This is generated server side with useAsyncData
+// const fetchMenu = () =>
+//   Promise.resolve([
+//     {
+//       title: 'Report an incident',
+//       relative: '/report-incident'
+//     },
+//     {
+//       title: 'Report a case of COVID-19',
+//       relative: '/report-confirmed-positive-case-covid-19'
+//     },
+//     {
+//       title: 'Make a claim',
+//       relative: '/before-claim'
+//     },
+//     {
+//       title: 'Apply for a licence',
+//       relative: '/apply-for-licence'
+//     },
+//     {
+//       title: 'Pay or renew your insurance',
+//       relative: '/pay-or-renew-your-workcover-insurance-premium'
+//     }
+//   ])
+const headerLinks = [
+  {
+    text: 'Report an incident',
+    path: '/report-incident',
+  },
+  {
+    text: 'Report a case of COVID-19',
+    path: '/report-confirmed-positive-case-covid-19',
+  },
+  {
+    text: 'Make a claim',
+    path: '/before-claim',
+  },
+  {
+    text: 'Apply for a licence',
+    path: '/apply-for-licence',
+  },
+  {
+    text: 'Pay or renew your insurance',
+    path: '/pay-or-renew-your-workcover-insurance-premium',
+  },
+]
 
 const contentParser = () => {
   return Promise.resolve({
     results: [
       {
         title: 'Content title 1',
-        description: 'Content description 2'
-      }
+        description: 'Content description 2',
+      },
     ],
     offset: 0,
-    numFound: 1000
+    numFound: 1000,
   })
 }
 
@@ -48,31 +71,32 @@ export default {
   argTypes: {
     fetchMenu: {
       control: 'function',
-      table: { disable: true }
+      table: { disable: true },
     },
     contentParser: {
       control: 'function',
-      table: { disable: true }
-    }
+      table: { disable: true },
+    },
   },
   args: {
     heroHeader: header,
-    fetchMenu: fetchMenu,
-    contentParser: contentParser
-  }
+    // fetchMenu: fetchMenu,
+    contentParser: contentParser,
+    headerLinks: headerLinks,
+  },
 }
 
 const DefaultHH = (args) => ({
   components: { HomepageHeader },
   setup() {
-    return { args };
+    return { args }
   },
   mounted() {
     setTimeout(() => {
       this.$refs.hh.renderMenu()
     })
   },
-  template: '<homepage-header v-bind="args" ref="hh" />'
+  template: '<homepage-header v-bind="args" ref="hh" />',
 })
 
-export const Default = DefaultHH.bind({})
+export const Default = DefaultHH.bind({})

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

@@ -14,7 +14,7 @@
     class="homepage-header"
   >
     <template v-slot:top>
-      <slot />
+      <slot></slot>
     </template>
 
     <template v-slot:description>
@@ -30,7 +30,7 @@
     <template v-slot:side>
       <div>
         <cta-button
-          v-for="(link, i) in links"
+          v-for="(link, i) in headerLinks"
           :key="i"
           class="iebtn"
           :url="link.path"
@@ -62,40 +62,23 @@ export default {
   components: {
     Search,
     CtaButton,
-    HeroHeader
+    HeroHeader,
   },
   props: {
     contentParser: {
       type: Function,
-      required: true
+      required: true,
     },
     heroHeader: {
       type: Object,
-      required: true
+      required: true,
     },
-    fetchMenu: {
-      type: Function,
-      required: true
-    }
-  },
-  async fetch() {
-    await this.renderMenu()
+    headerLinks: { type: Array, required: true },
   },
+
   data: () => ({
-    links: [],
-    earthIcon
+    earthIcon,
   }),
-  methods: {
-    async renderMenu() {
-      const menu = await this.fetchMenu()
-      this.links = (Array.isArray(menu) ? menu : []).map((item) => {
-        return {
-          text: item.title,
-          path: item.relative || item.absolute
-        }
-      })
-    }
-  }
 }
 </script>
 <style lang="scss" scoped>
@@ -110,6 +93,7 @@ export default {
         font-size: 32px;
         line-height: 32px;
       }
+
       @media screen and (max-width: 767px) {
         font-size: 36px;
         line-height: 36px;
@@ -134,7 +118,9 @@ export default {
         margin-top: 32px;
       }
     }
+
     margin-left: 0 !important;
+
     &:last-of-type {
       img {
         position: absolute;
@@ -146,9 +132,11 @@ export default {
 
   &__search {
     padding-right: 15px;
+
     @include mq('xs') {
       padding-right: 0;
     }
+
     :deep(.gsc-results-wrapper-visible) {
       display: none !important;
     }
@@ -159,7 +147,9 @@ export default {
     .iebtn {
       bottom: 280px;
       left: 650px;
-    } /* IE11 */
+    }
+
+    /* IE11 */
 
     @media screen\9, screen and (max-width: 1150px) {
       .iebtn {

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

@@ -0,0 +1,75 @@
+import HomepageHeader from './index.vue'
+import { mockCarouselItems } from '../../../mock/carousel-items'
+
+
+const headerLinks = [
+    {
+      text: 'Report an incident',
+      path: '/report-incident'
+    },
+    {
+      text: 'Report a case of COVID-19',
+      path: '/report-confirmed-positive-case-covid-19'
+    },
+    {
+      text: 'Make a claim',
+      path: '/before-claim'
+    },
+    {
+      text: 'Apply for a licence',
+      path: '/apply-for-licence'
+    },
+    {
+      text: 'Pay or renew your insurance',
+      path: '/pay-or-renew-your-workcover-insurance-premium'
+    }
+  ]
+
+  const contentParser = () => {
+    return Promise.resolve({
+      results: [
+        {
+          title: 'Content title 1',
+          description: 'Content description 2'
+        }
+      ],
+      offset: 0,
+      numFound: 1000
+    })
+  }
+
+export default {
+  title: 'Website_Redesign/HomepageHeader',
+  component: HomepageHeader,
+  argTypes: {
+    fetchMenu: {
+      control: 'function',
+      table: { disable: true }
+    },
+    contentParser: {
+      control: 'function',
+      table: { disable: true }
+    }
+  },
+  args: {
+    slideList: mockCarouselItems,
+    isStorybook: true,
+    contentParser: contentParser,
+    headerLinks: headerLinks,
+  }
+}
+
+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({})