@worksafevictoria/wcl7.5 1.1.0-beta.54 → 1.1.0-beta.55

package/lib/utility.js

@@ -49,7 +49,7 @@ function navigateToPath(path, newTab) {
     hrefTag.click()
   } else {
     const hrefTag = Object.assign(document.createElement('a'), {
-      target: isAbsolute ? '_blank' : '_self',
+      target: newTab ? '_blank' : '_self',
       href: url
     })
     hrefTag.click()

package/package.json

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

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

@@ -58,6 +58,7 @@ import Column from './../../Containers/Column/index.vue'
 import SectionGroup from './../../Containers/SectionGroup/index.vue'
 import debounce from 'lodash/debounce'
 
+
 export default {
   name: 'CardGrid',
   components: { Row, Column, SectionGroup },
@@ -228,10 +229,24 @@ export default {
     window.removeEventListener('resize', this.setColumnSizeDebounce)
   },
   methods: {
+    cardTitleSelected(selectedCard, ev) {
+      this.clearCards()
+      selectedCard.selected = !!!selectedCard.selected
+      const selectedCardModelIndex = this.getChildIndex(selectedCard)
+
+      this.$emit('selected-title', {
+        selectedCard: selectedCard.selected
+          ? this.cards[selectedCardModelIndex]
+          : null,
+        selectedCardModelIndex,
+        ev
+      })
+    },
     cardSelected(selectedCard, ev) {
       this.clearCards()
       selectedCard.selected = !!!selectedCard.selected
       const selectedCardModelIndex = this.getChildIndex(selectedCard)
+
       this.$emit('selected', {
         selectedCard: selectedCard.selected
           ? this.cards[selectedCardModelIndex]

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)"
@@ -67,15 +67,16 @@
             }
           ]"
         >
-        <div>
           <b-card-title
             v-if="cardHeaderTitle !== null && cardHeaderTitle !== undefined"
             :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
@@ -100,9 +101,7 @@
             >
             </card-grid-item-icon>
           </b-card-title>
-        </div>
-          <div>
-            <card-grid-item-caret
+          <card-grid-item-caret
             v-if="caretPosition === 'top'"
             :caret="caret"
             :rtl="rtl"
@@ -128,10 +127,7 @@
             :rtl="rtl"
           >
           </card-grid-item-icon>
-
           <span v-if="pillText" class="visually-hidden">{{ pillText }}</span>
-          </div>
-
         </div>
         <b-card-text
           v-if="$slots.cardDescription || description"
@@ -357,6 +353,10 @@ export default {
     taxonomies: {
       type: Object,
       default: () => {}
+    },
+    isCardTitleSelectable: {
+      type: Boolean,
+      default: false
     }
   },
   data: () => ({
@@ -422,10 +422,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
@@ -845,6 +851,10 @@ export default {
     &--align-right {
       direction: rtl;
     }
+
+    &--cursor {
+      cursor: pointer;
+    }
   }
 }