@worksafevictoria/wcl7.5 1.1.0-beta.39 → 1.1.0-beta.40

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 (7) hide show
  1. package/package.json +1 -1
  2. package/src/components/Containers/HomepageHeader/index.vue +25 -11
  3. package/src/components/Global/AppHeader/index.vue +52 -54
  4. package/src/components/Global/HeroHeader/index.vue +33 -31
  5. package/src/components/Paragraphs/BrowseContent/index.vue +45 -31
  6. package/src/components/Paragraphs/Directory/index.vue +38 -27
  7. package/src/components/SubComponents/ResourceGroup/index.vue +91 -69
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worksafevictoria/wcl7.5",
3
- "version": "1.1.0-beta.39",
3
+ "version": "1.1.0-beta.40",
4
4
  "main": "src/index.js",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/components/Containers/HomepageHeader/index.vue CHANGED
@@ -62,28 +62,35 @@ export default {
62
62
  components: {
63
63
  Search,
64
64
  CtaButton,
65
- HeroHeader
65
+ HeroHeader,
66
66
  },
67
67
  props: {
68
68
  contentParser: {
69
69
  type: Function,
70
- required: true
70
+ required: true,
71
71
  },
72
72
  heroHeader: {
73
73
  type: Object,
74
- required: true
74
+ required: true,
75
75
  },
76
76
  fetchMenu: {
77
77
  type: Function,
78
- required: true
79
- }
78
+ required: true,
79
+ },
80
80
  },
81
- async fetch() {
81
+ // TODO useAsyncData <script setup>
82
+ // async fetch() {
83
+ // console.log("NEVA")
84
+ // await this.renderMenu()
85
+ // },
86
+ // Temp use of mounted to replace fetch
87
+ async mounted() {
82
88
  await this.renderMenu()
83
89
  },
90
+
84
91
  data: () => ({
85
92
  links: [],
86
- earthIcon
93
+ earthIcon,
87
94
  }),
88
95
  methods: {
89
96
  async renderMenu() {
@@ -91,11 +98,11 @@ export default {
91
98
  this.links = (Array.isArray(menu) ? menu : []).map((item) => {
92
99
  return {
93
100
  text: item.title,
94
- path: item.relative || item.absolute
101
+ path: item.relative || item.absolute,
95
102
  }
96
103
  })
97
- }
98
- }
104
+ },
105
+ },
99
106
  }
100
107
  </script>
101
108
  <style lang="scss" scoped>
@@ -110,6 +117,7 @@ export default {
110
117
  font-size: 32px;
111
118
  line-height: 32px;
112
119
  }
120
+
113
121
  @media screen and (max-width: 767px) {
114
122
  font-size: 36px;
115
123
  line-height: 36px;
@@ -134,7 +142,9 @@ export default {
134
142
  margin-top: 32px;
135
143
  }
136
144
  }
145
+
137
146
  margin-left: 0 !important;
147
+
138
148
  &:last-of-type {
139
149
  img {
140
150
  position: absolute;
@@ -146,9 +156,11 @@ export default {
146
156
 
147
157
  &__search {
148
158
  padding-right: 15px;
159
+
149
160
  @include mq('xs') {
150
161
  padding-right: 0;
151
162
  }
163
+
152
164
  :deep(.gsc-results-wrapper-visible) {
153
165
  display: none !important;
154
166
  }
@@ -159,7 +171,9 @@ export default {
159
171
  .iebtn {
160
172
  bottom: 280px;
161
173
  left: 650px;
162
- } /* IE11 */
174
+ }
175
+
176
+ /* IE11 */
163
177
 
164
178
  @media screen\9, screen and (max-width: 1150px) {
165
179
  .iebtn {
package/src/components/Global/AppHeader/index.vue CHANGED
@@ -7,7 +7,7 @@
7
7
  <div
8
8
  v-if="
9
9
  (!isSecondLevelOpen && screen === 'desktop') ||
10
- (!isMobileMenuOpen && screen === 'mobile')
10
+ (!isMobileMenuOpen && screen === 'mobile')
11
11
  "
12
12
  class="app-header__app-branding"
13
13
  >
@@ -29,7 +29,7 @@
29
29
  <button
30
30
  v-if="
31
31
  (isSecondLevelOpen && screen === 'desktop') ||
32
- (isMobileMenuOpen && screen === 'mobile')
32
+ (isMobileMenuOpen && screen === 'mobile')
33
33
  "
34
34
  ref="closeMenuButton"
35
35
  class="dark"
@@ -56,7 +56,7 @@
56
56
  <nav
57
57
  v-if="isMobileMenuOpen || screen === 'desktop'"
58
58
  :class="{
59
- 'styled-scrollbar': screen === 'mobile' && !isSecondLevelOpen
59
+ 'styled-scrollbar': screen === 'mobile' && !isSecondLevelOpen,
60
60
  }"
61
61
  >
62
62
  <ul class="app-header__nav-menu">
@@ -75,7 +75,7 @@
75
75
  @click.prevent="
76
76
  firstLevelClick(
77
77
  firstLevelLink,
78
- `firstLevelMenuItem-${parentIndex}`
78
+ `firstLevelMenuItem-${parentIndex}`,
79
79
  )
80
80
  "
81
81
  @mouseover="mouseHover('firstLevelMenuItem', parentIndex)"
@@ -114,7 +114,8 @@
114
114
  <div
115
115
  class="sub-nav-container__wrap"
116
116
  :class="{
117
- 'styled-scrollbar': screen === 'mobile' && isSecondLevelOpen
117
+ 'styled-scrollbar':
118
+ screen === 'mobile' && isSecondLevelOpen,
118
119
  }"
119
120
  >
120
121
  <div
@@ -136,12 +137,11 @@
136
137
  <div class="selected-items">
137
138
  <ul v-if="firstLevelLink.below" class="sub-nav-group">
138
139
  <li
139
- v-for="(secondLevelLink,
140
- secondIndex) in firstLevelLink.below"
140
+ v-for="(
141
+ secondLevelLink, secondIndex
142
+ ) in firstLevelLink.below"
141
143
  :key="secondLevelLink.key"
142
- :ref="
143
- `secondLevelMenuItem-${parentIndex}-${secondIndex}`
144
- "
144
+ :ref="`secondLevelMenuItem-${parentIndex}-${secondIndex}`"
145
145
  class="sub-nav-parent-item"
146
146
  >
147
147
  <a
@@ -154,41 +154,41 @@
154
154
  searchFocus(
155
155
  secondIndex,
156
156
  firstLevelLink.below.length,
157
- $event
157
+ $event,
158
158
  )
159
159
  "
160
160
  @click.prevent="
161
161
  secondLevelClick(
162
162
  secondLevelLink,
163
- `secondLevelMenuItem-${parentIndex}-${secondIndex}`
163
+ `secondLevelMenuItem-${parentIndex}-${secondIndex}`,
164
164
  )
165
165
  "
166
166
  @mouseover="
167
167
  mouseHover(
168
168
  'secondLevelMenuItem',
169
169
  parentIndex,
170
- secondIndex
170
+ secondIndex,
171
171
  )
172
172
  "
173
173
  @mouseleave="
174
174
  mouseLeave(
175
175
  'secondLevelMenuItem',
176
176
  parentIndex,
177
- secondIndex
177
+ secondIndex,
178
178
  )
179
179
  "
180
180
  @focusin="
181
181
  mouseHover(
182
182
  'secondLevelMenuItem',
183
183
  parentIndex,
184
- secondIndex
184
+ secondIndex,
185
185
  )
186
186
  "
187
187
  @focusout="
188
188
  mouseLeave(
189
189
  'secondLevelMenuItem',
190
190
  parentIndex,
191
- secondIndex
191
+ secondIndex,
192
192
  )
193
193
  "
194
194
  >
@@ -213,35 +213,35 @@
213
213
  searchFocus(
214
214
  secondIndex,
215
215
  firstLevelLink.below.length,
216
- $event
216
+ $event,
217
217
  )
218
218
  "
219
219
  @mouseover.native="
220
220
  mouseHover(
221
221
  'secondLevelMenuItem',
222
222
  parentIndex,
223
- secondIndex
223
+ secondIndex,
224
224
  )
225
225
  "
226
226
  @mouseleave.native="
227
227
  mouseLeave(
228
228
  'secondLevelMenuItem',
229
229
  parentIndex,
230
- secondIndex
230
+ secondIndex,
231
231
  )
232
232
  "
233
233
  @focusin.native="
234
234
  mouseHover(
235
235
  'secondLevelMenuItem',
236
236
  parentIndex,
237
- secondIndex
237
+ secondIndex,
238
238
  )
239
239
  "
240
240
  @focusout.native="
241
241
  mouseLeave(
242
242
  'secondLevelMenuItem',
243
243
  parentIndex,
244
- secondIndex
244
+ secondIndex,
245
245
  )
246
246
  "
247
247
  @click.native="fireAnalytics(secondLevelLink)"
@@ -253,9 +253,7 @@
253
253
  <div class="selected-title">
254
254
  <nuxt-link
255
255
  v-if="secondLevelLink.relative"
256
- :ref="
257
- `secondLevelSelectedTitle-${parentIndex}-${secondIndex}`
258
- "
256
+ :ref="`secondLevelSelectedTitle-${parentIndex}-${secondIndex}`"
259
257
  :to="secondLevelLink.relative"
260
258
  class="dark"
261
259
  @click.native="fireAnalytics(secondLevelLink)"
@@ -271,12 +269,11 @@
271
269
  class="sub-nav-group"
272
270
  >
273
271
  <li
274
- v-for="(thirdLevelLink,
275
- thirdIndex) in secondLevelLink.below"
272
+ v-for="(
273
+ thirdLevelLink, thirdIndex
274
+ ) in secondLevelLink.below"
276
275
  :key="thirdLevelLink.key"
277
- :ref="
278
- `thirdLevelMenuItem-${parentIndex}-${secondIndex}-${thirdIndex}`
279
- "
276
+ :ref="`thirdLevelMenuItem-${parentIndex}-${secondIndex}-${thirdIndex}`"
280
277
  >
281
278
  <nuxt-link
282
279
  v-if="thirdLevelLink.relative"
@@ -286,7 +283,7 @@
286
283
  searchFocus(
287
284
  thirdIndex,
288
285
  secondLevelLink.below.length,
289
- $event
286
+ $event,
290
287
  )
291
288
  "
292
289
  @mouseover.native="
@@ -294,7 +291,7 @@
294
291
  'thirdLevelMenuItem',
295
292
  parentIndex,
296
293
  secondIndex,
297
- thirdIndex
294
+ thirdIndex,
298
295
  )
299
296
  "
300
297
  @mouseleave.native="
@@ -302,7 +299,7 @@
302
299
  'thirdLevelMenuItem',
303
300
  parentIndex,
304
301
  secondIndex,
305
- thirdIndex
302
+ thirdIndex,
306
303
  )
307
304
  "
308
305
  @focusin.native="
@@ -310,7 +307,7 @@
310
307
  'thirdLevelMenuItem',
311
308
  parentIndex,
312
309
  secondIndex,
313
- thirdIndex
310
+ thirdIndex,
314
311
  )
315
312
  "
316
313
  @focusout.native="
@@ -318,7 +315,7 @@
318
315
  'thirdLevelMenuItem',
319
316
  parentIndex,
320
317
  secondIndex,
321
- thirdIndex
318
+ thirdIndex,
322
319
  )
323
320
  "
324
321
  @click.native="
@@ -433,25 +430,25 @@ export default {
433
430
  CaretDown,
434
431
  CaretLeft,
435
432
  MenuIcon,
436
- SearchIcon
433
+ SearchIcon,
437
434
  },
438
435
  props: {
439
436
  headerMenu: {
440
437
  type: Array,
441
- required: true
438
+ required: true,
442
439
  },
443
440
  contentParser: {
444
441
  type: Function,
445
- required: true
442
+ required: true,
446
443
  },
447
444
  isWorkWell: {
448
445
  type: Boolean,
449
- default: false
446
+ default: false,
450
447
  },
451
448
  authenticated: {
452
449
  type: Boolean,
453
- default: false
454
- }
450
+ default: false,
451
+ },
455
452
  },
456
453
  data() {
457
454
  return {
@@ -472,7 +469,7 @@ export default {
472
469
  CaretLeft,
473
470
  MenuIcon,
474
471
  windowWidth: 0,
475
- searchQuery: null
472
+ searchQuery: null,
476
473
  }
477
474
  },
478
475
  computed: {
@@ -486,7 +483,7 @@ export default {
486
483
  },
487
484
  isChrome() {
488
485
  return !!window.chrome
489
- }
486
+ },
490
487
  },
491
488
  watch: {
492
489
  $route() {
@@ -503,7 +500,7 @@ export default {
503
500
  this.isMobileMenuOpen = true
504
501
  }
505
502
  }
506
- }
503
+ },
507
504
  },
508
505
  destroyed() {
509
506
  window.removeEventListener('resize', this.screenWidth)
@@ -514,12 +511,13 @@ export default {
514
511
  this.screenWidth()
515
512
  }
516
513
  if (this.$nuxt) {
517
- this.$nuxt.$on('site-search', (query) => {
518
- this.searchQuery = query
519
- if (query) {
520
- this.showSearch()
521
- }
522
- })
514
+ //console.log('🚀 ~ this.$nuxt.$on ~ this.$nuxt:', this.$nuxt)
515
+ // this.$nuxt.$on('site-search', (query) => {
516
+ // this.searchQuery = query
517
+ // if (query) {
518
+ // this.showSearch()
519
+ // }
520
+ // })
523
521
  }
524
522
  },
525
523
  methods: {
@@ -658,7 +656,7 @@ export default {
658
656
  refID,
659
657
  parentIndex,
660
658
  secondIndex,
661
- thirdIndex
659
+ thirdIndex,
662
660
  )
663
661
  if (theLI) {
664
662
  let A = theLI.getElementsByTagName('A')[0]
@@ -670,7 +668,7 @@ export default {
670
668
  refID,
671
669
  parentIndex,
672
670
  secondIndex,
673
- thirdIndex
671
+ thirdIndex,
674
672
  )
675
673
  if (theLI) {
676
674
  let A = theLI.getElementsByTagName('A')[0]
@@ -860,7 +858,7 @@ export default {
860
858
  event: 'custom.interaction.megamenu.click',
861
859
  group: 'Mega Menu',
862
860
  label: content.title,
863
- url: content.relative
861
+ url: content.relative,
864
862
  }
865
863
  // this.$store.dispatch('tracking/event', payload)
866
864
  },
@@ -868,8 +866,8 @@ export default {
868
866
  if (this.$nuxt) {
869
867
  this.$nuxt.$emit('scrollToTop')
870
868
  }
871
- }
872
- }
869
+ },
870
+ },
873
871
  }
874
872
  </script>
875
873
 
package/src/components/Global/HeroHeader/index.vue CHANGED
@@ -48,7 +48,8 @@
48
48
  class="wcl-hero-header__content-wrapper__content-col"
49
49
  :md="7"
50
50
  :class="{
51
- [`wcl-hero-header__content-wrapper__content-col--split`]: $slots.side
51
+ [`wcl-hero-header__content-wrapper__content-col--split`]:
52
+ $slots.side,
52
53
  }"
53
54
  >
54
55
  <breadcrumb
@@ -98,7 +99,7 @@
98
99
  >
99
100
  </column>
100
101
  </row>
101
- <social-share v-show="showSocial && type !== 'hero'" :rtl="rtl" />
102
+ <social-share v-show="showSocial && type !== 'hero'" :rtl="rtl" />
102
103
  </container>
103
104
  </div>
104
105
  <!-- Type Default -->
@@ -176,63 +177,63 @@ export default {
176
177
  CtaButton,
177
178
  HeroHeaderChevron,
178
179
  RichText,
179
- Icon
180
+ Icon,
180
181
  },
181
182
  props: {
182
183
  type: {
183
184
  type: String,
184
- default: 'default'
185
+ default: 'default',
185
186
  },
186
187
  title: {
187
188
  type: String,
188
- default: ''
189
+ default: '',
189
190
  },
190
191
  description: {
191
192
  type: String,
192
- default: ''
193
+ default: '',
193
194
  },
194
195
  image: {
195
196
  type: Object,
196
- default: () => {}
197
+ default: () => {},
197
198
  },
198
199
  cta: {
199
200
  type: Object,
200
- default: () => {}
201
+ default: () => {},
201
202
  },
202
203
  bgColor: {
203
204
  type: Boolean,
204
- default: false
205
+ default: false,
205
206
  },
206
207
  breadcrumbItems: {
207
208
  type: Array,
208
- default: () => []
209
+ default: () => [],
209
210
  },
210
211
  rtl: {
211
212
  type: Boolean,
212
- default: false
213
+ default: false,
213
214
  },
214
215
  workwell: {
215
216
  type: Boolean,
216
- default: false
217
+ default: false,
217
218
  },
218
219
  showBreadcrumb: {
219
220
  type: Boolean,
220
- default: true
221
+ default: true,
221
222
  },
222
223
  showMask: {
223
224
  type: Boolean,
224
- default: true
225
+ default: true,
225
226
  },
226
227
  showSocial: {
227
228
  type: Boolean,
228
- default: true
229
- }
229
+ default: true,
230
+ },
230
231
  },
231
232
  data() {
232
233
  return {
233
234
  socialShareToggle: false,
234
235
  HeroHeaderChevron,
235
- CaretDown
236
+ CaretDown,
236
237
  }
237
238
  },
238
239
  computed: {
@@ -269,7 +270,7 @@ export default {
269
270
  // }
270
271
  // }
271
272
  return this.title
272
- }
273
+ },
273
274
  // Will reintroduce if business requirement
274
275
  // strippedDescription() {
275
276
  // let strippedString = this.description.replace(/(<([^>]+)>)/gi, '')
@@ -281,15 +282,16 @@ export default {
281
282
  },
282
283
  mounted() {
283
284
  if (this.$nuxt?.$on) {
284
- this.$nuxt.$on('scrollToTop', () => {
285
- setTimeout(() => {
286
- const title = this.$refs.title
287
- if (title) {
288
- title.$el.setAttribute('tabindex', 0)
289
- title.$el.focus()
290
- }
291
- }, 500)
292
- })
285
+ // console.log('🚀 ~ this.$nuxt.$on ~ this.$nuxt:', this.$nuxt)
286
+ // this.$nuxt.$on('scrollToTop', () => {
287
+ // setTimeout(() => {
288
+ // const title = this.$refs.title
289
+ // if (title) {
290
+ // title.$el.setAttribute('tabindex', 0)
291
+ // title.$el.focus()
292
+ // }
293
+ // }, 500)
294
+ // })
293
295
  }
294
296
  },
295
297
  beforeDestroy() {
@@ -314,20 +316,20 @@ export default {
314
316
  ev.target.scrollIntoView({
315
317
  behavior: 'smooth',
316
318
  alignToTop: true,
317
- block: 'start'
319
+ block: 'start',
318
320
  })
319
321
  }
320
322
  },
321
323
  fireGTM() {
322
324
  let attrs = {
323
325
  label: this.cta.uri,
324
- document_title: this.cta.filename
326
+ document_title: this.cta.filename,
325
327
  }
326
328
  if (this.$gtm) {
327
329
  this.$gtm.push({ event: 'custom.interaction.download', ...attrs })
328
330
  }
329
- }
330
- }
331
+ },
332
+ },
331
333
  }
332
334
  </script>
333
335
  <style lang="scss" scoped>