@worksafevictoria/wcl7.5 1.13.0-beta.2 → 1.13.0-beta.4

package/package.json

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

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

@@ -48,14 +48,15 @@
                 </a>
                 <div
                   ref="contrastChoices"
-                  class="flex-container"
+                  class="flex-container_contrast"
                   v-if="show"
                 >
-                  <div class="flex-item contrast_slide--box-list">
-                    <div v-for="list in lists" :key="list.value">
-                      <label :class="{'last-radio': list.label==='Greyscale'}">
+                  <div class="flex-item_contrast contrast_slide--box-list">
+                    <div v-for="list in lists" :key="list.value" >
+                     <label :for="list.id" :class="{'last-radio': list.label==='Greyscale'}">
                         <input
                           type="radio"
+                          :id="list.id"
                           :name="list.name"
                           :value="list.value"
                           :checked="list.value === selectedValue"
@@ -411,18 +412,22 @@ export default {
       NavSearchIcon,
       lists: [
         {
+          id: 'contrast1',
           name: 'contrast',
           value: 'default',
           label: 'Light contrast (default)'
         },
         {
+          id: 'contrast2',
           name: 'contrast',
           value: 'high_contrast',
           label: 'Increased contrast'
         },
-        { name: 'contrast', 
-          value: 'grayscale', 
-          label: 'Greyscale' 
+        {
+          id: 'contrast3',
+          name: 'contrast',
+          value: 'grayscale',
+          label: 'Greyscale'
         }
       ],
       selectedValue: null

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

@@ -18,6 +18,9 @@
     padding: 0px 15px;
     display: table;
     width: 100%;
+    border-bottom-style: solid;
+    border-bottom-color: lightgrey;
+    border-bottom-width: 1px;
 
     > nav {
       width: 100%;
@@ -470,11 +473,7 @@
     }
   }
 }
-@mixin opened-slide {
-  left: 100%;
-  -webkit-transform: translateX(-100%);
-  transform: translateX(-100%);
-}
+
 .contrast_slide {
   &_container {
     background: white;
@@ -490,21 +489,6 @@
     margin: 0;
     right: 0;
     position: absolute;
-
-    // &.closed {}
-    &.opened {
-      > .contrast_slide_hoverbar {
-        @include opened-slide;
-      }
-    }
-
-    @media (min-width: 768px) {
-      &:hover {
-        > .contrast_slide_hoverbar {
-          @include opened-slide;
-        }
-      }
-    }
   }
 
   &_hoverbar {
@@ -633,11 +617,11 @@
   }
 }
 
-.flex-container {
+.flex-container_contrast {
   margin-left: -5px;
 }
 
-.flex-item {
+.flex-item_contrast {
   border: 1px solid;
   border-color: #BABABA;
   padding: 10px;

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

@@ -69,25 +69,25 @@
             </column>
           </row>
           <row v-if="item.contact1 !== ''">
-            <column sm="2" class="label"> Contact </column>
+            <column sm="2" class="label" v-if="item.contact1 !== ''"> Contact </column>
             <column sm="4" class="dir-additional-records">
               {{ item.contact1 }}
             </column>
           </row>
-          <row v-if="item.phone1 !== ''">
+          <!-- <row v-if="item.phone1 !== ''">
             <column sm="2" class="label"> Phone </column>
             <column sm="4" class="dir-additional-records">
               {{ item.phone1 }}
             </column>
-          </row>
-          <row v-if="item.mobile1 !== ''">
+          </row> -->
+          <row v-if="item.mobile1">
             <column sm="2" class="label"> Mobile </column>
             <column sm="4" class="dir-additional-records">
               {{ item.mobile1 }}
             </column>
           </row>
-          <row v-if="item.email1 !== ''">
-            <column sm="2" class="label"> Email </column>
+          <row v-if="item.email1">
+            <column sm="2" class="label" > Email </column>
             <column sm="4" class="dir-additional-records">
               {{ item.email1 }}
             </column>

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

@@ -3,8 +3,7 @@
     <!-- Filters -->
     <row style="column-gap: 10px">
       <!-- Keyword Filters -->
-      <!-- <column xxl="2" xl="3" md="4" sm="6"> -->
-        <column xxl="2" xl="3" md="4" sm="6">
+      <column xxl="2" xl="3" md="4" sm="6">
         <label class="col-form-label visually-hidden" for="keyword-search">
           Search by keyword (typed keyword automatically filters below results)
         </label>
@@ -121,7 +120,7 @@ export default {
       searchRem: '',
       searchSub: '',
       searchClass: '',
-      searchServices: '',
+      // searchServices: '',
       filteredItems: null,
       perPage: 10,
       page: 0,
@@ -173,8 +172,8 @@ export default {
       if (
         this.searchRem.length ||
         this.searchSub.length ||
-        this.searchClass.length ||
-        this.searchServices.length
+        this.searchClass.length
+        // || this.searchServices.length
       ) {
         this.pageChanged(1)
       }
@@ -231,26 +230,26 @@ 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(' ')
-      return retContact
-    },
+    // returnContact(firstN, lastN) {
+    //   let retContact = [firstN, lastN].filter(Boolean).join(' ')
+    //   return retContact
+    // },
 
     chunkify(arr, n) {
       if (arr) {

package/src/index.js

@@ -7,7 +7,7 @@ import Subheader from './components/Containers/Subheader/index.vue'
 import SectionGroup from './components/Containers/SectionGroup/index.vue'
 import CarouselComponent from './components/Containers/Carousel/index.vue'
 
-import AppHeader from './components/Global/AppHeader/index.vue'
+import AppHeader from './components/Global/AppHeaderNew/index.vue'
 import AppFooter from './components/Global/AppFooter/index.vue'
 import HeroHeader from './components/Global/HeroHeader/index.vue'
 import SocialShare from './components/Global/SocialShare/index.vue'