@worksafevictoria/wcl7.5 1.9.0-beta.4 → 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.
- package/package.json +1 -1
- package/src/components/Common/CardGridItem/card-grid-item-caret.vue +39 -45
- package/src/components/Common/CardGridItem/card-grid-item-icon.vue +1 -1
- package/src/components/Common/CardGridItem/index.vue +6 -2
- package/src/components/Containers/Carousel/index.stories.js +2 -1
- package/src/components/Containers/Carousel/index.vue +68 -69
- package/src/components/Containers/HomepageHeader/index.stories.js +1 -1
- package/src/components/Containers/HomepageHeaderNew/index.stories.js +3 -15
- package/src/components/Containers/HomepageHeaderNew/index.vue +0 -5
- package/src/components/Global/AppFooter/index.vue +115 -129
- package/src/components/Global/AppHeader/ModalSearch/index.vue +7 -1
- package/src/components/Global/AppHeader/index.stories.js +2 -2
- package/src/components/Global/AppHeaderNew/ModalSearch/index.vue +21 -17
- package/src/components/Global/AppHeaderNew/index.stories.js +2 -2
- package/src/components/Global/AppHeaderNew/index.vue +22 -22
- package/src/components/Global/BackToTop/index.vue +16 -16
- package/src/components/Global/ContrastMode/index.stories.js +1 -1
- package/src/components/Global/HeroHeader/index.vue +62 -73
- package/src/components/Global/SocialShare/index.vue +62 -66
- package/src/components/Global/Strip/index.vue +9 -5
- package/src/components/Paragraphs/Accordion/AccordionItem/index.vue +21 -23
- package/src/components/Paragraphs/Accordion/StepperItem/index.vue +15 -15
- package/src/components/Paragraphs/Calculator/CardContainer/index.vue +74 -75
- package/src/components/Paragraphs/Calculator/RiskLevel/index.vue +31 -39
- package/src/components/Paragraphs/Directory/Asbestos/Records/SingleRecord/index.vue +104 -107
- package/src/components/Paragraphs/Directory/Asbestos/Records/index.vue +152 -120
- package/src/components/Paragraphs/Directory/HSCP/Records/SingleRecord/index.vue +127 -133
- package/src/components/Paragraphs/Directory/HSCP/Records/index.vue +158 -128
- package/src/components/Paragraphs/TabulatedData/index.vue +3 -2
- package/src/components/SubComponents/CtaButton/index.vue +47 -44
- package/src/components/SubComponents/Icon/README.md +2 -2
- package/src/components/SubComponents/Icon/example.js +1 -0
- package/src/components/SubComponents/Icon/index.stories.js +1 -1
- package/src/components/SubComponents/Icon/index.vue +47 -47
- package/src/components/SubComponents/ResourceGroup/cardbody.vue +49 -61
- package/src/components/SubComponents/VideoThumbnail/index.vue +30 -28
- 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
|
|
100
|
-
import facebookIcon from
|
|
101
|
-
import twitterIcon from
|
|
102
|
-
import officeFilePdfIcon from
|
|
103
|
-
import { BButton, BButtonGroup } from
|
|
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
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
}
|
|
102
|
+
name: "SocialShare",
|
|
103
|
+
components: { BButtonGroup, BButton },
|
|
104
|
+
props: {
|
|
105
|
+
rtl: {
|
|
106
|
+
type: Boolean,
|
|
107
|
+
default: false,
|
|
113
108
|
},
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
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
|
-
|
|
126
|
-
|
|
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
|
-
|
|
140
|
-
|
|
141
|
-
if (winHref.toLowerCase().includes("worksafe")) {
|
|
142
|
-
this.url = window.location.href;
|
|
143
|
-
}
|
|
128
|
+
showEmail() {
|
|
129
|
+
return true;
|
|
144
130
|
},
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
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
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
237
|
+
@include mq("sm") {
|
|
242
238
|
margin-right: 8px;
|
|
243
239
|
}
|
|
244
|
-
@include mq(
|
|
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(
|
|
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(
|
|
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(
|
|
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
|
|
22
|
-
|
|
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
|
-
<
|
|
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
|
-
</
|
|
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
|
-
|
|
24
|
-
|
|
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
|
|
68
|
-
import CaretUp from
|
|
69
|
-
import RichText from
|
|
70
|
-
import Icon from
|
|
71
|
-
import { BCard, BCardBody } from
|
|
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:
|
|
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:
|
|
82
|
+
default: "Item",
|
|
85
83
|
},
|
|
86
84
|
preHeading: {
|
|
87
85
|
type: String,
|
|
88
|
-
default:
|
|
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:
|
|
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(
|
|
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(
|
|
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
|
|
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
|
|
68
|
-
import CaretUp from
|
|
69
|
-
import RichText from
|
|
70
|
-
import Icon from
|
|
71
|
-
import { BCard, BCardBody } from
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
|
134
|
+
@import "../../../../includes/scss/all";
|
|
135
135
|
.subcomponent--accordion-stepper {
|
|
136
136
|
.accordion-stepper {
|
|
137
137
|
border-radius: 6px;
|