@worksafevictoria/wcl7.5 1.4.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 (12) hide show
  1. package/lib/utility.js +1 -1
  2. package/package.json +1 -2
  3. package/src/components/Common/CardGrid/index.vue +15 -0
  4. package/src/components/Common/CardGridItem/index.vue +20 -10
  5. package/src/components/Global/AppHeaderNew/index.vue +304 -233
  6. package/src/components/Global/AppHeaderNew/styles.scss +26 -0
  7. package/src/components/Global/ContrastMode/index.vue +1 -1
  8. package/src/components/Global/Cookies/index.vue +7 -0
  9. package/src/components/Paragraphs/Directory/Records/ISP/index.vue +2 -2
  10. package/src/includes/scss/mixins/src/units.scss +25 -4
  11. package/src/mock/app-header-new.js +27 -15
  12. package/src/mock/carousel-items.js +2 -2
package/lib/utility.js CHANGED
@@ -49,7 +49,7 @@ function navigateToPath(path, newTab) {
49
49
  hrefTag.click()
50
50
  } else {
51
51
  const hrefTag = Object.assign(document.createElement('a'), {
52
- target: isAbsolute ? '_blank' : '_self',
52
+ target: newTab ? '_blank' : '_self',
53
53
  href: url
54
54
  })
55
55
  hrefTag.click()
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worksafevictoria/wcl7.5",
3
- "version": "1.4.0",
3
+ "version": "1.5.0",
4
4
  "main": "src/index.js",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -88,7 +88,6 @@
88
88
  "react": "^18.2.0",
89
89
  "react-dom": "^18.2.0",
90
90
  "sass": "1.77.6",
91
- "sass-loader": "^13.3.2",
92
91
  "semantic-release": "^19.0.3",
93
92
  "storybook": "^7.5.1",
94
93
  "stylelint": "^15.11.0",
package/src/components/Common/CardGrid/index.vue CHANGED
@@ -58,6 +58,7 @@ import Column from './../../Containers/Column/index.vue'
58
58
  import SectionGroup from './../../Containers/SectionGroup/index.vue'
59
59
  import debounce from 'lodash/debounce'
60
60
 
61
+
61
62
  export default {
62
63
  name: 'CardGrid',
63
64
  components: { Row, Column, SectionGroup },
@@ -228,10 +229,24 @@ export default {
228
229
  window.removeEventListener('resize', this.setColumnSizeDebounce)
229
230
  },
230
231
  methods: {
232
+ cardTitleSelected(selectedCard, ev) {
233
+ this.clearCards()
234
+ selectedCard.selected = !!!selectedCard.selected
235
+ const selectedCardModelIndex = this.getChildIndex(selectedCard)
236
+
237
+ this.$emit('selected-title', {
238
+ selectedCard: selectedCard.selected
239
+ ? this.cards[selectedCardModelIndex]
240
+ : null,
241
+ selectedCardModelIndex,
242
+ ev
243
+ })
244
+ },
231
245
  cardSelected(selectedCard, ev) {
232
246
  this.clearCards()
233
247
  selectedCard.selected = !!!selectedCard.selected
234
248
  const selectedCardModelIndex = this.getChildIndex(selectedCard)
249
+
235
250
  this.$emit('selected', {
236
251
  selectedCard: selectedCard.selected
237
252
  ? this.cards[selectedCardModelIndex]
package/src/components/Common/CardGridItem/index.vue CHANGED
@@ -15,10 +15,10 @@
15
15
  ? isSelectable && selected
16
16
  ? 'true'
17
17
  : 'false'
18
- : null
18
+ : false
19
19
  "
20
20
  :aria-expanded="
21
- isExpandable ? (isSelectable && selected ? 'true' : 'false') : null
21
+ isExpandable ? (isSelectable && selected ? 'true' : 'false') : false
22
22
  "
23
23
  :data-href="link"
24
24
  @click="cardClicked($event)"
@@ -67,15 +67,16 @@
67
67
  }
68
68
  ]"
69
69
  >
70
- <div>
71
70
  <b-card-title
72
71
  v-if="cardHeaderTitle !== null && cardHeaderTitle !== undefined"
73
72
  :tag="headerTag"
74
73
  class="card-grid-item__header"
75
74
  :class="{
76
75
  [`card-grid-item__header--${headerSize}`]: true,
77
- [`card-grid-item__header--align-${headerTextAlign}`]: true
76
+ [`card-grid-item__header--align-${headerTextAlign}`]: true,
77
+ 'card-grid-item__header--cursor': isCardTitleSelectable
78
78
  }"
79
+ @click="cardTitleClicked($event)"
79
80
  >
80
81
  <span>{{ cardHeaderTitle }}</span> &nbsp;
81
82
  <card-grid-item-caret
@@ -100,9 +101,7 @@
100
101
  >
101
102
  </card-grid-item-icon>
102
103
  </b-card-title>
103
- </div>
104
- <div>
105
- <card-grid-item-caret
104
+ <card-grid-item-caret
106
105
  v-if="caretPosition === 'top'"
107
106
  :caret="caret"
108
107
  :rtl="rtl"
@@ -128,10 +127,7 @@
128
127
  :rtl="rtl"
129
128
  >
130
129
  </card-grid-item-icon>
131
-
132
130
  <span v-if="pillText" class="visually-hidden">{{ pillText }}</span>
133
- </div>
134
-
135
131
  </div>
136
132
  <b-card-text
137
133
  v-if="$slots.cardDescription || description"
@@ -357,6 +353,10 @@ export default {
357
353
  taxonomies: {
358
354
  type: Object,
359
355
  default: () => {}
356
+ },
357
+ isCardTitleSelectable: {
358
+ type: Boolean,
359
+ default: false
360
360
  }
361
361
  },
362
362
  data: () => ({
@@ -422,10 +422,16 @@ export default {
422
422
  if (this.isSelectable) {
423
423
  this.parentGrid.cardSelected(this, ev)
424
424
  }
425
+
425
426
  if (this.$gtm) {
426
427
  this.fireGTM()
427
428
  }
428
429
  },
430
+ cardTitleClicked(ev) {
431
+ if (this.isCardTitleSelectable) {
432
+ this.parentGrid.cardTitleSelected(this, ev)
433
+ }
434
+ },
429
435
  getParentGridItem() {
430
436
  let counter = 0
431
437
  const maxParentDepth = 10
@@ -845,6 +851,10 @@ export default {
845
851
  &--align-right {
846
852
  direction: rtl;
847
853
  }
854
+
855
+ &--cursor {
856
+ cursor: pointer;
857
+ }
848
858
  }
849
859
  }
850
860
 
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,8 +704,15 @@ 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) {
@@ -620,7 +720,6 @@ export default {
620
720
  this.screenWidth()
621
721
  }
622
722
  if (this.$bus) {
623
- console.log('🚀 ~ this.$bus.$on ~ this.$bus:', this.$bus)
624
723
  this.$bus.$on('site-search', (query) => {
625
724
  this.searchQuery = query
626
725
  if (query) {
@@ -631,68 +730,40 @@ export default {
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
 
package/src/components/Global/AppHeaderNew/styles.scss CHANGED
@@ -10,6 +10,8 @@
10
10
 
11
11
  &__wrap {
12
12
  position: relative;
13
+ white-space: nowrap;
14
+ overflow-y: scroll;
13
15
  background: $app-header-background-colour;
14
16
  border-radius: 3px;
15
17
  height: 70px;
@@ -111,6 +113,7 @@
111
113
  margin-right: 0;
112
114
  }
113
115
 
116
+
114
117
  .search-string {
115
118
  @media screen and (max-width: 1065px) and (min-width: 981px) {
116
119
  display: none;
@@ -206,6 +209,19 @@
206
209
  position: relative;
207
210
  }
208
211
 
212
+ &__innermore {
213
+ overflow-x: auto;
214
+ height: max-content;
215
+ left: 25px;
216
+ right: 25px;
217
+ top: 180px;
218
+ position: fixed;
219
+ padding-top: 15px !important;
220
+ background-color: $app-menu-black !important;
221
+ border-radius: 3px;
222
+ }
223
+
224
+
209
225
  &__wrap {
210
226
  position: relative;
211
227
  margin: 0 auto;
@@ -232,9 +248,11 @@
232
248
 
233
249
  &:last-of-type {
234
250
  > a {
251
+
235
252
  svg {
236
253
  height: 23px;
237
254
  width: 23px;
255
+
238
256
  }
239
257
  & > span {
240
258
  margin-right: 10px;
@@ -342,6 +360,7 @@
342
360
 
343
361
  .styled-scrollbar {
344
362
  overflow-y: scroll;
363
+ white-space: normal !important;
345
364
  //firefox
346
365
  scrollbar-color: $app-header-active $app-menu-black;
347
366
  scrollbar-width: thin;
@@ -365,6 +384,13 @@
365
384
  left: -9999px !important;
366
385
  }
367
386
  }
387
+
388
+ .more-menu {
389
+ height: 56px;
390
+ vertical-align: middle;
391
+ padding: 0px 10px !important;
392
+ }
393
+
368
394
  .skip-link {
369
395
  @include visually-hidden;
370
396
  color: $app-menu-black;
package/src/components/Global/ContrastMode/index.vue CHANGED
@@ -199,7 +199,7 @@ export default {
199
199
  margin: 0;
200
200
  padding: 0;
201
201
  top: 0;
202
- left: -26%;
202
+ left: -19%;
203
203
  transition: all 0.4s ease-in-out;
204
204
  /////
205
205
  outline-offset: 2px;
package/src/components/Global/Cookies/index.vue CHANGED
@@ -429,4 +429,11 @@ export default {
429
429
 
430
430
  <style lang="scss" scoped>
431
431
  @import './styles';
432
+
433
+ #mainCookieContainer {
434
+ .modal-dialog {
435
+ max-width: var(--bs-modal-width);
436
+ margin: 1.75rem auto;
437
+ }
438
+ }
432
439
  </style>
package/src/components/Paragraphs/Directory/Records/ISP/index.vue CHANGED
@@ -13,14 +13,14 @@
13
13
  <column class="contact">
14
14
  <div>Phone</div>
15
15
  <a :href="`tel:${item.contact.mobile || item.contact.phone}`"
16
- ><span class="sr-only">Phone number</span
16
+ ><span class="sr-only visually-hidden">Phone number</span
17
17
  >{{ item.contact.mobile || item.contact.phone }}</a
18
18
  >
19
19
  </column>
20
20
  <column v-if="baseLocation && recordLocation" class="distance">
21
21
  <div>Distance</div>
22
22
  <div tabindex="0">
23
- <span class="sr-only">Distance from your specified location</span>
23
+ <span class="sr-only visually-hidden">Distance from your specified location</span>
24
24
  {{
25
25
  calcDistance(
26
26
  baseLocation.lat,
package/src/includes/scss/mixins/src/units.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use "sass:math";
1
2
  $current-rootsize: 16px;
2
3
 
3
4
  // Returns a unitless number
@@ -53,10 +54,11 @@ $current-rootsize: 16px;
53
54
 
54
55
 
55
56
  // Converts a px value to rems. Should only work in absolute em document context (root level), unless $context is specified
56
- @function px-to-rem($value, $context: $current-rootsize) {
57
- @if unit($context) == "rem" {
58
- $context: rem-to-px($context);
59
- }
57
+ /**/
58
+ /* @function px-to-rem($value, $context: $current-rootsize) {
59
+ //@if unit($context) == "rem" {
60
+ // $context: rem-to-px($context);
61
+ //}
60
62
  $result: ();
61
63
 
62
64
  @each $val in $value {
@@ -67,6 +69,25 @@ $current-rootsize: 16px;
67
69
  }
68
70
  }
69
71
  @return $result;
72
+ } */
73
+
74
+ @function px-to-rem($px, $context: $current-rootsize) {
75
+ @if unit($context) == "rem" {
76
+ $context: rem-to-px($context);
77
+ }
78
+ $result: ();
79
+
80
+ // Iterate over each value in the $px list
81
+ @each $val in $px {
82
+ @if unit($val) == "px" {
83
+ // Convert px to rem
84
+ $val: #{math.div($val, $context)}rem;
85
+ }
86
+ // Append converted value to the result list
87
+ $result: append($result, $val);
88
+ }
89
+
90
+ @return $result;
70
91
  }
71
92
 
72
93
  // Converts a em value to rems. Should only work in absolute em document context (root level), unless $context is specified
package/src/mock/app-header-new.js CHANGED
@@ -681,23 +681,35 @@ const appHeaderData = [
681
681
  {
682
682
  title: 'Extra Link Two',
683
683
  absolute: 'https://content-v2.api.worksafe.vic.gov.au/licences',
684
+ relative: '/licences',
685
+ below: [
686
+ {
687
+ title: 'Contact WorkSafe',
688
+ absolute: 'https://content-v2.api.worksafe.vic.gov.au/contact-worksafe',
689
+ relative: '/contact-worksafe'
690
+ },
691
+ {
692
+ title: 'Report an incident',
693
+ absolute: 'https://content-v2.api.worksafe.vic.gov.au/report-incident',
694
+ relative: '/report-incident'
695
+ }
696
+ ]
697
+ },
698
+ {
699
+ title: 'Extra Link Three',
700
+ absolute: 'https://content-v2.api.worksafe.vic.gov.au/licences',
701
+ relative: '/licences'
702
+ },
703
+ {
704
+ title: 'External Link',
705
+ absolute: 'http://google.com',
706
+ relative: ''
707
+ },
708
+ {
709
+ title: 'Extra Link Five',
710
+ absolute: 'https://content-v2.api.worksafe.vic.gov.au/licences',
684
711
  relative: '/licences'
685
712
  },
686
- // {
687
- // title: 'Extra Link Three',
688
- // absolute: 'https://content-v2.api.worksafe.vic.gov.au/licences',
689
- // relative: '/licences'
690
- // },
691
- // {
692
- // title: 'Extra Link Four',
693
- // absolute: 'https://content-v2.api.worksafe.vic.gov.au/licences',
694
- // relative: '/licences'
695
- // },
696
- // {
697
- // title: 'Extra Link Five',
698
- // absolute: 'https://content-v2.api.worksafe.vic.gov.au/licences',
699
- // relative: '/licences'
700
- // },
701
713
  ]
702
714
 
703
715
  export { appHeaderData }
package/src/mock/carousel-items.js CHANGED
@@ -13,8 +13,8 @@ export const mockCarouselItems = [
13
13
  image:
14
14
  'https://picsum.photos/1024/480/?image=54',
15
15
  link: '/asbestos-removal-notification',
16
- dateStart: '2024-12-01T09:45:00+11:00',
17
- dateEnd: '2024-12-12T09:45:00+11:00',
16
+ dateStart: '2025-12-01T09:45:00+11:00',
17
+ dateEnd: '2025-12-12T09:45:00+11:00',
18
18
  favorite: ''
19
19
  },
20
20
  {