@worksafevictoria/wcl7.5 1.7.0 → 1.7.1

package/package.json

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

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

@@ -4,18 +4,12 @@
     <b-card
       :id="cardId"
       no-body
-      :tag="
-        buttonRole === 'radio' ? 'div' : isSelectable ? 'button' : 'article'
-      "
+      :tag="buttonRole === 'radio' ? 'div' : isSelectable ? 'button' : 'article'"
       class="card-grid-item__card"
       :class="cardClass"
       :role="buttonRole"
       :aria-checked="
-        buttonRole === 'radio'
-          ? isSelectable && selected
-            ? 'true'
-            : 'false'
-          : false
+        buttonRole === 'radio' ? (isSelectable && selected ? 'true' : 'false') : false
       "
       :aria-expanded="
         isExpandable ? (isSelectable && selected ? 'true' : 'false') : false
@@ -30,10 +24,8 @@
         :class="[
           {
             rtl: rtl,
-            [`card-grid-item__control-radio`]:
-              isSelectable && buttonRole === 'radio',
-            [`card-grid-item__selected-radio`]:
-              selected && buttonRole === 'radio',
+            [`card-grid-item__control-radio`]: isSelectable && buttonRole === 'radio',
+            [`card-grid-item__selected-radio`]: selected && buttonRole === 'radio',
           },
         ]"
       >
@@ -101,11 +93,7 @@
             >
             </card-grid-item-icon>
           </b-card-title>
-          <card-grid-item-caret
-            v-if="caretPosition === 'top'"
-            :caret="caret"
-            :rtl="rtl"
-          >
+          <card-grid-item-caret v-if="caretPosition === 'top'" :caret="caret" :rtl="rtl">
           </card-grid-item-caret>
 
           <card-grid-item-icon
@@ -131,13 +119,14 @@
         </div>
         <b-card-text
           v-if="$slots.cardDescription || description"
-          text-tag="div"
+          tag="div"
           class="card-grid-item__body"
           :class="{
             rtl: rtl,
           }"
         >
           <div
+            v-if="$slots.cardDescription || description"
             class="card-grid-item__description"
             :class="{
               [descriptionClass]: !!descriptionClass,
@@ -170,11 +159,7 @@
           </div>
         </b-card-text>
       </b-card-body>
-      <div
-        v-if="$slots.cardFooter"
-        class="card-grid-item__footer"
-        :class="{ rtl: rtl }"
-      >
+      <div v-if="$slots.cardFooter" class="card-grid-item__footer" :class="{ rtl: rtl }">
         <slot name="cardFooter"></slot>
       </div>
       <div
@@ -193,15 +178,15 @@
 </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'
-import { isAbsoluteUrl, isGovSite } from '../../../../lib/utility'
-import { BCard, BCardBody, BCardTitle, BCardText } from 'bootstrap-vue-next'
+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";
+import { isAbsoluteUrl, isGovSite } from "../../../../lib/utility";
+import { BCard, BCardBody, BCardTitle, BCardText } from "bootstrap-vue-next";
 
 export default {
-  name: 'CardGridItem',
+  name: "CardGridItem",
   components: {
     CardGridItemIcon,
     CardGridItemCaret,
@@ -214,9 +199,8 @@ export default {
   props: {
     backgroundVariant: {
       type: String,
-      default: 'white',
-      validator: (value) =>
-        ['white', 'transparent', 'light'].indexOf(value) >= 0,
+      default: "white",
+      validator: (value) => ["white", "transparent", "light"].indexOf(value) >= 0,
     },
     imageSrc: {
       type: String,
@@ -235,7 +219,7 @@ export default {
     },
     descriptionClass: {
       type: String,
-      default: '',
+      default: "",
     },
     glyphSrc: {
       type: [Object, String],
@@ -247,21 +231,16 @@ export default {
     },
     iconSize: {
       type: String,
-      default: 'small',
-      validator: (value) =>
-        ['xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0,
+      default: "small",
+      validator: (value) => ["xsmall", "small", "medium", "large"].indexOf(value) >= 0,
     },
     iconPosition: {
       type: String,
-      default: 'top',
+      default: "top",
       validator: (value) =>
-        [
-          'top',
-          'top-left',
-          'top-right',
-          'after-title',
-          'before-description',
-        ].indexOf(value) >= 0,
+        ["top", "top-left", "top-right", "after-title", "before-description"].indexOf(
+          value
+        ) >= 0,
     },
     iconIsBordered: {
       type: Boolean,
@@ -276,14 +255,13 @@ export default {
     },
     invertOnSelectBackground: {
       type: String,
-      default: 'none',
-      validator: (value) => ['none', 'yellow', 'black'].indexOf(value) >= 0,
+      default: "none",
+      validator: (value) => ["none", "yellow", "black"].indexOf(value) >= 0,
     },
     borderOnSelectBackground: {
       type: String,
-      default: 'none',
-      validator: (value) =>
-        ['none', 'yellow', 'black', 'blue'].indexOf(value) >= 0,
+      default: "none",
+      validator: (value) => ["none", "yellow", "black", "blue"].indexOf(value) >= 0,
     },
     rtl: {
       type: Boolean,
@@ -291,49 +269,47 @@ export default {
     },
     headerSize: {
       type: String,
-      default: 'custom',
+      default: "custom",
       validator: (value) =>
-        ['medium', 'large', 'extra-large', 'extra-2x-large', 'custom'].indexOf(
-          value,
-        ) >= 0,
+        ["medium", "large", "extra-large", "extra-2x-large", "custom"].indexOf(value) >=
+        0,
     },
     headerTextAlign: {
       type: String,
-      default: 'left',
-      validator: (value) => ['left', 'center', 'right'].indexOf(value) >= 0,
+      default: "left",
+      validator: (value) => ["left", "center", "right"].indexOf(value) >= 0,
     },
     headerTag: {
       type: String,
       required: false,
-      default: 'h3',
+      default: "h3",
     },
     caret: {
       type: String,
       default: undefined,
       validator: (value) =>
-        ['down', 'up', 'right', 'left', 'external'].indexOf(value) >= 0,
+        ["down", "up", "right", "left", "external"].indexOf(value) >= 0,
     },
     caretPosition: {
       type: String,
-      default: 'top',
-      validator: (value) =>
-        ['top', 'bottom', 'after-title'].indexOf(value) >= 0,
+      default: "top",
+      validator: (value) => ["top", "bottom", "after-title"].indexOf(value) >= 0,
     },
     cardPadding: {
       type: String,
-      default: 'none',
+      default: "none",
       validator: (value) =>
-        ['none', 'xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0,
+        ["none", "xsmall", "small", "medium", "large"].indexOf(value) >= 0,
     },
     borderType: {
       type: String,
-      default: 'none',
+      default: "none",
       validator: (value) =>
-        ['none', 'thin', 'shadow', 'thick', 'dark'].indexOf(value) >= 0,
+        ["none", "thin", "shadow", "thick", "dark"].indexOf(value) >= 0,
     },
     cardTextAlign: {
       type: String,
-      default: 'left',
+      default: "left",
     },
     disableSelect: {
       type: Boolean,
@@ -341,11 +317,11 @@ export default {
     },
     pillText: {
       type: String,
-      default: '',
+      default: "",
     },
     buttonRole: {
       type: String,
-      default: 'link',
+      default: "link",
     },
     isSelected: {
       type: Boolean,
@@ -383,20 +359,18 @@ export default {
       return {
         [`card-grid-item__card--hasIcon`]:
           (this.imageSrc || this.glyphSrc) &&
-          (this.iconPosition === 'top' || this.iconPosition === 'top-left'),
+          (this.iconPosition === "top" || this.iconPosition === "top-left"),
         [`card-grid-item__card--selectable`]: this.isSelectable,
-        [`card-grid-item__card--selected-inverted--` +
-        this.invertOnSelectBackground]:
+        [`card-grid-item__card--selected-inverted--` + this.invertOnSelectBackground]:
           this.selected &&
           this.invertOnSelectBackground &&
-          this.invertOnSelectBackground !== 'none',
-        [`card-grid-item__card--selected-border--` +
-        this.borderOnSelectBackground]:
+          this.invertOnSelectBackground !== "none",
+        [`card-grid-item__card--selected-border--` + this.borderOnSelectBackground]:
           this.selected &&
           this.borderOnSelectBackground &&
-          this.borderOnSelectBackground !== 'none',
+          this.borderOnSelectBackground !== "none",
         [`card-grid-item__card--selected-focus`]:
-          this.selected && this.buttonRole === 'radio',
+          this.selected && this.buttonRole === "radio",
         [`card-grid-item__card--selected-link`]:
           this.selected && !this.invertOnSelectBackground,
         [`card-grid-item__card--padding-${this.cardPadding}`]: true,
@@ -404,89 +378,87 @@ export default {
         [`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
+      return window.location.protocol + "//" + window.location.host;
     },
   },
   mounted() {
-    this.selected = this.isSelected
+    this.selected = this.isSelected;
   },
   created() {
-    this.parentGrid = this.getParentGridItem()
+    this.parentGrid = this.getParentGridItem();
     if (this.parentGrid) {
-      this.parentGrid.registerChild(this)
-      this.setCardId()
-      this.isSelectable = !this.disableSelect && this.parentGrid.isSelectable
+      this.parentGrid.registerChild(this);
+      this.setCardId();
+      this.isSelectable = !this.disableSelect && this.parentGrid.isSelectable;
     }
   },
   beforeDestroy() {
     if (this.parentGrid) {
-      this.parentGrid.deregisterChild(this)
+      this.parentGrid.deregisterChild(this);
     }
   },
   methods: {
     cardClicked(ev) {
       if (this.isSelectable) {
-        this.parentGrid.cardSelected(this, ev)
+        this.parentGrid.cardSelected(this, ev);
       }
 
       if (this.$gtm) {
-        this.fireGTM()
+        this.fireGTM();
       }
     },
     cardTitleClicked(ev) {
       if (this.isCardTitleSelectable) {
-        this.parentGrid.cardTitleSelected(this, ev)
+        this.parentGrid.cardTitleSelected(this, ev);
       }
     },
     getParentGridItem() {
-      let counter = 0
-      const maxParentDepth = 10
-      let currentParent = this.$parent
-      let gridParent
+      let counter = 0;
+      const maxParentDepth = 10;
+      let currentParent = this.$parent;
+      let gridParent;
       while (maxParentDepth > counter) {
-        counter += 1
+        counter += 1;
         if (currentParent && Array.isArray(currentParent.cards)) {
-          gridParent = currentParent
-          break
+          gridParent = currentParent;
+          break;
         } else if (currentParent) {
-          currentParent = currentParent.$parent
+          currentParent = currentParent.$parent;
         }
       }
-      return gridParent
+      return gridParent;
     },
     setCardId() {
       this.cardId = this.parentGrid.cardIdPrefix
-        ? this.parentGrid.cardIdPrefix +
-          '-' +
-          this.parentGrid.getChildIndex(this)
-        : undefined
+        ? this.parentGrid.cardIdPrefix + "-" + this.parentGrid.getChildIndex(this)
+        : undefined;
     },
     setGridMetaData(gridColumnSize, isMobileView, isTabletView) {
-      this.gridColumnSize = gridColumnSize
-      this.isMobileView = isMobileView
-      this.isTabletView = isTabletView
+      this.gridColumnSize = gridColumnSize;
+      this.isMobileView = isMobileView;
+      this.isTabletView = isTabletView;
     },
     handleFocus(ev) {
-      this.parentGrid.handleFocus(ev)
+      this.parentGrid.handleFocus(ev);
     },
     fireGTM() {
-      let theEl = this.$slots?.cardDescription
+      let theEl = this.$slots?.cardDescription;
       if (theEl && theEl.length > 0) {
         var content = {
           content: this.$diffInDays(
-            parseISO(theEl[0]?.componentOptions?.propsData?.card?.created),
+            parseISO(theEl[0]?.componentOptions?.propsData?.card?.created)
           ),
-        }
+        };
       }
       if (this.$gtm) {
         // format link
-        const linkStr = this.link
-        let linkURL = linkStr
+        const linkStr = this.link;
+        let linkURL = linkStr;
         if (linkStr !== false && !linkStr.includes(this.urlHostname)) {
-          linkURL = this.urlHostname + linkStr
+          linkURL = this.urlHostname + linkStr;
         }
         // gather attrs
         let attrs = {
@@ -494,46 +466,45 @@ export default {
           data: linkURL,
           ...content,
           ...this.taxonomies,
-        }
+        };
         // fire the default event
         this.$gtm.push({
-          event: 'custom.interaction.tile.click',
+          event: "custom.interaction.tile.click",
           group: this?.parentGrid?.title,
           ...attrs,
-        })
-        if (this.pillText === 'News') {
+        });
+        if (this.pillText === "News") {
           this.$gtm.push({
-            event: 'custom.interaction.news.click',
-            group: 'News',
+            event: "custom.interaction.news.click",
+            group: "News",
             ...attrs,
-          })
+          });
         }
-        if (this.pillText === 'Event') {
+        if (this.pillText === "Event") {
           this.$gtm.push({
-            event: 'custom.interaction.event.click',
-            group: 'Event',
+            event: "custom.interaction.event.click",
+            group: "Event",
             ...attrs,
-          })
+          });
         }
-        if (this.pillText === 'Safety alert') {
+        if (this.pillText === "Safety alert") {
           this.$gtm.push({
-            event: 'custom.interaction.safety.click',
-            group: 'Safety alert',
+            event: "custom.interaction.safety.click",
+            group: "Safety alert",
             ...attrs,
-          })
+          });
         }
         if (
           (this.link,
           this.isAbsoluteUrl(this.link) &&
-            (this.$config
-              ? this.$config.public.caretaker
-              : process.env.CARETAKER) === 'false')
+            (this.$config ? this.$config.public.caretaker : process.env.CARETAKER) ===
+              "false")
         ) {
           this.$gtm.push({
-            event: 'custom.interaction.outboundlink',
+            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
@@ -541,23 +512,21 @@ export default {
         this.link &&
         this.isAbsoluteUrl(this.link) &&
         isGovSite(this.link) &&
-        (this.$config
-          ? this.$config.public.caretaker
-          : process.env.CARETAKER) === 'true'
+        (this.$config ? this.$config.public.caretaker : process.env.CARETAKER) === "true"
       ) {
         this.$gtm.push({
-          event: 'custom.interaction.outboundlink',
+          event: "custom.interaction.outboundlink",
           category: this.cardHeaderTitle,
           label: this.link,
-        })
+        });
       }
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import '../../../includes/scss/all';
+@import "../../../includes/scss/all";
 
 .card-grid-item {
   height: 100%;
@@ -809,7 +778,7 @@ export default {
       align-items: center;
     }
     :deep(.card_item__control-radio span) {
-      background-image: url('../../../assets/icons/tick.svg');
+      background-image: url("../../../assets/icons/tick.svg");
       background-position: center;
       background-repeat: no-repeat;
       filter: invert(1);
@@ -858,7 +827,7 @@ export default {
       line-height: 80px;
 
       @media screen and (max-width: 1199px) and (min-width: 768px) {
-        @include fp('font-size', 60, 72);
+        @include fp("font-size", 60, 72);
       }
     }
 

package/src/components/Paragraphs/Directory/HSCP/Records/SingleRecord/index.vue

@@ -3,51 +3,51 @@
     <!-- Main details -->
     <container>
       <row class="records">
-      <column md="2" sm="12" class="title" >
-        <a v-if="item.title" href="javascript:void(0)" @click="this.visible = !this.visible">
-          {{ item.title }}
-        </a>
-      </column>
-      <column md="2" sm="12" class="address" >
-        <a v-if="item.fullAddress" target="_blank" :href="gMapLink"><span class="sr-only visually-hidden">Address</span>
-          {{ item.fullAddress }}
-        </a>
-      </column>
-      <column md="2" sm="12" class="coldata longstring" >
-        <div class="label">Email</div>
-        <a v-if="item.email" target="_blank" :href="`mailto:${item.email}`"><span class="sr-only visually-hidden">Email address</span>
-          {{ item.email }}
-        </a>
-      </column>
-      <column md="3" sm="12" class="coldata longstring" >
-        <div class="label">Website</div>
-        <a v-if="item.website" target="_blank" :href="`${item.website}`"><span class="sr-only visually-hidden">Website address</span>
-          {{ item.website }}
+        <column md="2" sm="12" class="title" >
+          <a name="titleLink" v-if="item.title" href="javascript:void(0)" :aria-expanded="visible ? 'true' : 'false'" @click="this.visible = !this.visible">
+            {{ item.title }}
+          </a>
+        </column>
+        <column md="2" sm="12" class="address" >
+          <a v-if="item.fullAddress" target="_blank" :href="gMapLink"><span class="sr-only visually-hidden">Address</span>
+            {{ item.fullAddress }}
+          </a>
+        </column>
+        <column md="2" sm="12" class="coldata longstring" >
+          <div class="label">Email</div>
+          <a v-if="item.email" target="_blank" :href="`mailto:${item.email}`"><span class="sr-only visually-hidden">Email address</span>
+            {{ item.email }}
+          </a>
+        </column>
+        <column md="3" sm="12" class="coldata longstring" >
+          <div class="label">Website</div>
+          <a v-if="item.website" target="_blank" :href="`${item.website}`"><span class="sr-only visually-hidden">Website address</span>
+            {{ item.website }}
+          </a>
+        </column>
+        <column md="2" sm="12" class="coldata" >
+          <div class="label">Phone</div>
+          <a v-if="item.tollfreePhone || item.workPhone" :href="`tel:${item.tollfreephone || item.workphone}`"><span class="sr-only visually-hidden">Phone number</span>
+            {{ item.tollfreePhone || item.workPhone }}
+          </a>
+        </column>
+      </row>
+      <div class="hscp-caret" >
+        <a v-if="visible" href="javascript:void(0)" @click="this.visible = false">
+          <img
+            :src="CaretUp"
+            height="12"
+            width="17"
+            alt="Expand Detail">
         </a>
-      </column>
-      <column md="2" sm="12" class="coldata" >
-        <div class="label">Phone</div>
-        <a v-if="item.tollfreePhone || item.workPhone" :href="`tel:${item.tollfreephone || item.workphone}`"><span class="sr-only visually-hidden">Phone number</span>
-          {{ item.tollfreePhone || item.workPhone }}
+        <a v-if="!visible" href="javascript:void(0)" @click="this.visible = true">
+          <img
+            :src="CaretDown"
+            height="12"
+            width="17"
+            alt="Expand Detail">
         </a>
-      </column>
-    </row>
-    <div class="hscp-caret" >
-      <a v-if="visible" href="javascript:void(0)" @click="this.visible = false">
-        <img
-          :src="CaretUp"
-          height="12"
-          width="17"
-          alt="Expand Detail">
-      </a>
-      <a v-if="!visible" href="javascript:void(0)" @click="this.visible = true">
-        <img
-          :src="CaretDown"
-          height="12"
-          width="17"
-          alt="Expand Detail">
-      </a>
-    </div>
+      </div>
     </container>
     
     <!-- Additional Content -->
@@ -156,7 +156,7 @@ export default {
     item: {
       type: Object,
       required: true
-    }
+    },
   },
   data() {
     return {
@@ -169,6 +169,7 @@ export default {
     gMapLink() {
       return `https://google.com/maps?q=${this.item.title}%20${this.item.fullAddress}`
     },
+
   },
   methods: {
     handleClick(title) {