@worksafevictoria/wcl7.5 1.9.0-beta.3 → 1.9.0-beta.5

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 (38) hide show
  1. package/package.json +1 -1
  2. package/src/components/Common/CardGridItem/card-grid-item-caret.vue +39 -45
  3. package/src/components/Common/CardGridItem/card-grid-item-icon.vue +1 -1
  4. package/src/components/Common/CardGridItem/index.vue +6 -2
  5. package/src/components/Containers/Carousel/index.stories.js +2 -1
  6. package/src/components/Containers/Carousel/index.vue +68 -69
  7. package/src/components/Containers/HomepageHeader/index.stories.js +1 -1
  8. package/src/components/Containers/HomepageHeaderNew/index.stories.js +3 -15
  9. package/src/components/Containers/HomepageHeaderNew/index.vue +0 -5
  10. package/src/components/Global/AppFooter/index.vue +115 -129
  11. package/src/components/Global/AppHeader/ModalSearch/index.vue +7 -1
  12. package/src/components/Global/AppHeader/index.stories.js +2 -2
  13. package/src/components/Global/AppHeaderNew/ModalSearch/index.vue +21 -17
  14. package/src/components/Global/AppHeaderNew/index.stories.js +2 -2
  15. package/src/components/Global/AppHeaderNew/index.vue +22 -22
  16. package/src/components/Global/BackToTop/index.vue +16 -16
  17. package/src/components/Global/ContrastMode/index.stories.js +1 -1
  18. package/src/components/Global/HeroHeader/index.vue +62 -73
  19. package/src/components/Global/SocialShare/index.vue +62 -66
  20. package/src/components/Global/Strip/index.vue +9 -5
  21. package/src/components/Paragraphs/Accordion/AccordionItem/index.vue +21 -23
  22. package/src/components/Paragraphs/Accordion/StepperItem/index.vue +15 -15
  23. package/src/components/Paragraphs/Calculator/CardContainer/index.vue +74 -75
  24. package/src/components/Paragraphs/Calculator/RiskLevel/index.vue +31 -39
  25. package/src/components/Paragraphs/Directory/Asbestos/Records/SingleRecord/index.vue +104 -107
  26. package/src/components/Paragraphs/Directory/Asbestos/Records/index.vue +152 -120
  27. package/src/components/Paragraphs/Directory/HSCP/Records/SingleRecord/index.vue +127 -133
  28. package/src/components/Paragraphs/Directory/HSCP/Records/index.vue +158 -128
  29. package/src/components/Paragraphs/TabulatedData/index.vue +3 -2
  30. package/src/components/SubComponents/CtaButton/index.vue +47 -44
  31. package/src/components/SubComponents/Icon/README.md +2 -2
  32. package/src/components/SubComponents/Icon/example.js +1 -0
  33. package/src/components/SubComponents/Icon/index.stories.js +1 -1
  34. package/src/components/SubComponents/Icon/index.vue +47 -47
  35. package/src/components/SubComponents/ResourceGroup/cardbody.vue +49 -61
  36. package/src/components/SubComponents/Search/index.vue +4 -0
  37. package/src/components/SubComponents/VideoThumbnail/index.vue +30 -28
  38. package/src/mock/carousel-items.js +46 -81
@@ -14,17 +14,13 @@
14
14
  class="social-share__button"
15
15
  >
16
16
  <div class="social-share__circle--black">
17
- <a
18
- tabindex="0"
19
- class="social-share__anchor"
20
- :href="`mailto:?body=${url}`"
21
- >
17
+ <a tabindex="0" class="social-share__anchor" :href="`mailto:?body=${url}`">
22
18
  <span class="visually-hidden">Email</span>
23
19
  <img
24
20
  role="presentation"
25
21
  class="social-share__img"
26
22
  :src="emailIcon"
27
- alt=""
23
+ alt="social share email icon"
28
24
  />
29
25
  </a></div
30
26
  ></b-button>
@@ -45,7 +41,7 @@
45
41
  role="presentation"
46
42
  class="social-share__img"
47
43
  :src="facebookIcon"
48
- alt=""
44
+ alt="social share facebook icon"
49
45
  />
50
46
  </a></div
51
47
  ></b-button>
@@ -66,7 +62,7 @@
66
62
  role="presentation"
67
63
  class="social-share__img"
68
64
  :src="twitterIcon"
69
- alt=""
65
+ alt="social share twitter icon"
70
66
  />
71
67
  </a></div
72
68
  ></b-button>
@@ -86,7 +82,7 @@
86
82
  role="presentation"
87
83
  class="social-share__img-pdf"
88
84
  :src="officeFilePdfIcon"
89
- alt=""
85
+ alt="social share pdf icon"
90
86
  />
91
87
  </a></div
92
88
  ></b-button>
@@ -96,64 +92,64 @@
96
92
  </template>
97
93
 
98
94
  <script>
99
- import emailIcon from '../../../assets/icons/SocialShare/email-white.svg?url'
100
- import facebookIcon from '../../../assets/icons/SocialShare/facebook-white.svg?url'
101
- import twitterIcon from '../../../assets/icons/SocialShare/x-icon-white.svg?url'
102
- import officeFilePdfIcon from '../../../assets/icons/SocialShare/office-file-pdf.svg?url'
103
- import { BButton, BButtonGroup } from 'bootstrap-vue-next'
95
+ import emailIcon from "../../../assets/icons/SocialShare/email-white.svg?url";
96
+ import facebookIcon from "../../../assets/icons/SocialShare/facebook-white.svg?url";
97
+ import twitterIcon from "../../../assets/icons/SocialShare/x-icon-white.svg?url";
98
+ import officeFilePdfIcon from "../../../assets/icons/SocialShare/office-file-pdf.svg?url";
99
+ import { BButton, BButtonGroup } from "bootstrap-vue-next";
104
100
 
105
101
  export default {
106
- name: 'SocialShare',
107
- components: { BButtonGroup, BButton },
108
- props: {
109
- rtl: {
110
- type: Boolean,
111
- default: false
112
- }
102
+ name: "SocialShare",
103
+ components: { BButtonGroup, BButton },
104
+ props: {
105
+ rtl: {
106
+ type: Boolean,
107
+ default: false,
113
108
  },
114
- data() {
115
- return {
116
- url: null,
117
- emailIcon,
118
- facebookIcon,
119
- twitterIcon,
120
- officeFilePdfIcon,
121
- mobileToggle: false,
122
- rightToggle: true
123
- };
109
+ },
110
+ data() {
111
+ return {
112
+ url: null,
113
+ emailIcon,
114
+ facebookIcon,
115
+ twitterIcon,
116
+ officeFilePdfIcon,
117
+ mobileToggle: false,
118
+ rightToggle: true,
119
+ };
120
+ },
121
+ computed: {
122
+ showFacebook() {
123
+ return true;
124
124
  },
125
- computed: {
126
- showFacebook() {
127
- return true;
128
- },
129
- showTwitter() {
130
- return true;
131
- },
132
- showEmail() {
133
- return true;
134
- },
135
- showPdf() {
136
- return this.$canPrint && this.$canPrint();
137
- }
125
+ showTwitter() {
126
+ return true;
138
127
  },
139
- mounted() {
140
- let winHref = window.location.href
141
- if (winHref.toLowerCase().includes("worksafe")) {
142
- this.url = window.location.href;
143
- }
128
+ showEmail() {
129
+ return true;
144
130
  },
145
- methods: {
146
- savePdf() {
147
- window.printOnLoad = true;
148
- let URL = `/pdf${window.location.pathname}`;
149
- window.open(URL);
150
- }
131
+ showPdf() {
132
+ return this.$canPrint && this.$canPrint();
133
+ },
134
+ },
135
+ mounted() {
136
+ let winHref = window.location.href;
137
+ if (winHref.toLowerCase().includes("worksafe")) {
138
+ this.url = window.location.href;
151
139
  }
152
- }
140
+ },
141
+ methods: {
142
+ savePdf() {
143
+ window.printOnLoad = true;
144
+ let URL = `/pdf${window.location.pathname}`;
145
+ window.open(URL);
146
+ },
147
+ },
148
+ };
153
149
  </script>
154
150
 
155
151
  <style lang="scss" scoped>
156
- @import '../../../includes/scss/all';
152
+ @import "../../../includes/scss/all";
157
153
 
158
154
  .social-share {
159
155
  background: $white;
@@ -167,7 +163,7 @@ export default {
167
163
  left: 0;
168
164
  z-index: 2;
169
165
 
170
- @include mq('sm') {
166
+ @include mq("sm") {
171
167
  position: relative;
172
168
  top: auto;
173
169
  left: auto;
@@ -179,7 +175,7 @@ export default {
179
175
  &__header {
180
176
  font-size: 14px;
181
177
  line-height: 50px;
182
- @include mq('sm') {
178
+ @include mq("sm") {
183
179
  line-height: 40px;
184
180
  }
185
181
  }
@@ -191,7 +187,7 @@ export default {
191
187
  align-content: center;
192
188
  margin: auto;
193
189
 
194
- @include mq('sm') {
190
+ @include mq("sm") {
195
191
  display: block;
196
192
  margin: 0;
197
193
  flex-direction: unset;
@@ -226,7 +222,7 @@ export default {
226
222
  left: 0px;
227
223
  position: relative;
228
224
 
229
- @include mq('sm') {
225
+ @include mq("sm") {
230
226
  display: none;
231
227
  }
232
228
  }
@@ -238,10 +234,10 @@ export default {
238
234
  border: 0;
239
235
  margin-bottom: 8px;
240
236
 
241
- @include mq('sm') {
237
+ @include mq("sm") {
242
238
  margin-right: 8px;
243
239
  }
244
- @include mq('xs') {
240
+ @include mq("xs") {
245
241
  margin-bottom: 0px;
246
242
  }
247
243
  a {
@@ -264,7 +260,7 @@ export default {
264
260
 
265
261
  &__vr {
266
262
  border: 0;
267
- @include mq('sm') {
263
+ @include mq("sm") {
268
264
  border-left: 2px solid $lightgray;
269
265
  margin-left: 12px;
270
266
  }
@@ -289,7 +285,7 @@ export default {
289
285
  }
290
286
  }
291
287
  }
292
- @include mq('sm') {
288
+ @include mq("sm") {
293
289
  .fixed {
294
290
  position: fixed;
295
291
  bottom: 0;
@@ -312,7 +308,7 @@ export default {
312
308
  left: inherit;
313
309
  right: 0;
314
310
 
315
- @include mq('sm') {
311
+ @include mq("sm") {
316
312
  border-radius: 0;
317
313
  }
318
314
  }
@@ -18,8 +18,12 @@
18
18
  @keypress.enter="mini ? handleClick() : false"
19
19
  >
20
20
  <div :class="`${type}-strip__icon`">
21
- <img v-if="type === 'alert'" :src="exclamationIcon" alt="" />
22
- <img v-else :src="infoIcon" alt="" />
21
+ <img
22
+ v-if="type === 'alert'"
23
+ :src="exclamationIcon"
24
+ alt="alert exclamation icon"
25
+ />
26
+ <img v-else :src="infoIcon" alt="alert information icon" />
23
27
  </div>
24
28
  <div
25
29
  :class="{
@@ -28,7 +32,7 @@
28
32
  [`${type}-strip__content--right`]: rtl,
29
33
  }"
30
34
  >
31
- <span
35
+ <h2
32
36
  :class="{
33
37
  [`${type}-strip__heading`]: true,
34
38
  [`${type}-strip__heading--left`]: !rtl,
@@ -36,14 +40,14 @@
36
40
  }"
37
41
  >
38
42
  {{ stripTitle }}
39
- </span>
43
+ </h2>
40
44
  <rich-text :content="stripContent" :without-container="true" />
41
45
  </div>
42
46
  <img
43
47
  v-if="mini"
44
48
  height="16"
45
49
  class="alert-strip__icon--caret"
46
- alt=""
50
+ alt="alert icon"
47
51
  :src="chevronIcon"
48
52
  />
49
53
  </div>
@@ -19,18 +19,16 @@
19
19
  @click.prevent="toggleAccordion"
20
20
  @keypress.enter="toggleAccordion"
21
21
  >
22
- <span
23
- v-if="preHeading && showPreHeading"
24
- class="accordion-item__pre-heading"
25
- >{{ preHeading }}</span
26
- >
22
+ <span v-if="preHeading && showPreHeading" class="accordion-item__pre-heading">{{
23
+ preHeading
24
+ }}</span>
27
25
  <rich-text :tag="'h4'" :tag-class="'card-title'" :content="title" />
28
26
  <icon
29
27
  v-show="showAccordion && content"
30
28
  width="18"
31
29
  height="12"
32
30
  class="accordion-icon"
33
- :icon-alt="'collapse'"
31
+ :icon-alt="'collapse icon'"
34
32
  :glyph="CaretUp"
35
33
  :class="{
36
34
  '--with-pre-heading': preHeading && showPreHeading,
@@ -41,7 +39,7 @@
41
39
  width="18"
42
40
  height="12"
43
41
  class="accordion-icon"
44
- :icon-alt="'expand'"
42
+ :icon-alt="'expand icon'"
45
43
  :glyph="CaretDown"
46
44
  :class="{
47
45
  '--with-pre-heading': preHeading && showPreHeading,
@@ -64,14 +62,14 @@
64
62
  </template>
65
63
 
66
64
  <script>
67
- import CaretDown from '../../../../assets/icons/caret-down.svg?url'
68
- import CaretUp from '../../../../assets/icons/caret-up.svg?url'
69
- import RichText from '../../RichText/index.vue'
70
- import Icon from '../../../SubComponents/Icon/index.vue'
71
- import { BCard, BCardBody } from 'bootstrap-vue-next'
65
+ import CaretDown from "../../../../assets/icons/caret-down.svg?url";
66
+ import CaretUp from "../../../../assets/icons/caret-up.svg?url";
67
+ import RichText from "../../RichText/index.vue";
68
+ import Icon from "../../../SubComponents/Icon/index.vue";
69
+ import { BCard, BCardBody } from "bootstrap-vue-next";
72
70
 
73
71
  export default {
74
- name: 'AccordionItem',
72
+ name: "AccordionItem",
75
73
  components: {
76
74
  RichText,
77
75
  Icon,
@@ -81,11 +79,11 @@ export default {
81
79
  props: {
82
80
  title: {
83
81
  type: String,
84
- default: 'Item',
82
+ default: "Item",
85
83
  },
86
84
  preHeading: {
87
85
  type: String,
88
- default: 'PRE-HEADING',
86
+ default: "PRE-HEADING",
89
87
  },
90
88
  content: {
91
89
  type: String,
@@ -109,7 +107,7 @@ export default {
109
107
  },
110
108
  itemid: {
111
109
  type: String,
112
- default: 'Item',
110
+ default: "Item",
113
111
  },
114
112
  },
115
113
  data: () => ({
@@ -119,28 +117,28 @@ export default {
119
117
  }),
120
118
  mounted() {
121
119
  this.$nextTick(() => {
122
- this.showAccordion = this.open
123
- })
120
+ this.showAccordion = this.open;
121
+ });
124
122
  },
125
123
  methods: {
126
124
  toggleAccordion() {
127
- this.showAccordion = !this.showAccordion
125
+ this.showAccordion = !this.showAccordion;
128
126
  if (this.showAccordion) {
129
127
  if (this.$bus) {
130
- this.$bus.$emit('accordionItemOpen', this.meta) // this.$root.$emit('accordionItemOpen', this.meta)
128
+ this.$bus.$emit("accordionItemOpen", this.meta); // this.$root.$emit('accordionItemOpen', this.meta)
131
129
  }
132
130
  } else {
133
131
  if (this.$bus) {
134
- this.$bus.$emit('accordionItemClose', this.meta) // this.$root.$emit('accordionItemClose', this.meta)
132
+ this.$bus.$emit("accordionItemClose", this.meta); // this.$root.$emit('accordionItemClose', this.meta)
135
133
  }
136
134
  }
137
135
  },
138
136
  },
139
- }
137
+ };
140
138
  </script>
141
139
 
142
140
  <style lang="scss">
143
- @import '../../../../includes/scss/all';
141
+ @import "../../../../includes/scss/all";
144
142
  .subcomponent--accordion-item {
145
143
  .accordion-item {
146
144
  border-radius: 6px;
@@ -34,7 +34,7 @@
34
34
  width="18"
35
35
  height="12"
36
36
  class="stepper-icon"
37
- :icon-alt="'collapse'"
37
+ :icon-alt="'collapse icon'"
38
38
  :glyph="CaretUp"
39
39
  />
40
40
  <icon
@@ -42,7 +42,7 @@
42
42
  width="18"
43
43
  height="12"
44
44
  class="stepper-icon"
45
- :icon-alt="'expand'"
45
+ :icon-alt="'expand icon'"
46
46
  :glyph="CaretDown"
47
47
  />
48
48
  </div>
@@ -64,14 +64,14 @@
64
64
  </template>
65
65
 
66
66
  <script>
67
- import CaretDown from '../../../../assets/icons/caret-down.svg?url'
68
- import CaretUp from '../../../../assets/icons/caret-up.svg?url'
69
- import RichText from '../../RichText/index.vue'
70
- import Icon from '../../../SubComponents/Icon/index.vue'
71
- import { BCard, BCardBody } from 'bootstrap-vue-next'
67
+ import CaretDown from "../../../../assets/icons/caret-down.svg?url";
68
+ import CaretUp from "../../../../assets/icons/caret-up.svg?url";
69
+ import RichText from "../../RichText/index.vue";
70
+ import Icon from "../../../SubComponents/Icon/index.vue";
71
+ import { BCard, BCardBody } from "bootstrap-vue-next";
72
72
 
73
73
  export default {
74
- name: 'StepperItem',
74
+ name: "StepperItem",
75
75
  components: {
76
76
  RichText,
77
77
  Icon,
@@ -81,7 +81,7 @@ export default {
81
81
  props: {
82
82
  title: {
83
83
  type: String,
84
- default: 'Item',
84
+ default: "Item",
85
85
  },
86
86
  content: {
87
87
  type: String,
@@ -109,7 +109,7 @@ export default {
109
109
  },
110
110
  itemid: {
111
111
  type: String,
112
- default: 'Item',
112
+ default: "Item",
113
113
  },
114
114
  },
115
115
  data: () => ({
@@ -119,19 +119,19 @@ export default {
119
119
  }),
120
120
  mounted() {
121
121
  this.$nextTick(() => {
122
- this.showAccordion = this.open
123
- })
122
+ this.showAccordion = this.open;
123
+ });
124
124
  },
125
125
  methods: {
126
126
  toggleAccordion() {
127
- this.showAccordion = !this.showAccordion
127
+ this.showAccordion = !this.showAccordion;
128
128
  },
129
129
  },
130
- }
130
+ };
131
131
  </script>
132
132
 
133
133
  <style lang="scss">
134
- @import '../../../../includes/scss/all';
134
+ @import "../../../../includes/scss/all";
135
135
  .subcomponent--accordion-stepper {
136
136
  .accordion-stepper {
137
137
  border-radius: 6px;