@worksafevictoria/wcl7.5 1.9.0-beta.1 → 1.9.0-beta.11

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

@@ -3,163 +3,154 @@
     <!-- 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">
+        <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" >
+        <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>
+          <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" >
+        <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>
+          <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" >
+        <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>
+          <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" >
+        <column md="2" sm="12" class="coldata">
           <div class="label">Phone</div>
-          <a v-if="item.tollfreePhone || item.workPhone" :href="`tel:${item.tollfreephone || item.workphone}`"><span class="sr-only visually-hidden">Phone number</span>
+          <a
+            v-if="item.tollfreePhone || item.workPhone"
+            :href="`tel:${item.tollfreephone || item.workphone}`"
+            ><span class="sr-only visually-hidden">Phone number</span>
             {{ item.tollfreePhone || item.workPhone }}
           </a>
         </column>
       </row>
-      <div class="dir-caret" >
+      <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">
+          <img :src="CaretUp" height="12" width="17" alt="collapse icon" />
         </a>
         <a v-if="!visible" href="javascript:void(0)" @click="this.visible = true">
-          <img
-            :src="CaretDown"
-            height="12"
-            width="17"
-            alt="Expand Detail">
+          <img :src="CaretDown" height="12" width="17" alt="expand icon" />
         </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 !== '' || item.contact2 !== ''">
-        <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>
-        <column sm="2" class="label" v-if="item.contact2 !== ''">
-          Contact
-        </column>
-        <column sm="4" class="dir-additional-records" v-if="item.contact2 !== ''">
-          {{item.contact2}}
-        </column>
-      </row>
-      <row v-if="item.phone1 !== '' || item.phone2 !== ''">
-        <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>
-        <column sm="2" class="label" v-if="item.phone2 !== ''">
-          Phone
-        </column>
-        <column sm="4" class="dir-additional-records" v-if="item.phone2 !== ''">
-          {{item.phone2}}
-        </column>
-      </row>
-      <row v-if="item.email1 !== '' || item.email2 !== ''">
-        <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>
-        <column sm="2" class="label" v-if="item.email2 !== ''">
-          Email
-        </column>
-        <column sm="4" class="dir-additional-records" v-if="item.email1 !== ''">
-          {{item.email2}}
-        </column>
-      </row>
+        <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 !== '' || item.contact2 !== ''">
+            <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>
+            <column sm="2" class="label" v-if="item.contact2 !== ''"> Contact </column>
+            <column sm="4" class="dir-additional-records" v-if="item.contact2 !== ''">
+              {{ item.contact2 }}
+            </column>
+          </row>
+          <row v-if="item.phone1 !== '' || item.phone2 !== ''">
+            <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>
+            <column sm="2" class="label" v-if="item.phone2 !== ''"> Phone </column>
+            <column sm="4" class="dir-additional-records" v-if="item.phone2 !== ''">
+              {{ item.phone2 }}
+            </column>
+          </row>
+          <row v-if="item.email1 !== '' || item.email2 !== ''">
+            <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>
+            <column sm="2" class="label" v-if="item.email2 !== ''"> Email </column>
+            <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-dir-additional">
+            <column>
+              <h4>Training Venue Locations</h4>
+            </column>
+          </row>
+          <row class="dir-additional-records">
+            <column>
+              <ul>
+                <li v-for="venue in item.trainingVenues.split(',')" :key="venue.id">
+                  {{ venue }}
+                </li>
+              </ul>
+            </column>
+          </row>
+        </div>
+
+        <row class="row-dir-additional">
+          <column>
+            <h4>Training Courses</h4>
+          </column>
+        </row>
+        <row class="dir-additional-records">
+          <column>
+            <ul>
+              <li v-for="course in item.courses.split(',')" :key="course.id">
+                {{ course }}
+              </li>
+            </ul>
+          </column>
+        </row>
       </div>
-     <div v-if="item.trainingVenues.length">
-      <row class="row-dir-additional">
-        <column>
-          <h4>Training Venue Locations</h4>
-        </column>
-      </row>
-      <row class="dir-additional-records">
-        <column  >
-          <ul>
-            <li v-for="(venue) in item.trainingVenues.split(',')" :key="venue.id">
-              {{venue}}
-            </li>
-          </ul> 
-        </column>
-      </row>
-     </div>
-      
-      <row class="row-dir-additional">
-        <column>
-          <h4>Training Courses</h4>
-        </column>
-      </row>
-      <row class="dir-additional-records">
-        <column>
-          <ul>
-            <li v-for="(course) in item.courses.split(',')" :key="course.id">
-              {{course}}
-            </li>
-          </ul> 
-        </column>
-      </row>
-    </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'
+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
+      required: true,
     },
   },
   data() {
@@ -167,42 +158,45 @@ export default {
       visible: false,
       CaretUp,
       CaretDown,
-    }
+    };
   },
   computed: {
     gMapLink() {
-      return `https://google.com/maps?q=${this.item.title}%20${this.item.fullAddress}`
+      return `https://google.com/maps?q=${this.item.title}%20${this.item.fullAddress}`;
     },
     validContacts() {
-      if (this.item.contact1 === '' && this.item.contact2 === '' && this.item.phone1 === '' && this.item.phone2 === '' && this.item.email1 === '' && this.item.email2 === '') {
-        return false
+      if (
+        this.item.contact1 === "" &&
+        this.item.contact2 === "" &&
+        this.item.phone1 === "" &&
+        this.item.phone2 === "" &&
+        this.item.email1 === "" &&
+        this.item.email2 === ""
+      ) {
+        return false;
       } else {
-        return true
+        return true;
       }
-    }
-
+    },
   },
   methods: {
     handleClick(title) {
-      this.visible = !this.visible
+      this.visible = !this.visible;
       if (this.$gtm) {
         if (this.visible) {
-          this.$gtm.push({ event: 'custom.search.prs.open', title })
+          this.$gtm.push({ event: "custom.search.prs.open", title });
         } else {
           this.$gtm.push({
-            event: 'custom.search.prs.close',
-            title
-          })
+            event: "custom.search.prs.close",
+            title,
+          });
         }
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-
-@import './styles.scss'
-
+@import "./styles.scss";
 </style>
-