@worksafevictoria/wcl7.5 1.9.0-beta.3 → 1.9.0-beta.5

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,116 +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)
-      let returnUrl = url
-      if (startUrl.toLowerCase() === 'www') {
-        returnUrl = 'https://' + url
-      } 
-      if (startUrl.toLowerCase() !== 'htt' && startUrl.toLowerCase() !== 'www' && url !== '') {
-        returnUrl = 'https://www.' + url
-      } 
-      return returnUrl
+      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/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>

package/src/components/SubComponents/CtaButton/index.vue

@@ -13,6 +13,7 @@
       :height="glyphHeight"
       :glyph="glyph"
       :class="glyphClass"
+      icon-alt="button icon"
     />
     <arrow-right v-else-if="!rtl && !textOnly" :class="glyphClass" />
     <arrow-left v-else-if="!textOnly" :class="glyphClass" />
@@ -36,6 +37,7 @@
       :height="glyphHeight"
       :glyph="glyph"
       :class="glyphClass"
+      icon-alt="anchor icon"
     />
     <arrow-right v-else-if="!rtl && !textOnly" :class="glyphClass" />
     <arrow-left v-else-if="!textOnly" :class="glyphClass" />
@@ -59,6 +61,7 @@
       :height="glyphHeight"
       :glyph="glyph"
       :class="glyphClass"
+      icon-alt="link icon"
     />
     <arrow-right v-else-if="!rtl && !textOnly" :class="glyphClass" />
     <arrow-left v-else-if="!textOnly" :class="glyphClass" />
@@ -66,12 +69,12 @@
 </template>
 
 <script>
-import arrowRight from '../../../assets/icons/arrow-right.svg?component'
-import arrowLeft from '../../../assets/icons/arrow-left.svg?component'
-import icon from './../Icon/index.vue'
+import arrowRight from "../../../assets/icons/arrow-right.svg?component";
+import arrowLeft from "../../../assets/icons/arrow-left.svg?component";
+import icon from "./../Icon/index.vue";
 
 export default {
-  name: 'CtaButton',
+  name: "CtaButton",
   components: {
     arrowRight,
     arrowLeft,
@@ -80,18 +83,18 @@ export default {
   props: {
     type: {
       type: String,
-      default: 'default',
+      default: "default",
       validator: (value) =>
-        ['default', 'white', 'gray', 'workwell', 'dark'].indexOf(value) >= 0,
+        ["default", "white", "gray", "workwell", "dark"].indexOf(value) >= 0,
     },
     url: {
       type: String,
       required: false,
-      default: '',
+      default: "",
     },
     alt: {
       type: String,
-      default: '',
+      default: "",
     },
     rtl: {
       type: Boolean,
@@ -138,15 +141,15 @@ export default {
     },
     focusOutline: {
       type: String,
-      default: 'default',
-      validator: (value) => ['default', 'light', 'dark'].indexOf(value) >= 0,
+      default: "default",
+      validator: (value) => ["default", "light", "dark"].indexOf(value) >= 0,
     },
   },
   data() {
     return {
       arrowRight,
       arrowLeft,
-    }
+    };
   },
   computed: {
     // var r = new RegExp('^(?:[a-z]+:)?//', 'i');
@@ -158,81 +161,81 @@ export default {
     // r.test('/myfolder/test.txt'); // false - relative URL
     // r.test('test'); // false - also relative URL
     isAbsolute() {
-      let r = new RegExp('^(?:[a-z]+:)?//', 'i')
-      return r.test(this.url)
+      let r = new RegExp("^(?:[a-z]+:)?//", "i");
+      return r.test(this.url);
     },
     // Some links come out of Drupal in the format `entity:node/551`
     // As an interim solution, make the link go to `node/551` and it
     // will render correctly. Not ideal as it doesn't forward to the
     // friendly link. Should come out of Drupal with a proper alias.
     linkUriProcessed() {
-      if (this.url?.indexOf('entity:') === 0) {
-        return this.url.slice(7)
-      } else if (this.url?.indexOf('internal:') === 0) {
-        return this.url.slice(9)
+      if (this.url?.indexOf("entity:") === 0) {
+        return this.url.slice(7);
+      } else if (this.url?.indexOf("internal:") === 0) {
+        return this.url.slice(9);
       } else {
-        return this.url
+        return this.url;
       }
     },
     generatedClass() {
-      return `wcl-cta ${this.type} ${this.rtl ? 'rtl' : ''} ${
-        this.workwell ? 'workwell' : ''
-      } ${this.isCentred ? 'text-center' : ''} ${
-        this.textOnly ? 'wcl-cta--text-only' : ''
-      } ${this.stretch ? 'wcl-cta--stretch' : ''} ${
-        this.slim ? 'wcl-cta--slim' : ''
-      } ${'wcl-cta--focus-' + this.focusOutline}`
+      return `wcl-cta ${this.type} ${this.rtl ? "rtl" : ""} ${
+        this.workwell ? "workwell" : ""
+      } ${this.isCentred ? "text-center" : ""} ${
+        this.textOnly ? "wcl-cta--text-only" : ""
+      } ${this.stretch ? "wcl-cta--stretch" : ""} ${this.slim ? "wcl-cta--slim" : ""} ${
+        "wcl-cta--focus-" + this.focusOutline
+      }`;
     },
     glyphClass() {
-      const hasArrow = !this.glyph && !this.textOnly
+      const hasArrow = !this.glyph && !this.textOnly;
       return this.isCentred
-        ? { ['wcl-cta__arrow']: hasArrow }
+        ? { ["wcl-cta__arrow"]: hasArrow }
         : {
-            ['wcl-cta__arrow']: hasArrow,
-          }
+            ["wcl-cta__arrow"]: hasArrow,
+          };
     },
     textClass() {
-      return this.isCentred ? {} : {}
+      return this.isCentred ? {} : {};
     },
   },
   methods: {
     clicked() {
-      var theEl = this.$el.getElementsByClassName('wcl-cta__link-text')
-      var attrs
+      var theEl = this.$el.getElementsByClassName("wcl-cta__link-text");
+      var attrs;
       if (theEl && theEl.length > 0) {
         attrs = {
           //group: this.$store?.state?.page?.content?.title,
           group: this.$pageStore?.content?.title,
-          label: theEl[0]?.innerText?.split('\n')[0],
+          label: theEl[0]?.innerText?.split("\n")[0],
           data: this.url,
-        }
+        };
       } else {
         attrs = {
           //group: this.$store?.state?.page?.content?.title,
           group: this.$pageStore?.content?.title,
-          label: '',
+          label: "",
           data: this.url,
-        }
+        };
       }
       // push event to gtm
       if (this.$gtm) {
-        this.$gtm.push({ event: 'custom.interaction.cta.click', ...attrs })
+        this.$gtm.push({ event: "custom.interaction.cta.click", ...attrs });
       }
       // navigate to url
       if (!this.url) {
         //donothing
       } else if (this.isAbsolute) {
-        window.open(this.url)
+        window.open(this.url);
       } else {
-        this.$router.push(this.url)
+        this.$router.push(this.url);
       }
-      this.$emit('clicked')
+      this.$emit("clicked");
     },
   },
-}
+};
 </script>
 <style lang="scss" scoped>
-@import '../../../includes/scss/all';
+@import "../../../includes/scss/all";
 // styles can be found in global src/assets/styles/stylesheet.scss
 // this is because rich text html can dynamically specify cta button class
 .wcl-cta {
@@ -245,12 +248,12 @@ export default {
   &--focus {
     &-light {
       &:focus {
-        @include focus-outline('light');
+        @include focus-outline("light");
       }
     }
     &-dark {
       &:focus {
-        @include focus-outline('dark');
+        @include focus-outline("dark");
       }
     }
   }