@worksafevictoria/wcl7.5 1.8.0-beta.7 → 1.8.0-beta.9

package/package.json

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

package/src/components/Paragraphs/Directory/Asbestos/Records/SingleRecord/index.stories.js

@@ -0,0 +1,30 @@
+import arRecord from './index.vue'
+
+const arData = 
+    {
+        title: 'Ventia Utility Services Pty Limited',
+        fullAddress: 'Ventia - Cardinia Building, 25 Lucknow Street MITCHAM VIC 3132',
+        workPhone: '0438531164',
+        mobilePhone: '0438531164',
+        email: 'daniel.dehaan@ventia.com',
+        website: 'http://www.ventia.com.au',
+        contact1: 'Daniel DeHaan',
+        phone1: '0438531164',
+        email1: 'daniel.dehaan@ventia.com',
+        mobile1: '0438531164',
+        serviceCategory: 'Class B - Restricted - Asbestos Removalists',
+        services: 'Bituminous coal tar coatings,Non-friable Asbestos Cement Water Pipes and Associated Fittings ONLY,Non-friable Asbetos Containing Bituminous Coating on Mild Steel Pipes',
+    }
+
+
+export default {
+    title: 'Paragraphs/Directory/Asbestos/SingleRecord',
+    component: arRecord,
+    tags: ['autodocs']
+}
+
+export const Removalist = {}
+
+Removalist.args = {
+    item: arData,    
+}

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

@@ -0,0 +1,182 @@
+<template>
+  <div class="paragraph--directory__records--dir">
+    <!-- Main details -->
+    <container>
+      <row class="records">
+        <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" >
+          <div class="label">Office address</div>
+          <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.workPhone || item.mobilePhone" :href="`tel:${item.workPhone || item.mobilePhone}`"><span class="sr-only visually-hidden">Phone number</span>
+            {{ item.workPhone || item.mobilePhone }}
+          </a>
+        </column>
+      </row>
+      <div class="dir-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>
+    </container>
+    
+    <!-- Additional Content -->
+    <container>
+      <div v-if="this.visible">
+      <div style="padding-top: 20px;">
+        <hr>
+      </div>
+      <!-- Contacts, if any -->
+      <div v-if="validContacts">
+        <row >
+        <column >
+          <h4>Contact Information</h4>
+        </column>
+      </row>
+      <row v-if="item.contact1 !== ''">
+        <column sm="2" class="label" v-if="item.contact1 !== ''">
+          Contact
+        </column>
+        <column sm="4" class="dir-additional-records" v-if="item.contact1 !== ''">
+          {{item.contact1}}
+        </column>
+      </row>
+      <row v-if="item.phone1 !== ''">
+        <column sm="2" class="label" v-if="item.phone1 !== ''">
+          Phone
+        </column>
+        <column sm="4" class="dir-additional-records" v-if="item.phone1 !== ''">
+          {{item.phone1}}
+        </column>
+      </row>
+      <row v-if="item.mobile1 !== ''">
+        <column sm="2" class="label" v-if="item.mobile1 !== ''">
+          Mobile
+        </column>
+        <column sm="4" class="dir-additional-records" v-if="item.mobile1 !== ''">
+          {{item.mobile1}}
+        </column>
+      </row>
+      <row v-if="item.email1 !== ''">
+        <column sm="2" class="label" v-if="item.email1 !== ''">
+          Email
+        </column>
+        <column sm="4" class="dir-additional-records" v-if="item.email1 !== ''">
+          {{item.email1}}
+        </column>
+      </row>
+      </div>
+     <div v-if="item.serviceCategory">
+      <row class="row-dir-additional">
+        <column>
+          <h4> {{ item.serviceCategory }}</h4>
+        </column>
+      </row>
+      <row class="dir-additional-records">
+        <column  >
+          <ul>
+            <li v-for="(serv) in item.services.split(',')" :key="serv.id">
+              {{serv}}
+            </li>
+          </ul> 
+        </column>
+      </row>
+     </div>
+    </div>
+    </container>
+  </div>
+</template>
+<script>
+import Container from '../../../../../Containers/Container/index.vue'
+import Row from '../../../../../Containers/Row/index.vue'
+import Column from '../../../../../Containers/Column/index.vue'
+import CaretUp from './../../../../../../assets/icons/caret-up.svg?url'
+import CaretDown from './../../../../../../assets/icons/caret-down.svg?url'
+
+export default {
+  components: {
+    Container,
+    Row,
+    Column,
+},
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      CaretUp,
+      CaretDown,
+    }
+  },
+  computed: {
+    gMapLink() {
+      return `https://google.com/maps?q=${this.item.title}%20${this.item.fullAddress}`
+    },
+    validContacts() {
+      if (this.item.contact1 === '' && this.item.phone1 === '' && this.item.email1 === '' && this.item.mobile1 === '') {
+        return false
+      } else {
+        return true
+      }
+    }
+
+  },
+  methods: {
+    handleClick(title) {
+      this.visible = !this.visible
+      if (this.$gtm) {
+        if (this.visible) {
+          this.$gtm.push({ event: 'custom.search.prs.open', title })
+        } else {
+          this.$gtm.push({
+            event: 'custom.search.prs.close',
+            title
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+@import '../../../HSCP/Records/SingleRecord/styles.scss'
+
+</style>
+

package/src/components/Paragraphs/Directory/Asbestos/Records/index.stories.js

@@ -0,0 +1,19 @@
+import Records from './index.vue'
+import { arData } from '../../../../../mock/asbestos-removalists'
+
+
+export default {
+    title: 'Paragraphs/Directory/Asbestos/Records',
+    component: Records,
+    tags: ['autodocs'],
+    data() {
+        return {
+            arData
+        }
+      },
+      args: {
+        items: arData,
+      },
+}
+
+export const Removalists = {}

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

@@ -0,0 +1,254 @@
+<template>
+  <section-group class="paragraph--directory dir-filters">
+    <!-- Filters -->
+    <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="searchRem" placeholder="Removalist" 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="Address" class="search">
+      </column>
+      <!-- Other Filters -->
+      <column xxl="2" xl="3" md="4" sm="6">
+        <select id="filterType" v-model="searchClass" name="filter" class="selectClass">
+          <option class="placeholder" value="" disabled hidden selected>Service class</option>
+          <option value="Class A Asbestos Removalists">Class A Asbestos Removalists</option>
+          <option value="Class B Asbestos Removalists">Class B Asbestos Removalists</option>
+          <option value="Class A - Restricted - Asbestos Removalists">Class A - Restricted - Asbestos Removalists</option>
+          <option value="Class B - Restricted - Asbestos Removalists">Class B - Restricted - Asbestos Removalists</option>
+        </select>
+      </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="searchServices" placeholder="Services" class="search">
+      </column>
+      <column md="2">
+        <filter-button
+          v-if="!hideReset"
+          filter-button="!hideReset"
+          :is-reset="true"
+          class="filterButton__button filterButton__button--reset"
+          @clicked="reset"
+        />
+      </column>
+    </row>
+    <!-- AR Records -->
+    <div class="dirRecords" >
+      <template v-for="(item, index) in resultChunks[page]" >
+        <ar-record v-if="item.type === 'ar'" :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>
+    <h4 v-if="filteredRecords.length === 0">No records found</h4>
+
+  </section-group>
+  
+</template>
+
+<script>
+
+import arRecord 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 '../../HSCP/Records/pagination.vue'
+
+export default {
+  name: 'Asbestos',
+  components: {
+    arRecord,
+    SectionGroup,
+    FilterButton,
+    Pagination
+  },
+  data() {
+    return {
+      searchRem: '',
+      searchSub: '',
+      searchClass: '',
+      searchServices: '',
+      filteredItems: null,
+      perPage: 10,
+      page: 0,
+      searchIcon,
+      hideReset: true
+    }
+  },
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+  },
+ 
+  computed: {
+
+    filteredRecords() {
+      let results = this.flatRecords
+     
+      if (this.searchRem.length) {
+        this.hideReset = false
+        results = results.filter(item => item.title.toLowerCase().includes(this.searchRem.toLowerCase()))
+      }
+      if (this.searchSub.length) {
+        this.hideReset = false
+        results = results.filter(item => item.fullAddress.toLowerCase().includes(this.searchSub.toLowerCase()))
+      }
+      if (this.searchClass.length) {
+        this.hideReset = false
+        results = results.filter(item => item.serviceCategory.toLowerCase().includes(this.searchClass.toLowerCase()))
+      }
+      if (this.searchServices.length) {
+        this.hideReset = false
+        results = results.filter(item => item.services.toLowerCase().includes(this.searchServices.toLowerCase()))
+      }
+      this.filteredItems = results
+
+      if (this.searchRem.length || this.searchSub.length || this.searchClass.length || this.searchServices.length) {
+        this.pageChanged(1)
+      }
+
+      return results
+    },
+  
+    flatRecords() {
+      let flatRecords = []
+      const sortedItems = this.items.sort((a, b) => a.ResourceName.localeCompare(b.ResourceName, 'en', {'sensitivity': 'base'}))
+      
+      sortedItems.forEach((record) => {
+        flatRecords.push({
+          type: 'ar',
+          title: record.ResourceName,
+          fullAddress: record.CompanyAddress + ' ' + record.AddressLine2,
+          workPhone: record.Phone,
+          mobilePhone: record.CompanyMobile,
+          email: record.CompanyEmailDisp,
+          website: this.formatWebsite(record.CompanyWebURLDisp),
+          contact1: record.ContactFirstName + ' ' + record.ContactLastName,
+          email1: record.ContactEmail,
+          phone1: record.ContactPhoneDisp,
+          mobile1: record.ContactMobileDisp,
+          services: record.ServicesAll.replace(/,$/, ''),
+          serviceCategory: record.ServiceAll
+        })
+      })
+      return flatRecords
+    },
+    resultChunks() {
+      return this.chunkify(this.filteredItems || this.items, this.perPage)
+    },
+    noRecordsFound() {
+      return this.resultChunks[0].length === 0
+    },
+    totalResults() {
+      return Array.isArray(this.filteredItems) ? this.filteredItems.length : 0
+    },
+    totalPages() {
+      return this.resultChunks.length
+    },
+    pageResultCount() {
+      return this.resultChunks[this.page].length
+    }
+  },
+  
+  methods: {
+
+    formatWebsite(url) {
+      let startUrl = url.slice(0, 3)
+      if (startUrl.toLowerCase() === 'www') {
+        return 'https://' + url
+      } else {
+        return url
+      }
+    },
+
+    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
+          },
+          [[]]
+        )
+        return chunked
+      }
+      return [[]]
+    },
+    
+    reset() {
+      this.collapseOrgs('No')
+      this.hideReset = true
+      this.searchRem = ''
+      this.searchClass = ''
+      this.searchSub = ''
+      this.searchServices = ''
+    },
+
+    pageChanged(ev) {
+      this.page = ev - 1
+
+      if (this.searchRem.length || this.searchSub.length || this.searchClass.length || this.searchServices.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')
+      // 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())
+
+        if (focusLink === 'Yes') {
+          linksArr[0].focus()
+        }
+      }
+
+    },
+
+    toTitleCase(strVal) {
+
+      let retVal = strVal.trim()
+
+      const firstChar = retVal.charAt(0)
+      const firstCharU = firstChar.toUpperCase()
+      const remChar = retVal.slice(1)
+
+      retVal = firstCharU + remChar
+
+      return retVal
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../HSCP/styles.scss'
+
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="paragraph--directory__records--hscp">
+  <div class="paragraph--directory__records--dir">
     <!-- Main details -->
     <container>
       <row class="records">
@@ -33,7 +33,7 @@
           </a>
         </column>
       </row>
-      <div class="hscp-caret" >
+      <div class="dir-caret" >
         <a v-if="visible" href="javascript:void(0)" @click="this.visible = false">
           <img
             :src="CaretUp"
@@ -68,13 +68,13 @@
         <column sm="2" class="label" v-if="item.contact1 !== ''">
           Contact
         </column>
-        <column sm="4" class="hscp-additional-records" v-if="item.contact1 !== ''">
+        <column sm="4" class="dir-additional-records" v-if="item.contact1 !== ''">
           {{item.contact1}}
         </column>
         <column sm="2" class="label" v-if="item.contact2 !== ''">
           Contact
         </column>
-        <column sm="4" class="hscp-additional-records" v-if="item.contact2 !== ''">
+        <column sm="4" class="dir-additional-records" v-if="item.contact2 !== ''">
           {{item.contact2}}
         </column>
       </row>
@@ -82,13 +82,13 @@
         <column sm="2" class="label" v-if="item.phone1 !== ''">
           Phone
         </column>
-        <column sm="4" class="hscp-additional-records" v-if="item.phone1 !== ''">
+        <column sm="4" class="dir-additional-records" v-if="item.phone1 !== ''">
           {{item.phone1}}
         </column>
         <column sm="2" class="label" v-if="item.phone2 !== ''">
           Phone
         </column>
-        <column sm="4" class="hscp-additional-records" v-if="item.phone2 !== ''">
+        <column sm="4" class="dir-additional-records" v-if="item.phone2 !== ''">
           {{item.phone2}}
         </column>
       </row>
@@ -96,24 +96,24 @@
         <column sm="2" class="label" v-if="item.email1 !== ''">
           Email
         </column>
-        <column sm="4" class="hscp-additional-records" v-if="item.email1 !== ''">
+        <column sm="4" class="dir-additional-records" v-if="item.email1 !== ''">
           {{item.email1}}
         </column>
         <column sm="2" class="label" v-if="item.email2 !== ''">
           Email
         </column>
-        <column sm="4" class="hscp-additional-records" v-if="item.email1 !== ''">
+        <column sm="4" class="dir-additional-records" v-if="item.email1 !== ''">
           {{item.email2}}
         </column>
       </row>
       </div>
      <div v-if="item.trainingVenues.length">
-      <row class="row-hscp-additional">
+      <row class="row-dir-additional">
         <column>
           <h4>Training Venue Locations</h4>
         </column>
       </row>
-      <row class="hscp-additional-records">
+      <row class="dir-additional-records">
         <column  >
           <ul>
             <li v-for="(venue) in item.trainingVenues.split(',')" :key="venue.id">
@@ -124,12 +124,12 @@
       </row>
      </div>
       
-      <row class="row-hscp-additional">
+      <row class="row-dir-additional">
         <column>
           <h4>Training Courses</h4>
         </column>
       </row>
-      <row class="hscp-additional-records">
+      <row class="dir-additional-records">
         <column>
           <ul>
             <li v-for="(course) in item.courses.split(',')" :key="course.id">
@@ -201,132 +201,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles.scss';
 
-.row-hscp-additional {
-  margin-top: 20px;
-}
-
-.hscp-additional-records {
-  font-size: 16px;
-}
-
-.hscp-caret {
-  justify-content: end;
-  align-content: end;
-  max-width: 20px;
-  padding-right: 0px;
-  float:right;
-}
-.paragraph--directory__records--hscp {
-
-  padding-bottom: 30px !important;
-  
-  a {
-        color: $black;
-        text-decoration: none;
-      }
-      a:hover {   
-          text-decoration: underline;
-        }
-      a:focus {
-          text-decoration: underline;
-        }
+@import './styles.scss'
 
-  .name {
-        font-size: 1rem;
-        color: $black;
-        font-weight: 700;
-  }
-  .address {
-    font-size: 15px;
-    a {
-      color: inherit;
-      text-decoration: none;
-    }
-    a:hover {   
-          text-decoration: underline;
-        }
-      a:focus {
-          text-decoration: underline;
-        }
-  }
-  .coldata {
-    a {
-      color: inherit;
-    }
-  }
-  .label {
-      font-size: 16px;
-      font-weight: bold;
-  }
-  .longstring {
-    word-break: break-all;
-  }
-  .search {
-    color: $black;
-    border: 1px solid $gray;
-    border-radius: 8px;
-    padding: 10px 12px;
-    height: 42px;
-    background-repeat: no-repeat;
-    background-position: 96% 12px;
-    margin-bottom: 16px;
-    transition: none;
-  }
-}
-
-.paragraph--directory.hscp-filters {
-  .search {
-    color: $black;
-    border: 1px solid $gray;
-    border-radius: 8px;
-    padding: 10px 12px;
-    height: 42px;
-    background-repeat: no-repeat;
-    background-position: 96% 12px;
-    margin-bottom: 16px;
-    transition: none;
-  }
-  select {
-    -moz-appearance: none; /* Firefox */
-    -webkit-appearance: none; /* Safari and Chrome */
-    appearance: none;
-    height: 42px;
-    border-radius: 8px;
-    padding: 10px 12px;
-    width: 100%;
-    border: 1px solid $gray;
-    background-image: url('@worksafevictoria/wcl7.5/src/assets/icons/caret-down.svg');
-    background-position: 95% 50%;
-    background-repeat: no-repeat;
-    text-transform: capitalise;
-  }
-  .grid-column {
-    display: inline-block;
-    width: 25%;
-
-    @media (max-width: 767px) {
-      width: 50%;
-    }
-
-    @media (max-width: 539px) {
-      display: block;
-      width: 100%;
-      float: none;
-      margin-bottom: 16px;
-    }
-  }
-  .right {
-    float: right;
-    position: relative;
-  }
-
-  .records {
-    padding: 0px;
-    margin: 0;
-  }
-
-}
 </style>
 

package/src/components/Paragraphs/Directory/HSCP/Records/SingleRecord/styles.scss

@@ -0,0 +1,127 @@
+@import '../../../styles.scss';
+
+.row-dir-additional {
+  margin-top: 20px;
+}
+
+.dir-additional-records {
+  font-size: 16px;
+}
+
+.dir-caret {
+  justify-content: end;
+  align-content: end;
+  max-width: 20px;
+  padding-right: 0px;
+  float:right;
+}
+.paragraph--directory__records--dir {
+
+  padding-bottom: 30px !important;
+  
+  a {
+        color: $black;
+        text-decoration: none;
+      }
+      a:hover {   
+          text-decoration: underline;
+        }
+      a:focus {
+          text-decoration: underline;
+        }
+
+  .name {
+        font-size: 1rem;
+        color: $black;
+        font-weight: 700;
+  }
+  .address {
+    font-size: 15px;
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+    a:hover {   
+          text-decoration: underline;
+        }
+      a:focus {
+          text-decoration: underline;
+        }
+  }
+  .coldata {
+    a {
+      color: inherit;
+    }
+  }
+  .label {
+      font-size: 16px;
+      font-weight: bold;
+  }
+  .longstring {
+    word-break: break-all;
+  }
+  .search {
+    color: $black;
+    border: 1px solid $gray;
+    border-radius: 8px;
+    padding: 10px 12px;
+    height: 42px;
+    background-repeat: no-repeat;
+    background-position: 96% 12px;
+    margin-bottom: 16px;
+    transition: none;
+  }
+}
+
+.paragraph--directory.dir-filters {
+  .search {
+    color: $black;
+    border: 1px solid $gray;
+    border-radius: 8px;
+    padding: 10px 12px;
+    height: 42px;
+    background-repeat: no-repeat;
+    background-position: 96% 12px;
+    margin-bottom: 16px;
+    transition: none;
+  }
+  select {
+    -moz-appearance: none; /* Firefox */
+    -webkit-appearance: none; /* Safari and Chrome */
+    appearance: none;
+    height: 42px;
+    border-radius: 8px;
+    padding: 10px 12px;
+    width: 100%;
+    border: 1px solid $gray;
+    background-image: url('@worksafevictoria/wcl7.5/src/assets/icons/caret-down.svg');
+    background-position: 95% 50%;
+    background-repeat: no-repeat;
+    text-transform: capitalise;
+  }
+  .grid-column {
+    display: inline-block;
+    width: 25%;
+
+    @media (max-width: 767px) {
+      width: 50%;
+    }
+
+    @media (max-width: 539px) {
+      display: block;
+      width: 100%;
+      float: none;
+      margin-bottom: 16px;
+    }
+  }
+  .right {
+    float: right;
+    position: relative;
+  }
+
+  .records {
+    padding: 0px;
+    margin: 0;
+  }
+
+}

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

@@ -1,5 +1,5 @@
 <template>
-  <section-group class="paragraph--directory hscp-filters">
+  <section-group class="paragraph--directory dir-filters">
     <!-- Filters -->
     <row style="column-gap: 16px;">
       <!-- Keyword Filters -->
@@ -42,7 +42,7 @@
       </column>
     </row>
     <!-- HSCP Records -->
-    <div class="hscpRecords" >
+    <div class="dirRecords" >
       <template v-for="(item, index) in resultChunks[page]" >
         <hscp-record v-if="item.type === 'hscp'" :key="index" :item="item"/>
       </template>
@@ -214,7 +214,7 @@ export default {
     formatWebsite(url) {
       let startUrl = url.slice(0, 3)
       if (startUrl.toLowerCase() === 'www') {
-        return 'http://' + url
+        return 'https://' + url
       } else {
         return url
       }
@@ -290,73 +290,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles.scss';
-.paragraph--directory.hscp-filters {
-
-  .selectClass {
-    display:inline-block;
-    height: 42px;
-    border-radius: 8px;
-    padding: 10px 12px;
-    width: 200px;
-    border: 1px solid $gray;
-    margin-right: 16px;
-    margin-bottom: 16px;
-
-  }
-
-  .search {
-    display: inline-block;
-    color: $black;
-    border: 1px solid $gray;
-    border-radius: 8px;
-    padding: 10px 12px;
-    height: 42px;
-    background-image: url('./../../../../../assets/icons/search.svg');
-    background-repeat: no-repeat !important;
-    background-position: 96% 12px;
-    margin-bottom: 16px;
-    margin-right: 16px;
-    transition: none;
-    width: 200px;
-  }
- 
-  .grid-column {
-    display: inline-block;
-    width: 25%;
-
-    @media (max-width: 767px) {
-    width: 50%;
-  }
-
-  @media (max-width: 539px) {
-    display: block;
-    width: 100%;
-    float: none;
-    margin-bottom: 16px;
-  }
-   
-  }
-  .right {
-    float: right;
-    position: relative;
-  }
-
-  .records {
-    padding: 0;
-    margin: 0;
-  }
-}
-
-.filterButton__button--reset {
-  display: inline-block !important;
-  float: right;
-}
-
-.hscpRecords {
-  padding-top: 16px;
-}
 
+@import '../styles.scss'
 
 
 </style>

package/src/components/Paragraphs/Directory/HSCP/styles.scss

@@ -0,0 +1,68 @@
+
+@import '../styles.scss';
+
+.paragraph--directory.dir-filters {
+
+  .selectClass {
+    display:inline-block;
+    height: 42px;
+    border-radius: 8px;
+    padding: 10px 12px;
+    width: 200px;
+    border: 1px solid $gray;
+    margin-right: 16px;
+    margin-bottom: 16px;
+    box-sizing: border-box;
+  }
+
+  .search {
+    display: inline-block;
+    color: $black;
+    border: 1px solid $gray;
+    border-radius: 8px;
+    padding: 10px 12px;
+    height: 42px;
+    background-image: url('./../../../../../assets/icons/search.svg');
+    background-repeat: no-repeat !important;
+    background-position: 96% 12px;
+    margin-bottom: 16px;
+    margin-right: 16px;
+    transition: none;
+    width: 200px;
+  }
+ 
+  .grid-column {
+    display: inline-block;
+    width: 25%;
+
+    @media (max-width: 767px) {
+    width: 50%;
+  }
+
+  @media (max-width: 539px) {
+    display: block;
+    width: 100%;
+    float: none;
+    margin-bottom: 16px;
+  }
+   
+  }
+  .right {
+    float: right;
+    position: relative;
+  }
+
+  .records {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.filterButton__button--reset {
+  display: inline-block !important;
+  float: right;
+}
+
+.dirRecords {
+  padding-top: 16px;
+}

package/src/components/Paragraphs/Directory/styles.scss

@@ -30,6 +30,8 @@
 
   &--isp,
   &--hscp,
+  &--ar,
+  &--dir,
    &--cj {
     @include defaultStyle();
     @include itemStyle();

package/src/index.js

@@ -31,6 +31,7 @@ import ListGroup from './components/Paragraphs/ListGroup/index.vue'
 import ScrollSpy from './components/Paragraphs/ScrollSpy/index.vue'
 import Directory from './components/Paragraphs/Directory/index.vue'
 import HscpDirectory from './components/Paragraphs/Directory/HSCP/Records/index.vue'
+import ArDirectory from './components/Paragraphs/Directory/Asbestos/Records/index.vue'
 import SelectableCards from './components/Paragraphs/SelectableCards/index.vue'
 import VideoMedia from './components/Paragraphs/VideoPlayer/index.vue'
 import VideoGrid from './components/Paragraphs/VideoGrid/index.vue'
@@ -99,6 +100,7 @@ export {
   ScrollSpy,
   Directory,
   HscpDirectory,
+  ArDirectory,
   SelectableCards,
   Statistics,
   ProofPoints,

package/src/mock/asbestos-removalists.js

@@ -0,0 +1,226 @@
+export const arData = [
+    {
+        ResourceName: 'A.D.S. Asbestos Removal Pty Ltd',
+        CompanyAddress: '62 Webber Parade',
+        AddressLine2: 'KEILOR EAST VIC 3033',
+        Phone: '0404073745',
+        CompanyMobile: '0404 073 745',
+        CompanyEmailDisp: 'ads.asbestos@gmail.com',
+        CompanyWebURLDisp: 'www.adsasbestosremoval.com.au',
+        ContactFirstName: 'Ivan',
+        ContactLastName: 'Silva',
+        ContactPhoneDisp: '0404073745',
+        ContactEmail: 'ads.asbestos@gmail.com',
+        ContactMobileDisp: '1300 064 277',
+        ServiceAll: 'Class A - Restricted - Asbestos Removalists',
+        ServicesAll: 'removal of any asbestos containing material that was previously non-friable but has become friable as a result of a fire and does not require an enclosure with a negative air unit(s) to perform the work.',
+    },
+    {
+        ResourceName: 'AAA ASBESTOS SOLUTIONS PTY LTD',
+        CompanyAddress: '9 Ewens Court',
+        AddressLine2: 'MOUNT GAMBIER VIC 5290',
+        Phone: '0418 854 443',
+        CompanyMobile: '0418 854 443',
+        CompanyEmailDisp: 'nieto4@bigpond.net.au',
+        CompanyWebURLDisp: '',
+        ContactFirstName: 'ERIC',
+        ContactLastName: 'NIETO',
+        ContactPhoneDisp: '0418 854 443',
+        ContactEmail: 'nieto4@bigpond.net.au',
+        ContactMobileDisp: '0418 854 443',
+        ServiceAll: 'Class B Asbestos Removalists',
+        ServicesAll: 'All types of non-friable asbestos containing material (eg. cement sheeting or vinyl tiles)',
+    },
+    {
+        ResourceName: 'Aaron John Field',
+        CompanyAddress: '44 Townsent Street',
+        AddressLine2: 'Howlong NSW 2643',
+        Phone: '',
+        CompanyMobile: '0408474707',
+        CompanyEmailDisp: 'azz_317@homail.com',
+        CompanyWebURLDisp: '',
+        ContactFirstName: 'Aaron',
+        ContactLastName: 'Field',
+        ContactPhoneDisp: '',
+        ContactEmail: 'azz_317@homail.com',
+        ContactMobileDisp: '0408474707',
+        ServiceAll: 'Class B Asbestos Removalists',
+        ServicesAll: 'All types of non-friable asbestos containing material (eg. cement sheeting or vinyl tiles),Telecommunication Asbestos cement pits and pipes',
+     },
+    {
+        ResourceName: 'Al Baarini Ahmad',
+        CompanyAddress: '13 Rudkin Court',
+        AddressLine2: 'Hoppers Crossing VIC 3029',
+        Phone: '0421 280 732',
+        CompanyMobile: '0401 016 565',
+        CompanyEmailDisp: 'CITYWIDEDEMOLITION@HOTMAIL.COM',
+        CompanyWebURLDisp: 'www.citywidedemolition.com.au',
+        ContactFirstName: 'Eman',
+        ContactLastName: 'Al Baarini',
+        ContactPhoneDisp: '0421 280 732',
+        ContactEmail: 'CITYWIDEDEMOLITION@HOTMAIL.COM',
+        ContactMobileDisp: '0421 280 732',
+        ServiceAll: 'Class B Asbestos Removalists',
+        ServicesAll: 'All types of non-friable asbestos containing material (eg. cement sheeting or vinyl tiles)',
+     },
+    {
+        ResourceName: 'Ashcorp Holdings Pty Ltd',
+        CompanyAddress: '17 Rohs Road',
+        AddressLine2: 'EAST BENDIGO VIC 3550',
+        Phone: '(03) 5444 3261',
+        CompanyMobile: '0409 012 780',
+        CompanyEmailDisp: 'admin@ashworthdemolition.com.au',
+        CompanyWebURLDisp: '',
+        ContactFirstName: 'Dean',
+        ContactLastName: 'Ashworth',
+        ContactPhoneDisp: '(03) 5444 3261',
+        ContactEmail: 'info@ashworthdemolition.com.au',
+        ContactMobileDisp: '0409012780',
+        ServiceAll: 'Class A - Restricted - Asbestos Removalists',
+        ServicesAll: 'removal of all types of non-friable asbestos containing material,removal of asbestos containing gaskets and ropes,removal of friable asbestos containing material from soil that does not require an enclosure with negative air unit(s),removal of any asbestos containing material that was previously non-friable but has become friable as a result of a fire,The Licence is restricted to removal of asbestos containing material that does not require an enclosure with a negative air unit(s).'
+    },
+    {
+        ResourceName: 'Ventia Utility Services Pty Limited',
+        CompanyAddress: 'Ventia - Cardinia Building, 25 Lucknow Street',
+        AddressLine2: 'MITCHAM VIC 3132',
+        Phone: '0438531164',
+        CompanyMobile: '',
+        CompanyEmailDisp: 'daniel.dehaan@ventia.com',
+        CompanyWebURLDisp: 'www.ventia.com.au',
+        ContactFirstName: 'Daniel',
+        ContactLastName: 'DeHaan',
+        ContactPhoneDisp: '0438531164',
+        ContactEmail: 'daniel.dehaan@ventia.com',
+        ContactMobileDisp: '0438531164',
+        ServiceAll: 'Class B - Restricted - Asbestos Removalists',
+        ServicesAll: 'Bituminous coal tar coatings,Non-friable Asbestos Cement Water Pipes and Associated Fittings ONLY,Non-friable Asbetos Containing Bituminous Coating on Mild Steel Pipes',
+     },
+    {
+        ResourceName: 'ONE A.D.S Asbestos Removal Pty Ltd',
+        CompanyAddress: '62 Webber Parade',
+        AddressLine2: 'KEILOR EAST VIC 3033',
+        Phone: '0404073745',
+        CompanyMobile: '0404 073 745',
+        CompanyEmailDisp: 'ads.asbestos@gmail.com',
+        CompanyWebURLDisp: 'http://www.adsasbestosremoval.com.au',
+        ContactFirstName: 'Ivan',
+        ContactLastName: 'Silva',
+        ContactPhoneDisp: '0404073745',
+        ContactEmail: 'ads.asbestos@gmail.com',
+        ContactMobileDisp: '1300 064 277',
+        ServiceAll: 'Class A - Restricted - Asbestos Removalists',
+        ServicesAll: 'removal of any asbestos containing material that was previously non-friable but has become friable as a result of a fire and does not require an enclosure with a negative air unit(s) to perform the work.',
+     },
+    {
+        ResourceName: 'TWO A.D.S Asbestos Removal Pty Ltd',
+        CompanyAddress: '62 Webber Parade',
+        AddressLine2: 'KEILOR EAST VIC 3033',
+        Phone: '0404073745',
+        CompanyMobile: '0404 073 745',
+        CompanyEmailDisp: 'ads.asbestos@gmail.com',
+        CompanyWebURLDisp: 'http://www.adsasbestosremoval.com.au',
+        ContactFirstName: 'Ivan',
+        ContactLastName: 'Silva',
+        ContactPhoneDisp: '0404073745',
+        ContactEmail: 'ads.asbestos@gmail.com',
+        ContactMobileDisp: '1300 064 277',
+        ServiceAll: 'Class A - Restricted - Asbestos Removalists',
+        ServicesAll: 'removal of any asbestos containing material that was previously non-friable but has become friable as a result of a fire and does not require an enclosure with a negative air unit(s) to perform the work.',
+     },
+    {
+        ResourceName: 'Three A.D.S Asbestos Removal Pty Ltd',
+        CompanyAddress: '62 Webber Parade',
+        AddressLine2: 'KEILOR EAST VIC 3033',
+        Phone: '0404073745',
+        CompanyMobile: '0404 073 745',
+        CompanyEmailDisp: 'ads.asbestos@gmail.com',
+        CompanyWebURLDisp: 'http://www.adsasbestosremoval.com.au',
+        ContactFirstName: 'Ivan',
+        ContactLastName: 'Silva',
+        ContactPhoneDisp: '0404073745',
+        ContactEmail: 'ads.asbestos@gmail.com',
+        ContactMobileDisp: '1300 064 277',
+        ServiceAll: 'Class A - Restricted - Asbestos Removalists',
+        ServicesAll: 'removal of any asbestos containing material that was previously non-friable but has become friable as a result of a fire and does not require an enclosure with a negative air unit(s) to perform the work.',
+     },
+    {
+        ResourceName: 'FOUR A.D.S Asbestos Removal Pty Ltd',
+        CompanyAddress: '62 Webber Parade',
+        AddressLine2: 'KEILOR EAST VIC 3033',
+        Phone: '0404073745',
+        CompanyMobile: '0404 073 745',
+        CompanyEmailDisp: 'ads.asbestos@gmail.com',
+        CompanyWebURLDisp: 'http://www.adsasbestosremoval.com.au',
+        ContactFirstName: 'Ivan',
+        ContactLastName: 'Silva',
+        ContactPhoneDisp: '0404073745',
+        ContactEmail: 'ads.asbestos@gmail.com',
+        ContactMobileDisp: '1300 064 277',
+        ServiceAll: 'Class A - Restricted - Asbestos Removalists',
+        ServicesAll: 'removal of any asbestos containing material that was previously non-friable but has become friable as a result of a fire and does not require an enclosure with a negative air unit(s) to perform the work.',
+     },
+    {
+        ResourceName: 'Five A.D.S Asbestos Removal Pty Ltd',
+        CompanyAddress: '62 Webber Parade',
+        AddressLine2: 'KEILOR EAST VIC 3033',
+        Phone: '0404073745',
+        CompanyMobile: '0404 073 745',
+        CompanyEmailDisp: 'ads.asbestos@gmail.com',
+        CompanyWebURLDisp: 'http://www.adsasbestosremoval.com.au',
+        ContactFirstName: 'Ivan',
+        ContactLastName: 'Silva',
+        ContactPhoneDisp: '0404073745',
+        ContactEmail: 'ads.asbestos@gmail.com',
+        ContactMobileDisp: '1300 064 277',
+        ServiceAll: 'Class A - Restricted - Asbestos Removalists',
+        ServicesAll: 'removal of any asbestos containing material that was previously non-friable but has become friable as a result of a fire and does not require an enclosure with a negative air unit(s) to perform the work.',
+     },
+    {
+        ResourceName: 'SIX A.D.S Asbestos Removal Pty Ltd',
+        CompanyAddress: '62 Webber Parade',
+        AddressLine2: 'KEILOR EAST VIC 3033',
+        Phone: '0404073745',
+        CompanyMobile: '0404 073 745',
+        CompanyEmailDisp: 'ads.asbestos@gmail.com',
+        CompanyWebURLDisp: 'http://www.adsasbestosremoval.com.au',
+        ContactFirstName: 'Ivan',
+        ContactLastName: 'Silva',
+        ContactPhoneDisp: '0404073745',
+        ContactEmail: 'ads.asbestos@gmail.com',
+        ContactMobileDisp: '1300 064 277',
+        ServiceAll: 'Class A - Restricted - Asbestos Removalists',
+        ServicesAll: 'removal of any asbestos containing material that was previously non-friable but has become friable as a result of a fire and does not require an enclosure with a negative air unit(s) to perform the work.',
+     },
+    {
+        ResourceName: 'SSM Asbestos Removal Pty Ltd',
+        CompanyAddress: '90 Marriage Lane',
+        AddressLine2: 'HILLSIDE VIC 3875',
+        Phone: '0405 083 197',
+        CompanyMobile: '0405 083 197',
+        CompanyEmailDisp: 'steve@ssmasbestos.com.au',
+        CompanyWebURLDisp: 'www.ssm-asbestosremoval.com',
+        ContactFirstName: 'Steven',
+        ContactLastName: 'McCarthy',
+        ContactPhoneDisp: '0405 083 197',
+        ContactEmail: 'steve@ssmasbestos.com.au',
+        ContactMobileDisp: '0405 083 197',
+        ServiceAll: 'Class A Asbestos Removalists',
+        ServicesAll: 'All types of Asbestos containing material (friable & non-friable)',
+     },
+    {
+        ResourceName: 'Golden Plains Asbestos PTY LTD',
+        CompanyAddress: '165 Grevillea Drive',
+        AddressLine2: 'ENFIELD VIC 3352',
+        Phone: '0450582103',
+        CompanyMobile: '0450582103',
+        CompanyEmailDisp: 'gpasbestos@outlook.com',
+        CompanyWebURLDisp: '',
+        ContactFirstName: 'Carlos',
+        ContactLastName: 'Rios',
+        ContactPhoneDisp: '0450582103',
+        ContactEmail: 'gpasbestos@outlook.com',
+        ContactMobileDisp: '0450582103',
+        ServiceAll: 'Class A Asbestos Removalists',
+        ServicesAll: 'All types of Asbestos containing material (friable & non-friable)',
+     }
+]