@worksafevictoria/wcl7.5 1.1.0-beta.8 → 1.1.0-beta.81

package/src/components/Common/CardGridItem/index.vue

@@ -15,10 +15,10 @@
           ? isSelectable && selected
             ? 'true'
             : 'false'
-          : null
+          : false
       "
       :aria-expanded="
-        isExpandable ? (isSelectable && selected ? 'true' : 'false') : null
+        isExpandable ? (isSelectable && selected ? 'true' : 'false') : false
       "
       :data-href="link"
       @click="cardClicked($event)"
@@ -33,8 +33,8 @@
             [`card-grid-item__control-radio`]:
               isSelectable && buttonRole === 'radio',
             [`card-grid-item__selected-radio`]:
-              selected && buttonRole === 'radio'
-          }
+              selected && buttonRole === 'radio',
+          },
         ]"
       >
         <slot name="cardTop"></slot>
@@ -52,7 +52,7 @@
         :icon-is-bordered="iconIsBordered"
         :class="{
           [`text-left`]: iconPosition === 'top-left',
-          rtl: rtl
+          rtl: rtl,
         }"
       >
       </card-grid-item-icon>
@@ -63,18 +63,20 @@
             {
               rtl: rtl,
               [`card-grid-item__caretContainer__control-radio`]:
-                isSelectable && buttonRole === 'radio'
-            }
+                isSelectable && buttonRole === 'radio',
+            },
           ]"
         >
           <b-card-title
             v-if="cardHeaderTitle !== null && cardHeaderTitle !== undefined"
-            :title-tag="headerTag"
+            :tag="headerTag"
             class="card-grid-item__header"
             :class="{
               [`card-grid-item__header--${headerSize}`]: true,
-              [`card-grid-item__header--align-${headerTextAlign}`]: true
+              [`card-grid-item__header--align-${headerTextAlign}`]: true,
+              'card-grid-item__header--cursor': isCardTitleSelectable,
             }"
+            @click="cardTitleClicked($event)"
           >
             <span>{{ cardHeaderTitle }}</span> &nbsp;
             <card-grid-item-caret
@@ -120,7 +122,7 @@
             class="d-inline card-grid-item-icon--top-right"
             :class="{
               [`text-right`]: iconPosition === 'top-right',
-              rtl: rtl
+              rtl: rtl,
             }"
             :rtl="rtl"
           >
@@ -132,7 +134,7 @@
           text-tag="div"
           class="card-grid-item__body"
           :class="{
-            rtl: rtl
+            rtl: rtl,
           }"
         >
           <div
@@ -140,7 +142,7 @@
             :class="{
               [descriptionClass]: !!descriptionClass,
               [`card-grid-item__description--withIcon`]:
-                iconPosition === 'before-description'
+                iconPosition === 'before-description',
             }"
           >
             <card-grid-item-icon
@@ -179,7 +181,7 @@
         v-if="caretPosition === 'bottom'"
         class="card-grid-item__caretContainer card-grid-item__caretContainer--bottom"
         :class="{
-          rtl: !rtl
+          rtl: !rtl,
         }"
       >
         <card-grid-item-caret :caret="caret" :rtl="rtl" />
@@ -194,52 +196,60 @@
 import CardGridItemIcon from './card-grid-item-icon.vue'
 import CardGridItemCaret from './card-grid-item-caret.vue'
 import RichText from '../../Paragraphs/RichText/index.vue'
-import parseISO from 'date-fns/parseISO'
+import { parseISO } from 'date-fns'
 import { isAbsoluteUrl, isGovSite } from '../../../../lib/utility'
 import { BCard, BCardBody, BCardTitle, BCardText } from 'bootstrap-vue-next'
 
 export default {
   name: 'CardGridItem',
-  components: { CardGridItemIcon, CardGridItemCaret, RichText, BCard, BCardBody, BCardTitle, BCardText  },
+  components: {
+    CardGridItemIcon,
+    CardGridItemCaret,
+    RichText,
+    BCard,
+    BCardBody,
+    BCardTitle,
+    BCardText,
+  },
   props: {
     backgroundVariant: {
       type: String,
       default: 'white',
       validator: (value) =>
-        ['white', 'transparent', 'light'].indexOf(value) >= 0
+        ['white', 'transparent', 'light'].indexOf(value) >= 0,
     },
     imageSrc: {
       type: String,
-      default: null
+      default: null,
     },
     imageAlt: {
       type: String,
-      default: null
+      default: null,
     },
     description: {
       type: String,
-      default: null
+      default: null,
     },
     stripDescriptionHtml: {
-      type: Boolean
+      type: Boolean,
     },
     descriptionClass: {
       type: String,
-      default: ''
+      default: '',
     },
     glyphSrc: {
       type: [Object, String],
-      default: null
+      default: null,
     },
     glyphIconComponent: {
       type: String,
-      default: null
+      default: null,
     },
     iconSize: {
       type: String,
       default: 'small',
       validator: (value) =>
-        ['xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0
+        ['xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0,
     },
     iconPosition: {
       type: String,
@@ -250,108 +260,113 @@ export default {
           'top-left',
           'top-right',
           'after-title',
-          'before-description'
-        ].indexOf(value) >= 0
+          'before-description',
+        ].indexOf(value) >= 0,
     },
     iconIsBordered: {
       type: Boolean,
-      default: true
+      default: true,
     },
     showDivider: {
-      type: Boolean
+      type: Boolean,
     },
     cardHeaderTitle: {
       type: String,
-      default: null
+      default: null,
     },
     invertOnSelectBackground: {
       type: String,
       default: 'none',
-      validator: (value) => ['none', 'yellow', 'black'].indexOf(value) >= 0
+      validator: (value) => ['none', 'yellow', 'black'].indexOf(value) >= 0,
     },
     borderOnSelectBackground: {
       type: String,
       default: 'none',
       validator: (value) =>
-        ['none', 'yellow', 'black', 'blue'].indexOf(value) >= 0
+        ['none', 'yellow', 'black', 'blue'].indexOf(value) >= 0,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     headerSize: {
       type: String,
       default: 'custom',
       validator: (value) =>
         ['medium', 'large', 'extra-large', 'extra-2x-large', 'custom'].indexOf(
-          value
-        ) >= 0
+          value,
+        ) >= 0,
     },
     headerTextAlign: {
       type: String,
       default: 'left',
-      validator: (value) => ['left', 'center', 'right'].indexOf(value) >= 0
+      validator: (value) => ['left', 'center', 'right'].indexOf(value) >= 0,
     },
     headerTag: {
       type: String,
       required: false,
-      default: 'h3'
+      default: 'h3',
     },
     caret: {
       type: String,
       default: undefined,
       validator: (value) =>
-        ['down', 'up', 'right', 'left', 'external'].indexOf(value) >= 0
+        ['down', 'up', 'right', 'left', 'external'].indexOf(value) >= 0,
     },
     caretPosition: {
       type: String,
       default: 'top',
-      validator: (value) => ['top', 'bottom', 'after-title'].indexOf(value) >= 0
+      validator: (value) =>
+        ['top', 'bottom', 'after-title'].indexOf(value) >= 0,
     },
     cardPadding: {
       type: String,
       default: 'none',
       validator: (value) =>
-        ['none', 'xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0
+        ['none', 'xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0,
     },
     borderType: {
       type: String,
       default: 'none',
       validator: (value) =>
-        ['none', 'thin', 'shadow', 'thick', 'dark'].indexOf(value) >= 0
+        ['none', 'thin', 'shadow', 'thick', 'dark'].indexOf(value) >= 0,
     },
     cardTextAlign: {
       type: String,
-      default: 'left'
+      default: 'left',
     },
     disableSelect: {
       type: Boolean,
-      default: false
+      default: false,
     },
     pillText: {
       type: String,
-      default: ''
+      default: '',
     },
     buttonRole: {
       type: String,
-      default: 'link'
+      default: 'link',
     },
     isSelected: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isExpandable: {
       type: Boolean,
-      default: false
+      default: false,
     },
     link: {
       type: [String, Boolean],
-      default: false
+      default: false,
     },
     taxonomies: {
       type: Object,
-      default: () => {}
-    }
+      default: () => {},
+    },
+    isCardTitleSelectable: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: () => ({
     isSelectable: false,
@@ -361,7 +376,7 @@ export default {
     isMobileView: false,
     isTabletView: false,
     selected: false,
-    isAbsoluteUrl
+    isAbsoluteUrl,
   }),
   computed: {
     cardClass() {
@@ -388,12 +403,12 @@ export default {
         [`card-grid-item__card--border-${this.borderType}`]: true,
         [`card-grid-item__card--bg-${this.backgroundVariant}`]: true,
         [`card-grid-item__card--select-${this.buttonRole}`]: true,
-        [`card-grid-item__card--align-${this.cardTextAlign}`]: true
+        [`card-grid-item__card--align-${this.cardTextAlign}`]: true,
       }
     },
     urlHostname() {
       return window.location.protocol + '//' + window.location.host
-    }
+    },
   },
   mounted() {
     this.selected = this.isSelected
@@ -416,10 +431,16 @@ export default {
       if (this.isSelectable) {
         this.parentGrid.cardSelected(this, ev)
       }
+
       if (this.$gtm) {
         this.fireGTM()
       }
     },
+    cardTitleClicked(ev) {
+      if (this.isCardTitleSelectable) {
+        this.parentGrid.cardTitleSelected(this, ev)
+      }
+    },
     getParentGridItem() {
       let counter = 0
       const maxParentDepth = 10
@@ -456,8 +477,8 @@ export default {
       if (theEl && theEl.length > 0) {
         var content = {
           content: this.$diffInDays(
-            parseISO(theEl[0]?.componentOptions?.propsData?.card?.created)
-          )
+            parseISO(theEl[0]?.componentOptions?.propsData?.card?.created),
+          ),
         }
       }
       if (this.$gtm) {
@@ -472,43 +493,46 @@ export default {
           label: this.cardHeaderTitle,
           data: linkURL,
           ...content,
-          ...this.taxonomies
+          ...this.taxonomies,
         }
         // fire the default event
         this.$gtm.push({
           event: 'custom.interaction.tile.click',
           group: this?.parentGrid?.title,
-          ...attrs
+          ...attrs,
         })
         if (this.pillText === 'News') {
           this.$gtm.push({
             event: 'custom.interaction.news.click',
             group: 'News',
-            ...attrs
+            ...attrs,
           })
         }
         if (this.pillText === 'Event') {
           this.$gtm.push({
             event: 'custom.interaction.event.click',
             group: 'Event',
-            ...attrs
+            ...attrs,
           })
         }
         if (this.pillText === 'Safety alert') {
           this.$gtm.push({
             event: 'custom.interaction.safety.click',
             group: 'Safety alert',
-            ...attrs
+            ...attrs,
           })
         }
         if (
           (this.link,
-          this.isAbsoluteUrl(this.link) && process.env.CARETAKER === 'false')
+          this.isAbsoluteUrl(this.link) &&
+            (this.$config
+              ? this.$config.public.caretaker
+              : process.env.CARETAKER) === 'false')
         ) {
           this.$gtm.push({
             event: 'custom.interaction.outboundlink',
             category: this.cardHeaderTitle,
-            label: this.link
+            label: this.link,
           })
         }
       }
@@ -517,16 +541,18 @@ export default {
         this.link &&
         this.isAbsoluteUrl(this.link) &&
         isGovSite(this.link) &&
-        process.env.CARETAKER === 'true'
+        (this.$config
+          ? this.$config.public.caretaker
+          : process.env.CARETAKER) === 'true'
       ) {
         this.$gtm.push({
           event: 'custom.interaction.outboundlink',
           category: this.cardHeaderTitle,
-          label: this.link
+          label: this.link,
         })
       }
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -839,6 +865,10 @@ export default {
     &--align-right {
       direction: rtl;
     }
+
+    &--cursor {
+      cursor: pointer;
+    }
   }
 }
 

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,165 @@
+<template>
+    <div>
+    <b-carousel
+      id="carousel-1"
+      v-model="slide"
+      interval=0
+      controls
+      indicators
+      keyboard
+      background="#ababab"
+    >
+      <b-carousel-slide
+        v-for="item in filteredCarouselItems"
+        :key="item.id"
+        
+        :img-src="item.image"
+        @click.prevent="handleClick(item.link)"
+      >
+      <h4>{{ item.content}}</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].favorite === 'Yes') {
+          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'
+          }
+        }
+      }
+      
+      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 })
+          }
+        }
+      }
+    },
+
+    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;
+}
+
+.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>