@worksafevictoria/wcl7.5 1.1.23 → 1.2.1

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.
package/.env CHANGED
@@ -1,6 +1,4 @@
1
1
  CONTENT_API_URL=https://content-staging-v2.api.worksafe.vic.gov.au
2
2
  IS_STORYBOOK=TRUE
3
3
  SHOW_COOKIE=true
4
- GOOGLE__URL=https://cse.google.com/cse.js?cx=53b1506aa03c64160
5
- CARETAKER=false
6
- SHOW_GLOBAL_NOTICE=true
4
+ GOOGLE__URL=https://cse.google.com/cse.js?cx=53b1506aa03c64160
package/README.md CHANGED
@@ -44,18 +44,18 @@ This repo is based on Vue 3 in Vite, and Storybook 7. It contains all the commo
44
44
 
45
45
  ### Usage Instructions - Yarn - recommended
46
46
 
47
- yarn add @worksafevictoria/wcl
47
+ yarn add @worksafevictoria/wcl7.5
48
48
 
49
49
  ### Usage Instructions - npm
50
50
 
51
- npm i @worksafevictoria/wcl
51
+ npm i @worksafevictoria/wcl7.5
52
52
 
53
53
  ### Nuxt - if you have errors after importing
54
54
 
55
55
  # nuxt.config.js
56
56
 
57
57
  build {
58
- transpile: ['@worksafevictoria/wcl', 'xxx', 'xxx', 'xxx']
58
+ transpile: ['@worksafevictoria/wcl7.5', 'xxx', 'xxx', 'xxx']
59
59
  }
60
60
 
61
61
  #### Usage Instructions - environment variables
@@ -83,7 +83,7 @@ This repo is based on Vue 3 in Vite, and Storybook 7. It contains all the commo
83
83
  </template>
84
84
 
85
85
  <script>
86
- import { Container, Column, Row, CtaButton } from '@worksafevictoria/wcl'
86
+ import { Container, Column, Row, CtaButton } from '@worksafevictoria/wcl7.5'
87
87
  export default {
88
88
  components: { Container, Column, Row, CtaButton }
89
89
  }
@@ -4,7 +4,7 @@
4
4
  # Project: Worksafe Public Website - Front End
5
5
  # Description: Build Validation for Pull Requests
6
6
  ########################################################
7
- trigger: none
7
+ trigger: none
8
8
 
9
9
  pr:
10
10
  autoCancel: true
@@ -13,7 +13,7 @@ pr:
13
13
  include:
14
14
  - master
15
15
  - beta
16
-
16
+
17
17
  variables:
18
18
  - group: Public Websites - Front End
19
19
 
@@ -1,14 +1,15 @@
1
1
  #######################################################
2
- # Author: Yavisht Katgara
3
- # Email: yavisht_katgara@worksafe.vic.gov.au
2
+ # Original Author: Yavisht Katgara
3
+ # Email: WSV-DigitalOperations@worksafetac.onmicrosoft.com
4
4
  # Project: Worksafe Public Website - Front End
5
5
  # Description: Publish beta release to NPM
6
6
  #######################################################
7
7
 
8
- trigger:
8
+ trigger:
9
9
  branches:
10
10
  include:
11
11
  - beta
12
+ pr: none
12
13
 
13
14
  variables:
14
15
  - group: Public Websites - Front End
@@ -1,14 +1,15 @@
1
1
  #######################################################
2
- # Author: Yavisht Katgara
3
- # Email: yavisht_katgara@worksafe.vic.gov.au
2
+ # Original Author: Yavisht Katgara
3
+ # Email: WSV-DigitalOperations@worksafetac.onmicrosoft.com
4
4
  # Project: Worksafe Public Website - Front End
5
5
  # Description: Publish latest release to NPM
6
6
  #######################################################
7
7
 
8
- trigger:
8
+ trigger:
9
9
  branches:
10
10
  include:
11
11
  - master
12
+ pr: none
12
13
 
13
14
  variables:
14
15
  - group: Public Websites - Front End
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worksafevictoria/wcl7.5",
3
- "version": "1.1.23",
3
+ "version": "1.2.1",
4
4
  "main": "src/index.js",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -44,7 +44,7 @@
44
44
  "axios": "^1.6.0",
45
45
  "bootstrap": "^5.3.2",
46
46
  "bootstrap-vue": "^2.23.1",
47
- "bootstrap-vue-next": "^0.23.2",
47
+ "bootstrap-vue-next": "^0.25.10",
48
48
  "date-fns": "^2.30.0",
49
49
  "formiojs": "4.13.13",
50
50
  "storybook-addon-deep-controls": "^0.6.2",
@@ -212,5 +212,5 @@ Default.args = {
212
212
  cardPadding: 'small',
213
213
  borderType: 'thin',
214
214
  contentClass: 'Content Class',
215
- cardDescription: 'Card description slot. text 123 Sample text. You can also use description prop.',
215
+ cardDescription: 'Card Description slot. text 123 Sample text. You can also use description prop.',
216
216
  }
@@ -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 {
@@ -35,12 +35,12 @@
35
35
  v-if="card.description"
36
36
  class="subheader__description"
37
37
  :class="{
38
- [`w-100 text-left`]: alignLeft
38
+ [`w-100 text-left`]: alignLeft,
39
39
  }"
40
40
  >
41
41
  <strong
42
42
  v-if="singleLineCards && card.title"
43
- v-html="card.title + ':'"
43
+ v-html="card.title + ': '"
44
44
  >
45
45
  </strong>
46
46
  <span v-html="card.description"></span>
@@ -61,42 +61,42 @@ export default {
61
61
  props: {
62
62
  itemList: {
63
63
  type: Array,
64
- required: true
64
+ required: true,
65
65
  },
66
66
  cardColumnSize: {
67
67
  type: Number,
68
- default: null
68
+ default: null,
69
69
  },
70
70
  singleLineCards: {
71
- type: Boolean
71
+ type: Boolean,
72
72
  },
73
73
  background: {
74
74
  type: String,
75
- default: 'none'
75
+ default: 'none',
76
76
  },
77
77
  heading: {
78
78
  type: String,
79
- default: ''
79
+ default: '',
80
80
  },
81
81
  alignLeft: {
82
- type: Boolean
82
+ type: Boolean,
83
83
  },
84
84
  showIcon: {
85
85
  type: Boolean,
86
- default: true
86
+ default: true,
87
87
  },
88
88
  iconPosition: {
89
89
  type: String,
90
- default: null
90
+ default: null,
91
91
  },
92
92
  type: {
93
93
  type: String,
94
- default: ''
95
- }
94
+ default: '',
95
+ },
96
96
  },
97
97
  data() {
98
98
  return {
99
- isSingleColumn: false
99
+ isSingleColumn: false,
100
100
  }
101
101
  },
102
102
  methods: {
@@ -110,18 +110,18 @@ export default {
110
110
  navigateToPath.call(
111
111
  this,
112
112
  card?.selectedCard?.linkHref,
113
- card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
113
+ card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
114
114
  )
115
115
  }
116
116
  } else {
117
117
  navigateToPath.call(
118
118
  this,
119
119
  card?.selectedCard?.linkHref,
120
- card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
120
+ card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
121
121
  )
122
122
  }
123
- }
124
- }
123
+ },
124
+ },
125
125
  }
126
126
  </script>
127
127
  <style lang="scss" scoped>
@@ -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