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

package/.storybook/preview.js

@@ -28,7 +28,7 @@ setup((app) => {
       },
     },
     template:
-      '<a target="_blank" :href="`https://ws-ui.wsvdigital.com.au${this.to}`"><slot></slot></a>',
+      '<a target="_blank" :href="`https://ws-dev.worksafe.vic.gov.au${this.to}`"><slot></slot></a>',
   })
   app.use(createBootstrap())
 })

package/package.json

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

package/src/components/Common/CardGridItem/card-grid-item-caret.vue

@@ -1,73 +1,71 @@
 <template>
   <div
     v-if="caretSrc && loaded"
-    :class="
-      `card-grid-item-caret__container card-grid-item-caret__container--${computedCaret}`
-    "
+    :class="`card-grid-item-caret__container card-grid-item-caret__container--${computedCaret}`"
   >
     <span v-if="caret === 'external'" class="visually-hidden">External link</span>
     <div
       class="tabCaretContainer"
       :class="{
-        tabCaretContainerBottom: isTabbedCard
+        tabCaretContainerBottom: isTabbedCard,
       }"
     >
       <div class="tabCaretText" aria-hidden="true">
         {{ supportText }}
       </div>
-      <icon :glyph="caretSrc" icon-alt="arrow" width="18" float: right
-      :height="caret === 'external' ? 18 : 16" :class=" `item-icon-${ isChev ?
-      'chev' : 'caret'} card-grid-item-caret--${computedCaret}`" />
+      <icon :glyph="caretSrc" icon-alt="Show more" width="18" float: right :height="caret
+      === 'external' ? 18 : 16" :class=" `item-icon-${ isChev ? 'chev' : 'caret'}
+      card-grid-item-caret--${computedCaret}`" />
     </div>
   </div>
 </template>
 
 <script>
-import { getCurrentInstance } from 'vue'
-import Icon from './../../SubComponents/Icon/index.vue'
-import ChevUp from './../../../assets/icons/chev-up.svg?raw'
-import CaretUp from './../../../assets/icons/caret-up.svg?url'
-import ExternalLink from './../../../assets/icons/external-link.svg?raw'
+import { getCurrentInstance } from "vue";
+import Icon from "./../../SubComponents/Icon/index.vue";
+import ChevUp from "./../../../assets/icons/chev-up.svg?raw";
+import CaretUp from "./../../../assets/icons/caret-up.svg?url";
+import ExternalLink from "./../../../assets/icons/external-link.svg?raw";
 
 export default {
-  name: 'CardGridItemCaret',
+  name: "CardGridItemCaret",
   components: { Icon },
   props: {
     caret: {
       type: String,
-      default: null
+      default: null,
     },
     rtl: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
       loaded: false,
-      isChev: false
-    }
+      isChev: false,
+    };
   },
   computed: {
     computedCaret() {
       if (this.rtl) {
-        if (this.caret === 'right') {
-          return 'left'
-        } else if (this.caret === 'left') {
-          return 'right'
+        if (this.caret === "right") {
+          return "left";
+        } else if (this.caret === "left") {
+          return "right";
         }
       }
-      return this.caret
+      return this.caret;
     },
     caretSrc() {
-      if (this.caret === 'external') {
-        return ExternalLink
+      if (this.caret === "external") {
+        return ExternalLink;
       } else if (!this.isChev && this.computedCaret) {
-        return CaretUp
+        return CaretUp;
       } else if (this.isChev && this.computedCaret) {
-        return ChevUp
+        return ChevUp;
       } else {
-        return undefined
+        return undefined;
       }
     },
     //Identify if this is a tabbed card WSV2-374
@@ -75,7 +73,7 @@ export default {
       const instance = getCurrentInstance();
       const parentEl = instance?.parent?.proxy?.$el.parentNode;
 
-      if (parentEl && parentEl.classList.contains('tabbed-card')) {
+      if (parentEl && parentEl.classList.contains("tabbed-card")) {
         return true;
       } else {
         return false;
@@ -83,22 +81,18 @@ export default {
     },
     //If isTabbedCard, then supportive text must be displayed for up and down carets. WSV2-374
     supportText() {
-      if (
-        this.isTabbedCard &&
-        this.computedCaret &&
-        this.computedCaret === 'up'
-      ) {
-        return 'Hide links'
+      if (this.isTabbedCard && this.computedCaret && this.computedCaret === "up") {
+        return "Hide links";
       } else if (
         this.isTabbedCard &&
         this.computedCaret &&
-        this.computedCaret === 'down'
+        this.computedCaret === "down"
       ) {
-        return 'Show links'
+        return "Show links";
       } else {
-        return null
+        return null;
       }
-    }
+    },
   },
   mounted() {
     /* The code below has been removed as part of WSV2-735
@@ -109,13 +103,13 @@ export default {
       .$el['_prevClass'].includes('task-finder-column')
       ? (this.isChev = false)
       : true */
-      
-    this.loaded = true
-  }
-}
+
+    this.loaded = true;
+  },
+};
 </script>
 <style lang="scss" scoped>
-@import '../../../includes/scss/all';
+@import "../../../includes/scss/all";
 .card-grid-item-caret {
   &__container {
     padding-left: 4px;
@@ -149,7 +143,7 @@ export default {
   }
 }
 .tabCaretText {
-  font-style: 'normal';
+  font-style: "normal";
   font-weight: 400;
   font-size: 12px;
   padding-right: 10px;

package/src/components/Common/CardGridItem/card-grid-item-icon.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="imageSrc || glyphSrc || glyphIconComponent"
-    class="card-grid-item-icon"
-  >
+  <div v-if="imageSrc || glyphSrc || glyphIconComponent" class="card-grid-item-icon">
     <div
       v-if="imageSrc"
       :aria-description="imageAlt"
@@ -10,7 +7,7 @@
       :class="{
         [`card-grid-item-icon--img-${
           isMobileView ? 'sm' : isTabletView ? 'md' : 'lg'
-        }-${gridColumnSize}`]: true
+        }-${gridColumnSize}`]: true,
       }"
       :style="`background-image:url(${imageSrc})`"
     >
@@ -20,11 +17,11 @@
       v-else-if="glyphSrc"
       class="card-grid-item-icon--icon"
       :class="{
-        [`card-grid-item-icon--icon-bordered-${iconSize}`]: iconIsBordered
+        [`card-grid-item-icon--icon-bordered-${iconSize}`]: iconIsBordered,
       }"
       :glyph="glyphSrc"
       :key="computedIconSize"
-      icon-alt="alt"
+      icon-alt="card gid item icon"
       :bordered="iconIsBordered"
       :height="computedIconSize"
       :width="computedIconSize"
@@ -38,72 +35,72 @@
   </div>
 </template>
 <script>
-import Icon from './../../SubComponents/Icon/index.vue'
-import arrowRight from './../../../assets/icons/right-arrow.svg?component'
+import Icon from "./../../SubComponents/Icon/index.vue";
+import arrowRight from "./../../../assets/icons/right-arrow.svg?component";
 
 export default {
-  name: 'CardGridItemIcon',
+  name: "CardGridItemIcon",
   components: { Icon, arrowRight },
   props: {
     imageSrc: {
       type: String,
-      default: null
+      default: null,
     },
     imageAlt: {
       type: String,
-      default: null
+      default: null,
     },
     glyphSrc: {
       type: [Object, String],
-      default: null
+      default: null,
     },
     glyphIconComponent: {
       type: String,
-      default: null
+      default: null,
     },
     alt: {
       type: String,
-      default: ''
+      default: "",
     },
     isMobileView: {
-      type: Boolean
+      type: Boolean,
     },
     isTabletView: {
-      type: Boolean
+      type: Boolean,
     },
     gridColumnSize: {
       type: Number,
-      default: null
+      default: null,
     },
     iconSize: {
       type: String,
-      default: ''
+      default: "",
     },
     iconIsBordered: {
-      type: Boolean
-    }
+      type: Boolean,
+    },
   },
   computed: {
     computedIconSize() {
-      return this.iconSize === 'xsmall'
+      return this.iconSize === "xsmall"
         ? 16
-        : this.iconSize === 'small'
+        : this.iconSize === "small"
         ? 32
-        : this.iconSize === 'medium'
+        : this.iconSize === "medium"
         ? 64
         : 80;
-    }
+    },
   },
   data() {
     return {
       arrowRight,
-      glyphComponent: this.glyphIconComponent
-    }
-  }
-}
+      glyphComponent: this.glyphIconComponent,
+    };
+  },
+};
 </script>
 <style lang="scss" scoped>
-@import '../../../includes/scss/all';
+@import "../../../includes/scss/all";
 .card-grid-item-icon {
   width: 100%;
 
@@ -115,9 +112,8 @@ export default {
     border-radius: 8px;
     width: 100%;
     height: 170px;
-    background-size: contain;
     background-position: center center;
-
+    background: no-repeat;
     &-lg {
       &-3,
       &-2,
@@ -142,6 +138,7 @@ export default {
         height: 233px;
       }
     }
+    background-size: contain;
   }
 
   &--icon {

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

@@ -9,10 +9,14 @@
       :class="cardClass"
       :role="buttonRole"
       :aria-checked="
-        buttonRole === 'radio' ? (isSelectable && selected ? 'true' : 'false') : false
+        buttonRole === 'radio' ? (isSelectable && selected ? 'true' : 'false') : undefined
       "
       :aria-expanded="
-        isExpandable ? (isSelectable && selected ? 'true' : 'false') : false
+        buttonRole === 'button' && isExpandable
+          ? isSelectable && selected
+            ? 'true'
+            : 'false'
+          : undefined
       "
       :data-href="link"
       @click="cardClicked($event)"

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

@@ -2,8 +2,9 @@ import CarouselComponent from './index.vue'
 import { mockCarouselItems } from '../../../mock/carousel-items'
 
 export default {
-  title: 'Website-Redesign/Carousel',
+  title: 'Containers/Carousel',
   component: CarouselComponent,
+  tags: ['autodocs'],
   data() {
     return {
       mockCarouselItems
@@ -11,7 +12,8 @@ export default {
   },
   args: {
     carouselItems: mockCarouselItems,
-    storybook: true
+    storybook: true,
+    isParagraph: true,
   },
   
 }
@@ -21,8 +23,8 @@ const DefaultCarousel = (args) => ({
   setup() {
     return { args }
   },
-  template: `<div style="width: 50%; height: auto;">
-  <h2>Carousel Component</h2>
+  template: `<div>
+  <h2 style="padding-left: 50px; padding-bottom: 20px;">Carousel Component</h2>
   <carousel-component v-bind="args"></carousel-component>
   </div>`
 })

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>