@worksafevictoria/wcl7.5 1.1.0-beta.111 → 1.1.0-beta.113

package/package.json

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

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) {

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

@@ -42,9 +42,9 @@
       </column>
     </row>
     <!-- HSCP Records -->
-    <div class="hscpRecords">
-      <template v-for="(item, index) in resultChunks[page]">
-        <hscp-record v-if="item.type === 'hscp'" :key="index" :item="item" />
+    <div class="hscpRecords" >
+      <template v-for="(item, index) in resultChunks[page]" >
+        <hscp-record v-if="item.type === 'hscp'" :key="index" :item="item"/>
       </template>
     </div>
     <div v-if="filteredRecords.length > 0" align-items="center">
@@ -137,7 +137,7 @@ export default {
 
     filteredRecords() {
       let results = this.flatRecords
-      
+     
       if (this.searchOrg.length) {
         this.hideReset = false
         results = results.filter(item => item.title.toLowerCase().includes(this.searchOrg.toLowerCase()))
@@ -155,6 +155,11 @@ export default {
         results = results.filter(item => item.courses.toLowerCase().includes(this.searchThemes.toLowerCase()))
       }
       this.filteredItems = results
+
+      if (this.searchOrg.length || this.searchSub.length || this.searchCourse.length || this.searchThemes.length) {
+        this.pageChanged(1)
+      }
+
       return results
     },
   
@@ -244,30 +249,18 @@ export default {
 
     pageChanged(ev) {
       this.page = ev - 1
-      if (this.pageResultCount < this.perPage) {
-        console.log('scroll to records')
-        this.scrollToRecords()
-      }
-    },
-    scrollToRecords() {
-      if (this.$refs.records) {
-        const element = this.$refs.records
-        const top = element.offsetTop
-
-        const buttons = [...element.querySelectorAll('button')]
-        if (Array.isArray(buttons) && buttons.length > 0) {
-          buttons
-            .filter((button) => button.getAttribute('aria-expanded') === 'true')
-            .forEach((button) => button.click())
-
-          buttons[0].focus()
-        }
+      
+      const aLinks = document.getElementsByName('titleLink')
+      // Convert nodelist to array
+      let linksArr = Array.from(aLinks)
+      if (Array.isArray(linksArr) && linksArr.length > 0) {
+        linksArr
+          .filter((link) => link.getAttribute('aria-expanded') === 'true')
+          .forEach((link) => link.click())
 
-        window.scrollTo({
-          top,
-          behavior: 'smooth',
-        })
+        linksArr[0].focus()
       }
+
     },
   }
 }

package/src/components/Paragraphs/TabulatedData/index.vue

@@ -26,23 +26,17 @@
           >
             {{ data.label }}
             <span class="sortImg" v-if="data.field.sortable">
-              <img
-                v-if="data.field.thAttr['aria-sort'] === 'none'"
-                :src="sortIconNeutral"
-                alt="image indicating no sort"
-                style="width: 0.55rem; height: 0.9rem"
-              />
               <img
                 v-if="data.field.thAttr['aria-sort'] === 'ascending'"
-                :src="sortIconAsc"
+                :src="CaretUp"
                 alt="image indicating ascending sort"
-                style="width: 0.55rem; height: 0.9rem"
+                class="iconAsc"
               />
               <img
                 v-else-if="data.field.thAttr['aria-sort'] === 'descending'"
-                :src="sortIconDesc"
+                :src="CaretDown"
                 alt="image indicating descending sort"
-                style="width: 0.55rem; height: 0.9rem"
+                class="iconDesc"
               />
             </span>
           </span>
@@ -56,12 +50,14 @@
 </template>
 
 <script>
-import SectionGroup from './../../Containers/SectionGroup/index.vue'
-import RichText from '../../Paragraphs/RichText/index.vue'
-import { BTable } from 'bootstrap-vue-next'
+import SectionGroup from "./../../Containers/SectionGroup/index.vue";
+import RichText from "../../Paragraphs/RichText/index.vue";
+import { BTable } from "bootstrap-vue-next";
+import CaretUp from "./../../../assets/icons/caret-up.svg?url";
+import CaretDown from "./../../../assets/icons/caret-down.svg?url";
 
 export default {
-  name: 'TabulatedData',
+  name: "TabulatedData",
   components: { SectionGroup, RichText, BTable },
   props: {
     items: {
@@ -82,7 +78,7 @@ export default {
     },
     caption: {
       type: String,
-      default: '',
+      default: "",
       required: false,
     },
     sortBy: {
@@ -93,42 +89,33 @@ export default {
   },
   data() {
     return {
-      newSortBy: this.sortBy ? [{ key: this.sortBy, order: 'asc' }] : [],
+      newSortBy: this.sortBy ? [{ key: this.sortBy, order: "asc" }] : [],
       //sortDesc: false,
-      sortIconNeutral:
-        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
-      sortIconDesc:
-        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
-      sortIconAsc:
-        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
-    }
+      CaretUp,
+      CaretDown,
+    };
   },
   computed: {
     isFluid() {
-      return this.isFixedWidth
+      return this.isFixedWidth;
     },
   },
   methods: {
     accessSort(fieldVar) {
-      //this.sortBy = fieldVar.key
-      if (
-        fieldVar.thAttr['aria-sort'] === 'none' ||
-        fieldVar.thAttr['aria-sort'] === 'descending'
-      ) {
-        this.newSortBy = [{ key: fieldVar.key, order: 'asc' }]
-        //this.sortDesc = false
+      const currentSort = fieldVar.thAttr["aria-sort"];
+      if (currentSort === "ascending") {
+        this.newSortBy = [{ key: fieldVar.key, order: "desc" }];
       } else {
-        this.newSortBy = [{ key: fieldVar.key, order: 'desc' }]
-        //this.sortDesc = true
+        this.newSortBy = [{ key: fieldVar.key, order: "asc" }];
       }
     },
   },
-}
+};
 </script>
 
 <style lang="scss">
 .paragraph--tabulated-data {
-  @import '../../../includes/scss/all';
+  @import "../../../includes/scss/all";
 
   .section-group__block {
     margin-top: -32px;