@worksafevictoria/wcl7.5 1.12.0 → 1.13.0-beta.10

package/package.json

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

package/src/components/Containers/Carousel/index.vue

@@ -1,26 +1,29 @@
 <template>
   <div>
-    <b-carousel
+    <BCarousel
       id="carousel-1"
       :class="{carouselPara: isParagraph}"
       v-model="slide"
       interval="0"
       controls
       indicators
+      label-indicators="Select a slide to display"
       keyboard
       :fade="true"
       background="#ababab"
+      img-width="100%"
+      img-height="auto"
     >
-      <b-carousel-slide
+      <BCarouselSlide
         v-for="item in filteredCarouselItems"
         :key="item.id"
         :img-src="getImageURL(item.imageURL)"
         :img-alt="item.imageAlt"
         @click.prevent="handleClick(item.linkURL)"
       >
-      <h4>{{ item.title }}</h4>
-      </b-carousel-slide>
-    </b-carousel>
+        <h4>{{ item.title }}</h4>
+      </BCarouselSlide>
+    </BCarousel>
   </div>
 </template>
 
@@ -113,29 +116,19 @@ methods: {
 <style>
   .carousel {
     position: relative;
-    padding-bottom: 7rem;
-    max-width: 540px;
+    margin-bottom: 10px;
   }
-
-  .carousel-inner {
-    overflow: visible;
-  }
-
-  .carousel-indicators {
-    padding-bottom: 3rem;
-    float: right;
-    right: 2% !important;
-    width: 20%;
-    justify-content: end;
-    margin-left: 80%;
-    margin-right: 0;
+/* Introduced changes to make image responsive */
+  .carousel img {
+    object-fit: cover;
+    max-height: 420px;
+    width: 100%;
   }
 
   .carousel-indicators button {
     width: 10px !important;
     height: 10px !important;
     border-radius: 50% !important;
-    background-color: black !important;
   }
 
   .carousel-indicators button:focus,
@@ -145,12 +138,9 @@ methods: {
   }
 
   .carousel-caption {
-    color: black;
-    top: 100%;
-    left: 0;
-    right: 20%;
-    text-align: left;
+    color: white;
     text-decoration: underline;
+    background-color: black;
   }
 
   .carousel-control-next,
@@ -176,8 +166,8 @@ methods: {
   .carouselPara {
     margin-left: auto;
     margin-right: auto;
-    width: 75%;
-    height: auto;
+    height: 50%;
+    width:50%;
   }
 
 </style>

package/src/components/Containers/HomepageHeaderNew/index.stories.js

@@ -1,6 +1,7 @@
 import HomepageHeader from './index.vue'
 import { mockCarouselItems } from '../../../mock/carousel-items'
 
+// Introduced an additional headerLink
 
 const headerLinks = [
     {
@@ -22,6 +23,10 @@ const headerLinks = [
     {
       text: 'Pay or renew your insurance',
       path: '/pay-or-renew-your-workcover-insurance-premium'
+    },
+    {
+      text: 'Contact Worksafe',
+      path: '/contact-worksafe'
     }
   ]
 

package/src/components/Containers/HomepageHeaderNew/index.vue

@@ -14,10 +14,9 @@
     <div class="homepage-header__content-wrapper">
       <container class="homepage-header__content-wrapper__content">
         <row>
+          <!-- changes made to bootstrap grid breakpoints -->
           <column
-              class="homepage-header__content-wrapper__content-col col-12 col-md-7 homepage-header__content-wrapper__content-col--split wcl-rich-text--ltr"
-              :xs="7"
-              :md="7"
+              class="homepage-header__content-wrapper__content-col col-12 col-md-7 col-lg-8 homepage-header__content-wrapper__content-col--split wcl-rich-text--ltr"
             >
               <carousel-component 
                 :carousel-items="slideList"
@@ -25,10 +24,8 @@
                 :is-paragraph="false"
               />
           </column>
-          <column
-              md="4"
-              :offset-md="1"
-              class="homepage-header__side col-md-4 offset-md-1"
+          <column  
+              class="homepage-header__side col-12 col-md-5 col-lg-4"
             >
               <div>
                 <cta-button
@@ -220,4 +217,6 @@ export default {
     }
   }
 }
+
+
 </style>

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,36 +26,38 @@
         </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"
+                  :class="screen === 'mobile' ? 'flex-container_contrast_mobile' : '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"
@@ -74,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' : ''">
@@ -411,18 +413,25 @@ export default {
       NavSearchIcon,
       lists: [
         {
+          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'
         },
-        { name: 'contrast', 
-          value: 'grayscale', 
-          label: 'Greyscale' 
+        {
+          id: 'contrast3',
+          name: 'contrast',
+          value: 'grayscale',
+          label: 'Greyscale',
+          labelmobile: 'Greyscale'
         }
       ],
       selectedValue: null

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

@@ -3,6 +3,7 @@
 .app-header {
   &.isMobile {
     padding: 0;
+    width: 100vw;
 
     .app-header {
       &__wrap {
@@ -20,6 +21,8 @@
 
           ul {
             float: none;
+            padding-left: 15px;
+            padding-right: 10px;
 
             li {
              height: 62px;
@@ -71,6 +74,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 +182,7 @@
                 margin-bottom: 5px;
                 padding: 0;
                 top: 0;
+                margin-left: 10px;
 
                 span {
                   color: $app-header-active;
@@ -267,38 +273,70 @@
   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;
+
+  &:focus, &:hover {
+    border: 1px solid #BABABA;
+  }
 }
 
 .app-header__wrap_mobile {
   background: none;
   height: 0px;
-}
+}
+
+.flex-container_contrast_mobile {
+  margin-left: -167px;
+}
+

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

@@ -4,8 +4,8 @@
   color: $app-menu-white;
   z-index: 27;
   position: relative;
-  padding: 0px 10px;
-  width: 100%;
+  padding: 0px;
+  width: 100vw;
   font-size: 14px;
 
   &__wrap {
@@ -18,6 +18,9 @@
     padding: 0px 15px;
     display: table;
     width: 100%;
+    border-bottom-style: solid;
+    border-bottom-color: white;
+    border-bottom-width: 2px;
 
     > nav {
       width: 100%;
@@ -43,7 +46,7 @@
   .isActiveChild {
     > a {
       background: $app-header-active;
-      color: $app-header-text-colour;
+      color: white;
       border-bottom: 1px solid transparent;
     }
   }
@@ -378,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;
@@ -421,9 +427,10 @@
   }
 }
 
-.LogoImg {
+.logoImg {
   height: 55px;
   width: auto;
+  margin-left: 20px;
 }
 
 .semi-circle {
@@ -470,11 +477,7 @@
     }
   }
 }
-@mixin opened-slide {
-  left: 100%;
-  -webkit-transform: translateX(-100%);
-  transform: translateX(-100%);
-}
+
 .contrast_slide {
   &_container {
     background: white;
@@ -490,21 +493,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 {
@@ -604,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 {
@@ -633,11 +620,11 @@
   }
 }
 
-.flex-container {
+.flex-container_contrast {
   margin-left: -5px;
 }
 
-.flex-item {
+.flex-item_contrast {
   border: 1px solid;
   border-color: #BABABA;
   padding: 10px;
@@ -647,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

@@ -3,17 +3,17 @@ import arRecord from './index.vue'
 const arData = 
     {
         title: 'Ventia Utility Services Pty Limited',
-        fullAddress: 'MITCHAM VIC 3132',
-        workPhone: '0438531164',
+        fullAddress: 'MITCHAM 3132',
+        // workPhone: '0438531164',
         mobilePhone: '0438531164',
         email: 'daniel.dehaan@ventia.com',
         website: 'http://www.ventia.com.au',
         contact1: 'Daniel DeHaan',
-        phone1: '0438531164',
-        email1: 'daniel.dehaan@ventia.com',
-        mobile1: '0438531164',
-        serviceCategory: 'Class B - Restricted - Asbestos Removalists',
-        services: 'Bituminous coal tar coatings,Non-friable Asbestos Cement Water Pipes and Associated Fittings ONLY,Non-friable Asbetos Containing Bituminous Coating on Mild Steel Pipes',
+        // phone1: '0438531164',
+        // email1: 'daniel.dehaan@ventia.com',
+        // mobile1: '0438531164',
+        serviceCategory: 'Class B - Non-friable',
+        // services: 'Bituminous coal tar coatings,Non-friable Asbestos Cement Water Pipes and Associated Fittings ONLY,Non-friable Asbetos Containing Bituminous Coating on Mild Steel Pipes',
     }
 
 

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,33 +58,34 @@
         <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"> 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 !== ''">
+          <!-- <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>
@@ -99,7 +97,7 @@
               <h4>{{ item.serviceCategory }}</h4>
             </column>
           </row>
-          <row class="dir-additional-records">
+          <!-- <row class="dir-additional-records">
             <column>
               <ul>
                 <li v-for="serv in item.services.split(',')" :key="serv.id">
@@ -107,7 +105,7 @@
                 </li>
               </ul>
             </column>
-          </row>
+          </row> -->
         </div>
       </div>
     </container>