@worksafevictoria/wcl7.5 1.1.0-beta.48 → 1.1.0-beta.49
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/Containers/Carousel/index.stories.js +30 -0
- package/src/components/Containers/Carousel/index.vue +128 -0
- package/src/components/Containers/HomepageHeaderNew/index.stories.js +75 -0
- package/src/components/Containers/HomepageHeaderNew/index.vue +203 -0
- package/src/components/Global/AppHeaderNew/index.vue +10 -10
- package/src/mock/carousel-items.js +57 -0
package/package.json
CHANGED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import CarouselComponent from './index.vue'
|
|
2
|
+
import { mockCarouselItems } from '../../../mock/carousel-items'
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Website-Redesign/Carousel',
|
|
6
|
+
component: CarouselComponent,
|
|
7
|
+
data() {
|
|
8
|
+
return {
|
|
9
|
+
mockCarouselItems
|
|
10
|
+
}
|
|
11
|
+
},
|
|
12
|
+
args: {
|
|
13
|
+
carouselItems: mockCarouselItems,
|
|
14
|
+
storybook: true
|
|
15
|
+
},
|
|
16
|
+
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
const DefaultCarousel = (args) => ({
|
|
20
|
+
components: { CarouselComponent },
|
|
21
|
+
setup() {
|
|
22
|
+
return { args }
|
|
23
|
+
},
|
|
24
|
+
template: `<div style="width: 50%; height: auto;">
|
|
25
|
+
<h2>Carousel Component</h2>
|
|
26
|
+
<carousel-component v-bind="args"></carousel-component>
|
|
27
|
+
</div>`
|
|
28
|
+
})
|
|
29
|
+
|
|
30
|
+
export const Default = DefaultCarousel.bind({})
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<b-carousel
|
|
4
|
+
id="carousel-1"
|
|
5
|
+
v-model="slide"
|
|
6
|
+
interval=0
|
|
7
|
+
controls
|
|
8
|
+
indicators
|
|
9
|
+
keyboard
|
|
10
|
+
background="#ababab"
|
|
11
|
+
>
|
|
12
|
+
<b-carousel-slide
|
|
13
|
+
v-for="item in filteredCarouselItems"
|
|
14
|
+
:key="item.id"
|
|
15
|
+
:text="item.content"
|
|
16
|
+
:img-src="item.image"
|
|
17
|
+
@click.prevent="handleClick(item.link)"
|
|
18
|
+
>
|
|
19
|
+
</b-carousel-slide>
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
</b-carousel>
|
|
23
|
+
</div>
|
|
24
|
+
</template>
|
|
25
|
+
|
|
26
|
+
<script>
|
|
27
|
+
import { BCarousel, BCarouselSlide } from 'bootstrap-vue-next'
|
|
28
|
+
import { isAbsoluteUrl, navigateToPath } from '../../../../lib/utility'
|
|
29
|
+
|
|
30
|
+
export default {
|
|
31
|
+
name: 'CarouselComponent',
|
|
32
|
+
data() {
|
|
33
|
+
return {
|
|
34
|
+
slide: 0,
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
components: {
|
|
38
|
+
BCarousel,
|
|
39
|
+
BCarouselSlide
|
|
40
|
+
},
|
|
41
|
+
props: {
|
|
42
|
+
carouselItems: {
|
|
43
|
+
type: Array,
|
|
44
|
+
required: true,
|
|
45
|
+
default: () => [],
|
|
46
|
+
},
|
|
47
|
+
storybook: {
|
|
48
|
+
type: Boolean,
|
|
49
|
+
default: false
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
computed: {
|
|
53
|
+
filteredCarouselItems() {
|
|
54
|
+
let filtered = this.carouselItems
|
|
55
|
+
|
|
56
|
+
// To be completed with filter criteria
|
|
57
|
+
|
|
58
|
+
return filtered;
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
methods: {
|
|
62
|
+
|
|
63
|
+
handleClick(link) {
|
|
64
|
+
if (link) {
|
|
65
|
+
if (isAbsoluteUrl(link)) {
|
|
66
|
+
navigateToPath(link, true)
|
|
67
|
+
} else {
|
|
68
|
+
if (this.storybook) {
|
|
69
|
+
alert('This link will go to: ' + link)
|
|
70
|
+
} else {
|
|
71
|
+
this.$router.push({ path: link })
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
</script>
|
|
79
|
+
|
|
80
|
+
<style lang="scss" scoped>
|
|
81
|
+
@import '../../../includes/scss/all';
|
|
82
|
+
</style>
|
|
83
|
+
|
|
84
|
+
<style>
|
|
85
|
+
.carousel {
|
|
86
|
+
position: relative;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.carousel-indicators button {
|
|
90
|
+
width: 10px !important;
|
|
91
|
+
height: 10px !important;
|
|
92
|
+
border-radius: 50% !important;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.carousel-indicators button:focus,
|
|
96
|
+
.carousel-indicators button:active {
|
|
97
|
+
outline: none !important;
|
|
98
|
+
box-shadow: none;
|
|
99
|
+
/* background-color: black; */
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.active {
|
|
103
|
+
background-color: black !important;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.carousel-caption {
|
|
107
|
+
padding:10px;
|
|
108
|
+
font-size:larger;
|
|
109
|
+
color: black;
|
|
110
|
+
background-color: rgba(211, 211, 211, 0.75);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.carousel-control-prev:focus,
|
|
114
|
+
.carousel-control-prev:active,
|
|
115
|
+
.carousel-control-next:focus,
|
|
116
|
+
.carousel-control-next:active {
|
|
117
|
+
outline: none !important;
|
|
118
|
+
box-shadow: none;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.carousel-control-prev-icon,
|
|
122
|
+
.carousel-control-next-icon {
|
|
123
|
+
height: 50px !important;
|
|
124
|
+
width: 50px !important;
|
|
125
|
+
outline:none !important;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
</style>
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import HomepageHeader from './index.vue'
|
|
2
|
+
import { mockCarouselItems } from '../../../mock/carousel-items'
|
|
3
|
+
|
|
4
|
+
const fetchMenu = () =>
|
|
5
|
+
Promise.resolve([
|
|
6
|
+
{
|
|
7
|
+
title: 'Report an incident',
|
|
8
|
+
relative: '/report-incident'
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
title: 'Report a case of COVID-19',
|
|
12
|
+
relative: '/report-confirmed-positive-case-covid-19'
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
title: 'Make a claim',
|
|
16
|
+
relative: '/before-claim'
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
title: 'Apply for a licence',
|
|
20
|
+
relative: '/apply-for-licence'
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
title: 'Pay or renew your insurance',
|
|
24
|
+
relative: '/pay-or-renew-your-workcover-insurance-premium'
|
|
25
|
+
}
|
|
26
|
+
])
|
|
27
|
+
|
|
28
|
+
const contentParser = () => {
|
|
29
|
+
return Promise.resolve({
|
|
30
|
+
results: [
|
|
31
|
+
{
|
|
32
|
+
title: 'Content title 1',
|
|
33
|
+
description: 'Content description 2'
|
|
34
|
+
}
|
|
35
|
+
],
|
|
36
|
+
offset: 0,
|
|
37
|
+
numFound: 1000
|
|
38
|
+
})
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export default {
|
|
42
|
+
title: 'Website_Redesign/HomepageHeader',
|
|
43
|
+
component: HomepageHeader,
|
|
44
|
+
argTypes: {
|
|
45
|
+
fetchMenu: {
|
|
46
|
+
control: 'function',
|
|
47
|
+
table: { disable: true }
|
|
48
|
+
},
|
|
49
|
+
contentParser: {
|
|
50
|
+
control: 'function',
|
|
51
|
+
table: { disable: true }
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
args: {
|
|
55
|
+
fetchMenu: fetchMenu,
|
|
56
|
+
slideList: mockCarouselItems,
|
|
57
|
+
isStorybook: true,
|
|
58
|
+
contentParser: contentParser
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
const DefaultHH = (args) => ({
|
|
63
|
+
components: { HomepageHeader },
|
|
64
|
+
setup() {
|
|
65
|
+
return { args };
|
|
66
|
+
},
|
|
67
|
+
mounted() {
|
|
68
|
+
setTimeout(() => {
|
|
69
|
+
this.$refs.hh.renderMenu()
|
|
70
|
+
})
|
|
71
|
+
},
|
|
72
|
+
template: '<homepage-header v-bind="args" ref="hh" />'
|
|
73
|
+
})
|
|
74
|
+
|
|
75
|
+
export const Default = DefaultHH.bind({})
|
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="homepage-header">
|
|
3
|
+
<div class="container">
|
|
4
|
+
<search
|
|
5
|
+
:page-limit="3"
|
|
6
|
+
:page-number="1"
|
|
7
|
+
:is-typeahead="true"
|
|
8
|
+
:content-parser="contentParser"
|
|
9
|
+
tabindex="0"
|
|
10
|
+
class="homepage-header__search"
|
|
11
|
+
/>
|
|
12
|
+
<row class="wcl-hero-header__content-wrapper container">
|
|
13
|
+
<column class="wcl-hero-header__content-wrapper__content-col col-12 col-md-7 wcl-hero-header__content-wrapper__content-col--split wcl-rich-text--ltr">
|
|
14
|
+
<carousel-component
|
|
15
|
+
:carouselItems="this.slideList"
|
|
16
|
+
:storybook="this.isStorybook"
|
|
17
|
+
/>
|
|
18
|
+
</column>
|
|
19
|
+
<column class="wcl-hero-header__side col-md-4 offset-md-1">
|
|
20
|
+
<cta-button
|
|
21
|
+
v-for="(link, i) in links"
|
|
22
|
+
:key="i"
|
|
23
|
+
class="iebtn"
|
|
24
|
+
:url="link.path"
|
|
25
|
+
type="dark"
|
|
26
|
+
:stretch="true"
|
|
27
|
+
>{{ link.text }}</cta-button
|
|
28
|
+
>
|
|
29
|
+
<cta-button
|
|
30
|
+
class="iebtn"
|
|
31
|
+
url="/choose-your-language"
|
|
32
|
+
type="dark"
|
|
33
|
+
:stretch="true"
|
|
34
|
+
:glyph="earthIcon"
|
|
35
|
+
:is-centred="false"
|
|
36
|
+
>Choose your language</cta-button
|
|
37
|
+
>
|
|
38
|
+
</column>
|
|
39
|
+
</row>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
</template>
|
|
43
|
+
<script>
|
|
44
|
+
import Search from './../../SubComponents/Search/index.vue'
|
|
45
|
+
import CtaButton from './../../SubComponents/CtaButton/index.vue'
|
|
46
|
+
import earthIcon from './../../../assets/icons/earth.svg?url'
|
|
47
|
+
import CarouselComponent from './../../Containers/Carousel/index.vue'
|
|
48
|
+
import Row from './../../Containers/Row/index.vue'
|
|
49
|
+
import Column from './../../Containers/Column/index.vue'
|
|
50
|
+
|
|
51
|
+
export default {
|
|
52
|
+
name: 'HomepageHeader',
|
|
53
|
+
components: {
|
|
54
|
+
Search,
|
|
55
|
+
CtaButton,
|
|
56
|
+
CarouselComponent,
|
|
57
|
+
Row,
|
|
58
|
+
Column
|
|
59
|
+
},
|
|
60
|
+
props: {
|
|
61
|
+
contentParser: {
|
|
62
|
+
type: Function,
|
|
63
|
+
required: true,
|
|
64
|
+
},
|
|
65
|
+
fetchMenu: {
|
|
66
|
+
type: Function,
|
|
67
|
+
required: true,
|
|
68
|
+
},
|
|
69
|
+
slideList: {
|
|
70
|
+
type: Array,
|
|
71
|
+
required: true,
|
|
72
|
+
},
|
|
73
|
+
isStorybook: {
|
|
74
|
+
type: Boolean,
|
|
75
|
+
default: false
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
async mounted() {
|
|
79
|
+
await this.renderMenu()
|
|
80
|
+
},
|
|
81
|
+
|
|
82
|
+
data: () => ({
|
|
83
|
+
links: [],
|
|
84
|
+
earthIcon,
|
|
85
|
+
}),
|
|
86
|
+
methods: {
|
|
87
|
+
async renderMenu() {
|
|
88
|
+
const menu = await this.fetchMenu()
|
|
89
|
+
this.links = (Array.isArray(menu) ? menu : []).map((item) => {
|
|
90
|
+
return {
|
|
91
|
+
text: item.title,
|
|
92
|
+
path: item.relative || item.absolute,
|
|
93
|
+
}
|
|
94
|
+
})
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
}
|
|
98
|
+
</script>
|
|
99
|
+
|
|
100
|
+
<!-- styles from the heroheader are still used for consistency,
|
|
101
|
+
even though the component itself is no longer imported. -->
|
|
102
|
+
|
|
103
|
+
<style lang="scss" scoped>
|
|
104
|
+
@import '../../../includes/scss/all';
|
|
105
|
+
@import './../../Global/HeroHeader/styles.scss';
|
|
106
|
+
|
|
107
|
+
.homepage-header {
|
|
108
|
+
border-bottom: none !important;
|
|
109
|
+
|
|
110
|
+
:deep(.wysiwyg) {
|
|
111
|
+
h1 {
|
|
112
|
+
@media screen and (max-width: 390px) {
|
|
113
|
+
font-size: 32px;
|
|
114
|
+
line-height: 32px;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
@media screen and (max-width: 767px) {
|
|
118
|
+
font-size: 36px;
|
|
119
|
+
line-height: 36px;
|
|
120
|
+
margin-bottom: 16px;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
:deep(.wcl-hero-header__content-wrapper) {
|
|
126
|
+
@include fp('top', 75, 250);
|
|
127
|
+
margin-top: 0;
|
|
128
|
+
|
|
129
|
+
@media screen and (max-width: 540px) {
|
|
130
|
+
padding-right: 35px;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
:deep(.wcl-hero-header__wrap) {
|
|
136
|
+
display: block;
|
|
137
|
+
align-items: normal;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
:deep(.wcl-cta) {
|
|
141
|
+
@include mq('mm') {
|
|
142
|
+
&:first-of-type {
|
|
143
|
+
margin-top: 32px;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
margin-left: 0 !important;
|
|
148
|
+
|
|
149
|
+
&:last-of-type {
|
|
150
|
+
img {
|
|
151
|
+
position: absolute;
|
|
152
|
+
right: 16px;
|
|
153
|
+
top: 19px;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
&__search {
|
|
159
|
+
// margin-top: 10px;
|
|
160
|
+
z-index: 1;
|
|
161
|
+
width: auto;
|
|
162
|
+
|
|
163
|
+
@include mq('xs') {
|
|
164
|
+
padding-right: 0;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
:deep(.gsc-results-wrapper-visible) {
|
|
168
|
+
display: none !important;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
@media all and (-ms-high-contrast: none) {
|
|
173
|
+
::-ms-backdrop,
|
|
174
|
+
.iebtn {
|
|
175
|
+
bottom: 280px;
|
|
176
|
+
left: 650px;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/* IE11 */
|
|
180
|
+
|
|
181
|
+
@media screen\9, screen and (max-width: 1150px) {
|
|
182
|
+
.iebtn {
|
|
183
|
+
bottom: 330px;
|
|
184
|
+
left: 480px;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
@media screen\9, screen and (max-width: 950px) {
|
|
189
|
+
.iebtn {
|
|
190
|
+
bottom: 350px;
|
|
191
|
+
left: 450px;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
@media screen\9, screen and (max-width: 767px) {
|
|
196
|
+
.iebtn {
|
|
197
|
+
left: 2px;
|
|
198
|
+
top: 10px;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
</style>
|
|
@@ -619,14 +619,14 @@ export default {
|
|
|
619
619
|
window.addEventListener('resize', this.screenWidth)
|
|
620
620
|
this.screenWidth()
|
|
621
621
|
}
|
|
622
|
-
if (this.$
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
622
|
+
if (this.$bus) {
|
|
623
|
+
console.log('🚀 ~ this.$bus.$on ~ this.$bus:', this.$bus)
|
|
624
|
+
this.$bus.$on('site-search', (query) => {
|
|
625
|
+
this.searchQuery = query
|
|
626
|
+
if (query) {
|
|
627
|
+
this.showSearch()
|
|
628
|
+
}
|
|
629
|
+
})
|
|
630
630
|
}
|
|
631
631
|
},
|
|
632
632
|
methods: {
|
|
@@ -1034,8 +1034,8 @@ export default {
|
|
|
1034
1034
|
// this.$store.dispatch('tracking/event', payload)
|
|
1035
1035
|
},
|
|
1036
1036
|
skipToContent() {
|
|
1037
|
-
if (this.$
|
|
1038
|
-
this.$
|
|
1037
|
+
if (this.$bus) {
|
|
1038
|
+
this.$bus.$emit('scrollToTop')
|
|
1039
1039
|
}
|
|
1040
1040
|
},
|
|
1041
1041
|
goToLocation(path) {
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
export const mockCarouselItems = [
|
|
2
|
+
{
|
|
3
|
+
content: 'This is the first slider',
|
|
4
|
+
image:
|
|
5
|
+
'https://picsum.photos/1024/480/?image=52',
|
|
6
|
+
link: 'www.google.com',
|
|
7
|
+
dateStart: '1/12/24',
|
|
8
|
+
dateEnd: '12/12/24',
|
|
9
|
+
favorite: 'Yes'
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
content: 'This is the second slider',
|
|
13
|
+
image:
|
|
14
|
+
'https://picsum.photos/1024/480/?image=54',
|
|
15
|
+
link: '/asbestos-removal-notification',
|
|
16
|
+
dateStart: '1/11/24',
|
|
17
|
+
dateEnd: '12/12/24',
|
|
18
|
+
favorite: ''
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
content: 'This is the third slider',
|
|
22
|
+
image:
|
|
23
|
+
'https://picsum.photos/1024/480/?image=56',
|
|
24
|
+
link: '/dangerous-goods-licences',
|
|
25
|
+
dateStart: '1/12/24',
|
|
26
|
+
dateEnd: '12/12/24',
|
|
27
|
+
favorite: ''
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
content: 'This is the fourth slider',
|
|
31
|
+
image:
|
|
32
|
+
'https://picsum.photos/1024/480/?image=58',
|
|
33
|
+
link: '/construction',
|
|
34
|
+
dateStart: '30/10/24',
|
|
35
|
+
dateEnd: '12/12/25',
|
|
36
|
+
favorite: ''
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
content: '',
|
|
40
|
+
image:
|
|
41
|
+
'https://picsum.photos/1024/480/?image=60',
|
|
42
|
+
link: '/construction',
|
|
43
|
+
dateStart: '30/10/24',
|
|
44
|
+
dateEnd: '12/12/25',
|
|
45
|
+
favorite: ''
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in magna tincidunt',
|
|
49
|
+
image:
|
|
50
|
+
'https://picsum.photos/1024/480/?image=62',
|
|
51
|
+
link: '/construction',
|
|
52
|
+
dateStart: '30/10/24',
|
|
53
|
+
dateEnd: '12/12/25',
|
|
54
|
+
favorite: ''
|
|
55
|
+
},
|
|
56
|
+
]
|
|
57
|
+
|