@worksafevictoria/wcl7.5 1.13.0-beta.5 → 1.13.0-beta.7

package/package.json

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

package/src/components/Global/AppHeaderNew/index.vue

@@ -5,7 +5,7 @@
       :class="'app-header' + (screen === 'mobile' ? ' ' + 'isMobile' : '')"
     >
       <!-- Top menu -->
-      <div class="logo">
+      <div :class="screen === 'mobile' ? 'logoMobile' : 'logo'">
         <!-- Mobile Menu -->
         <div v-if="screen === 'mobile'" class="app-header__mobile-menu-container">
           <a class="dark" role="button" @click.prevent="showMobileMenu">
@@ -15,7 +15,7 @@
         <!-- Logo -->
         <nuxt-link class="dark" to="/">
           <img
-            :class="screen === 'mobile' ? 'LogoImgMobile' : 'LogoImg'"
+            :class="screen === 'mobile' ? 'logoImgMobile' : 'logoImg'"
             :alt="
               isWorkWell
                 ? 'Work Well Victoria - Logo'
@@ -26,29 +26,30 @@
         </nuxt-link>
         <span :class="screen === 'mobile' ? 'logo__nav_mobile' : 'logo__nav'">
           <!-- Roles added for accessibility -->
-          <table role="presentation" >
+          <table role="presentation" style="margin-right: 0;">
             <tbody role="presentation">
               <tr role="presentation">
-              <td :class="screen === 'mobile' ? 'td_mobile' : ''">
+              <td :class="screen === 'mobile' ? 'td_mobile mobile-link' : ''">
                 <!-- Language link -->
+            
                 <nuxt-link
-                  :class="screen === 'mobile' ? 'mobile-link' : ''"
                   to="/languages"
                   @click.native="fireAnalytics('Choose your language', '/languages')"
                   title="Language"
                 >
                   <span v-if="screen !== 'mobile'">Choose your language </span>
-                  <img alt="Language Icon" width="15px" height="15px" :src=LanguageIcon />
+                  <img :class="screen === 'mobile' ? 'imgMobile' : ''" alt="Language Icon" width="15px" height="15px" :src=LanguageIcon />
                 </nuxt-link>
+                
               </td>
-              <td :class="screen === 'mobile' ? 'td_mobile' : ''">
+              <td :class="screen === 'mobile' ? 'td_mobile mobile-link' : ''">
                 <!-- Contrast link -->
-                <a href="javascript:void(0)" :class="screen === 'mobile' ? 'mobile-link' : ''" @click="show = !show" @keyup.esc="show = !show" title="Contrast" ref="selectContrast">
-                  <span v-if="screen !== 'mobile'">Adjust contrast</span> <img alt="Contrast Icon" width="15px" height="15px" :src=ContrastIcon />
+                <a href="javascript:void(0)" @click="show = !show" @keyup.esc="show = !show" title="Contrast" ref="selectContrast">
+                  <span v-if="screen !== 'mobile'">Adjust contrast</span> <img :class="screen === 'mobile' ? 'imgMobile' : ''" alt="Contrast Icon" width="15px" height="15px" :src=ContrastIcon />
                 </a>
                 <div
                   ref="contrastChoices"
-                  class="flex-container_contrast"
+                  :class="screen === 'mobile' ? 'flex-container_contrast_mobile' : 'flex-container_contrast'"
                   v-if="show"
                 >
                   <div class="flex-item_contrast contrast_slide--box-list">
@@ -75,7 +76,7 @@
                   class="cta-button cta-button--text-only cta-button--slim"
                   to="/search"
                   title="Search"
-                  ><span v-if="screen !== 'mobile'">Search  &nbsp;</span> <img alt="Search Icon" width="15px" height="15px" :src=NavSearchIcon />
+                  ><span v-if="screen !== 'mobile'">Search  &nbsp;</span><img alt="Search Icon" style="margin-top: 2px;" width="15px" height="15px" :src=NavSearchIcon />
                 </nuxt-link>
               </td>
               <td :class="screen === 'mobile' ? 'td_mobile-last' : ''">
@@ -415,19 +416,22 @@ export default {
           id: 'contrast1',
           name: 'contrast',
           value: 'default',
-          label: 'Light contrast (default)'
+          label: 'Light contrast (default)',
+          labelmobile: 'Light'
         },
         {
           id: 'contrast2',
           name: 'contrast',
           value: 'high_contrast',
-          label: 'Increased contrast'
+          label: 'Increased contrast',
+          labelmobile: 'Increased'
         },
         {
           id: 'contrast3',
           name: 'contrast',
           value: 'grayscale',
-          label: 'Greyscale'
+          label: 'Greyscale',
+          labelmobile: 'Greyscale'
         }
       ],
       selectedValue: null

package/src/components/Global/AppHeaderNew/mobile.scss

@@ -20,6 +20,8 @@
 
           ul {
             float: none;
+            padding-left: 15px;
+            padding-right: 10px;
 
             li {
              height: 62px;
@@ -71,6 +73,8 @@
         display: table-cell;
         vertical-align: middle;
         text-align: left;
+        margin-left: 0px;
+        margin-right: 10px;
 
         svg {
             filter: invert(100%) sepia(5%) saturate(49%) hue-rotate(165deg)
@@ -177,6 +181,7 @@
                 margin-bottom: 5px;
                 padding: 0;
                 top: 0;
+                margin-left: 10px;
 
                 span {
                   color: $app-header-active;
@@ -267,38 +272,65 @@
   top: 10px !important;
 }
 
-.LogoImgMobile {
+.logoMobile {
+  height: 85px;
+  padding: 15px 0%;
+  display: flex;
+  align-items: center;
+  margin-right: 0px;
+  margin-left: 10px;
+  background-color: white;
+  width: 100%;
+ }
+
+.logoImgMobile {
   height: 40px;
   width: auto;
 }
 
-.logo__nav-mobile {
-  display:inline-block;
-  margin-left: 10px;
-  margin-right: 0px;
-  width: 100%;
+.logo__nav_mobile {
+  display:flex;
+  margin-left: 15px;
+  margin-right: 25px;
+  width: 60% !important;
   overflow-y:auto;
+  justify-content: flex-end;
+
+  table {
+    border-collapse: separate;
+    border-spacing: 5px;
+  }
+}
+
+.imgMobile {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .td_mobile {
-    padding: 0px 5px !important;
     height: 35px;
     width: 35px;
   }
 
 .td_mobile-last {
- padding: 0px 0px 0px 5px !important;
+ padding: 0px !important;
 }
 
 .mobile-link {
-  height: 35px;
-  width: 35px;
+  width: 40px !important;
+  height: 40px !important;
   background-color: #f2f2f2;
   border: 1px solid #f2f2f2;
-  border-radius: 5px;
+  border-radius: 8px;
 }
 
 .app-header__wrap_mobile {
   background: none;
   height: 0px;
-}
+}
+
+.flex-container_contrast_mobile {
+  margin-left: -10px;
+}
+

package/src/components/Global/AppHeaderNew/styles.scss

@@ -19,8 +19,8 @@
     display: table;
     width: 100%;
     border-bottom-style: solid;
-    border-bottom-color: lightgrey;
-    border-bottom-width: 1px;
+    border-bottom-color: white;
+    border-bottom-width: 2px;
 
     > nav {
       width: 100%;
@@ -381,16 +381,19 @@
 
 .logo {
   height: 85px;
-  padding: 15px 15px 15px 0px;
+  padding: 15px 0%;
   width: 100%;
   display: flex;
   align-items: center;
-  margin-right: 0%;
+  margin-right: 50px;
+  margin-left: -10px;
   background-color: white;
+  width: 100vw;
 
   &__nav {
     display:inline-block;
     margin-left: 15px;
+    margin-right: 10px; 
     color: #000;
     width: 100%;
     text-align: right;
@@ -424,9 +427,10 @@
   }
 }
 
-.LogoImg {
+.logoImg {
   height: 55px;
   width: auto;
+  margin-left: 10px;
 }
 
 .semi-circle {
@@ -588,14 +592,13 @@
       padding: 10px 0;
 
       input[type='radio'] {
-        border: 2px solid #bebebe;
+        border: 3px solid #bebebe;
         border-radius: 50%;
-        box-shadow: 0 0 0px 0px #bebebe inset;
-        height: 24px;
+        height: 25px;
         outline: none;
         vertical-align: middle;
         margin-right: 5px;
-        width: 24px;
+        width: 25px;
         appearance: none;
 
         &:before {
@@ -631,5 +634,6 @@
   input[type="radio"] {
     accent-color: black;
     margin-right: 5px;
+    vertical-align: middle;
   }
 }

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

@@ -7,7 +7,7 @@ const arData =
         // workPhone: '0438531164',
         mobilePhone: '0438531164',
         email: 'daniel.dehaan@ventia.com',
-        // website: 'http://www.ventia.com.au',
+        website: 'http://www.ventia.com.au',
         contact1: 'Daniel DeHaan',
         // phone1: '0438531164',
         // email1: 'daniel.dehaan@ventia.com',

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

@@ -14,26 +14,23 @@
             {{ item.title }}
           </a>
         </column>
-        <column md="2" sm="12" class="address">
+        <column md="3" sm="12" class="address">
           <div class="label">Location</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">
+        <column md="3" 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 md="2" sm="12" class="coldata">
+          <div class="label">Contact</div>
+          {{ item.contact1 }}
         </column>
         <column md="2" sm="12" class="coldata">
           <div class="label">Phone</div>
@@ -61,18 +58,19 @@
         <div style="padding-top: 20px">
           <hr />
         </div>
-        <!-- Contacts, if any -->
-        <div v-if="validContacts">
+        <!-- Website, if any -->
+          
+        <div v-if="item.website">
           <row>
             <column>
-              <h4>Contact Information</h4>
+              <h4>Website</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">
-              {{ item.contact1 }}
-            </column>
+          <row v-if="item.website !== ''">
+            <a v-if="item.website" target="_blank" :href="`${item.website}`"
+              ><span class="sr-only visually-hidden">Website address</span>
+              {{ item.website }}
+            </a>
           </row>
           <!-- <row v-if="item.phone1 !== ''">
             <column sm="2" class="label"> Phone </column>

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

@@ -197,7 +197,7 @@ export default {
           // workPhone: record.Phone,
           mobilePhone: record.PrimaryContactMobile,
           email: record.PrimaryContactEmail,
-          // website: this.formatWebsite(record.CompanyWebURLDisp),
+          website: record.Website ? this.formatWebsite(record.Website) : '',
           // contact1: this.returnContact(
           //   record.ContactFirstName,
           //   record.ContactLastName,
@@ -230,21 +230,21 @@ export default {
   },
 
   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
-    // },
+    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
+    },
 
     // returnContact(firstN, lastN) {
     //   let retContact = [firstN, lastN].filter(Boolean).join(' ')

package/src/mock/asbestos-removalists.js

@@ -7,7 +7,7 @@ export const arData = [
         // Phone: '0404073745',
         // CompanyMobile: '0404 073 745',
         // CompanyEmailDisp: 'ads.asbestos@gmail.com',
-        // CompanyWebURLDisp: 'adsasbestosremoval.com.au',
+        Website: 'adsasbestosremoval.com.au',
         // ContactFirstName: 'Ivan',
         // ContactLastName: 'Silva',
         PrimaryContactAccountName: 'Ivan Silva',
@@ -25,7 +25,7 @@ export const arData = [
         // Phone: '0418 854 443',
         // CompanyMobile: '0418 854 443',
         // CompanyEmailDisp: 'nieto4@bigpond.net.au',
-        // CompanyWebURLDisp: '',
+        Website: '',
         // ContactFirstName: 'ERIC',
         // ContactLastName: 'NIETO',
         PrimaryContactAccountName: 'ERIC NIETO',
@@ -43,7 +43,7 @@ export const arData = [
         // Phone: '',
         // CompanyMobile: '0408474707',
         // CompanyEmailDisp: 'azz_317@homail.com',
-        // CompanyWebURLDisp: '',
+        Website: '',
         // ContactFirstName: 'Aaron',
         // ContactLastName: 'Field',
         PrimaryContactAccountName: 'Aaron Field',
@@ -61,7 +61,7 @@ export const arData = [
         // Phone: '0421 280 732',
         // CompanyMobile: '0401 016 565',
         // CompanyEmailDisp: 'CITYWIDEDEMOLITION@HOTMAIL.COM',
-        // CompanyWebURLDisp: 'www.citywidedemolition.com.au',
+        Website: 'www.citywidedemolition.com.au',
         // ContactFirstName: 'Eman',
         // ContactLastName: 'Al Baarini',
         PrimaryContactAccountName: 'Eman Al Baarini',
@@ -79,7 +79,7 @@ export const arData = [
         // Phone: '(03) 5444 3261',
         // CompanyMobile: '0409 012 780',
         // CompanyEmailDisp: 'admin@ashworthdemolition.com.au',
-        // CompanyWebURLDisp: '',
+        Website: '',
         // ContactFirstName: 'Dean',
         // ContactLastName: 'Ashworth',
         PrimaryContactAccountName: 'Dean Ashworth',
@@ -97,7 +97,7 @@ export const arData = [
         // Phone: '0438531164',
         // CompanyMobile: '',
         // CompanyEmailDisp: 'daniel.dehaan@ventia.com',
-        // CompanyWebURLDisp: 'www.ventia.com.au',
+        Website: 'www.ventia.com.au',
         // ContactFirstName: 'Daniel',
         // ContactLastName: 'DeHaan',
         PrimaryContactAccountName: 'Daniel DeHaan',
@@ -115,7 +115,7 @@ export const arData = [
         // Phone: '0404073745',
         // CompanyMobile: '0404 073 745',
         // CompanyEmailDisp: 'ads.asbestos@gmail.com',
-        // CompanyWebURLDisp: 'http://www.adsasbestosremoval.com.au',
+        Website: 'http://www.adsasbestosremoval.com.au',
         // ContactFirstName: '',
         // ContactLastName: '',
         PrimaryContactAccountName: '',
@@ -133,7 +133,7 @@ export const arData = [
         // Phone: '0404073745',
         // CompanyMobile: '0404 073 745',
         // CompanyEmailDisp: 'ads.asbestos@gmail.com',
-        // CompanyWebURLDisp: 'http://www.adsasbestosremoval.com.au',
+        Website: 'http://www.adsasbestosremoval.com.au',
         // ContactFirstName: 'Ivan',
         // ContactLastName: 'Silva',
         PrimaryContactAccountName: 'Ivan Silva',
@@ -151,7 +151,7 @@ export const arData = [
         // Phone: '0404073745',
         // CompanyMobile: '0404 073 745',
         // CompanyEmailDisp: 'ads.asbestos@gmail.com',
-        // CompanyWebURLDisp: 'http://www.adsasbestosremoval.com.au',
+        Website: 'http://www.adsasbestosremoval.com.au',
         // ContactFirstName: 'Ivan',
         // ContactLastName: 'Silva',
         PrimaryContactAccountName: 'Ivan Silva',
@@ -169,7 +169,7 @@ export const arData = [
         // Phone: '0404073745',
         // CompanyMobile: '0404 073 745',
         // CompanyEmailDisp: 'ads.asbestos@gmail.com',
-        // CompanyWebURLDisp: 'http://www.adsasbestosremoval.com.au',
+        Website: 'http://www.adsasbestosremoval.com.au',
         // ContactFirstName: 'Ivan',
         // ContactLastName: 'Silva',
         PrimaryContactAccountName: 'Ivan Silva',
@@ -187,7 +187,7 @@ export const arData = [
         // Phone: '0404073745',
         // CompanyMobile: '0404 073 745',
         // CompanyEmailDisp: 'ads.asbestos@gmail.com',
-        // CompanyWebURLDisp: 'http://www.adsasbestosremoval.com.au',
+        Website: 'http://www.adsasbestosremoval.com.au',
         // ContactFirstName: '',
         // ContactLastName: '',
         PrimaryContactAccountName: '',
@@ -205,7 +205,7 @@ export const arData = [
         // Phone: '0404073745',
         // CompanyMobile: '0404 073 745',
         // CompanyEmailDisp: 'ads.asbestos@gmail.com',
-        // CompanyWebURLDisp: 'http://www.adsasbestosremoval.com.au',
+        Website: 'http://www.adsasbestosremoval.com.au',
         // ContactFirstName: 'Ivan',
         // ContactLastName: 'Silva',
         PrimaryContactAccountName: 'Ivan Silva',
@@ -223,7 +223,7 @@ export const arData = [
         // Phone: '0405 083 197',
         // CompanyMobile: '0405 083 197',
         // CompanyEmailDisp: 'steve@ssmasbestos.com.au',
-        // CompanyWebURLDisp: 'www.ssm-asbestosremoval.com',
+        Website: 'www.ssm-asbestosremoval.com',
         // ContactFirstName: 'Steven',
         // ContactLastName: 'McCarthy',
         PrimaryContactAccountName: 'Steven McCarthy',
@@ -241,7 +241,7 @@ export const arData = [
         // Phone: '0450582103',
         // CompanyMobile: '0450582103',
         // CompanyEmailDisp: 'gpasbestos@outlook.com',
-        // CompanyWebURLDisp: '',
+        Website: '',
         // ContactFirstName: 'Carlos',
         // ContactLastName: 'Rios',
         PrimaryContactAccountName: 'Carlos Rios',