@worksafevictoria/wcl7.5 1.13.0-beta.6 → 1.13.0-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/package.json +1 -1
  2. package/src/components/Containers/Carousel/index.vue +7 -1
  3. package/src/components/Containers/HomepageHeaderNew/index.stories.js +4 -0
  4. package/src/components/Containers/HomepageHeaderNew/index.vue +5 -7
  5. package/src/components/Global/AppHeaderNew/index.vue +18 -14
  6. package/src/components/Global/AppHeaderNew/mobile.scss +44 -12
  7. package/src/components/Global/AppHeaderNew/styles.scss +13 -9
  8. package/src/components/Paragraphs/Directory/Asbestos/Records/SingleRecord/index.stories.js +1 -1
  9. package/src/components/Paragraphs/Directory/Asbestos/Records/SingleRecord/index.vue +14 -16
  10. package/src/components/Paragraphs/Directory/Asbestos/Records/index.vue +16 -16
  11. package/src/components/SubComponents/Search/index.vue +135 -132
  12. package/src/index.js +2 -2
  13. package/src/mock/asbestos-removalists.js +14 -14
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worksafevictoria/wcl7.5",
3
- "version": "1.13.0-beta.6",
3
+ "version": "1.13.0-beta.8",
4
4
  "main": "src/index.js",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/components/Containers/Carousel/index.vue CHANGED
@@ -7,6 +7,7 @@
7
7
  interval="0"
8
8
  controls
9
9
  indicators
10
+ label-indicators="Select a slide to display"
10
11
  keyboard
11
12
  :fade="true"
12
13
  background="#ababab"
@@ -115,10 +116,15 @@ methods: {
115
116
  <style>
116
117
  .carousel {
117
118
  position: relative;
118
- height: 70%;
119
119
  margin-bottom: 10px;
120
120
  }
121
121
 
122
+ .carousel img {
123
+ object-fit: cover;
124
+ max-height: 420px;
125
+ width: 100%;
126
+ }
127
+
122
128
  .carousel-indicators button {
123
129
  width: 10px !important;
124
130
  height: 10px !important;
package/src/components/Containers/HomepageHeaderNew/index.stories.js CHANGED
@@ -22,6 +22,10 @@ const headerLinks = [
22
22
  {
23
23
  text: 'Pay or renew your insurance',
24
24
  path: '/pay-or-renew-your-workcover-insurance-premium'
25
+ },
26
+ {
27
+ text: 'Contact Worksafe',
28
+ path: '/contact-worksafe'
25
29
  }
26
30
  ]
27
31
 
package/src/components/Containers/HomepageHeaderNew/index.vue CHANGED
@@ -15,9 +15,7 @@
15
15
  <container class="homepage-header__content-wrapper__content">
16
16
  <row>
17
17
  <column
18
- class="homepage-header__content-wrapper__content-col col-12 col-md-7 homepage-header__content-wrapper__content-col--split wcl-rich-text--ltr"
19
- :xs="7"
20
- :md="7"
18
+ 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"
21
19
  >
22
20
  <carousel-component
23
21
  :carousel-items="slideList"
@@ -25,10 +23,8 @@
25
23
  :is-paragraph="false"
26
24
  />
27
25
  </column>
28
- <column
29
- md="4"
30
- :offset-md="1"
31
- class="homepage-header__side col-md-4 offset-md-1"
26
+ <column
27
+ class="homepage-header__side col-12 col-md-5 col-lg-4"
32
28
  >
33
29
  <div>
34
30
  <cta-button
@@ -220,4 +216,6 @@ export default {
220
216
  }
221
217
  }
222
218
  }
219
+
220
+
223
221
  </style>
package/src/components/Global/AppHeaderNew/index.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  :class="'app-header' + (screen === 'mobile' ? ' ' + 'isMobile' : '')"
6
6
  >
7
7
  <!-- Top menu -->
8
- <div class="logo">
8
+ <div :class="screen === 'mobile' ? 'logoMobile' : 'logo'">
9
9
  <!-- Mobile Menu -->
10
10
  <div v-if="screen === 'mobile'" class="app-header__mobile-menu-container">
11
11
  <a class="dark" role="button" @click.prevent="showMobileMenu">
@@ -15,7 +15,7 @@
15
15
  <!-- Logo -->
16
16
  <nuxt-link class="dark" to="/">
17
17
  <img
18
- :class="screen === 'mobile' ? 'LogoImgMobile' : 'LogoImg'"
18
+ :class="screen === 'mobile' ? 'logoImgMobile' : 'logoImg'"
19
19
  :alt="
20
20
  isWorkWell
21
21
  ? 'Work Well Victoria - Logo'
@@ -26,29 +26,30 @@
26
26
  </nuxt-link>
27
27
  <span :class="screen === 'mobile' ? 'logo__nav_mobile' : 'logo__nav'">
28
28
  <!-- Roles added for accessibility -->
29
- <table role="presentation" >
29
+ <table role="presentation" style="margin-right: 0;">
30
30
  <tbody role="presentation">
31
31
  <tr role="presentation">
32
- <td :class="screen === 'mobile' ? 'td_mobile' : ''">
32
+ <td :class="screen === 'mobile' ? 'td_mobile mobile-link' : ''">
33
33
  <!-- Language link -->
34
+
34
35
  <nuxt-link
35
- :class="screen === 'mobile' ? 'mobile-link' : ''"
36
36
  to="/languages"
37
37
  @click.native="fireAnalytics('Choose your language', '/languages')"
38
38
  title="Language"
39
39
  >
40
40
  <span v-if="screen !== 'mobile'">Choose your language </span>
41
- <img alt="Language Icon" width="15px" height="15px" :src=LanguageIcon />
41
+ <img :class="screen === 'mobile' ? 'imgMobile' : ''" alt="Language Icon" width="15px" height="15px" :src=LanguageIcon />
42
42
  </nuxt-link>
43
+
43
44
  </td>
44
- <td :class="screen === 'mobile' ? 'td_mobile' : ''">
45
+ <td :class="screen === 'mobile' ? 'td_mobile mobile-link' : ''">
45
46
  <!-- Contrast link -->
46
- <a href="javascript:void(0)" :class="screen === 'mobile' ? 'mobile-link' : ''" @click="show = !show" @keyup.esc="show = !show" title="Contrast" ref="selectContrast">
47
- <span v-if="screen !== 'mobile'">Adjust contrast</span> <img alt="Contrast Icon" width="15px" height="15px" :src=ContrastIcon />
47
+ <a href="javascript:void(0)" @click="show = !show" @keyup.esc="show = !show" title="Contrast" ref="selectContrast">
48
+ <span v-if="screen !== 'mobile'">Adjust contrast</span> <img :class="screen === 'mobile' ? 'imgMobile' : ''" alt="Contrast Icon" width="15px" height="15px" :src=ContrastIcon />
48
49
  </a>
49
50
  <div
50
51
  ref="contrastChoices"
51
- class="flex-container_contrast"
52
+ :class="screen === 'mobile' ? 'flex-container_contrast_mobile' : 'flex-container_contrast'"
52
53
  v-if="show"
53
54
  >
54
55
  <div class="flex-item_contrast contrast_slide--box-list">
@@ -75,7 +76,7 @@
75
76
  class="cta-button cta-button--text-only cta-button--slim"
76
77
  to="/search"
77
78
  title="Search"
78
- ><span v-if="screen !== 'mobile'">Search &nbsp;</span> <img alt="Search Icon" width="15px" height="15px" :src=NavSearchIcon />
79
+ ><span v-if="screen !== 'mobile'">Search &nbsp;</span><img alt="Search Icon" style="margin-top: 2px;" width="15px" height="15px" :src=NavSearchIcon />
79
80
  </nuxt-link>
80
81
  </td>
81
82
  <td :class="screen === 'mobile' ? 'td_mobile-last' : ''">
@@ -415,19 +416,22 @@ export default {
415
416
  id: 'contrast1',
416
417
  name: 'contrast',
417
418
  value: 'default',
418
- label: 'Light contrast (default)'
419
+ label: 'Light contrast (default)',
420
+ labelmobile: 'Light'
419
421
  },
420
422
  {
421
423
  id: 'contrast2',
422
424
  name: 'contrast',
423
425
  value: 'high_contrast',
424
- label: 'Increased contrast'
426
+ label: 'Increased contrast',
427
+ labelmobile: 'Increased'
425
428
  },
426
429
  {
427
430
  id: 'contrast3',
428
431
  name: 'contrast',
429
432
  value: 'grayscale',
430
- label: 'Greyscale'
433
+ label: 'Greyscale',
434
+ labelmobile: 'Greyscale'
431
435
  }
432
436
  ],
433
437
  selectedValue: null
package/src/components/Global/AppHeaderNew/mobile.scss CHANGED
@@ -20,6 +20,8 @@
20
20
 
21
21
  ul {
22
22
  float: none;
23
+ padding-left: 15px;
24
+ padding-right: 10px;
23
25
 
24
26
  li {
25
27
  height: 62px;
@@ -71,6 +73,8 @@
71
73
  display: table-cell;
72
74
  vertical-align: middle;
73
75
  text-align: left;
76
+ margin-left: 0px;
77
+ margin-right: 10px;
74
78
 
75
79
  svg {
76
80
  filter: invert(100%) sepia(5%) saturate(49%) hue-rotate(165deg)
@@ -177,6 +181,7 @@
177
181
  margin-bottom: 5px;
178
182
  padding: 0;
179
183
  top: 0;
184
+ margin-left: 10px;
180
185
 
181
186
  span {
182
187
  color: $app-header-active;
@@ -267,38 +272,65 @@
267
272
  top: 10px !important;
268
273
  }
269
274
 
270
- .LogoImgMobile {
275
+ .logoMobile {
276
+ height: 85px;
277
+ padding: 15px 0%;
278
+ display: flex;
279
+ align-items: center;
280
+ margin-right: 0px;
281
+ margin-left: 10px;
282
+ background-color: white;
283
+ width: 100%;
284
+ }
285
+
286
+ .logoImgMobile {
271
287
  height: 40px;
272
288
  width: auto;
273
289
  }
274
290
 
275
- .logo__nav-mobile {
276
- display:inline-block;
277
- margin-left: 10px;
278
- margin-right: 0px;
279
- width: 100%;
291
+ .logo__nav_mobile {
292
+ display:flex;
293
+ margin-left: 15px;
294
+ margin-right: 25px;
295
+ width: 60% !important;
280
296
  overflow-y:auto;
297
+ justify-content: flex-end;
298
+
299
+ table {
300
+ border-collapse: separate;
301
+ border-spacing: 5px;
302
+ }
303
+ }
304
+
305
+ .imgMobile {
306
+ display: block;
307
+ margin-left: auto;
308
+ margin-right: auto;
281
309
  }
282
310
 
283
311
  .td_mobile {
284
- padding: 0px 5px !important;
285
312
  height: 35px;
286
313
  width: 35px;
287
314
  }
288
315
 
289
316
  .td_mobile-last {
290
- padding: 0px 0px 0px 5px !important;
317
+ padding: 0px !important;
291
318
  }
292
319
 
293
320
  .mobile-link {
294
- height: 35px;
295
- width: 35px;
321
+ width: 40px !important;
322
+ height: 40px !important;
296
323
  background-color: #f2f2f2;
297
324
  border: 1px solid #f2f2f2;
298
- border-radius: 5px;
325
+ border-radius: 8px;
299
326
  }
300
327
 
301
328
  .app-header__wrap_mobile {
302
329
  background: none;
303
330
  height: 0px;
304
- }
331
+ }
332
+
333
+ .flex-container_contrast_mobile {
334
+ margin-left: -10px;
335
+ }
336
+
package/src/components/Global/AppHeaderNew/styles.scss CHANGED
@@ -19,8 +19,8 @@
19
19
  display: table;
20
20
  width: 100%;
21
21
  border-bottom-style: solid;
22
- border-bottom-color: lightgrey;
23
- border-bottom-width: 1px;
22
+ border-bottom-color: white;
23
+ border-bottom-width: 2px;
24
24
 
25
25
  > nav {
26
26
  width: 100%;
@@ -381,16 +381,19 @@
381
381
 
382
382
  .logo {
383
383
  height: 85px;
384
- padding: 15px 15px 15px 0px;
384
+ padding: 15px 0%;
385
385
  width: 100%;
386
386
  display: flex;
387
387
  align-items: center;
388
- margin-right: 0%;
388
+ margin-right: 50px;
389
+ margin-left: -10px;
389
390
  background-color: white;
391
+ width: 100vw;
390
392
 
391
393
  &__nav {
392
394
  display:inline-block;
393
395
  margin-left: 15px;
396
+ margin-right: 10px;
394
397
  color: #000;
395
398
  width: 100%;
396
399
  text-align: right;
@@ -424,9 +427,10 @@
424
427
  }
425
428
  }
426
429
 
427
- .LogoImg {
430
+ .logoImg {
428
431
  height: 55px;
429
432
  width: auto;
433
+ margin-left: 10px;
430
434
  }
431
435
 
432
436
  .semi-circle {
@@ -588,14 +592,13 @@
588
592
  padding: 10px 0;
589
593
 
590
594
  input[type='radio'] {
591
- border: 2px solid #bebebe;
595
+ border: 3px solid #bebebe;
592
596
  border-radius: 50%;
593
- box-shadow: 0 0 0px 0px #bebebe inset;
594
- height: 24px;
597
+ height: 25px;
595
598
  outline: none;
596
599
  vertical-align: middle;
597
600
  margin-right: 5px;
598
- width: 24px;
601
+ width: 25px;
599
602
  appearance: none;
600
603
 
601
604
  &:before {
@@ -631,5 +634,6 @@
631
634
  input[type="radio"] {
632
635
  accent-color: black;
633
636
  margin-right: 5px;
637
+ vertical-align: middle;
634
638
  }
635
639
  }
package/src/components/Paragraphs/Directory/Asbestos/Records/SingleRecord/index.stories.js CHANGED
@@ -7,7 +7,7 @@ const arData =
7
7
  // workPhone: '0438531164',
8
8
  mobilePhone: '0438531164',
9
9
  email: 'daniel.dehaan@ventia.com',
10
- // website: 'http://www.ventia.com.au',
10
+ website: 'http://www.ventia.com.au',
11
11
  contact1: 'Daniel DeHaan',
12
12
  // phone1: '0438531164',
13
13
  // email1: 'daniel.dehaan@ventia.com',
package/src/components/Paragraphs/Directory/Asbestos/Records/SingleRecord/index.vue CHANGED
@@ -14,26 +14,23 @@
14
14
  {{ item.title }}
15
15
  </a>
16
16
  </column>
17
- <column md="2" sm="12" class="address">
17
+ <column md="3" sm="12" class="address">
18
18
  <div class="label">Location</div>
19
19
  <a v-if="item.fullAddress" target="_blank" :href="gMapLink"
20
20
  ><span class="sr-only visually-hidden">Address</span>
21
21
  {{ item.fullAddress }}
22
22
  </a>
23
23
  </column>
24
- <column md="2" sm="12" class="coldata longstring">
24
+ <column md="3" sm="12" class="coldata longstring">
25
25
  <div class="label">Email</div>
26
26
  <a v-if="item.email" target="_blank" :href="`mailto:${item.email}`"
27
27
  ><span class="sr-only visually-hidden">Email address</span>
28
28
  {{ item.email }}
29
29
  </a>
30
30
  </column>
31
- <column md="3" sm="12" class="coldata longstring">
32
- <div class="label">Website</div>
33
- <a v-if="item.website" target="_blank" :href="`${item.website}`"
34
- ><span class="sr-only visually-hidden">Website address</span>
35
- {{ item.website }}
36
- </a>
31
+ <column md="2" sm="12" class="coldata">
32
+ <div class="label">Contact</div>
33
+ {{ item.contact1 }}
37
34
  </column>
38
35
  <column md="2" sm="12" class="coldata">
39
36
  <div class="label">Phone</div>
@@ -61,18 +58,19 @@
61
58
  <div style="padding-top: 20px">
62
59
  <hr />
63
60
  </div>
64
- <!-- Contacts, if any -->
65
- <div v-if="validContacts">
61
+ <!-- Website, if any -->
62
+
63
+ <div v-if="item.website">
66
64
  <row>
67
65
  <column>
68
- <h4>Contact Information</h4>
66
+ <h4>Website</h4>
69
67
  </column>
70
68
  </row>
71
- <row v-if="item.contact1 !== ''">
72
- <column sm="2" class="label" v-if="item.contact1 !== ''"> Contact </column>
73
- <column sm="4" class="dir-additional-records">
74
- {{ item.contact1 }}
75
- </column>
69
+ <row v-if="item.website !== ''">
70
+ <a v-if="item.website" target="_blank" :href="`${item.website}`"
71
+ ><span class="sr-only visually-hidden">Website address</span>
72
+ {{ item.website }}
73
+ </a>
76
74
  </row>
77
75
  <!-- <row v-if="item.phone1 !== ''">
78
76
  <column sm="2" class="label"> Phone </column>
package/src/components/Paragraphs/Directory/Asbestos/Records/index.vue CHANGED
@@ -197,7 +197,7 @@ export default {
197
197
  // workPhone: record.Phone,
198
198
  mobilePhone: record.PrimaryContactMobile,
199
199
  email: record.PrimaryContactEmail,
200
- // website: this.formatWebsite(record.CompanyWebURLDisp),
200
+ website: record.Website ? this.formatWebsite(record.Website) : '',
201
201
  // contact1: this.returnContact(
202
202
  // record.ContactFirstName,
203
203
  // record.ContactLastName,
@@ -230,21 +230,21 @@ export default {
230
230
  },
231
231
 
232
232
  methods: {
233
- // formatWebsite(url) {
234
- // let startUrl = url.slice(0, 3)
235
- // let returnUrl = url
236
- // if (startUrl.toLowerCase() === 'www') {
237
- // returnUrl = 'https://' + url
238
- // }
239
- // if (
240
- // startUrl.toLowerCase() !== 'htt' &&
241
- // startUrl.toLowerCase() !== 'www' &&
242
- // url !== ''
243
- // ) {
244
- // returnUrl = 'https://www.' + url
245
- // }
246
- // return returnUrl
247
- // },
233
+ formatWebsite(url) {
234
+ let startUrl = url.slice(0, 3)
235
+ let returnUrl = url
236
+ if (startUrl.toLowerCase() === 'www') {
237
+ returnUrl = 'https://' + url
238
+ }
239
+ if (
240
+ startUrl.toLowerCase() !== 'htt' &&
241
+ startUrl.toLowerCase() !== 'www' &&
242
+ url !== ''
243
+ ) {
244
+ returnUrl = 'https://www.' + url
245
+ }
246
+ return returnUrl
247
+ },
248
248
 
249
249
  // returnContact(firstN, lastN) {
250
250
  // let retContact = [firstN, lastN].filter(Boolean).join(' ')
package/src/components/SubComponents/Search/index.vue CHANGED
@@ -6,11 +6,12 @@
6
6
  </div>
7
7
  </template>
8
8
  <template v-else>
9
- <b-input-group>
9
+ <BInputGroup>
10
10
  <label class="visually-hidden" for="site-search"
11
- >Search by keyword (Typed keyword automatically filters below results)</label
11
+ >Search by keyword (Typed keyword automatically filters below
12
+ results)</label
12
13
  >
13
- <b-form-input
14
+ <BFormInput
14
15
  id="site-search"
15
16
  autofocus
16
17
  ref="siteSearch"
@@ -21,14 +22,14 @@
21
22
  trim
22
23
  @update="onChange"
23
24
  @keyup.enter="onChange"
24
- ></b-form-input>
25
+ ></BFormInput>
25
26
  <template #append>
26
- <b-button size="sm" class="search-button" @click="onSearch"
27
+ <BButton size="sm" class="search-button" @click="onSearch"
27
28
  ><span class="not-extra-small-screen">Search</span>
28
29
  <img alt="search icon" :src="searchIcon"
29
- /></b-button>
30
+ /></BButton>
30
31
  </template>
31
- </b-input-group>
32
+ </BInputGroup>
32
33
  <search-listing
33
34
  v-if="loadSearchList && (searchResults || isLoading)"
34
35
  :class="{
@@ -54,14 +55,13 @@
54
55
  </div>
55
56
  </template>
56
57
  <script>
57
- import axios from "axios";
58
- import searchIcon from "../../../assets/icons/search.svg?url";
59
- import SearchListing from "./SearchListing/index.vue";
60
- import { BButton, BInputGroup, BFormInput } from "bootstrap-vue-next";
58
+ import axios from 'axios'
59
+ import searchIcon from '../../../assets/icons/search.svg?url'
60
+ import SearchListing from './SearchListing/index.vue'
61
+ import { BButton, BInputGroup, BFormInput } from 'bootstrap-vue-next'
61
62
 
62
63
  export default {
63
64
  components: { SearchListing, BButton, BInputGroup, BFormInput },
64
-
65
65
  props: {
66
66
  pageLimit: {
67
67
  type: Number,
@@ -77,11 +77,11 @@ export default {
77
77
  },
78
78
  initialSearchQuery: {
79
79
  type: String,
80
- default: "",
80
+ default: '',
81
81
  },
82
82
  googleSearchFlag: {
83
83
  type: String,
84
- default: "solar",
84
+ default: 'solar',
85
85
  },
86
86
  visibleSearchList: {
87
87
  type: Boolean,
@@ -91,40 +91,39 @@ export default {
91
91
  data() {
92
92
  return {
93
93
  searchIcon,
94
- searchQuery: "",
94
+ searchQuery: '',
95
95
  searchResults: null,
96
96
  isLoading: false,
97
- field_language: "8671",
97
+ field_language: '8671',
98
98
  searchType: this.googleSearchFlag,
99
99
  googleSearchScript: false,
100
100
  loadSearchList: this.visibleSearchList,
101
- };
101
+ }
102
102
  },
103
103
  computed: {
104
104
  searchClass() {
105
105
  return {
106
- "wcl-search": true,
107
- "wcl-search__google": this.searchType !== "solar",
108
- };
106
+ 'wcl-search': true,
107
+ 'wcl-search__google': this.searchType !== 'solar',
108
+ }
109
109
  },
110
110
  },
111
111
  mounted() {
112
-
113
- if (this.searchType === "google") {
114
- this.setupGoogleStyle();
112
+ if (this.searchType === 'google') {
113
+ this.setupGoogleStyle()
115
114
  } else {
116
115
  if (this.initialSearchQuery) {
117
- this.searchQuery = this.initialSearchQuery;
118
- this.onSearch();
116
+ this.searchQuery = this.initialSearchQuery
117
+ this.onSearch()
119
118
  }
120
119
  if (this.isTypeahead && window) {
121
- window.document.addEventListener("click", this.closeSearchResults);
120
+ window.document.addEventListener('click', this.closeSearchResults)
122
121
  }
123
122
  }
124
123
  },
125
124
  beforeDestroy() {
126
125
  if (this.isTypeahead && window && document) {
127
- window.document.removeEventListener("click", this.closeSearchResults);
126
+ window.document.removeEventListener('click', this.closeSearchResults)
128
127
  }
129
128
  },
130
129
  methods: {
@@ -139,54 +138,54 @@ export default {
139
138
  q: query,
140
139
  start: start,
141
140
  },
142
- }
143
- );
144
- return response;
141
+ },
142
+ )
143
+ return response
145
144
  } catch (error) {
146
- console.error("Error fetching search results:", error);
147
- return [];
145
+ console.error('Error fetching search results:', error)
146
+ return []
148
147
  }
149
148
  },
150
149
  async onGoogleSearch(pageNr = 1, searchQuery) {
151
- this.$emit("loading", true);
152
- this.isLoading = true;
150
+ this.$emit('loading', true)
151
+ this.isLoading = true
153
152
 
154
- const apiKey = "AIzaSyD76GAmQQ6DuxKWf-aLXPZ9pwdz4nOvs2c";
155
- const searchEngineId = "53b1506aa03c64160";
153
+ const apiKey = 'AIzaSyD76GAmQQ6DuxKWf-aLXPZ9pwdz4nOvs2c'
154
+ const searchEngineId = '53b1506aa03c64160'
156
155
 
157
- const start = (pageNr - 1) * this.pageLimit;
156
+ const start = (pageNr - 1) * this.pageLimit
158
157
  let response = await this.fetchSearchResults(
159
158
  apiKey,
160
159
  searchEngineId,
161
160
  searchQuery,
162
- start
163
- );
164
- let items = [];
165
- let suggest = response?.data?.spelling?.correctedQuery || "";
161
+ start,
162
+ )
163
+ let items = []
164
+ let suggest = response?.data?.spelling?.correctedQuery || ''
166
165
  if (response?.data?.spelling?.correctedQuery) {
167
166
  response = await this.fetchSearchResults(
168
167
  apiKey,
169
168
  searchEngineId,
170
169
  response?.data?.spelling?.correctedQuery,
171
- start
172
- );
173
- items = response?.data?.items;
170
+ start,
171
+ )
172
+ items = response?.data?.items
174
173
  } else if (response?.data?.items) {
175
- items = response?.data?.items;
174
+ items = response?.data?.items
176
175
  }
177
176
  if (items.length > 0) {
178
- const totalResults = response?.data?.searchInformation?.totalResults;
177
+ const totalResults = response?.data?.searchInformation?.totalResults
179
178
  // Loop through each item in the items array
180
179
  const modifiedResults = items.map((item) => {
181
180
  // Update the title using the handleSearchResultLinkTitle function
182
- const modifiedTitle = this.handleSearchResultLinkTitle(item.title);
181
+ const modifiedTitle = this.handleSearchResultLinkTitle(item.title)
183
182
 
184
183
  // Return the modified item with the updated title
185
184
  return {
186
185
  ...item,
187
186
  title: modifiedTitle,
188
- };
189
- });
187
+ }
188
+ })
190
189
 
191
190
  this.searchResults = {
192
191
  offset: Number(pageNr === 1 ? pageNr - 1 : pageNr),
@@ -194,19 +193,19 @@ export default {
194
193
  query: this.searchQuery,
195
194
  results: modifiedResults,
196
195
  suggestion: suggest,
197
- };
196
+ }
198
197
  } else {
199
198
  this.searchResults = {
200
199
  offset: 0,
201
200
  numFound: 0,
202
- query: this.searchQuery ?? "",
201
+ query: this.searchQuery ?? '',
203
202
  results: [],
204
203
  suggestion: suggest,
205
- };
204
+ }
206
205
  }
207
- this.$emit("loading", false);
208
- this.isLoading = false;
209
- this.$emit("results", this.searchResults);
206
+ this.$emit('loading', false)
207
+ this.isLoading = false
208
+ this.$emit('results', this.searchResults)
210
209
 
211
210
  // wait for the page title to be updated and then fire the search event
212
211
  setTimeout(() => {
@@ -214,78 +213,82 @@ export default {
214
213
  pageTitle: document.title,
215
214
  pageURL: this.$route?.fullPath,
216
215
  location:
217
- this.$route?.path === "/"
218
- ? "Homepage"
219
- : this.$route?.path === "/search"
220
- ? "Search Page"
221
- : this.$route?.path,
216
+ this.$route?.path === '/'
217
+ ? 'Homepage'
218
+ : this.$route?.path === '/search'
219
+ ? 'Search Page'
220
+ : this.$route?.path,
222
221
  label: this.searchQuery,
223
222
  results: this.searchResults.numFound,
224
- };
223
+ }
225
224
  if (this.$gtm) {
226
- this.$gtm.push({ event: "custom.search.site.submit", ...attrs });
225
+ this.$gtm.push({ event: 'custom.search.site.submit', ...attrs })
227
226
  }
228
- }, 300);
227
+ }, 300)
229
228
  },
230
229
  pageChanged(newPageNumber) {
231
- if (this.searchType === "solar") {
230
+ if (this.searchType === 'solar') {
232
231
  // Reset search results before fetching new results
233
- this.resetSearchResults();
234
- this.performSearch(newPageNumber, this.searchQuery, this.pageLimit);
232
+ this.resetSearchResults()
233
+ this.performSearch(newPageNumber, this.searchQuery, this.pageLimit)
235
234
  } else {
236
235
  // Fetch new search results with the updated page number
237
- this.onGoogleSearch(newPageNumber, this.searchQuery);
236
+ this.onGoogleSearch(newPageNumber, this.searchQuery)
238
237
  }
239
238
  },
240
239
  onSearch(e) {
241
- const { path } = this.$route || {};
240
+ const { path } = this.$route || {}
242
241
 
243
242
  // Home page
244
243
  if (
245
- (e?.type === "click" || e?.key == "Enter") &&
244
+ (e?.type === 'click' || e?.key == 'Enter') &&
246
245
  this.searchQuery &&
247
246
  this.searchQuery.length > 2 &&
248
- path === "/"
247
+ path === '/'
249
248
  ) {
250
249
  // Search page
251
- const searchQuery = encodeURIComponent(this.searchQuery);
252
- const origin = window.location.origin;
253
- const hash = window.location.hash;
254
- const pathname = "search";
255
- const URL = `${origin}/${pathname}${hash}?q=${searchQuery}`;
250
+ const searchQuery = encodeURIComponent(this.searchQuery)
251
+ const origin = window.location.origin
252
+ const hash = window.location.hash
253
+ const pathname = 'search'
254
+ const URL = `${origin}/${pathname}${hash}?q=${searchQuery}`
256
255
 
257
256
  // Uncomment below commented code when goes live
258
- window.location.assign(URL);
257
+ window.location.assign(URL)
259
258
  } else {
260
- this.resetSearchResults();
261
- this.$emit("query", this.searchQuery);
259
+ this.resetSearchResults()
260
+ this.$emit('query', this.searchQuery)
262
261
 
263
- if (this.searchType === "solar") {
264
- this.performSearch(1, this.searchQuery, this.pageLimit);
262
+ if (this.searchType === 'solar') {
263
+ this.performSearch(1, this.searchQuery, this.pageLimit)
265
264
  } else {
266
- this.onGoogleSearch(1, this.searchQuery);
265
+ this.onGoogleSearch(1, this.searchQuery)
267
266
  }
268
267
  }
269
268
  },
270
269
  resetSearchResults() {
271
- this.searchResults = null;
270
+ this.searchResults = null
272
271
  },
273
272
  closeSearchResults(ev) {
274
- if (this.isTypeahead && this.searchResults && ev?.target?.id !== "site-search") {
275
- this.resetSearchResults();
276
- this.searchQuery = null;
277
- this.$emit("query", null);
273
+ if (
274
+ this.isTypeahead &&
275
+ this.searchResults &&
276
+ ev?.target?.id !== 'site-search'
277
+ ) {
278
+ this.resetSearchResults()
279
+ this.searchQuery = null
280
+ this.$emit('query', null)
278
281
  }
279
282
  },
280
283
  onChange(e) {
281
284
  if (this.searchQuery && this.searchQuery.length > 2) {
282
- this.onSearch(e);
285
+ this.onSearch(e)
283
286
  }
284
287
  },
285
288
  performSearch(pageNr = 1, searchQuery, pageLimit) {
286
289
  if (searchQuery) {
287
- this.$emit("loading", true);
288
- this.isLoading = true;
290
+ this.$emit('loading', true)
291
+ this.isLoading = true
289
292
  this.contentParser({
290
293
  query: searchQuery,
291
294
  start: pageNr > 1 ? (pageNr - 1) * pageLimit : 0,
@@ -299,100 +302,100 @@ export default {
299
302
  query: searchQuery,
300
303
  results: res.results,
301
304
  suggestion: null,
302
- };
305
+ }
303
306
  } else {
304
307
  this.searchResults = {
305
308
  offset: 0,
306
309
  numFound: 0,
307
- query: this.searchQuery ?? "",
310
+ query: this.searchQuery ?? '',
308
311
  results: [],
309
312
  suggestion: null,
310
- };
313
+ }
311
314
  }
312
- this.$emit("loading", false);
313
- this.isLoading = false;
314
- this.$emit("results", this.searchResults);
315
+ this.$emit('loading', false)
316
+ this.isLoading = false
317
+ this.$emit('results', this.searchResults)
315
318
  // wait for the page title to be updated and then fire the search event
316
319
  setTimeout(() => {
317
320
  const attrs = {
318
321
  pageTitle: document.title,
319
322
  pageURL: this.$route?.fullPath,
320
323
  location:
321
- this.$route?.path === "/"
322
- ? "Homepage"
323
- : this.$route?.path === "/search"
324
- ? "Search Page"
325
- : this.$route?.path,
324
+ this.$route?.path === '/'
325
+ ? 'Homepage'
326
+ : this.$route?.path === '/search'
327
+ ? 'Search Page'
328
+ : this.$route?.path,
326
329
  label: this.searchQuery,
327
330
  results: this.searchResults.numFound,
328
- };
331
+ }
329
332
  if (this.$gtm) {
330
- this.$gtm.push({ event: "custom.search.site.submit", ...attrs });
333
+ this.$gtm.push({ event: 'custom.search.site.submit', ...attrs })
331
334
  }
332
- }, 300);
333
- });
335
+ }, 300)
336
+ })
334
337
  }
335
338
  },
336
339
 
337
340
  // Method to customize google search style
338
341
  setupGoogleStyle() {
339
342
  if (this.googleSearchScript === false) {
340
- const script = document.createElement("script");
341
- script.async = true;
343
+ const script = document.createElement('script')
344
+ script.async = true
342
345
  script.src = this.$config
343
346
  ? this.$config.public.googleSearch
344
- : process.env.GOOGLE__URL;
345
- document.head.appendChild(script);
346
- this.googleSearchScript = true;
347
+ : process.env.GOOGLE__URL
348
+ document.head.appendChild(script)
349
+ this.googleSearchScript = true
347
350
 
348
351
  // Create a new style element
349
- const style = document.createElement("style");
350
- style.id = "searchStyle"; // Assign an ID to the style element
352
+ const style = document.createElement('style')
353
+ style.id = 'searchStyle' // Assign an ID to the style element
351
354
  // The CSS we are going to inject
352
- const cssVar = "table.gssb_c {display: none !important;}";
355
+ const cssVar = 'table.gssb_c {display: none !important;}'
353
356
  // Inject the style element into the head
354
- document.head.appendChild(style);
357
+ document.head.appendChild(style)
355
358
  // Set the text content of the style element to the CSS text
356
- style.textContent = cssVar;
359
+ style.textContent = cssVar
357
360
  }
358
361
  },
359
362
 
360
363
  // function to handle search result link titles
361
364
  handleSearchResultLinkTitle(title) {
362
365
  // Split the title by the '|' character
363
- const titleParts = title.split("|");
366
+ const titleParts = title.split('|')
364
367
 
365
368
  // Remove any leading or trailing whitespace from each part
366
- const cleanedTitleParts = titleParts.map((part) => part.trim());
369
+ const cleanedTitleParts = titleParts.map((part) => part.trim())
367
370
 
368
371
  // Join the cleaned title parts back together without the text after the '|' character
369
- const modifiedTitle = cleanedTitleParts[0]; // Take only the first part before '|'
372
+ const modifiedTitle = cleanedTitleParts[0] // Take only the first part before '|'
370
373
 
371
- return modifiedTitle;
374
+ return modifiedTitle
372
375
  },
373
376
 
374
377
  handleKeyUp(event) {
375
- if (event.key === "Enter" || event.type === "click") {
378
+ if (event.key === 'Enter' || event.type === 'click') {
376
379
  let keyword = event.key
377
380
  ? event.target.value
378
- : document.querySelector('input[name="search"]').value;
381
+ : document.querySelector('input[name="search"]').value
379
382
 
380
383
  // Check if the URL does not contain "/search"
381
- if (keyword && !window.location.href.includes("/search")) {
382
- let origin = window.location.origin;
383
- let hash = window.location.hash;
384
- let pathname = "search";
385
- let URL = origin + "/" + pathname + hash;
384
+ if (keyword && !window.location.href.includes('/search')) {
385
+ let origin = window.location.origin
386
+ let hash = window.location.hash
387
+ let pathname = 'search'
388
+ let URL = origin + '/' + pathname + hash
386
389
  }
387
390
 
388
- this.setupPaginationEvent();
391
+ this.setupPaginationEvent()
389
392
  }
390
393
  },
391
394
  },
392
- };
395
+ }
393
396
  </script>
394
397
  <style lang="scss" scoped>
395
- @import "../../../includes/scss/all";
398
+ @import '../../../includes/scss/all';
396
399
 
397
400
  .wcl-search {
398
401
  position: relative;
@@ -450,7 +453,7 @@ export default {
450
453
  }
451
454
  }
452
455
 
453
- @include mq("xs") {
456
+ @include mq('xs') {
454
457
  .not-extra-small-screen {
455
458
  display: none;
456
459
  }
@@ -540,7 +543,7 @@ export default {
540
543
  padding-left: 32px;
541
544
 
542
545
  &:before {
543
- content: "Search";
546
+ content: 'Search';
544
547
  }
545
548
 
546
549
  @media screen and (max-width: 767px) {
@@ -620,7 +623,7 @@ export default {
620
623
  padding: 0;
621
624
 
622
625
  &::after {
623
- content: " ";
626
+ content: ' ';
624
627
  position: absolute;
625
628
  height: 16px;
626
629
  width: 11px;
@@ -727,7 +730,7 @@ export default {
727
730
  }
728
731
 
729
732
  /* search list end */
730
- @include mq("xs") {
733
+ @include mq('xs') {
731
734
  .not-extra-small-screen {
732
735
  display: none;
733
736
  }
package/src/index.js CHANGED
@@ -2,12 +2,12 @@
2
2
  import Container from './components/Containers/Container/index.vue'
3
3
  import Row from './components/Containers/Row/index.vue'
4
4
  import Column from './components/Containers/Column/index.vue'
5
- import HomepageHeader from './components/Containers/HomepageHeader/index.vue'
5
+ import HomepageHeader from './components/Containers/HomepageHeaderNew/index.vue'
6
6
  import Subheader from './components/Containers/Subheader/index.vue'
7
7
  import SectionGroup from './components/Containers/SectionGroup/index.vue'
8
8
  import CarouselComponent from './components/Containers/Carousel/index.vue'
9
9
 
10
- import AppHeader from './components/Global/AppHeader/index.vue'
10
+ import AppHeader from './components/Global/AppHeaderNew/index.vue'
11
11
  import AppFooter from './components/Global/AppFooter/index.vue'
12
12
  import HeroHeader from './components/Global/HeroHeader/index.vue'
13
13
  import SocialShare from './components/Global/SocialShare/index.vue'
package/src/mock/asbestos-removalists.js CHANGED
@@ -7,7 +7,7 @@ export const arData = [
7
7
  // Phone: '0404073745',
8
8
  // CompanyMobile: '0404 073 745',
9
9
  // CompanyEmailDisp: 'ads.asbestos@gmail.com',
10
- // CompanyWebURLDisp: 'adsasbestosremoval.com.au',
10
+ Website: 'adsasbestosremoval.com.au',
11
11
  // ContactFirstName: 'Ivan',
12
12
  // ContactLastName: 'Silva',
13
13
  PrimaryContactAccountName: 'Ivan Silva',
@@ -25,7 +25,7 @@ export const arData = [
25
25
  // Phone: '0418 854 443',
26
26
  // CompanyMobile: '0418 854 443',
27
27
  // CompanyEmailDisp: 'nieto4@bigpond.net.au',
28
- // CompanyWebURLDisp: '',
28
+ Website: '',
29
29
  // ContactFirstName: 'ERIC',
30
30
  // ContactLastName: 'NIETO',
31
31
  PrimaryContactAccountName: 'ERIC NIETO',
@@ -43,7 +43,7 @@ export const arData = [
43
43
  // Phone: '',
44
44
  // CompanyMobile: '0408474707',
45
45
  // CompanyEmailDisp: 'azz_317@homail.com',
46
- // CompanyWebURLDisp: '',
46
+ Website: '',
47
47
  // ContactFirstName: 'Aaron',
48
48
  // ContactLastName: 'Field',
49
49
  PrimaryContactAccountName: 'Aaron Field',
@@ -61,7 +61,7 @@ export const arData = [
61
61
  // Phone: '0421 280 732',
62
62
  // CompanyMobile: '0401 016 565',
63
63
  // CompanyEmailDisp: 'CITYWIDEDEMOLITION@HOTMAIL.COM',
64
- // CompanyWebURLDisp: 'www.citywidedemolition.com.au',
64
+ Website: 'www.citywidedemolition.com.au',
65
65
  // ContactFirstName: 'Eman',
66
66
  // ContactLastName: 'Al Baarini',
67
67
  PrimaryContactAccountName: 'Eman Al Baarini',
@@ -79,7 +79,7 @@ export const arData = [
79
79
  // Phone: '(03) 5444 3261',
80
80
  // CompanyMobile: '0409 012 780',
81
81
  // CompanyEmailDisp: 'admin@ashworthdemolition.com.au',
82
- // CompanyWebURLDisp: '',
82
+ Website: '',
83
83
  // ContactFirstName: 'Dean',
84
84
  // ContactLastName: 'Ashworth',
85
85
  PrimaryContactAccountName: 'Dean Ashworth',
@@ -97,7 +97,7 @@ export const arData = [
97
97
  // Phone: '0438531164',
98
98
  // CompanyMobile: '',
99
99
  // CompanyEmailDisp: 'daniel.dehaan@ventia.com',
100
- // CompanyWebURLDisp: 'www.ventia.com.au',
100
+ Website: 'www.ventia.com.au',
101
101
  // ContactFirstName: 'Daniel',
102
102
  // ContactLastName: 'DeHaan',
103
103
  PrimaryContactAccountName: 'Daniel DeHaan',
@@ -115,7 +115,7 @@ export const arData = [
115
115
  // Phone: '0404073745',
116
116
  // CompanyMobile: '0404 073 745',
117
117
  // CompanyEmailDisp: 'ads.asbestos@gmail.com',
118
- // CompanyWebURLDisp: 'http://www.adsasbestosremoval.com.au',
118
+ Website: 'http://www.adsasbestosremoval.com.au',
119
119
  // ContactFirstName: '',
120
120
  // ContactLastName: '',
121
121
  PrimaryContactAccountName: '',
@@ -133,7 +133,7 @@ export const arData = [
133
133
  // Phone: '0404073745',
134
134
  // CompanyMobile: '0404 073 745',
135
135
  // CompanyEmailDisp: 'ads.asbestos@gmail.com',
136
- // CompanyWebURLDisp: 'http://www.adsasbestosremoval.com.au',
136
+ Website: 'http://www.adsasbestosremoval.com.au',
137
137
  // ContactFirstName: 'Ivan',
138
138
  // ContactLastName: 'Silva',
139
139
  PrimaryContactAccountName: 'Ivan Silva',
@@ -151,7 +151,7 @@ export const arData = [
151
151
  // Phone: '0404073745',
152
152
  // CompanyMobile: '0404 073 745',
153
153
  // CompanyEmailDisp: 'ads.asbestos@gmail.com',
154
- // CompanyWebURLDisp: 'http://www.adsasbestosremoval.com.au',
154
+ Website: 'http://www.adsasbestosremoval.com.au',
155
155
  // ContactFirstName: 'Ivan',
156
156
  // ContactLastName: 'Silva',
157
157
  PrimaryContactAccountName: 'Ivan Silva',
@@ -169,7 +169,7 @@ export const arData = [
169
169
  // Phone: '0404073745',
170
170
  // CompanyMobile: '0404 073 745',
171
171
  // CompanyEmailDisp: 'ads.asbestos@gmail.com',
172
- // CompanyWebURLDisp: 'http://www.adsasbestosremoval.com.au',
172
+ Website: 'http://www.adsasbestosremoval.com.au',
173
173
  // ContactFirstName: 'Ivan',
174
174
  // ContactLastName: 'Silva',
175
175
  PrimaryContactAccountName: 'Ivan Silva',
@@ -187,7 +187,7 @@ export const arData = [
187
187
  // Phone: '0404073745',
188
188
  // CompanyMobile: '0404 073 745',
189
189
  // CompanyEmailDisp: 'ads.asbestos@gmail.com',
190
- // CompanyWebURLDisp: 'http://www.adsasbestosremoval.com.au',
190
+ Website: 'http://www.adsasbestosremoval.com.au',
191
191
  // ContactFirstName: '',
192
192
  // ContactLastName: '',
193
193
  PrimaryContactAccountName: '',
@@ -205,7 +205,7 @@ export const arData = [
205
205
  // Phone: '0404073745',
206
206
  // CompanyMobile: '0404 073 745',
207
207
  // CompanyEmailDisp: 'ads.asbestos@gmail.com',
208
- // CompanyWebURLDisp: 'http://www.adsasbestosremoval.com.au',
208
+ Website: 'http://www.adsasbestosremoval.com.au',
209
209
  // ContactFirstName: 'Ivan',
210
210
  // ContactLastName: 'Silva',
211
211
  PrimaryContactAccountName: 'Ivan Silva',
@@ -223,7 +223,7 @@ export const arData = [
223
223
  // Phone: '0405 083 197',
224
224
  // CompanyMobile: '0405 083 197',
225
225
  // CompanyEmailDisp: 'steve@ssmasbestos.com.au',
226
- // CompanyWebURLDisp: 'www.ssm-asbestosremoval.com',
226
+ Website: 'www.ssm-asbestosremoval.com',
227
227
  // ContactFirstName: 'Steven',
228
228
  // ContactLastName: 'McCarthy',
229
229
  PrimaryContactAccountName: 'Steven McCarthy',
@@ -241,7 +241,7 @@ export const arData = [
241
241
  // Phone: '0450582103',
242
242
  // CompanyMobile: '0450582103',
243
243
  // CompanyEmailDisp: 'gpasbestos@outlook.com',
244
- // CompanyWebURLDisp: '',
244
+ Website: '',
245
245
  // ContactFirstName: 'Carlos',
246
246
  // ContactLastName: 'Rios',
247
247
  PrimaryContactAccountName: 'Carlos Rios',