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

package/package.json

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

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>
@@ -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();