@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,321 @@
+<template>
+  <section-group
+    :background-variant="backgroundVariant"
+    :no-padding-top="noPaddingTop"
+    :no-padding-bottom="noPaddingBottom"
+    :apply-background-on="applyBackgroundOn"
+    :size="size"
+    :rtl="rtl"
+    :title="title"
+    :sub-heading="subHeading"
+    :title-tag="titleTag"
+    class="card-grid"
+    :content-class="contentClass"
+    :class="{
+      [uniqueClass]: true
+    }"
+  >
+    <template v-if="$slots.gridHeaderRight" v-slot:headerRight>
+      <slot name="gridHeaderRight"></slot>
+    </template>
+    <template v-if="$slots.gridPreContent" v-slot:preContent>
+      <slot name="gridPreContent"></slot>
+    </template>
+    <template v-if="cards.length > 0" v-slot:content>
+      <row
+        ref="cardRow"
+        :class="{
+          ['card-grid__row--' + rowSpacing]: true,
+          ['card-grid__row--' + rowClasses]: true
+        }"
+      >
+        <column
+          v-for="(item, index) in cards"
+          :key="`${redrawCounter}-${index}-${_uid}`"
+          ref="cardColumns"
+          :lg="largeViewPort"
+          :md="mediumViewPort"
+          :sm="smallViewPort"
+          cols="12"
+          class="card-grid__column"
+          :class="{
+            ['card-grid__column--' + columnSpacing]: true
+          }"
+        >
+          <slot name="cardItem" :card="item" :index="index"></slot>
+        </column>
+      </row>
+    </template>
+    <template v-if="$slots.cardGridFooter" v-slot:footer>
+      <slot name="cardGridFooter"></slot>
+    </template>
+  </section-group>
+</template>
+
+<script>
+import Row from './../../Containers/Row/index.vue'
+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 },
+  props: {
+    title: {
+      type: String,
+      default: null
+    },
+    subHeading: {
+      type: String,
+      default: null
+    },
+    titleTag: {
+      type: String,
+      default: 'h2'
+    },
+    cards: {
+      type: Array,
+      default: () => []
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    columnsPerRow: {
+      type: Number,
+      default: 3
+    },
+    forceLgColumnsPerRow: {
+      type: Number,
+      default: undefined
+    },
+    forceMdColumnsPerRow: {
+      type: Number,
+      default: undefined
+    },
+    forceSmColumnsPerRow: {
+      type: Number,
+      default: undefined
+    },
+    size: {
+      type: String,
+      default: 'page',
+      validator: (value) =>
+        ['half-content', 'content', 'page', 'full'].indexOf(value) >= 0
+    },
+    isSelectable: {
+      type: Boolean
+    },
+    cardIdPrefix: {
+      type: String,
+      default: null
+    },
+    backgroundVariant: {
+      type: String,
+      default: 'none',
+      validator: (value) =>
+        [
+          'none',
+          'light',
+          'dark',
+          'grey',
+          'yellow',
+          'white',
+          'lightblue'
+        ].indexOf(value) >= 0
+    },
+    applyBackgroundOn: {
+      type: String,
+      default: 'section',
+      validator: (value) =>
+        ['content', 'block', 'container', 'section'].indexOf(value) >= 0
+    },
+    noPaddingTop: {
+      type: Boolean
+    },
+    noPaddingBottom: {
+      type: Boolean
+    },
+    rowSpacing: {
+      type: String,
+      default: 'large',
+      validator: (value) => ['none', 'small', 'large'].indexOf(value) >= 0
+    },
+    rowClasses: {
+      type: String,
+      default: null
+    },
+    columnSpacing: {
+      type: String,
+      default: 'default',
+      validator: (value) => ['default', 'none'].indexOf(value) >= 0
+    },
+    contentClass: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      childCards: [],
+      redrawCounter: 0,
+      setColumnSizeDebounce: debounce(this.setColumnSize, 500)
+    }
+  },
+  computed: {
+    largeViewPort() {
+      if (this.forceLgColumnsPerRow) {
+        return 12 / this.forceLgColumnsPerRow
+      }
+      return 12 / this.cards.length > 12 / (this.columnsPerRow || 3)
+        ? 12 / this.cards.length
+        : 12 / this.columnsPerRow
+    },
+    mediumViewPort() {
+      if (this.forceMdColumnsPerRow) {
+        return 12 / this.forceLgColumnsPerRow
+      }
+      if (this.largeViewPort === 6) {
+        return 6
+      }
+      return 4
+    },
+    smallViewPort() {
+      if (this.forceSmColumnsPerRow) {
+        return 12 / this.forceLgColumnsPerRow
+      }
+      return 6
+    },
+    uniqueClass() {
+      return 'cardGrid' + this._uid
+    }
+  },
+  watch: {
+    cards: {
+      handler: function() {
+        this.redrawCounter += 1
+        this.setColumnSizeDebounce()
+      },
+      deep: true
+    },
+    columnsPerRow: {
+      handler: function() {
+        this.setColumnSizeDebounce()
+      }
+    },
+    forceSmColumnsPerRow: {
+      handler: function() {
+        this.setColumnSizeDebounce()
+      }
+    },
+    forceMdColumnsPerRow: {
+      handler: function() {
+        this.setColumnSizeDebounce()
+      }
+    },
+    forceLgColumnsPerRow: {
+      handler: function() {
+        this.setColumnSizeDebounce()
+      }
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', this.setColumnSizeDebounce)
+    this.setColumnSizeDebounce()
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.setColumnSizeDebounce)
+  },
+  methods: {
+    cardSelected(selectedCard, ev) {
+      this.clearCards()
+      selectedCard.selected = !!!selectedCard.selected
+      const selectedCardModelIndex = this.getChildIndex(selectedCard)
+      this.$emit('selected', {
+        selectedCard: selectedCard.selected
+          ? this.cards[selectedCardModelIndex]
+          : null,
+        selectedCardModelIndex,
+        ev
+      })
+    },
+    clearCards(selectedCard) {
+      this.childCards.forEach((card) => {
+        card.selected = false
+        if (!selectedCard || selectedCard !== card) {
+          card.selected = false
+        }
+      })
+    },
+    getChildIndex(selectedCard) {
+      return this.childCards.findIndex((item) => item === selectedCard)
+    },
+    registerChild(child) {
+      this.childCards.push(child)
+      this.setColumnSizeDebounce()
+    },
+    deregisterChild(child) {
+      const index = this.childCards.indexOf(child)
+      if (index > -1) {
+        this.childCards.splice(index, 1)
+      }
+    },
+    setColumnSize() {
+      setTimeout(() => {
+        const columns = this.$refs.cardColumns
+        if (Array.isArray(columns) && columns.length > 0) {
+          const row = this.$refs.cardRow
+          const elementWidth = columns[0].$el.offsetWidth
+          const parentWidth = row.$el.offsetWidth
+          const gridColumnSize = parseInt(parentWidth / elementWidth)
+          const isMobileView = parentWidth < 480
+          const isTabletView = !isMobileView && parentWidth < 767
+          this.$emit('isMobileView', isMobileView)
+          this.$emit('isTabletView', isTabletView)
+          this.$emit('isDesktopView', !isTabletView && !isMobileView)
+          this.$emit('isMobileOrTabletView', isMobileView || isTabletView)
+          this.$emit('gridColumnSize', gridColumnSize)
+          this.childCards.forEach((card) =>
+            card.setGridMetaData(gridColumnSize, isMobileView, isTabletView)
+          )
+        }
+      })
+    },
+    handleFocus(ev) {
+      this.$emit('focussed', ev)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+.card-grid {
+  &__column {
+    &--default {
+      padding-right: 16px;
+      padding-left: 16px;
+    }
+    &--none {
+      padding-right: 0;
+      padding-left: 0;
+    }
+  }
+
+  &__row {
+    &--large {
+      row-gap: 32px !important;
+    }
+    &--small {
+      row-gap: 12px !important;
+    }
+    &--none {
+      row-gap: 0px !important;
+      :deep(button:focus) {
+        outline-offset: -3px;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,164 @@
+<template>
+  <div
+    v-if="caretSrc && loaded"
+    :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
+      }"
+    >
+      <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}`" />
+    </div>
+  </div>
+</template>
+
+<script>
+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',
+  components: { Icon },
+  props: {
+    caret: {
+      type: String,
+      default: null
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loaded: false,
+      isChev: false
+    }
+  },
+  computed: {
+    computedCaret() {
+      if (this.rtl) {
+        if (this.caret === 'right') {
+          return 'left'
+        } else if (this.caret === 'left') {
+          return 'right'
+        }
+      }
+      return this.caret
+    },
+    caretSrc() {
+      if (this.caret === 'external') {
+        return ExternalLink
+      } else if (!this.isChev && this.computedCaret) {
+        return CaretUp
+      } else if (this.isChev && this.computedCaret) {
+        return ChevUp
+      } else {
+        return undefined
+      }
+    },
+    //Identify if this is a tabbed card WSV2-374
+    isTabbedCard() {
+      const TabCardClassList = this.$parent.$el.classList
+      if (TabCardClassList.contains('tabbed-card')) {
+        return true
+      } else {
+        return false
+      }
+    },
+    //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'
+      } else if (
+        this.isTabbedCard &&
+        this.computedCaret &&
+        this.computedCaret === 'down'
+      ) {
+        return 'Show links'
+      } else {
+        return null
+      }
+    }
+  },
+  mounted() {
+    /* The code below has been removed as part of WSV2-735
+    as it appears to do nothing (isChev is already set to false) and was generating errors */
+
+    /* this.$parent
+      .getParentGridItem()
+      .$el['_prevClass'].includes('task-finder-column')
+      ? (this.isChev = false)
+      : true */
+      
+    this.loaded = true
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+.card-grid-item-caret {
+  &__container {
+    padding-left: 4px;
+    padding-right: 4px;
+    padding-top: 4px;
+    &--right,
+    &--external {
+      padding-top: 0px;
+      margin-top: -2px;
+    }
+    .item-icon-caret {
+      :deep(img) {
+        width: 18px;
+        height: auto;
+        padding-bottom: 4px;
+      }
+    }
+  }
+
+  &--down {
+    transform: rotate(180deg);
+    display: block;
+  }
+  &--right {
+    transform: rotate(90deg);
+    display: block;
+  }
+  &--left {
+    transform: rotate(270deg);
+    display: block;
+  }
+}
+.tabCaretText {
+  font-style: 'normal';
+  font-weight: 400;
+  font-size: 12px;
+  padding-right: 10px;
+  padding-left: 10px;
+  padding-top: 1.5px;
+  order: 1;
+}
+.tabCaretContainerBottom {
+  margin-top: 12px;
+}
+.tabCaretContainer {
+  display: flex;
+  height: 20px;
+}
+</style>

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

@@ -0,0 +1,163 @@
+<template>
+  <div
+    v-if="imageSrc || glyphSrc || glyphIconComponent"
+    class="card-grid-item-icon"
+  >
+    <div
+      v-if="imageSrc"
+      :aria-description="imageAlt"
+      class="card-grid-item-icon--img"
+      :class="{
+        [`card-grid-item-icon--img-${
+          isMobileView ? 'sm' : isTabletView ? 'md' : 'lg'
+        }-${gridColumnSize}`]: true
+      }"
+      :style="`background-image:url(${imageSrc})`"
+    >
+      &nbsp;
+    </div>
+    <icon
+      v-else-if="glyphSrc"
+      class="card-grid-item-icon--icon"
+      :class="{
+        [`card-grid-item-icon--icon-bordered-${iconSize}`]: iconIsBordered
+      }"
+      :glyph="glyphSrc"
+      icon-alt="alt"
+      :height="
+        iconSize === 'xsmall'
+          ? 16
+          : iconSize === 'small'
+          ? 32
+          : iconSize === 'medium'
+          ? 64
+          : 80
+      "
+      :width="
+        iconSize === 'xsmall'
+          ? 16
+          : iconSize === 'small'
+          ? 32
+          : iconSize === 'medium'
+          ? 64
+          : 80
+      "
+      :bordered="iconIsBordered"
+    />
+    <component
+      :is="glyphComponent"
+      v-else-if="glyphIconComponent"
+      class="card-grid-item-icon--icon"
+    />
+    <slot></slot>
+  </div>
+</template>
+<script>
+import Icon from './../../SubComponents/Icon/index.vue'
+import arrowRight from './../../../assets/icons/right-arrow.svg?raw'
+
+export default {
+  name: 'CardGridItemIcon',
+  components: { Icon, arrowRight },
+  props: {
+    imageSrc: {
+      type: String,
+      default: null
+    },
+    imageAlt: {
+      type: String,
+      default: null
+    },
+    glyphSrc: {
+      type: [Object, String],
+      default: null
+    },
+    glyphIconComponent: {
+      type: String,
+      default: null
+    },
+    alt: {
+      type: String,
+      default: ''
+    },
+    isMobileView: {
+      type: Boolean
+    },
+    isTabletView: {
+      type: Boolean
+    },
+    gridColumnSize: {
+      type: Number,
+      default: null
+    },
+    iconSize: {
+      type: String,
+      default: ''
+    },
+    iconIsBordered: {
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      arrowRight,
+      glyphComponent: this.glyphIconComponent
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+.card-grid-item-icon {
+  width: 100%;
+
+  &--top-right {
+    width: 30%;
+  }
+
+  &--img {
+    border-radius: 8px;
+    width: 100%;
+    height: 170px;
+    background-size: cover;
+    background-position: center center;
+
+    &-lg {
+      &-3,
+      &-2,
+      &-1 {
+        height: 233px;
+      }
+    }
+
+    &-sm {
+      &-1 {
+        height: 300px;
+      }
+    }
+
+    &-md {
+      &-1 {
+        height: 300px;
+      }
+
+      &-4,
+      &-5 {
+        height: 233px;
+      }
+    }
+  }
+
+  &--icon {
+    display: inline-block;
+
+    &-bordered-small {
+      padding: 21px;
+    }
+
+    &-bordered-large {
+      padding: 40px;
+    }
+  }
+}
+</style>