@worksafevictoria/wcl7.5 1.8.0 → 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/lib/utility.js

@@ -35,8 +35,6 @@ function isGovSite(url) {
 }
 
 function navigateToPath(path, newTab, nuxtRouter) {
-  debugger
-
   const url = String(path).startsWith('www.') ? `http://${path}` : path
   const isAbsolute = isAbsoluteUrl(url)
   const router = nuxtRouter ? nuxtRouter : this.$router

package/package.json

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

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

@@ -227,7 +227,6 @@ export default {
   },
   methods: {
     cardTitleSelected(selectedCard, ev) {
-      debugger;
       this.clearCards();
       selectedCard.selected = !!!selectedCard.selected;
       const selectedCardModelIndex = this.getChildIndex(selectedCard);
@@ -239,8 +238,6 @@ export default {
       });
     },
     cardSelected(selectedCard, ev) {
-      debugger;
-      console.log("cardSelected selectedCard :- ", selectedCard);
       this.clearCards();
       selectedCard.selected = !!!selectedCard.selected;
       const selectedCardModelIndex = this.getChildIndex(selectedCard);

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)"
@@ -401,8 +405,6 @@ export default {
   },
   methods: {
     cardClicked(ev) {
-      debugger;
-
       if (this.isSelectable) {
         this.parentGrid.cardSelected(this, ev);
       }
@@ -412,7 +414,6 @@ export default {
       }
     },
     cardTitleClicked(ev) {
-      debugger;
       if (this.isCardTitleSelectable) {
         this.parentGrid.cardTitleSelected(this, ev);
       }

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>`
 })