@worksafevictoria/wcl7.5 1.6.0 → 1.7.0

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

@@ -1,334 +0,0 @@
-<template>
-  <div class="paragraph--directory__records--hscp">
-    <container>
-      <!-- Main details -->
-      <row>
-        <column class="title">
-          <a href="javascript:void(0)" @click="this.visible = !this.visible">
-            {{ item.title }}
-          </a>
-        </column>
-        <column class="address">
-          <a target="_blank" :href="gMapLink">
-            {{ item.fullAddress }}
-          </a>
-        </column>
-        <column class="contact">
-          <div class="label">Email</div>
-          <a target="_blank" :href="`mailto:${item.email}`"><span class="sr-only visually-hidden">Email address</span>
-            {{ item.email }}
-          </a>
-        </column>
-        <column class="contact">
-          <div class="label">Website</div>
-          <a target="_blank" :href="`${item.website}`"><span class="sr-only visually-hidden">Website address</span>
-            {{ item.website }}
-          </a>
-        </column>
-        <column class="contact">
-          <div class="label">Phone</div>
-          <a :href="`tel:${item.tollfreephone || item.workphone}`"><span class="sr-only visually-hidden">Phone number</span>
-            {{ item.tollfreePhone || item.workPhone }}
-          </a>
-        </column>
-        <column class="hscp-caret" sm="1">
-          <a v-if="visible" href="javascript:void(0)" @click="this.visible = false">
-            <img
-              style="float: right;"
-              :src="CaretUp"
-              height="12"
-              width="17"
-              alt="Expand Detail">
-          </a>
-          <a v-if="!visible" href="javascript:void(0)" @click="this.visible = true">
-            <img
-              style="float: right;"
-              :src="CaretDown"
-              height="12"
-              width="17"
-              alt="Expand Detail">
-          </a>
-        </column>
-      </row>
-      <!-- Additional Content -->
-      <template v-if="this.visible">
-        <row class="row-hscp-additional">
-          <column>
-            <h4>Contact Information</h4>
-          </column>
-        </row>
-        <row>
-          <column sm="3" class="label">
-            Contact
-          </column>
-          <column sm="3">
-            {{item.contact1}}
-          </column>
-          <column sm="3" class="label">
-            Contact
-          </column>
-          <column sm="3">
-            {{item.contact2}}
-          </column>
-        </row>
-        <row>
-          <column sm="3" class="label">
-            Phone
-          </column>
-          <column sm="3">
-            {{item.phone1}}
-          </column>
-          <column sm="3" class="label">
-            Phone
-          </column>
-          <column sm="3">
-            {{item.phone2}}
-          </column>
-        </row>
-        <row>
-          <column sm="3" class="label">
-            Email
-          </column>
-          <column sm="3">
-            {{item.email1}}
-          </column>
-          <column sm="3" class="label">
-            Email
-          </column>
-          <column sm="3">
-            {{item.email2}}
-          </column>
-        </row>
-        <row class="row-hscp-additional">
-          <column>
-            <h4>Training Venue Locations</h4>
-          </column>
-        </row>
-        <row>
-          <column>
-            <ul>
-              <li v-for="(venue) in item.trainingVenues" :key="venue.id">
-                {{venue}}
-              </li>
-            </ul> 
-          </column>
-        </row>
-        <row class="row-hscp-additional">
-          <column>
-            <h4>Training Courses</h4>
-          </column>
-        </row>
-        <row>
-          <column>
-            <ul>
-              <li v-for="(course) in item.courses" :key="course.id">
-                {{course}}
-              </li>
-            </ul> 
-          </column>
-        </row>
-      </template>
-    </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}`
-    },
-  },
-  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 '../styles.scss';
-
-.row-hscp-additional {
-  margin-top: 20px;
-}
-
-.hscp-caret {
-  justify-content: end;
-  align-content: end;
-  border-radius: 0px;
-}
-.paragraph--directory__records--hscp {
-  
-  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;
-        }
-  }
-  .phone {
-    a {
-      color: inherit;
-    }
-  }
-  .label {
-      font-size: 15px;
-      font-weight: bold;
-  }
-}
-.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;
-  }
-
-  ul.records {
-    padding: 0;
-    margin: 0;
-
-    li {
-      text-align: left;
-      display: block;
-      width: 100%;
-      background: $white;
-      color: $black;
-      margin-bottom: 32px;
-      border: 1px solid $gray;
-      border-radius: 12px;
-      font-size: 14px;
-      padding: 16px;
-
-      .name {
-        font-size: 1rem;
-        color: $black;
-        font-weight: 700;
-      }
-      .address {
-        font-size: 15px;
-        a {
-          color: inherit;
-        }
-      }
-      .phone {
-        a {
-          color: inherit;
-        }
-        .labl {
-          font-size: 15px;
-          font-weight: bold;
-        }
-      }
-
-      @media (max-width: 767px) {
-        .name,
-        .address,
-        .phone {
-          margin-bottom: 5px;
-          width: 100%;
-        }
-      }
-      .pagination-container {
-        text-align: center;
-      }
-    }
-  }
-}
-</style>
-