@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,848 @@
+<template>
+  <div class="card-grid-item">
+    <slot v-if="$slots.beforeCard" name="beforeCard"></slot>
+    <b-card
+      :id="cardId"
+      no-body
+      :tag="
+        buttonRole === 'radio' ? 'div' : isSelectable ? 'button' : 'article'
+      "
+      class="card-grid-item__card"
+      :class="cardClass"
+      :role="buttonRole"
+      :aria-checked="
+        buttonRole === 'radio'
+          ? isSelectable && selected
+            ? 'true'
+            : 'false'
+          : null
+      "
+      :aria-expanded="
+        isExpandable ? (isSelectable && selected ? 'true' : 'false') : null
+      "
+      :data-href="link"
+      @click="cardClicked($event)"
+      @keydown.tab="handleFocus($event)"
+    >
+      <div
+        v-if="$slots.cardTop"
+        class="card-grid-item__top"
+        :class="[
+          {
+            rtl: rtl,
+            [`card-grid-item__control-radio`]:
+              isSelectable && buttonRole === 'radio',
+            [`card-grid-item__selected-radio`]:
+              selected && buttonRole === 'radio'
+          }
+        ]"
+      >
+        <slot name="cardTop"></slot>
+      </div>
+      <card-grid-item-icon
+        v-if="iconPosition === 'top' || iconPosition === 'top-left'"
+        :image-src="imageSrc"
+        :image-alt="imageAlt"
+        :glyph-src="glyphSrc"
+        :glyph-icon-component="glyphIconComponent"
+        :is-mobile-view="isMobileView"
+        :is-tablet-view="isTabletView"
+        :grid-column-size="gridColumnSize"
+        :icon-size="iconSize"
+        :icon-is-bordered="iconIsBordered"
+        :class="{
+          [`text-left`]: iconPosition === 'top-left',
+          rtl: rtl
+        }"
+      >
+      </card-grid-item-icon>
+      <b-card-body>
+        <div
+          class="card-grid-item__caretContainer"
+          :class="[
+            {
+              rtl: rtl,
+              [`card-grid-item__caretContainer__control-radio`]:
+                isSelectable && buttonRole === 'radio'
+            }
+          ]"
+        >
+          <b-card-title
+            v-if="cardHeaderTitle !== null && cardHeaderTitle !== undefined"
+            :title-tag="headerTag"
+            class="card-grid-item__header"
+            :class="{
+              [`card-grid-item__header--${headerSize}`]: true,
+              [`card-grid-item__header--align-${headerTextAlign}`]: true
+            }"
+          >
+            <span>{{ cardHeaderTitle }}</span> &nbsp;
+            <card-grid-item-caret
+              v-if="caretPosition === 'after-title'"
+              :caret="caret"
+              class="d-inline-block"
+              :rtl="rtl"
+            >
+            </card-grid-item-caret>
+            <card-grid-item-icon
+              v-if="iconPosition === 'after-title'"
+              :image-src="imageSrc"
+              :image-alt="imageAlt"
+              :glyph-src="glyphSrc"
+              :glyph-icon-component="glyphIconComponent"
+              :is-mobile-view="isMobileView"
+              :is-tablet-view="isTabletView"
+              :grid-column-size="gridColumnSize"
+              :icon-size="iconSize"
+              :icon-is-bordered="iconIsBordered"
+              class="d-inline"
+            >
+            </card-grid-item-icon>
+          </b-card-title>
+          <card-grid-item-caret
+            v-if="caretPosition === 'top'"
+            :caret="caret"
+            :rtl="rtl"
+          >
+          </card-grid-item-caret>
+
+          <card-grid-item-icon
+            v-if="iconPosition === 'top-right'"
+            :image-src="imageSrc"
+            :image-alt="imageAlt"
+            :glyph-src="glyphSrc"
+            :glyph-icon-component="glyphIconComponent"
+            :is-mobile-view="isMobileView"
+            :is-tablet-view="isTabletView"
+            :grid-column-size="gridColumnSize"
+            :icon-size="iconSize"
+            :icon-is-bordered="iconIsBordered"
+            class="d-inline card-grid-item-icon--top-right"
+            :class="{
+              [`text-right`]: iconPosition === 'top-right',
+              rtl: rtl
+            }"
+            :rtl="rtl"
+          >
+          </card-grid-item-icon>
+          <span v-if="pillText" class="visually-hidden">{{ pillText }}</span>
+        </div>
+        <b-card-text
+          v-if="$slots.cardDescription || description"
+          text-tag="div"
+          class="card-grid-item__body"
+          :class="{
+            rtl: rtl
+          }"
+        >
+          <div
+            class="card-grid-item__description"
+            :class="{
+              [descriptionClass]: !!descriptionClass,
+              [`card-grid-item__description--withIcon`]:
+                iconPosition === 'before-description'
+            }"
+          >
+            <card-grid-item-icon
+              v-if="iconPosition === 'before-description'"
+              :image-src="imageSrc"
+              :image-alt="imageAlt"
+              :glyph-src="glyphSrc"
+              :glyph-icon-component="glyphIconComponent"
+              :is-mobile-view="isMobileView"
+              :is-tablet-view="isTabletView"
+              :grid-column-size="gridColumnSize"
+              :icon-size="iconSize"
+              :icon-is-bordered="iconIsBordered"
+              class="w-auto"
+            >
+              &nbsp;
+            </card-grid-item-icon>
+            <slot v-if="$slots.cardDescription" name="cardDescription"></slot>
+            <rich-text
+              v-if="!$slots.cardDescription && description"
+              :content="description"
+              :without-container="true"
+              :strip-html="stripDescriptionHtml"
+            />
+          </div>
+        </b-card-text>
+      </b-card-body>
+      <div
+        v-if="$slots.cardFooter"
+        class="card-grid-item__footer"
+        :class="{ rtl: rtl }"
+      >
+        <slot name="cardFooter"></slot>
+      </div>
+      <div
+        v-if="caretPosition === 'bottom'"
+        class="card-grid-item__caretContainer card-grid-item__caretContainer--bottom"
+        :class="{
+          rtl: !rtl
+        }"
+      >
+        <card-grid-item-caret :caret="caret" :rtl="rtl" />
+        <span class="card-bottom-border"></span>
+      </div>
+    </b-card>
+    <slot v-if="$slots.afterCard" name="afterCard"></slot>
+  </div>
+</template>
+
+<script>
+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 { 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  },
+  props: {
+    backgroundVariant: {
+      type: String,
+      default: 'white',
+      validator: (value) =>
+        ['white', 'transparent', 'light'].indexOf(value) >= 0
+    },
+    imageSrc: {
+      type: String,
+      default: null
+    },
+    imageAlt: {
+      type: String,
+      default: null
+    },
+    description: {
+      type: String,
+      default: null
+    },
+    stripDescriptionHtml: {
+      type: Boolean
+    },
+    descriptionClass: {
+      type: String,
+      default: ''
+    },
+    glyphSrc: {
+      type: [Object, String],
+      default: null
+    },
+    glyphIconComponent: {
+      type: String,
+      default: null
+    },
+    iconSize: {
+      type: String,
+      default: 'small',
+      validator: (value) =>
+        ['xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0
+    },
+    iconPosition: {
+      type: String,
+      default: 'top',
+      validator: (value) =>
+        [
+          'top',
+          'top-left',
+          'top-right',
+          'after-title',
+          'before-description'
+        ].indexOf(value) >= 0
+    },
+    iconIsBordered: {
+      type: Boolean,
+      default: true
+    },
+    showDivider: {
+      type: Boolean
+    },
+    cardHeaderTitle: {
+      type: String,
+      default: null
+    },
+    invertOnSelectBackground: {
+      type: String,
+      default: 'none',
+      validator: (value) => ['none', 'yellow', 'black'].indexOf(value) >= 0
+    },
+    borderOnSelectBackground: {
+      type: String,
+      default: 'none',
+      validator: (value) =>
+        ['none', 'yellow', 'black', 'blue'].indexOf(value) >= 0
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    },
+    headerSize: {
+      type: String,
+      default: 'custom',
+      validator: (value) =>
+        ['medium', 'large', 'extra-large', 'extra-2x-large', 'custom'].indexOf(
+          value
+        ) >= 0
+    },
+    headerTextAlign: {
+      type: String,
+      default: 'left',
+      validator: (value) => ['left', 'center', 'right'].indexOf(value) >= 0
+    },
+    headerTag: {
+      type: String,
+      required: false,
+      default: 'h3'
+    },
+    caret: {
+      type: String,
+      default: undefined,
+      validator: (value) =>
+        ['down', 'up', 'right', 'left', 'external'].indexOf(value) >= 0
+    },
+    caretPosition: {
+      type: String,
+      default: 'top',
+      validator: (value) => ['top', 'bottom', 'after-title'].indexOf(value) >= 0
+    },
+    cardPadding: {
+      type: String,
+      default: 'none',
+      validator: (value) =>
+        ['none', 'xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0
+    },
+    borderType: {
+      type: String,
+      default: 'none',
+      validator: (value) =>
+        ['none', 'thin', 'shadow', 'thick', 'dark'].indexOf(value) >= 0
+    },
+    cardTextAlign: {
+      type: String,
+      default: 'left'
+    },
+    disableSelect: {
+      type: Boolean,
+      default: false
+    },
+    pillText: {
+      type: String,
+      default: ''
+    },
+    buttonRole: {
+      type: String,
+      default: 'link'
+    },
+    isSelected: {
+      type: Boolean,
+      default: false
+    },
+    isExpandable: {
+      type: Boolean,
+      default: false
+    },
+    link: {
+      type: [String, Boolean],
+      default: false
+    },
+    taxonomies: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data: () => ({
+    isSelectable: false,
+    parentGrid: undefined,
+    cardId: undefined,
+    gridColumnSize: 0,
+    isMobileView: false,
+    isTabletView: false,
+    selected: false,
+    isAbsoluteUrl
+  }),
+  computed: {
+    cardClass() {
+      return {
+        [`card-grid-item__card--hasIcon`]:
+          (this.imageSrc || this.glyphSrc) &&
+          (this.iconPosition === 'top' || this.iconPosition === 'top-left'),
+        [`card-grid-item__card--selectable`]: this.isSelectable,
+        [`card-grid-item__card--selected-inverted--` +
+        this.invertOnSelectBackground]:
+          this.selected &&
+          this.invertOnSelectBackground &&
+          this.invertOnSelectBackground !== 'none',
+        [`card-grid-item__card--selected-border--` +
+        this.borderOnSelectBackground]:
+          this.selected &&
+          this.borderOnSelectBackground &&
+          this.borderOnSelectBackground !== 'none',
+        [`card-grid-item__card--selected-focus`]:
+          this.selected && this.buttonRole === 'radio',
+        [`card-grid-item__card--selected-link`]:
+          this.selected && !this.invertOnSelectBackground,
+        [`card-grid-item__card--padding-${this.cardPadding}`]: true,
+        [`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
+      }
+    },
+    urlHostname() {
+      return window.location.protocol + '//' + window.location.host
+    }
+  },
+  mounted() {
+    this.selected = this.isSelected
+  },
+  created() {
+    this.parentGrid = this.getParentGridItem()
+    if (this.parentGrid) {
+      this.parentGrid.registerChild(this)
+      this.setCardId()
+      this.isSelectable = !this.disableSelect && this.parentGrid.isSelectable
+    }
+  },
+  beforeDestroy() {
+    if (this.parentGrid) {
+      this.parentGrid.deregisterChild(this)
+    }
+  },
+  methods: {
+    cardClicked(ev) {
+      if (this.isSelectable) {
+        this.parentGrid.cardSelected(this, ev)
+      }
+      if (this.$gtm) {
+        this.fireGTM()
+      }
+    },
+    getParentGridItem() {
+      let counter = 0
+      const maxParentDepth = 10
+      let currentParent = this.$parent
+      let gridParent
+      while (maxParentDepth > counter) {
+        counter += 1
+        if (currentParent && Array.isArray(currentParent.cards)) {
+          gridParent = currentParent
+          break
+        } else if (currentParent) {
+          currentParent = currentParent.$parent
+        }
+      }
+      return gridParent
+    },
+    setCardId() {
+      this.cardId = this.parentGrid.cardIdPrefix
+        ? this.parentGrid.cardIdPrefix +
+          '-' +
+          this.parentGrid.getChildIndex(this)
+        : undefined
+    },
+    setGridMetaData(gridColumnSize, isMobileView, isTabletView) {
+      this.gridColumnSize = gridColumnSize
+      this.isMobileView = isMobileView
+      this.isTabletView = isTabletView
+    },
+    handleFocus(ev) {
+      this.parentGrid.handleFocus(ev)
+    },
+    fireGTM() {
+      let theEl = this.$slots?.cardDescription
+      if (theEl && theEl.length > 0) {
+        var content = {
+          content: this.$diffInDays(
+            parseISO(theEl[0]?.componentOptions?.propsData?.card?.created)
+          )
+        }
+      }
+      if (this.$gtm) {
+        // format link
+        const linkStr = this.link
+        let linkURL = linkStr
+        if (linkStr !== false && !linkStr.includes(this.urlHostname)) {
+          linkURL = this.urlHostname + linkStr
+        }
+        // gather attrs
+        let attrs = {
+          label: this.cardHeaderTitle,
+          data: linkURL,
+          ...content,
+          ...this.taxonomies
+        }
+        // fire the default event
+        this.$gtm.push({
+          event: 'custom.interaction.tile.click',
+          group: this?.parentGrid?.title,
+          ...attrs
+        })
+        if (this.pillText === 'News') {
+          this.$gtm.push({
+            event: 'custom.interaction.news.click',
+            group: 'News',
+            ...attrs
+          })
+        }
+        if (this.pillText === 'Event') {
+          this.$gtm.push({
+            event: 'custom.interaction.event.click',
+            group: 'Event',
+            ...attrs
+          })
+        }
+        if (this.pillText === 'Safety alert') {
+          this.$gtm.push({
+            event: 'custom.interaction.safety.click',
+            group: 'Safety alert',
+            ...attrs
+          })
+        }
+        if (
+          (this.link,
+          this.isAbsoluteUrl(this.link) && process.env.CARETAKER === 'false')
+        ) {
+          this.$gtm.push({
+            event: 'custom.interaction.outboundlink',
+            category: this.cardHeaderTitle,
+            label: this.link
+          })
+        }
+      }
+      // for non gov sites and when caretaker mode is on, analytics is fired from listenersCaretaker.js
+      if (
+        this.link &&
+        this.isAbsoluteUrl(this.link) &&
+        isGovSite(this.link) &&
+        process.env.CARETAKER === 'true'
+      ) {
+        this.$gtm.push({
+          event: 'custom.interaction.outboundlink',
+          category: this.cardHeaderTitle,
+          label: this.link
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+
+.card-grid-item {
+  height: 100%;
+  width: 100%;
+
+  &__card {
+    color: $black;
+    //text-align: left;
+    border: none;
+    border-radius: 8px;
+    height: 100%;
+    width: 100%;
+
+    .rtl {
+      @include makeRTL;
+    }
+
+    .card-body {
+      padding: 0px;
+      position: relative;
+    }
+
+    .card-title {
+      white-space: inherit;
+      word-break: break-word;
+      margin-top: 0;
+      margin-bottom: 12px;
+      vertical-align: baseline;
+      vertical-align: -webkit-baseline-middle;
+    }
+
+    &--hasIcon {
+      .card-title {
+        vertical-align: baseline;
+        vertical-align: -webkit-baseline-middle;
+      }
+    }
+
+    &--selectable {
+      cursor: pointer;
+
+      &:hover {
+        opacity: 0.7;
+        transition: opacity 0.2s ease-out;
+        -moz-transition: opacity 0.2s ease-out;
+        -webkit-transition: opacity 0.2s ease-out;
+        -o-transition: opacity 0.2s ease-out;
+      }
+    }
+
+    &--padding {
+      &-none {
+        padding-left: 0px;
+        padding-right: 0px;
+      }
+      &-xsmall {
+        padding-left: 6px;
+        padding-right: 6px;
+      }
+      &-small {
+        padding-top: 16px;
+        padding-bottom: 16px;
+        padding-left: 16px;
+        padding-right: 16px;
+      }
+      &-medium {
+        padding-top: 24px;
+        padding-bottom: 24px;
+        padding-left: 16px;
+        padding-right: 16px;
+      }
+      &-large {
+        padding-top: 32px;
+        padding-bottom: 32px;
+        padding-left: 16px;
+        padding-right: 16px;
+      }
+    }
+
+    &--align {
+      &-left {
+        text-align: left;
+      }
+      &-right {
+        text-align: right;
+      }
+      &-center {
+        text-align: center;
+      }
+    }
+
+    &--selected-focus {
+      outline: solid 3px $outline !important;
+      outline-offset: 2px;
+      border-radius: 3px;
+      box-shadow: none !important;
+    }
+
+    &--border {
+      &-thin {
+        box-shadow: none;
+        border: 1px solid $gray;
+      }
+      &-shadow {
+        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.18);
+        border: none;
+      }
+      &-thick {
+        box-shadow: none;
+        border: 2px solid $lightgray;
+      }
+      &-dark {
+        box-shadow: none;
+        border: 2px solid $gray;
+      }
+      &-none {
+        box-shadow: none;
+        border: none;
+      }
+    }
+
+    &--bg {
+      &-white {
+        background: $white;
+      }
+
+      &-transparent {
+        background: transparent;
+      }
+
+      &-light {
+        background-color: $lightgray;
+      }
+    }
+
+    &--selected-inverted {
+      &--black {
+        background-color: $black;
+        color: $white;
+        :deep(svg) {
+          fill: $white !important;
+        }
+        :deep(path) {
+          fill: $white !important;
+        }
+      }
+      &--yellow {
+        background-color: $orange;
+      }
+    }
+
+    &--selected-border {
+      &--black {
+        border-color: $black;
+        :deep(svg) {
+          fill: $white !important;
+        }
+        :deep(path) {
+          fill: $white !important;
+        }
+      }
+      &--yellow {
+        border-color: $orange;
+      }
+      &--blue {
+        border-color: blue;
+      }
+    }
+
+    @media screen and (max-width: 575px) {
+      &--select-radio {
+        display: flex;
+        flex-direction: row;
+        padding-top: 12px;
+        padding-bottom: 12px;
+
+        > :first-child {
+          width: auto;
+          height: auto;
+        }
+
+        > :not(:first-child) {
+          width: fit-content;
+        }
+
+        :deep(.card_item__pillTop) {
+          top: 15px;
+        }
+        .card-grid-item-icon {
+          :deep(.icon) {
+            width: 40px;
+            height: 40px;
+          }
+        }
+        .card-body {
+          display: flex;
+          flex-direction: row;
+          align-self: center;
+        }
+        .card-grid-item__caretContainer {
+          margin-left: 10px;
+          margin-right: 10px;
+          width: auto;
+        }
+        .card-grid-item__body {
+          align-self: center;
+
+          p {
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+
+  &__description {
+    &--withIcon {
+      display: flex;
+      align-items: left;
+    }
+  }
+
+  &__caretContainer {
+    display: flex;
+    justify-content: space-between;
+    align-self: flex-end;
+    width: 100%;
+
+    &__control-radio {
+      padding-top: 10px;
+    }
+  }
+
+  &__top {
+    width: 100%;
+  }
+
+  &__control-radio {
+    :deep(.card_item__control-radio) {
+      width: 28px;
+      height: 28px;
+      line-height: 32px;
+      text-align: center;
+      border-radius: 50%;
+      background-color: lightgrey;
+      border: 3px solid lightgrey;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    :deep(.card_item__control-radio span) {
+      background-image: url('../../../assets/icons/tick.svg');
+      background-position: center;
+      background-repeat: no-repeat;
+      filter: invert(1);
+      width: 100%;
+      height: 100%;
+    }
+  }
+  &__selected-radio {
+    :deep(.card_item__control-radio) {
+      background-color: green;
+      border: 3px solid green;
+    }
+  }
+
+  &__header {
+    width: 100%;
+
+    &--medium {
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 20px;
+    }
+    &--large {
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 24px;
+    }
+
+    &--extra-large {
+      margin-bottom: 12px;
+      font-size: 32px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 36px;
+      letter-spacing: 0px;
+    }
+
+    &--extra-2x-large {
+      white-space: nowrap;
+      margin-top: 0;
+      margin-right: auto;
+      margin-bottom: 32px;
+      margin-left: auto;
+      font-size: 56px;
+      font-weight: 700;
+      line-height: 80px;
+
+      @media screen and (max-width: 1199px) and (min-width: 768px) {
+        @include fp('font-size', 60, 72);
+      }
+    }
+
+    &--align-right {
+      direction: rtl;
+    }
+  }
+}
+
+.card-body {
+  width: 100%;
+}
+</style>