@worksafevictoria/wcl7.5 1.14.0-beta.9 → 1.15.0-beta.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/package.json +1 -1
- package/src/components/Paragraphs/Accordion/index.stories.js +3 -3
- package/src/components/Paragraphs/Accordion/index.vue +3 -3
- package/src/components/Paragraphs/Directory/Asbestos/Records/SingleRecord/index.vue +3 -30
- package/src/components/Paragraphs/VideoPlayer/index.vue +39 -42
- package/src/components/SubComponents/VideoThumbnail/index.vue +4 -4
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@ const mockAccordionItems = [
|
|
|
5
5
|
field_title: 'Item one',
|
|
6
6
|
field_pre_heading: 'preheading text',
|
|
7
7
|
field_rich_text: {
|
|
8
|
-
|
|
8
|
+
value:
|
|
9
9
|
'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>',
|
|
10
10
|
},
|
|
11
11
|
id: 'id-1',
|
|
@@ -14,7 +14,7 @@ const mockAccordionItems = [
|
|
|
14
14
|
field_title: 'Item two',
|
|
15
15
|
field_pre_heading: 'preheading text',
|
|
16
16
|
field_rich_text: {
|
|
17
|
-
|
|
17
|
+
value:
|
|
18
18
|
'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>',
|
|
19
19
|
},
|
|
20
20
|
id: 'id-2',
|
|
@@ -23,7 +23,7 @@ const mockAccordionItems = [
|
|
|
23
23
|
field_title: 'Item three',
|
|
24
24
|
field_pre_heading: 'preheading text',
|
|
25
25
|
field_rich_text: {
|
|
26
|
-
|
|
26
|
+
value:
|
|
27
27
|
'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>',
|
|
28
28
|
},
|
|
29
29
|
id: 'id-3',
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
<stepper-item
|
|
23
23
|
v-if="isStepper"
|
|
24
24
|
:itemid="item.id ? item.id : '' + index"
|
|
25
|
-
:content="hasContent(item) ? item.field_rich_text.
|
|
25
|
+
:content="hasContent(item) ? item.field_rich_text.value : ''"
|
|
26
26
|
:title="item.field_title"
|
|
27
27
|
class="accordion__item stepper"
|
|
28
28
|
:rtl="rtl || item.field_rtl"
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
<accordion-item
|
|
34
34
|
v-if="!isStepper"
|
|
35
35
|
:itemid="item.id ? item.id : '' + index"
|
|
36
|
-
:content="hasContent(item) ? item.field_rich_text.
|
|
36
|
+
:content="hasContent(item) ? item.field_rich_text.value : ''"
|
|
37
37
|
:title="item.field_title"
|
|
38
38
|
class="accordion__item"
|
|
39
39
|
:rtl="rtl || item.field_rtl"
|
|
@@ -124,7 +124,7 @@ export default {
|
|
|
124
124
|
return false
|
|
125
125
|
},
|
|
126
126
|
hasContent(item) {
|
|
127
|
-
return item?.field_rich_text?.
|
|
127
|
+
return item?.field_rich_text?.value
|
|
128
128
|
},
|
|
129
129
|
},
|
|
130
130
|
}
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
<div v-if="item.website">
|
|
64
64
|
<row>
|
|
65
65
|
<column>
|
|
66
|
-
<
|
|
66
|
+
<h5>Website</h5>
|
|
67
67
|
</column>
|
|
68
68
|
</row>
|
|
69
69
|
<row v-if="item.website !== ''">
|
|
@@ -72,40 +72,13 @@
|
|
|
72
72
|
{{ item.website }}
|
|
73
73
|
</a>
|
|
74
74
|
</row>
|
|
75
|
-
|
|
76
|
-
<column sm="2" class="label"> Phone </column>
|
|
77
|
-
<column sm="4" class="dir-additional-records">
|
|
78
|
-
{{ item.phone1 }}
|
|
79
|
-
</column>
|
|
80
|
-
</row> -->
|
|
81
|
-
<row v-if="item.mobile1">
|
|
82
|
-
<column sm="2" class="label"> Mobile </column>
|
|
83
|
-
<column sm="4" class="dir-additional-records">
|
|
84
|
-
{{ item.mobile1 }}
|
|
85
|
-
</column>
|
|
86
|
-
</row>
|
|
87
|
-
<row v-if="item.email1">
|
|
88
|
-
<column sm="2" class="label" > Email </column>
|
|
89
|
-
<column sm="4" class="dir-additional-records">
|
|
90
|
-
{{ item.email1 }}
|
|
91
|
-
</column>
|
|
92
|
-
</row>
|
|
93
|
-
</div>
|
|
75
|
+
</div>
|
|
94
76
|
<div v-if="item.serviceCategory">
|
|
95
77
|
<row class="row-dir-additional">
|
|
96
78
|
<column>
|
|
97
|
-
<
|
|
79
|
+
<h5>{{ item.serviceCategory }}</h5>
|
|
98
80
|
</column>
|
|
99
81
|
</row>
|
|
100
|
-
<!-- <row class="dir-additional-records">
|
|
101
|
-
<column>
|
|
102
|
-
<ul>
|
|
103
|
-
<li v-for="serv in item.services.split(',')" :key="serv.id">
|
|
104
|
-
{{ serv }}
|
|
105
|
-
</li>
|
|
106
|
-
</ul>
|
|
107
|
-
</column>
|
|
108
|
-
</row> -->
|
|
109
82
|
</div>
|
|
110
83
|
</div>
|
|
111
84
|
</container>
|
|
@@ -30,33 +30,34 @@
|
|
|
30
30
|
<template #overlay>
|
|
31
31
|
<div class="wcl-video-modal__overlay" role="dialog" aria-modal="true">
|
|
32
32
|
<div class="wcl-video-modal__panel">
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
33
|
+
<div class="wcl-video-modal__panel--image">
|
|
34
|
+
<img
|
|
35
|
+
class="icon"
|
|
36
|
+
:src="IconView"
|
|
37
|
+
alt="Icon View"
|
|
38
|
+
aria-hidden="true"
|
|
39
|
+
/>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="wcl-video-modal__panel--content">
|
|
42
|
+
<rich-text :content="mediaWarningContent" />
|
|
43
|
+
</div>
|
|
44
|
+
<div class="wcl-video-modal__panel--button">
|
|
45
|
+
<CtaButton
|
|
46
|
+
text-only="true"
|
|
47
|
+
aria-describedby="gethelp-label"
|
|
48
|
+
:url="mediaWarningLinkUrl"
|
|
49
|
+
>
|
|
50
|
+
{{ mediaWarningLinkTitle }}
|
|
51
|
+
</CtaButton>
|
|
52
|
+
<CtaButton
|
|
53
|
+
type="gray"
|
|
54
|
+
text-only="true"
|
|
55
|
+
aria-describedby="seevideo-label"
|
|
56
|
+
@click="onSeeVideo"
|
|
57
|
+
>
|
|
58
|
+
See video
|
|
59
|
+
</CtaButton>
|
|
60
|
+
</div>
|
|
60
61
|
</div>
|
|
61
62
|
</div>
|
|
62
63
|
</template>
|
|
@@ -80,6 +81,7 @@ import VideoPlayer from '../../SubComponents/MediaPlayer/index.vue'
|
|
|
80
81
|
import Accordion from '../Accordion/index.vue'
|
|
81
82
|
import IconView from './../../../assets/icons/icon-view-off.svg?url'
|
|
82
83
|
import CtaButton from './../../SubComponents/CtaButton/index.vue'
|
|
84
|
+
import RichText from './../../Paragraphs/RichText/index.vue'
|
|
83
85
|
|
|
84
86
|
export default {
|
|
85
87
|
name: 'VideoMedia',
|
|
@@ -88,6 +90,7 @@ export default {
|
|
|
88
90
|
VideoPlayer,
|
|
89
91
|
SectionGroup,
|
|
90
92
|
Accordion,
|
|
93
|
+
RichText,
|
|
91
94
|
IconView,
|
|
92
95
|
},
|
|
93
96
|
props: {
|
|
@@ -127,19 +130,19 @@ export default {
|
|
|
127
130
|
type: String,
|
|
128
131
|
default: 'h2',
|
|
129
132
|
},
|
|
130
|
-
|
|
133
|
+
mediaWarning: {
|
|
131
134
|
type: Boolean,
|
|
132
135
|
default: false,
|
|
133
136
|
},
|
|
134
|
-
|
|
137
|
+
mediaWarningContent: {
|
|
135
138
|
type: String,
|
|
136
139
|
default: null,
|
|
137
140
|
},
|
|
138
|
-
|
|
141
|
+
mediaWarningLinkTitle: {
|
|
139
142
|
type: String,
|
|
140
143
|
default: null,
|
|
141
144
|
},
|
|
142
|
-
|
|
145
|
+
mediaWarningLinkUrl: {
|
|
143
146
|
type: String,
|
|
144
147
|
default: null,
|
|
145
148
|
},
|
|
@@ -147,11 +150,11 @@ export default {
|
|
|
147
150
|
data() {
|
|
148
151
|
return {
|
|
149
152
|
IconView,
|
|
150
|
-
show: this.
|
|
153
|
+
show: this.mediaWarning,
|
|
151
154
|
}
|
|
152
155
|
},
|
|
153
156
|
watch: {
|
|
154
|
-
|
|
157
|
+
mediaWarning(v) {
|
|
155
158
|
this.show = v
|
|
156
159
|
},
|
|
157
160
|
},
|
|
@@ -220,17 +223,11 @@ export default {
|
|
|
220
223
|
width: 110px;
|
|
221
224
|
margin-bottom: 30px;
|
|
222
225
|
}
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
font-weight: 700;
|
|
226
|
-
margin-bottom: 24px;
|
|
227
|
-
}
|
|
228
|
-
.description {
|
|
229
|
-
font-size: 24px;
|
|
230
|
-
font-weight: 400;
|
|
231
|
-
text-align: left;
|
|
226
|
+
|
|
227
|
+
&--content {
|
|
232
228
|
margin-bottom: 30px;
|
|
233
229
|
}
|
|
230
|
+
|
|
234
231
|
.wcl-cta {
|
|
235
232
|
margin-bottom: 0;
|
|
236
233
|
@media (max-width: 388px) {
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
>
|
|
29
29
|
<div class="wcl-video-modal__video">
|
|
30
30
|
<video-media
|
|
31
|
-
:media-
|
|
32
|
-
:media-
|
|
33
|
-
:media-
|
|
34
|
-
:media-
|
|
31
|
+
:media-warning="video.warning"
|
|
32
|
+
:media-warning-content="video.warningContent"
|
|
33
|
+
:media-warning-link-title="video.warningLinkTitle"
|
|
34
|
+
:media-warning-link-url="video.warningLinkUrl"
|
|
35
35
|
:media-title="video.mediaTitle"
|
|
36
36
|
:media-description="video.mediaDescription"
|
|
37
37
|
:video-id="video.id"
|