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
import { Component, ComponentInterface, Prop, h } from "@stencil/core";
import { ProcessFlowBoxVariants } from "../../utils/utils";
import { ProcessFlowBoxStepStates } from "../../utils/utils";
@Component({
tag: "hy-process-flow-box",
styleUrl: "process-flow-box.scss",
shadow: true,
})
export class ProcessFlowBox implements ComponentInterface {
@Prop() variant: ProcessFlowBoxVariants = ProcessFlowBoxVariants.default;
@Prop() boxNumber: string;
@Prop() boxTitle: string;
@Prop() boxDescription: string;
@Prop() intermediateStepTitle: string = "";
@Prop() stepState: ProcessFlowBoxStepStates = "default";
@Prop() numberTerm: string = "Vaihe";
render() {
const classVariant = [this.variant, "hy-process-flow-box"].join(" ");
const classContentVariant = [this.variant, "content"].join(" ");
const classIsEven = (parseInt(this.boxNumber) % 2 == 0) ? "even" : "odd";
const classNumberVariant = [this.variant, "number"].join(" ");
const classStepVariant = [this.variant, this.stepState, classIsEven, "step"].join(" ");
// let myHeaderSize: HeadingVarians = HeadingVarians.h2;
return (
<div class={classVariant}>
{this.intermediateStepTitle && (
<div class={classStepVariant}>
<svg class="desktop" width="200" height="72">
<polygon points="0 0, 15 36, 0 72, 168 72, 200 36, 168 0, 0 0" />
</svg>
<svg class="mobile" width="138" height="82">
<polygon points="0 0, 69 15, 138 0, 138 50, 69 82, 0 50" />
</svg>
<h2 class="hy-process-flow-box__step">
{this.intermediateStepTitle}
</h2>
</div>
)}
<div class={classNumberVariant}>
<h2
class="hy-process-flow-box__number"
aria-label={`${this.numberTerm} ${this.boxNumber}`}
>
{this.boxNumber}
</h2>
</div>
<div class={classContentVariant}>
<h3 class="hy-process-flow-box__title">{this.boxTitle}</h3>
<div class="hy-process-flow-box__description">
{this.boxDescription}
</div>
</div>
</div>
);
}
}