@worksafevictoria/wcl7.5 1.8.0 → 1.9.0-beta.10

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

@@ -1,30 +1,48 @@
 <template>
   <section-group class="paragraph--directory dir-filters">
     <!-- Filters -->
-    <row style="column-gap: 16px;">
+    <row style="column-gap: 16px">
       <!-- Keyword Filters -->
       <column xxl="2" xl="3" md="4" sm="6">
         <label class="visually-hidden" for="search-directory">
           Search by keyword (typed keyword automatically filters below results)
         </label>
-        <input type="text" v-model="searchOrg" placeholder="Organisation" class="search">
+        <input
+          type="text"
+          v-model="searchOrg"
+          placeholder="Organisation"
+          class="search"
+        />
       </column>
       <column xxl="2" xl="3" md="4" sm="6">
         <label class="visually-hidden" for="search-directory">
           Search by suburb (typed suburb automatically filters below results)
         </label>
-        <input type="text" v-model="searchSub" placeholder="Training location" class="search">
+        <input
+          type="text"
+          v-model="searchSub"
+          placeholder="Training location"
+          class="search"
+        />
       </column>
       <!-- Other Filters -->
       <column xxl="2" xl="3" md="4" sm="6">
+        <label class="visually-hidden" for="filterType"> Filter Type </label>
         <select id="filterType" v-model="searchCourse" name="filter" class="selectClass">
-          <option class="placeholder" value="" disabled hidden selected>Course type</option>
+          <option class="placeholder" value="" disabled hidden selected>
+            Course type
+          </option>
           <option value="HSR Initial">HSR Initial</option>
           <option value="HSR Refresher">HSR Refresher</option>
         </select>
       </column>
       <column xxl="2" xl="3" md="4" sm="6">
-        <select id="filterTheme" v-model="searchThemes" name="filter1" class="selectClass">
+        <select
+          id="filterTheme"
+          v-model="searchThemes"
+          name="filter1"
+          class="selectClass"
+        >
           <option class="placeholder" value="" disabled hidden selected>Theme</option>
           <option v-for="(opt, i) in themeOptions" :key="i" :value="opt">
             {{ opt }}
@@ -42,54 +60,51 @@
       </column>
     </row>
     <!-- HSCP Records -->
-    <div class="dirRecords" >
-      <template v-for="(item, index) in resultChunks[page]" >
-        <hscp-record v-if="item.type === 'hscp'" :key="index" :item="item"/>
+    <div class="dirRecords">
+      <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">
-        <pagination
-          :total-pages="totalPages"
-          :total="totalResults"
-          :per-page="perPage"
-          :current-page="page + 1"
-          @pagechanged="pageChanged($event)"
-        />
-      </div>
+      <pagination
+        :total-pages="totalPages"
+        :total="totalResults"
+        :per-page="perPage"
+        :current-page="page + 1"
+        @pagechanged="pageChanged($event)"
+      />
+    </div>
     <h4 v-if="filteredRecords.length === 0">No records found</h4>
-
   </section-group>
-  
 </template>
 
 <script>
-
-import hscpRecord from './SingleRecord/index.vue'
-import searchIcon from './../../../../../assets/icons/search.svg?url'
-import SectionGroup from '../../../../Containers/SectionGroup/index.vue'
-import FilterButton from '../../../../Common/FilterButton/index.vue'  //Reset
-import Pagination from './pagination.vue'
+import hscpRecord from "./SingleRecord/index.vue";
+import searchIcon from "./../../../../../assets/icons/search.svg?url";
+import SectionGroup from "../../../../Containers/SectionGroup/index.vue";
+import FilterButton from "../../../../Common/FilterButton/index.vue"; //Reset
+import Pagination from "./pagination.vue";
 
 export default {
-  name: 'HSCP',
+  name: "HSCP",
   components: {
     hscpRecord,
     SectionGroup,
     FilterButton,
-    Pagination
+    Pagination,
   },
   data() {
     return {
-      searchOrg: '',
-      searchSub: '',
-      searchCourse: '',
-      searchThemes: '',
+      searchOrg: "",
+      searchSub: "",
+      searchCourse: "",
+      searchThemes: "",
       filteredItems: null,
       perPage: 10,
       page: 0,
       searchIcon,
-      hideReset: true
-    }
+      hideReset: true,
+    };
   },
   props: {
     items: {
@@ -97,23 +112,22 @@ export default {
       required: true,
     },
   },
- 
-  computed: {
 
+  computed: {
     themeOptions() {
       // Concatenate all themes, remove duplicates, sort and use for a drop-down list
-      let allThemes = this.flatRecords.map(a => a.themes)
-      allThemes = allThemes.join(',')
-      allThemes = allThemes.trim()
-      allThemes = allThemes.split(',')
+      let allThemes = this.flatRecords.map((a) => a.themes);
+      allThemes = allThemes.join(",");
+      allThemes = allThemes.trim();
+      allThemes = allThemes.split(",");
       // Change all themes to title case
       for (var i = 0; i < allThemes.length; i++) {
-        let newVal = this.toTitleCase(allThemes[i])
-        allThemes[i] = newVal
+        let newVal = this.toTitleCase(allThemes[i]);
+        allThemes[i] = newVal;
       }
       // Remove duplicates
-      let s = new Set(allThemes)
-      allThemes = [...s]
+      let s = new Set(allThemes);
+      allThemes = [...s];
 
       // Sort the themes
       let sortedThemes = allThemes.sort((a, b) => {
@@ -124,42 +138,55 @@ export default {
           return 1;
         }
         return 0;
-      })
-      allThemes = sortedThemes
+      });
+      allThemes = sortedThemes;
 
-      return allThemes
+      return allThemes;
     },
 
     filteredRecords() {
-      let results = this.flatRecords
-     
+      let results = this.flatRecords;
+
       if (this.searchOrg.length) {
-        this.hideReset = false
-        results = results.filter(item => item.title.toLowerCase().includes(this.searchOrg.toLowerCase()))
+        this.hideReset = false;
+        results = results.filter((item) =>
+          item.title.toLowerCase().includes(this.searchOrg.toLowerCase())
+        );
       }
       if (this.searchSub.length) {
-        this.hideReset = false
-        results = results.filter(item => item.trainingVenues.toLowerCase().includes(this.searchSub.toLowerCase()))
+        this.hideReset = false;
+        results = results.filter((item) =>
+          item.trainingVenues.toLowerCase().includes(this.searchSub.toLowerCase())
+        );
       }
       if (this.searchCourse.length) {
-        this.hideReset = false
-        results = results.filter(item => item.courses.toLowerCase().includes(this.searchCourse.toLowerCase()))
+        this.hideReset = false;
+        results = results.filter((item) =>
+          item.courses.toLowerCase().includes(this.searchCourse.toLowerCase())
+        );
       }
       if (this.searchThemes.length) {
-        this.hideReset = false
-        results = results.filter(item => item.themes.toLowerCase().includes(this.searchThemes.toLowerCase()))
+        this.hideReset = false;
+        results = results.filter((item) =>
+          item.themes.toLowerCase().includes(this.searchThemes.toLowerCase())
+        );
       }
-      this.filteredItems = results
+      this.filteredItems = results;
 
-      if (this.searchOrg.length || this.searchSub.length || this.searchCourse.length || this.searchThemes.length) {
-        this.pageChanged(1)
+      if (
+        this.searchOrg.length ||
+        this.searchSub.length ||
+        this.searchCourse.length ||
+        this.searchThemes.length
+      ) {
+        this.pageChanged(1);
       }
 
-      return results
+      return results;
     },
-  
+
     flatRecords() {
-      let flatRecords = []
+      let flatRecords = [];
       const sortedItems = this.items.sort((a, b) => {
         if (a.Organisation < b.Organisation) {
           return -1;
@@ -168,10 +195,10 @@ export default {
           return 1;
         }
         return 0;
-      })
-     sortedItems.forEach((record) => {
+      });
+      sortedItems.forEach((record) => {
         flatRecords.push({
-          type: 'hscp',
+          type: "hscp",
           title: record.Organisation,
           fullAddress: record.Main_office_address,
           orgAcronym: record.Organisation_acronym,
@@ -185,113 +212,119 @@ export default {
           contact2: record.Contact_2_Name,
           email2: record.Contact_2_Email,
           phone2: record.Contact_2_Phone,
-          courses: record.Training_courses.replace(/,$/, ''),
-          themes: record.Themes.replace(/,$/, ''),
-          trainingVenues: record.Training_venues
-        })
-      })
-      return flatRecords
+          courses: record.Training_courses.replace(/,$/, ""),
+          themes: record.Themes.replace(/,$/, ""),
+          trainingVenues: record.Training_venues,
+        });
+      });
+      return flatRecords;
     },
     resultChunks() {
-      return this.chunkify(this.filteredItems || this.items, this.perPage)
+      return this.chunkify(this.filteredItems || this.items, this.perPage);
     },
     noRecordsFound() {
-      return this.resultChunks[0].length === 0
+      return this.resultChunks[0].length === 0;
     },
     totalResults() {
-      return Array.isArray(this.filteredItems) ? this.filteredItems.length : 0
+      return Array.isArray(this.filteredItems) ? this.filteredItems.length : 0;
     },
     totalPages() {
-      return this.resultChunks.length
+      return this.resultChunks.length;
     },
     pageResultCount() {
-      return this.resultChunks[this.page].length
-    }
+      return this.resultChunks[this.page].length;
+    },
   },
-  
-  methods: {
 
+  methods: {
     formatWebsite(url) {
-      let startUrl = url.slice(0, 3)
-      if (startUrl.toLowerCase() === 'www') {
-        return 'https://' + url
-      } else {
-        return url
+      let startUrl = url.slice(0, 3);
+      let returnUrl = url;
+      if (startUrl.toLowerCase() === "www") {
+        returnUrl = "https://" + url;
+      }
+      if (
+        startUrl.toLowerCase() !== "htt" &&
+        startUrl.toLowerCase() !== "www" &&
+        url !== ""
+      ) {
+        returnUrl = "https://www." + url;
       }
+      return returnUrl;
     },
 
     chunkify(arr, n) {
       if (arr) {
         const chunked = arr.reduce(
           (chunk, val) => {
-            if (chunk[chunk.length - 1].length === n) chunk.push([])
-            chunk[chunk.length - 1].push(val)
-            return chunk
+            if (chunk[chunk.length - 1].length === n) chunk.push([]);
+            chunk[chunk.length - 1].push(val);
+            return chunk;
           },
           [[]]
-        )
-        return chunked
+        );
+        return chunked;
       }
-      return [[]]
+      return [[]];
     },
-    
+
     reset() {
-      this.collapseOrgs('No')
-      this.hideReset = true
-      this.searchOrg = ''
-      this.searchCourse = ''
-      this.searchSub = ''
-      this.searchThemes = ''
+      this.collapseOrgs("No");
+      this.hideReset = true;
+      this.searchOrg = "";
+      this.searchCourse = "";
+      this.searchSub = "";
+      this.searchThemes = "";
     },
 
     pageChanged(ev) {
-      this.page = ev - 1
+      this.page = ev - 1;
 
-      if (this.searchOrg.length || this.searchSub.length || this.searchCourse.length || this.searchThemes.length) {
-          // don't set focus
-          // don't collapseOrgs
-        } else {
-          // set focus to top element - used instead of scrollTo
-          this.collapseOrgs('Yes')
-        } 
+      if (
+        this.searchOrg.length ||
+        this.searchSub.length ||
+        this.searchCourse.length ||
+        this.searchThemes.length
+      ) {
+        // don't set focus
+        // don't collapseOrgs
+      } else {
+        // set focus to top element - used instead of scrollTo
+        this.collapseOrgs("Yes");
+      }
     },
 
     collapseOrgs(focusLink) {
       // called by pageChanged and reset.  pageChanged called by filter and by pagination links
-      const aLinks = document.getElementsByName('titleLink')
+      const aLinks = document.getElementsByName("titleLink");
       // Convert nodelist to array
-      let linksArr = Array.from(aLinks)
+      let linksArr = Array.from(aLinks);
       if (Array.isArray(linksArr) && linksArr.length > 0) {
         linksArr
-          .filter((link) => link.getAttribute('aria-expanded') === 'true')
-          .forEach((link) => link.click())
+          .filter((link) => link.getAttribute("aria-expanded") === "true")
+          .forEach((link) => link.click());
 
-        if (focusLink === 'Yes') {
-          linksArr[0].focus()
+        if (focusLink === "Yes") {
+          linksArr[0].focus();
         }
       }
-
     },
 
     toTitleCase(strVal) {
+      let retVal = strVal.trim();
 
-      let retVal = strVal.trim()
-
-      const firstChar = retVal.charAt(0)
-      const firstCharU = firstChar.toUpperCase()
-      const remChar = retVal.slice(1)
+      const firstChar = retVal.charAt(0);
+      const firstCharU = firstChar.toUpperCase();
+      const remChar = retVal.slice(1);
 
-      retVal = firstCharU + remChar
+      retVal = firstCharU + remChar;
 
-      return retVal
+      return retVal;
     },
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-
-@import '../styles.scss'
-
-
+@import "../styles.scss";
 </style>

package/src/components/Paragraphs/ScrollSpy/index.stories.js

@@ -4,40 +4,38 @@ import { BCol, BRow, BContainer } from 'bootstrap-vue-next'
 const englishItemList = [
   {
     text: 'Section one heading',
-    id: 'item-1'
+    id: 'item-1',
   },
   {
     text: 'Section two heading spans over two lines',
-    id: 'item-2'
+    id: 'item-2',
   },
   {
-    text:
-      'Section three heading spans over three lines and is active yellow or green',
-    id: 'item-3'
+    text: 'Section three heading spans over three lines and is active yellow or green',
+    id: 'item-3',
   },
   {
     text: 'Section four heading',
-    id: 'item-4'
-  }
+    id: 'item-4',
+  },
 ]
 const arabicItemList = [
   {
     text: 'عنوان القسم الأول',
-    id: 'item-1'
+    id: 'item-1',
   },
   {
     text: 'يمتد عنوان القسم الثاني على سطرين',
-    id: 'item-2'
+    id: 'item-2',
   },
   {
-    text:
-      'يمتد عنوان القسم الثالث على ثلاثة أسطر ويكون نشطًا باللون الأصفر أو الأخضر',
-    id: 'item-3'
+    text: 'يمتد عنوان القسم الثالث على ثلاثة أسطر ويكون نشطًا باللون الأصفر أو الأخضر',
+    id: 'item-3',
   },
   {
     text: 'عنوان الباب الرابع',
-    id: 'item-4'
-  }
+    id: 'item-4',
+  },
 ]
 export default {
   title: 'Paragraphs/ScrollSpy',
@@ -45,16 +43,16 @@ export default {
   tags: ['autodocs'],
   argTypes: {
     itemList: {
-      table: {disable: true}
-    }
+      table: { disable: true },
+    },
   },
   args: {
     title: 'On this page',
-    itemListEnglish:  englishItemList,
+    itemListEnglish: englishItemList,
     itemListArabic: arabicItemList,
     rtl: false,
-    scrollSpy: { element: 'scrollspy-nested', offset: 100, method: 'auto' }
-    }
+    scrollSpy: { element: 'scrollspy-nested', offset: 100, method: 'auto' },
+  },
 }
 const DefaultContent = (args) => ({
   components: { ScrollSpy, BCol, BRow, BContainer },
@@ -75,7 +73,7 @@ const DefaultContent = (args) => ({
         `,
       arabicText: `هنالك العديد من الأنواع المتوفرة لنصوص لوريم إيبسوم، ولكن الغالبية تم تعديلها بشكل ما عبر إدخال بعض النوادر أو الكلمات العشوائية إلى النص. إن كنت تريد أن تستخدم نص لوريم إيبسوم ما، عليك أن تتحقق أولاً أن ليس هناك أي كلمات أو عبارات محرجة أو غير لائقة مخبأة في هذا النص. بينما تعمل جميع مولّدات نصوص لوريم إيبسوم على الإنترنت على إعادة تكرار مقاطع من نص لوريم إيبسوم نفسه عدة مرات بما تتطلبه الحاجة، يقوم مولّدنا هذا باستخدام كلمات من قاموس يحوي على أكثر من 200 كلمة لا تينية، مضاف إليها مجموعة من الجمل النموذجية، لتكوين نص لوريم إيبسوم ذو شكل منطقي قريب إلى النص الحقيقي. وبالتالي يكون النص الناتح خالي من التكرار، أو أي كلمات أو عبارات غير لائقة أو ما شابه. وهذا ما يجعله أول مولّد نص لوريم إيبسوم حقيقي على الإنترنت.`,
       englishItemList,
-      arabicItemList
+      arabicItemList,
     }
   },
   template: `
@@ -85,7 +83,7 @@ const DefaultContent = (args) => ({
         <div
           id="scrollspy-nested"
         >
-          <h4 id="item-1">Section one heading</h4>
+          <h2 id="item-1">Section one heading</h2>
           <p>{{ text }}</p>
           <p>{{ text }}</p>
           <p>{{ text }}</p>
@@ -94,7 +92,7 @@ const DefaultContent = (args) => ({
           <p>{{ text }}</p>
           <p>{{ text }}</p>
           <p>{{ text }}</p>
-          <h4 id="item-2">Section two heading spans over two lines</h4>
+          <h2 id="item-2">Section two heading spans over two lines</h2>
           <p>{{ text }}</p>
           <p>{{ text }}</p>
           <p>{{ text }}</p>
@@ -102,7 +100,7 @@ const DefaultContent = (args) => ({
           <p>{{ text }}</p>
           <p>{{ text }}</p>
           <p>{{ text }}</p>
-          <h4 id="item-3">Section three heading spans over three lines and is active yellow or green</h4>
+          <h2 id="item-3">Section three heading spans over three lines and is active yellow or green</h2>
           <p>{{ text }}</p>
           <p>{{ text }}</p>
           <p>{{ text }}</p>
@@ -110,7 +108,7 @@ const DefaultContent = (args) => ({
           <p>{{ text }}</p>
           <p>{{ text }}</p>
           <p>{{ text }}</p>
-          <h4 id="item-4">Section four heading</h4>
+          <h2 id="item-4">Section four heading</h2>
           <p>{{ text }}</p>
           <p>{{ text }}</p>
           <p>{{ text }}</p>
@@ -172,7 +170,7 @@ const DefaultContent = (args) => ({
       <scroll-spy v-bind="args" :item-list="args.arabicItemList" />
       </b-col>
     </b-row>
-    </b-container>`
+    </b-container>`,
 })
 
 export const Default = DefaultContent.bind({})

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

@@ -17,55 +17,48 @@
   </section-group>
 </template>
 
-<script>
+<script setup>
 import SectionGroup from '../../Containers/SectionGroup/index.vue'
+import { defineProps } from 'vue'
 import {
   BNavbar,
   BListGroup,
   BListGroupItem,
-  vBScrollspy,
+  vBScrollspy as vBScrollspy,
 } from 'bootstrap-vue-next'
 
-export default {
-  name: 'ScrollSpy',
-  components: { SectionGroup, BNavbar, BListGroup, BListGroupItem },
-  directives: { 'b-scrollspy': vBScrollspy },
-  props: {
-    title: {
-      type: String,
-      default: 'On this page',
-    },
-    itemList: {
-      type: Array,
-      required: true,
-    },
-    rtl: {
-      type: Boolean,
-      default: false,
-    },
-    scrollSpy: {
-      type: Object,
-      default: () => {
-        return {
-          element: 'body',
-          offset: 100,
-          method: 'auto',
-          contentQuery: '[id]',
-        }
-      },
-    },
+const { title, itemList, rtl, scrollSpy } = defineProps({
+  title: {
+    type: String,
+    default: 'On this page',
   },
-  methods: {
-    scrollToAnchor(anchor) {
-      const anchorElement = document.getElementById(anchor)
-      if (anchorElement) {
-        anchorElement.focus()
-        anchorElement.scrollIntoView({
-          behavior: 'smooth',
-        })
-      }
-    },
+  itemList: {
+    type: Array,
+    required: true,
+  },
+  rtl: {
+    type: Boolean,
+    default: false,
+  },
+  scrollSpy: {
+    type: Object,
+    default: () => ({
+      element: 'body',
+      offset: 100,
+      method: 'auto',
+      contentQuery: 'h2[id]',
+    }),
   },
+})
+
+const scrollToAnchor = (anchor) => {
+  const anchorElement = document.getElementById(anchor)
+  if (anchorElement) {
+    anchorElement.focus()
+    anchorElement.scrollIntoView({
+      behavior: 'smooth',
+    })
+  }
 }
 </script>
 

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

@@ -22,6 +22,7 @@
           <span
             class="iconHeader table-active"
             tabindex="0"
+            role="button"
             @keypress.enter="accessSort(data.field)"
             scope="colgroup"
           >
@@ -31,13 +32,13 @@
                 v-if="data.field.thAttr['aria-sort'] === 'ascending'"
                 :src="CaretUp"
                 alt="image indicating ascending sort"
-                class="iconAsc"
+                class="collapse icon"
               />
               <img
                 v-else-if="data.field.thAttr['aria-sort'] === 'descending'"
                 :src="CaretDown"
                 alt="image indicating descending sort"
-                class="iconDesc"
+                class="expand icon"
               />
             </span>
           </span>