Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import { Component, ComponentInterface, Prop, h } from '@stencil/core';
@Component({
tag: 'hy-cta-liftup-image-text',
styleUrl: 'cta-liftup-image-text.scss',
shadow: true,
})
export class CtaLiftupImageText implements ComponentInterface {
@Prop() imageRight: boolean = false;
@Prop() imageUrl: string = null;
@Prop() imageAlt: string = "";
@Prop() textTitle?: string;
@Prop() textDescription: string = null;
@Prop() mainUrl?: string;
@Prop() mainUrlTitle?: string;
@Prop() mainUrlAriaLabel?: string;
@Prop() mainUrlIsExternal: boolean = false;
@Prop() standaloneUrl?: string;
@Prop() standaloneUrlTitle?: string;
@Prop() standaloneUrlAriaLabel?: string;
@Prop() standaloneUrlIsExternal: boolean = false;
@Prop() standaloneUrl2?: string;
@Prop() standaloneUrlTitle2?: string;
@Prop() standaloneUrlAriaLabel2?: string;
@Prop() standaloneUrlIsExternal2: boolean = false;
render() {
const classAttributes = [
"hy-cta-liftup-image-text",
this.imageRight ? "hy-cta-liftup-image-text--right-image" : null
].join(" ");
const contentClassAttributes = ["hy-cta-liftup-image-text__text-container"].join(" ");
const imageRightClassAttributes = [
"hy-cta-liftup-image-text__image-container",
"hy-cta-liftup-image-text__image-container--right"].join(" ");
const imageLeftClassAttributes = [
"hy-cta-liftup-image-text__image-container",
"hy-cta-liftup-image-text__image-container--left"].join(" ");
const imageLeft = !this.imageRight;
return (
<div class={classAttributes}>
{ imageLeft &&
<div class={imageLeftClassAttributes}>
<img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
</div>
}
<div class={contentClassAttributes}>
<div class="hy-cta-liftup-image-text__text-container__title">{ this.textTitle }</div>
<div class="hy-cta-liftup-image-text__text-container__description">{ this.textDescription }</div>
{this.mainUrl &&
<div class="hy-cta-liftup-image-text__text-container__link">
<hy-cta-link-button link-content={this.mainUrlTitle}
aria-label={this.mainUrlAriaLabel}
url={this.mainUrl}
is-external={this.mainUrlIsExternal}
/>
</div>
}
{this.standaloneUrl &&
<div class="hy-cta-liftup-image-text__text-container__standalonelink">
<hy-standalone-link
link-content={this.standaloneUrlTitle}
aria-label={this.standaloneUrlAriaLabel}
url={this.standaloneUrl}
is-external={this.standaloneUrlIsExternal}
/>
</div>
}
{this.standaloneUrl2 &&
<div class="hy-cta-liftup-image-text__text-container__standalonelink">
<hy-standalone-link
link-content={this.standaloneUrlTitle2}
aria-label={this.standaloneUrlAriaLabel2}
url={this.standaloneUrl2}
is-external={this.standaloneUrlIsExternal2}
/>
</div>
}
</div>
{ this.imageRight &&
<div class={imageRightClassAttributes}>
<img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
</div>
}
</div>
);
}
}