@worksafevictoria/wcl7.5 1.3.0 → 1.5.0

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 (29) hide show
  1. package/lib/utility.js +1 -1
  2. package/package.json +1 -2
  3. package/src/components/Common/CardGrid/index.vue +17 -2
  4. package/src/components/Common/CardGridItem/index.vue +20 -10
  5. package/src/components/Containers/Carousel/index.stories.js +30 -0
  6. package/src/components/Containers/Carousel/index.vue +165 -0
  7. package/src/components/Containers/HomepageHeaderNew/index.stories.js +75 -0
  8. package/src/components/Containers/HomepageHeaderNew/index.vue +198 -0
  9. package/src/components/Containers/Subheader/index.vue +8 -2
  10. package/src/components/Global/AppFooter/index.vue +30 -28
  11. package/src/components/Global/AppHeader/index.vue +9 -10
  12. package/src/components/Global/AppHeaderNew/index.vue +313 -242
  13. package/src/components/Global/AppHeaderNew/styles.scss +26 -0
  14. package/src/components/Global/ContrastMode/index.vue +1 -1
  15. package/src/components/Global/Cookies/index.vue +7 -0
  16. package/src/components/Global/HeroHeader/index.vue +12 -13
  17. package/src/components/Paragraphs/Accordion/AccordionItem/index.vue +21 -17
  18. package/src/components/Paragraphs/BrowseContent/index.vue +1 -5
  19. package/src/components/Paragraphs/Directory/Records/ISP/index.vue +2 -2
  20. package/src/components/Paragraphs/ListGroup/index.vue +55 -46
  21. package/src/components/Paragraphs/Statistics/index.vue +1 -0
  22. package/src/components/Paragraphs/TabbedCards/index.vue +42 -38
  23. package/src/components/SubComponents/CardGroup/index.vue +33 -27
  24. package/src/components/SubComponents/CtaButton/index.vue +27 -25
  25. package/src/components/SubComponents/ResourceGroup/index.vue +13 -4
  26. package/src/includes/scss/mixins/src/grid.scss +4 -2
  27. package/src/includes/scss/mixins/src/units.scss +25 -4
  28. package/src/mock/app-header-new.js +27 -15
  29. package/src/mock/carousel-items.js +57 -0
package/src/components/Global/AppHeaderNew/index.vue CHANGED
@@ -2,7 +2,7 @@
2
2
  <div>
3
3
  <header
4
4
  v-if="headerMenu"
5
- :class="'app-header' + (screen === 'mobile' ? ' ' + 'isMobile' : '')"
5
+ :class="'app-header' + (this.screen === 'mobile' ? ' ' + 'isMobile' : '')"
6
6
  >
7
7
  <!-- Top menu -->
8
8
  <div class="logo">
@@ -82,7 +82,7 @@
82
82
  <div class="app-header__close-button mobile-close">
83
83
  <button
84
84
  v-if="
85
- (isMobileMenuOpen && screen === 'mobile' && !isSecondLevelOpen)
85
+ (isMobileMenuOpen && this.screen === 'mobile' && !isSecondLevelOpen)
86
86
  "
87
87
  ref="closeMenuButton"
88
88
  class="dark"
@@ -94,17 +94,17 @@
94
94
  </div>
95
95
  <div
96
96
  v-if="
97
- (!isSecondLevelOpen && screen === 'desktop') ||
98
- (!isMobileMenuOpen && screen === 'mobile')
97
+ (!isSecondLevelOpen && this.screen === 'desktop') ||
98
+ (!isMobileMenuOpen && this.screen === 'mobile')
99
99
  "
100
100
  class="app-header__app-branding"
101
101
  >
102
102
 
103
103
  </div>
104
104
  <nav
105
- v-if="isMobileMenuOpen || screen === 'desktop'"
105
+ v-if="isMobileMenuOpen || this.screen === 'desktop'"
106
106
  :class="{
107
- 'styled-scrollbar': screen === 'mobile' && !isSecondLevelOpen,
107
+ 'styled-scrollbar': this.screen === 'mobile' && !isSecondLevelOpen,
108
108
  }"
109
109
  >
110
110
  <ul class="app-header__nav-menu" id="navitems">
@@ -120,12 +120,7 @@
120
120
  href
121
121
  role="button"
122
122
  aria-expanded="false"
123
- @click.prevent="
124
- firstLevelClick(
125
- firstLevelLink,
126
- `firstLevelMenuItem-${parentIndex}`,
127
- )
128
- "
123
+ @click.prevent="firstLevelClick(firstLevelLink,`firstLevelMenuItem-${parentIndex}`,)"
129
124
  @mouseover="mouseHover('firstLevelMenuItem', parentIndex)"
130
125
  @mouseleave="mouseLeave('firstLevelMenuItem', parentIndex)"
131
126
  @focusin="mouseHover('firstLevelMenuItem', parentIndex)"
@@ -133,7 +128,7 @@
133
128
  >
134
129
  <span>{{ firstLevelLink.title }}</span>
135
130
 
136
- <caret-down v-if="screen === 'desktop'" class="caret-down" />
131
+ <caret-down v-if="this.screen === 'desktop'" class="caret-down" />
137
132
  <caret-right
138
133
  v-else-if="!isSecondLevelOpen && !isThirdLevelOpen"
139
134
  class="caret-right"
@@ -142,6 +137,7 @@
142
137
  <a
143
138
  v-else-if="!firstLevelLink.relative"
144
139
  :href="firstLevelLink.absolute"
140
+ target="_blank"
145
141
  class="dark"
146
142
  >
147
143
  <span>{{ firstLevelLink.title }}</span>
@@ -157,7 +153,7 @@
157
153
  <div v-if="isSecondLevelOpen" class="sub-nav-container">
158
154
  <div class="app-header__close-button">
159
155
  <button
160
- v-if="screen === 'mobile'"
156
+ v-if="this.screen === 'mobile'"
161
157
  ref="menuBackButton"
162
158
  class="dark"
163
159
  @click="mobileGoBack"
@@ -168,8 +164,8 @@
168
164
  </button>
169
165
  <button
170
166
  v-if="
171
- (isSecondLevelOpen && screen === 'desktop') ||
172
- (isMobileMenuOpen && screen === 'mobile')
167
+ (isSecondLevelOpen && this.screen === 'desktop') ||
168
+ (isMobileMenuOpen && this.screen === 'mobile')
173
169
  "
174
170
  ref="closeMenuButton"
175
171
  class="dark"
@@ -181,13 +177,13 @@
181
177
  </div>
182
178
  <div
183
179
  class="sub-nav-container__inner"
184
- :class="{ 'styled-scrollbar': screen === 'desktop' }"
180
+ :class="{ 'styled-scrollbar': this.screen === 'desktop' }"
185
181
  >
186
182
  <div
187
183
  class="sub-nav-container__wrap"
188
184
  :class="{
189
185
  'styled-scrollbar':
190
- screen === 'mobile' && isSecondLevelOpen,
186
+ this.screen === 'mobile' && isSecondLevelOpen,
191
187
  }"
192
188
  >
193
189
  <div
@@ -222,51 +218,16 @@
222
218
  class="dark"
223
219
  role="button"
224
220
  aria-expanded="false"
225
- @keydown.tab="
226
- searchFocus(
227
- secondIndex,
228
- firstLevelLink.below.length,
229
- $event,
230
- )
231
- "
232
- @click.prevent="
233
- secondLevelClick(
234
- secondLevelLink,
235
- `secondLevelMenuItem-${parentIndex}-${secondIndex}`,
236
- )
237
- "
238
- @mouseover="
239
- mouseHover(
240
- 'secondLevelMenuItem',
241
- parentIndex,
242
- secondIndex,
243
- )
244
- "
245
- @mouseleave="
246
- mouseLeave(
247
- 'secondLevelMenuItem',
248
- parentIndex,
249
- secondIndex,
250
- )
251
- "
252
- @focusin="
253
- mouseHover(
254
- 'secondLevelMenuItem',
255
- parentIndex,
256
- secondIndex,
257
- )
258
- "
259
- @focusout="
260
- mouseLeave(
261
- 'secondLevelMenuItem',
262
- parentIndex,
263
- secondIndex,
264
- )
265
- "
221
+ @keydown.tab="searchFocus(secondIndex,firstLevelLink.below.length,$event,)"
222
+ @click.prevent="secondLevelClick(secondLevelLink,`secondLevelMenuItem-${parentIndex}-${secondIndex}`,)"
223
+ @mouseover="mouseHover('secondLevelMenuItem',parentIndex,secondIndex,)"
224
+ @mouseleave="mouseLeave('secondLevelMenuItem',parentIndex,secondIndex,)"
225
+ @focusin="mouseHover('secondLevelMenuItem',parentIndex,secondIndex,)"
226
+ @focusout="mouseLeave('secondLevelMenuItem',parentIndex,secondIndex,)"
266
227
  >
267
228
  <span>{{ secondLevelLink.title }}</span>
268
229
  <caret-right
269
- v-if="!(screen === 'mobile' && isThirdLevelOpen)"
230
+ v-if="!(this.screen === 'mobile' && isThirdLevelOpen)"
270
231
  class="caret-right"
271
232
  />
272
233
  </a>
@@ -281,41 +242,11 @@
281
242
  v-else
282
243
  class="dark"
283
244
  :to="secondLevelLink.relative"
284
- @keydown.tab.native="
285
- searchFocus(
286
- secondIndex,
287
- firstLevelLink.below.length,
288
- $event,
289
- )
290
- "
291
- @mouseover.native="
292
- mouseHover(
293
- 'secondLevelMenuItem',
294
- parentIndex,
295
- secondIndex,
296
- )
297
- "
298
- @mouseleave.native="
299
- mouseLeave(
300
- 'secondLevelMenuItem',
301
- parentIndex,
302
- secondIndex,
303
- )
304
- "
305
- @focusin.native="
306
- mouseHover(
307
- 'secondLevelMenuItem',
308
- parentIndex,
309
- secondIndex,
310
- )
311
- "
312
- @focusout.native="
313
- mouseLeave(
314
- 'secondLevelMenuItem',
315
- parentIndex,
316
- secondIndex,
317
- )
318
- "
245
+ @keydown.tab.native="searchFocus(secondIndex,firstLevelLink.below.length,$event,)"
246
+ @mouseover.native="mouseHover('secondLevelMenuItem',parentIndex,secondIndex,)"
247
+ @mouseleave.native="mouseLeave('secondLevelMenuItem',parentIndex,secondIndex,)"
248
+ @focusin.native="mouseHover('secondLevelMenuItem',parentIndex,secondIndex,)"
249
+ @focusout.native="mouseLeave('secondLevelMenuItem',parentIndex,secondIndex,)"
319
250
  @click.native="fireAnalytics(secondLevelLink.title, secondLevelLink.relative)"
320
251
  >
321
252
  <span>{{ secondLevelLink.title }}</span>
@@ -351,48 +282,12 @@
351
282
  v-if="thirdLevelLink.relative"
352
283
  class="dark"
353
284
  :to="thirdLevelLink.relative"
354
- @keydown.tab.native="
355
- searchFocus(
356
- thirdIndex,
357
- secondLevelLink.below.length,
358
- $event,
359
- )
360
- "
361
- @mouseover.native="
362
- mouseHover(
363
- 'thirdLevelMenuItem',
364
- parentIndex,
365
- secondIndex,
366
- thirdIndex,
367
- )
368
- "
369
- @mouseleave.native="
370
- mouseLeave(
371
- 'thirdLevelMenuItem',
372
- parentIndex,
373
- secondIndex,
374
- thirdIndex,
375
- )
376
- "
377
- @focusin.native="
378
- mouseHover(
379
- 'thirdLevelMenuItem',
380
- parentIndex,
381
- secondIndex,
382
- thirdIndex,
383
- )
384
- "
385
- @focusout.native="
386
- mouseLeave(
387
- 'thirdLevelMenuItem',
388
- parentIndex,
389
- secondIndex,
390
- thirdIndex,
391
- )
392
- "
393
- @click.native="
394
- fireAnalytics(thirdLevelLink.title, thirdLevelLink.relative)
395
- "
285
+ @keydown.tab.native="searchFocus(thirdIndex,secondLevelLink.below.length,$event,)"
286
+ @mouseover.native="mouseHover('thirdLevelMenuItem',parentIndex,secondIndex,thirdIndex,)"
287
+ @mouseleave.native="mouseLeave('thirdLevelMenuItem',parentIndex,secondIndex,thirdIndex,)"
288
+ @focusin.native="mouseHover('thirdLevelMenuItem',parentIndex,secondIndex,thirdIndex,)"
289
+ @focusout.native="mouseLeave('thirdLevelMenuItem',parentIndex,secondIndex,thirdIndex, )"
290
+ @click.native="fireAnalytics(thirdLevelLink.title, thirdLevelLink.relative)"
396
291
  >
397
292
  <span>{{ thirdLevelLink.title }}</span>
398
293
  </nuxt-link>
@@ -415,45 +310,240 @@
415
310
  </div>
416
311
  </div>
417
312
  </li>
418
- <!-- <li id="moreDesktop" v-if="screen === 'desktop' && this.moreList.length > 0">
313
+
314
+ <!-- More action button in bottom menu -->
315
+
316
+ <li class="nav-item" id="moreDesktop" v-if="this.screen === 'desktop' && this.moreList.length > 0">
419
317
  <a class="dark" role="button" @click="showMore = !showMore">
420
318
  <span>More</span>
421
- <caret-down class="caret-down" />
422
- </a>
319
+ <caret-down class="caret-down" style="padding-top: 4px; height: 16px; width: 16px"/>
320
+ </a>
423
321
  <div
424
- class="flex-container"
425
- v-if="showMore"
426
- >
427
- <div class="contrast_slide--box-list">
428
- <div v-for="list in this.moreList" :key="list.value">
429
- <label>
430
- <input
431
- type="radio"
432
- :name="list.name"
433
- :value="list.value"
434
- :checked="list.value === selectedValue"
435
- @click="handleContrast"
436
- />
437
- {{ list.label }}
438
- </label>
322
+ v-if="showMore"
323
+ class="styled-scrollbar"
324
+ >
325
+ <div >
326
+ <div class="sub-nav-container__innermore">
327
+ <ul id="moreMenu">
328
+ <li v-for="(firstLevelLink, parentIndex) in this.moreList"
329
+ :key="firstLevelLink.key"
330
+ :ref="`firstLevelMenuItemM-${parentIndex}`"
331
+ class="nav-item more-menu"
332
+ >
333
+ <a
334
+ v-if="firstLevelLink.below"
335
+ class="dark"
336
+ href
337
+ role="button"
338
+ aria-expanded="false"
339
+ @click.prevent="firstLevelClick(firstLevelLink,`firstLevelMenuItemM-${parentIndex}`,)"
340
+ @mouseover="mouseHover('firstLevelMenuItemM', parentIndex)"
341
+ @mouseleave="mouseLeave('firstLevelMenuItemM', parentIndex)"
342
+ @focusin="mouseHover('firstLevelMenuItemM', parentIndex)"
343
+ @focusout="mouseLeave('firstLevelMenuItemM', parentIndex)"
344
+ >
345
+ <span>{{ firstLevelLink.title }}</span>
346
+
347
+ <caret-right
348
+ v-if="!isSecondLevelOpen && !isThirdLevelOpen"
349
+ class="caret-right"
350
+ />
351
+ </a>
352
+ <a
353
+ v-else-if="!firstLevelLink.relative"
354
+ :href="firstLevelLink.absolute"
355
+ target="_blank"
356
+ @click.native="showMore = !showMore"
357
+ class="dark"
358
+ >
359
+ <span>{{ firstLevelLink.title }}</span>
360
+
361
+ </a>
362
+ <nuxt-link
363
+ v-else
364
+ class="dark"
365
+ :to="firstLevelLink.relative"
366
+ @click.native="showMore = !showMore; fireAnalytics(firstLevelLink.title, firstLevelLink.relative)"
367
+ >
368
+ <span>{{ firstLevelLink.title }}</span>
369
+ <caret-right
370
+ v-if="!isSecondLevelOpen && !isThirdLevelOpen"
371
+ class="caret-right"
372
+ />
373
+ </nuxt-link>
374
+ <div v-if="isSecondLevelOpen" class="sub-nav-container">
375
+ <div class="app-header__close-button">
376
+ <button
377
+ v-if="this.screen === 'mobile'"
378
+ ref="menuBackButton"
379
+ class="dark"
380
+ @click="mobileGoBack"
381
+ @keydown.tab="submenuFocus"
382
+ >
383
+ <caret-left/>
384
+ {{ isThirdLevelOpen ? firstLevelItemName : 'Main menu' }}
385
+ </button>
386
+ <button
387
+ v-if="
388
+ (isSecondLevelOpen && this.screen === 'desktop') ||
389
+ (isMobileMenuOpen && this.screen === 'mobile')
390
+ "
391
+ ref="closeMenuButton"
392
+ class="dark"
393
+ @click="closeMegaMenu"
394
+ >
395
+ <img :alt="Close" width="12" height="12" :src="Close"/>
396
+ Close menu
397
+ </button>
398
+ </div>
399
+ <div
400
+ class="sub-nav-container__inner"
401
+ :class="{ 'styled-scrollbar': this.screen === 'desktop' }"
402
+ >
403
+ <div
404
+ class="sub-nav-container__wrap"
405
+ :class="{'styled-scrollbar': this.screen === 'mobile' && isSecondLevelOpen,}"
406
+ >
407
+ <div
408
+ class="selected-title"
409
+ :class="{ 'selected-title--chrome': isChrome }"
410
+ >
411
+ <nuxt-link
412
+ v-if="firstLevelLink.relative"
413
+ :ref="`secondLevelSelectedTitleM-${parentIndex}`"
414
+ :to="firstLevelLink.relative"
415
+ class="dark"
416
+ @click.native="fireAnalytics(firstLevelLink.title, firstLevelLink.relative)"
417
+ @keydown.tab.native="backBtnFocus($event)"
418
+ >
419
+ <span>{{ firstLevelLink.title }}</span>
420
+ </nuxt-link>
421
+ <span v-else>{{ firstLevelLink.title }}</span>
422
+ </div>
423
+ <div class="selected-items">
424
+ <ul v-if="firstLevelLink.below" class="sub-nav-group">
425
+ <li
426
+ v-for="(
427
+ secondLevelLink, secondIndex
428
+ ) in firstLevelLink.below"
429
+ :key="secondLevelLink.key"
430
+ :ref="`secondLevelMenuItemM-${parentIndex}-${secondIndex}`"
431
+ class="sub-nav-parent-item"
432
+ >
433
+ <a
434
+ v-if="secondLevelLink.below"
435
+ href
436
+ class="dark"
437
+ role="button"
438
+ aria-expanded="false"
439
+ @keydown.tab="searchFocus(secondIndex,firstLevelLink.below.length,$event,)"
440
+ @click.prevent="secondLevelClick(secondLevelLink,`secondLevelMenuItemM-${parentIndex}-${secondIndex}`,)"
441
+ @mouseover="mouseHover('secondLevelMenuItemM',parentIndex,secondIndex,)"
442
+ @mouseleave="mouseLeave('secondLevelMenuItemM',parentIndex,secondIndex,)"
443
+ @focusin="mouseHover('secondLevelMenuItemM',parentIndex,secondIndex,)"
444
+ @focusout="mouseLeave('secondLevelMenuItemM',parentIndex,secondIndex,)"
445
+ >
446
+ <span>{{ secondLevelLink.title }}</span>
447
+ <caret-right
448
+ v-if="!(this.screen === 'mobile' && isThirdLevelOpen)"
449
+ class="caret-right"
450
+ />
451
+ </a>
452
+ <a
453
+ v-else-if="!secondLevelLink.relative"
454
+ :href="secondLevelLink.absolute"
455
+ class="dark"
456
+ >
457
+ <span>{{ secondLevelLink.title }}</span>
458
+ </a>
459
+ <nuxt-link
460
+ v-else
461
+ class="dark"
462
+ :to="secondLevelLink.relative"
463
+ @keydown.tab.native="searchFocus( secondIndex,firstLevelLink.below.length,$event,)"
464
+ @mouseover.native="mouseHover('secondLevelMenuItemM',parentIndex,secondIndex,)"
465
+ @mouseleave.native="mouseLeave('secondLevelMenuItemM',parentIndex,secondIndex,)"
466
+ @focusin.native="mouseHover('secondLevelMenuItemM',parentIndex,secondIndex,)"
467
+ @focusout.native="mouseLeave('secondLevelMenuItemM',parentIndex,secondIndex,)"
468
+ @click.native="fireAnalytics(secondLevelLink.title, secondLevelLink.relative)"
469
+ >
470
+ <span>{{ secondLevelLink.title }}</span>
471
+ </nuxt-link>
472
+ <div v-if="isThirdLevelOpen" class="sub-nav">
473
+ <div class="sub-nav__wrap">
474
+ <div class="selected-title">
475
+ <nuxt-link
476
+ v-if="secondLevelLink.relative"
477
+ :ref="`secondLevelSelectedTitleM-${parentIndex}-${secondIndex}`"
478
+ :to="secondLevelLink.relative"
479
+ class="dark"
480
+ @click.native="fireAnalytics(secondLevelLink.title, secondLevelLink.relative)"
481
+ @keydown.tab.native="backBtnFocus($event)"
482
+ >
483
+ <span>{{ secondLevelLink.title }}</span>
484
+ </nuxt-link>
485
+ <span v-else>{{ secondLevelLink.title }}</span>
486
+ </div>
487
+ <div class="selected-sub-nav">
488
+ <ul
489
+ v-if="secondLevelLink.below"
490
+ class="sub-nav-group"
491
+ >
492
+ <li
493
+ v-for="(
494
+ thirdLevelLink, thirdIndex
495
+ ) in secondLevelLink.below"
496
+ :key="thirdLevelLink.key"
497
+ :ref="`thirdLevelMenuItemM-${parentIndex}-${secondIndex}-${thirdIndex}`"
498
+ >
499
+ <nuxt-link
500
+ v-if="thirdLevelLink.relative"
501
+ class="dark"
502
+ :to="thirdLevelLink.relative"
503
+ @keydown.tab.native="searchFocus(thirdIndex,secondLevelLink.below.length,$event,)"
504
+ @mouseover.native="mouseHover('thirdLevelMenuItemM',parentIndex,secondIndex,thirdIndex,)"
505
+ @mouseleave.native="mouseLeave('thirdLevelMenuItemM',parentIndex,secondIndex,thirdIndex,)"
506
+ @focusin.native="mouseHover('thirdLevelMenuItemM',parentIndex,secondIndex,thirdIndex,)"
507
+ @focusout.native="mouseLeave('thirdLevelMenuItemM',parentIndex,secondIndex,thirdIndex,)"
508
+ @click.native="fireAnalytics(thirdLevelLink.title, thirdLevelLink.relative)"
509
+ >
510
+ <span>{{ thirdLevelLink.title }}</span>
511
+ </nuxt-link>
512
+ <a
513
+ v-else
514
+ class="dark"
515
+ :href="thirdLevelLink.absolute"
516
+ >
517
+ <span>{{ thirdLevelLink.title }}</span>
518
+ </a>
519
+ </li>
520
+ </ul>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </li>
525
+ </ul>
526
+ </div>
527
+ </div>
528
+ </div>
439
529
  </div>
440
- </div>
441
- </div>
442
- </li> -->
443
- <li v-if="isWorkWell && screen === 'desktop'" class="nav-item hide">
530
+ </li>
531
+ </ul>
532
+ </div>
533
+ </div>
534
+
535
+
536
+ </div>
537
+ </li>
538
+ <li v-if="isWorkWell && this.screen === 'desktop'" class="nav-item hide">
444
539
  <a href="#" class="dark" @focus="resetTab"></a>
445
540
  </li>
446
-
447
541
  </ul>
542
+
543
+
448
544
  </nav>
449
- <div v-if="screen === 'mobile'" class="app-header__mobile-menu-container">
545
+ <div v-if="this.screen === 'mobile'" class="app-header__mobile-menu-container">
450
546
  <ul id="mobileitems">
451
- <!-- <li v-if="!isMobileMenuOpen" id="moreMobile">
452
- <a class="dark" role="button" @click.prevent="showMobileMenu">
453
- <span>More</span>
454
- <caret-down class="caret-down" />
455
- </a>
456
- </li> -->
457
547
  <li v-if="!isMobileMenuOpen">
458
548
  <a class="dark" role="button" @click.prevent="showMobileMenu">
459
549
  <span>Menu</span>
@@ -482,6 +572,7 @@ import LanguageIcon from './../../../assets/icons/lang.svg?url'
482
572
  import ContrastIcon from './../../../assets/icons/contrast.svg?url'
483
573
  import NavSearchIcon from './../../../assets/icons/search.svg?url'
484
574
  import CtaButton from '../../SubComponents/CtaButton/index.vue'
575
+ import chevronIcon from '../../../assets/icons/caret-right.svg?url'
485
576
  import { ref } from "vue";
486
577
 
487
578
  export default {
@@ -504,6 +595,7 @@ export default {
504
595
  MenuIcon,
505
596
  SearchIcon,
506
597
  CtaButton,
598
+ chevronIcon
507
599
  },
508
600
  props: {
509
601
  headerMenu: {
@@ -544,6 +636,7 @@ export default {
544
636
  CaretLeft,
545
637
  MenuIcon,
546
638
  windowWidth: 0,
639
+ addWidth: 35,
547
640
  searchQuery: null,
548
641
  LanguageIcon,
549
642
  LoginLeft,
@@ -583,7 +676,7 @@ export default {
583
676
  },
584
677
  watch: {
585
678
  $route() {
586
- if (this.screen) {
679
+ if (screen) {
587
680
  this.closeMegaMenu()
588
681
  }
589
682
  },
@@ -597,7 +690,7 @@ export default {
597
690
  this.isMobileMenuOpen = true
598
691
  }
599
692
  }
600
- // added code to check if val < 760, when top menu should revert to icons, not labels.
693
+ // added code to check if val < 760, when top menu should revert to icons, not labels.
601
694
  if (val < 760) {
602
695
  this.topLevelIconsOnly = true
603
696
  } else {
@@ -611,88 +704,66 @@ export default {
611
704
  this.updateMoreMenu(val)
612
705
  },
613
706
  },
707
+ mounted() {
708
+ this.$nextTick(() => {
709
+ window.addEventListener('resize', this.updateMoreMenu())
710
+ })
711
+ this.updateMoreMenu()
712
+ },
614
713
  destroyed() {
615
- window.removeEventListener('resize', this.screenWidth)
714
+ window.removeEventListener('resize', this.screenWidth),
715
+ window.removeEventListener('resize', this.updateMoreMenu)
616
716
  },
617
717
  created() {
618
718
  if (typeof window !== 'undefined' && window) {
619
719
  window.addEventListener('resize', this.screenWidth)
620
720
  this.screenWidth()
621
721
  }
622
- if (this.$nuxt) {
623
- //console.log('🚀 ~ this.$nuxt.$on ~ this.$nuxt:', this.$nuxt)
624
- // this.$nuxt.$on('site-search', (query) => {
625
- // this.searchQuery = query
626
- // if (query) {
627
- // this.showSearch()
628
- // }
629
- // })
722
+ if (this.$bus) {
723
+ this.$bus.$on('site-search', (query) => {
724
+ this.searchQuery = query
725
+ if (query) {
726
+ this.showSearch()
727
+ }
728
+ })
630
729
  }
631
730
  },
632
731
  methods: {
633
732
  screenWidth() {
634
- this.windowWidth = window.innerWidth
733
+ this.windowWidth = window.innerWidth;
635
734
  },
636
735
  updateMoreMenu(screenVal) {
637
- console.log('in updateMoreMenu - val' + screenVal)
638
736
  const nItems = document.getElementById('navitems')
639
- // let nItem = nItems.getElementsByTagName('li')
640
- // console.log('nItem number: ' + nItem.length)
641
- // const mItems = document.getElementById('mobileitems')
642
- console.log('nItems: ' + nItems)
643
- // console.log('mItems: ' + mItems)
644
- // let navI = document.getElementById('navitems')
645
- // console.log('navI items: ' + navI.children)
646
- // if (navI?.offsetWidth) {
647
- // console.log('navI: ' + navI.offsetWidth)
648
- // } else {
649
- // console.log('navI offsetWidth not available')
650
- // }
651
- // console.log('headerMenu: ' + this.headerMenu[0].title)
652
- // console.log('headerMenu items: ' + this.headerMenu.length)
653
- this.moreList = [
654
- {"value":"One",
655
- "label":"First Item"},
656
- {"value":"Two",
657
- "label":"Second Item"},
658
- ]
659
- let moreItem = {
660
- "value": "Three",
661
- "label": "Third Item"
662
- }
663
- this.moreList.unshift(moreItem)
664
-
665
- let xItems = this.headerMenu
666
- var vItems = []
667
-
668
- console.log('xItems: ' + xItems.length)
669
-
670
- if (xItems.length > 7) {
671
- var tempItems = xItems.slice(-(xItems.length - 7))
672
- console.log('tempItems: ' + tempItems[0].title + ', totalnumber: ' + tempItems.length)
673
- }
674
-
675
-
676
- // const mChildren = this.mItems.children;
677
- // console.log('mChildren: ' + mChildren)
678
- // let numW = 0;
679
-
680
- /* [...mChildren].forEach(item => {
681
- item.outHTML = '';
682
- this.nItems.appendChild(item);
683
- }) */
737
+ var scrollWidth = nItems?.scrollWidth
684
738
 
685
- // const teleW = this.nItems.offsetWidth,
686
- // nChildren = this.nItems.children;
687
-
688
- /* [...mChildren].forEach(item => {
689
- numW += item.offsetWidth;
690
-
691
- if (numW > teleW) {
692
- item.outHTML = '';
693
- this.nItems.appendChild(item);
739
+ if (scrollWidth > this.windowWidth) {
740
+ scrollWidth = scrollWidth + this.addWidth
741
+
742
+ while (scrollWidth > this.windowWidth) {
743
+ if ( this.headerMenu.length > 1) { // check that there's more than one item in header
744
+ var tempItem = this.headerMenu.pop()
745
+ this.moreList.unshift(tempItem)
746
+ scrollWidth = scrollWidth - tempItem.title.length
747
+ } else {
748
+ scrollWidth = this.windowWidth
749
+ }
750
+ }
751
+ } else if ( this.moreList.length > 0 ) {
752
+ let tempWidth = scrollWidth
753
+ let ctr = 1
754
+ while (ctr <= this.moreList.length) {
755
+ var tempItem1 = this.moreList[0]
756
+ tempWidth = tempWidth + tempItem1.title.length
757
+ if (tempWidth > this.windoWidth) { //stop if newWidth would be greater than the windowWidth
758
+ ctr = this.moreList.length
759
+ } else { // move item fron dropdownArray to headerArray
760
+ var tempItem2 = this.moreList.shift()
761
+ this.headerMenu.push(tempItem2)
762
+ scrollWidth = tempWidth
694
763
  }
695
- }); */
764
+ ctr++
765
+ }
766
+ }
696
767
  },
697
768
  firstLevelClick(item, ref) {
698
769
  // Reset screen to fix whitespace
@@ -706,7 +777,7 @@ export default {
706
777
  // Set this for mobile
707
778
  this.firstLevelItemName = item.title
708
779
  this.firstLevelItemRef = ref
709
-
780
+
710
781
  // Set the first item to the variable
711
782
  if (previouslyOpenItem.length) {
712
783
  previouslyOpenItem = previouslyOpenItem[0]
@@ -817,10 +888,10 @@ export default {
817
888
 
818
889
  this.isMobileMenuOpen = true
819
890
  this.letBodyOverflow(false)
820
- this.showMore = false
821
- /* this.$nextTick(() => {
891
+ // this.showMore = false
892
+ this.$nextTick(() => {
822
893
  this.$refs['firstLevelMenuItem-0'][0].firstElementChild.focus()
823
- }) */
894
+ })
824
895
  },
825
896
  mouseHover(refID, parentIndex, secondIndex, thirdIndex) {
826
897
  let theLI = this.getLIaboveHovered(
@@ -849,7 +920,7 @@ export default {
849
920
  getLIaboveHovered(refID, parentIndex, secondIndex, thirdIndex) {
850
921
  // Check if its a first level link
851
922
  if (secondIndex === undefined && thirdIndex === undefined) {
852
- if (screen === 'desktop') {
923
+ if (this.screen === 'desktop') {
853
924
  return
854
925
  }
855
926
 
@@ -1034,8 +1105,8 @@ export default {
1034
1105
  // this.$store.dispatch('tracking/event', payload)
1035
1106
  },
1036
1107
  skipToContent() {
1037
- if (this.$nuxt) {
1038
- this.$nuxt.$emit('scrollToTop')
1108
+ if (this.$bus) {
1109
+ this.$bus.$emit('scrollToTop')
1039
1110
  }
1040
1111
  },
1041
1112
  goToLocation(path) {