@kvdbil/components 12.3.0 → 12.3.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/cjs/components/Hero/index.js +29 -30
- package/esm/components/Hero/index.js +29 -30
- package/package.json +1 -1
|
@@ -1,70 +1,69 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),n=require("../../typography/Heading/index.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),n=require("../../typography/Heading/index.js"),r=require("../Button/index.js"),i=require("../../shared/media-queries.js");function o(v){return v&&typeof v=="object"&&"default"in v?v:{default:v}}require("../../theme.js"),require("../Spinner/index.js"),require("../../typography/ButtonText/index.js"),require("../Button/styles.js");var a=o(e),l=o(t);const d=l.default.div`
|
|
2
2
|
position: relative;
|
|
3
3
|
min-height: 440px;
|
|
4
|
-
background-size: cover;
|
|
5
4
|
display: flex;
|
|
6
5
|
flex-direction: column;
|
|
7
|
-
${({$centered:v})=>v&&"justify-content: center;"}
|
|
8
6
|
`,u=t.keyframes`
|
|
9
7
|
0% {
|
|
10
|
-
background-color:#f5f5f5;
|
|
8
|
+
background-color:#f5f5f5;
|
|
11
9
|
}
|
|
12
|
-
|
|
10
|
+
|
|
13
11
|
50%{
|
|
14
12
|
background-color: #e5e5e5
|
|
15
13
|
}
|
|
16
|
-
|
|
14
|
+
|
|
17
15
|
100% {
|
|
18
|
-
background-color:#f5f5f5;
|
|
16
|
+
background-color:#f5f5f5;
|
|
19
17
|
}`,c=l.default.div`
|
|
20
|
-
position: absolute;
|
|
21
18
|
width: 100%;
|
|
22
|
-
height:
|
|
23
|
-
top: 0;
|
|
24
|
-
left: 0;
|
|
19
|
+
height: 440px;
|
|
25
20
|
animation: ${u} 2s linear infinite;
|
|
26
21
|
`,s=l.default.div`
|
|
27
22
|
pointer-events: ${({$pointerEvents:v})=>v};
|
|
28
|
-
position: relative;
|
|
29
23
|
display: flex;
|
|
30
24
|
flex-direction: ${({$direction:v})=>v};
|
|
31
25
|
align-items: ${({$align:v})=>v};
|
|
32
26
|
justify-content: ${({$justify:v})=>v};
|
|
33
|
-
padding:
|
|
27
|
+
padding: 3rem 1.5rem;
|
|
34
28
|
z-index: 1;
|
|
35
29
|
flex: 1;
|
|
36
|
-
|
|
30
|
+
`,$=l.default.iframe`
|
|
37
31
|
position: absolute;
|
|
38
32
|
width: 100%;
|
|
39
33
|
height: 100%;
|
|
40
34
|
top: 0;
|
|
41
35
|
left: 0;
|
|
42
|
-
`,m=v=>typeof v=="number"
|
|
43
|
-
position: absolute;
|
|
44
|
-
top: 0;
|
|
45
|
-
left: 0;
|
|
46
|
-
height: 100%;
|
|
36
|
+
`,m=v=>typeof v=="number",f=v=>typeof v=="string",p=l.default.div`
|
|
47
37
|
width: 100%;
|
|
48
|
-
|
|
49
|
-
|
|
38
|
+
min-height: 440px;
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
|
|
42
|
+
${({$centered:v})=>v&&"justify-content: center;"}
|
|
43
|
+
|
|
44
|
+
${({$url:v,...w})=>v&&`
|
|
45
|
+
background: url('${v}');
|
|
46
|
+
background-repeat: no-repeat;
|
|
47
|
+
background-size: cover;
|
|
48
|
+
background-position: ${(({$positionX:j,$positionY:q})=>m(j)&&m(q)?`${j}% ${q}%`:f(j)&&f(q)?`${j} ${q}`:j||q?`${(m(j)?`${j}%`:j)||"50%"} ${(m(q)?`${q}%`:q)||"50%"}`:"50% 50%")(w)};
|
|
49
|
+
`}
|
|
50
50
|
`,g=l.default.div`
|
|
51
|
-
width: 100%;
|
|
52
|
-
z-index: 1;
|
|
53
51
|
padding-left: 1rem;
|
|
54
52
|
padding-right: 1rem;
|
|
55
53
|
|
|
56
|
-
${
|
|
54
|
+
${i.mq("tablet")} {
|
|
57
55
|
padding-left: 1.5rem;
|
|
58
56
|
padding-right: 1.5rem;
|
|
59
57
|
}
|
|
60
58
|
`,h=l.default.div`
|
|
61
|
-
${({$centered:v})=>!v&&"margin-top: 3rem;"}
|
|
59
|
+
${({$centered:v})=>!v&&"margin-top: 3rem;"}
|
|
62
60
|
|
|
63
61
|
${({$centered:v})=>v&&`
|
|
64
62
|
display: flex;
|
|
65
63
|
flex-direction: column;
|
|
66
64
|
align-items: center;
|
|
67
|
-
|
|
65
|
+
text-align: center;
|
|
66
|
+
`}
|
|
68
67
|
|
|
69
68
|
${({$maxWidth:v,$dynamicGutter:w})=>!w&&`
|
|
70
69
|
width: 100%;
|
|
@@ -74,18 +73,18 @@
|
|
|
74
73
|
`}
|
|
75
74
|
|
|
76
75
|
${({$dynamicGutter:v})=>v&&`
|
|
77
|
-
${
|
|
76
|
+
${i.mq("tablet")} {
|
|
78
77
|
margin-left: ${v.tabletVw}vw;
|
|
79
78
|
margin-right: ${v.tabletVw}vw;
|
|
80
79
|
}
|
|
81
80
|
|
|
82
|
-
${
|
|
81
|
+
${i.mq("laptop")} {
|
|
83
82
|
margin-left: ${v.laptopVw}vw;
|
|
84
83
|
margin-right: ${v.laptopVw}vw;
|
|
85
84
|
}
|
|
86
85
|
`}
|
|
87
86
|
|
|
88
|
-
${
|
|
87
|
+
${i.mq("laptop")} {
|
|
89
88
|
${({$centered:v})=>!v&&"margin-top: 3.75rem;"}
|
|
90
89
|
}
|
|
91
90
|
`,y=l.default(n.Display3)`
|
|
@@ -98,4 +97,4 @@
|
|
|
98
97
|
display: inline-block;
|
|
99
98
|
margin-top: 3rem;
|
|
100
99
|
text-decoration: none;
|
|
101
|
-
`;exports.colorAnimation=u,exports.default=({imageProps:v,videoProps:w,children:
|
|
100
|
+
`;exports.colorAnimation=u,exports.default=({imageProps:v,videoProps:w,children:j,align:q,direction:C,justify:S,contentMaxWidth:W=64,heading:k,headingColor:G="dark",subheading:B,buttonProps:E,dynamicGutter:I,isLoading:M=!1,contentCentered:P=!1,containerStyle:T})=>{const{autoplay:X=0,controls:Y=0,disablekb:_=0,end:V,loop:A=0,modestbranding:D=1,start:F=0,showInfo:H=0}=(w==null?void 0:w.ytConfig)||{},{link:L,text:O,color:z,...J}=E!=null?E:{};return M?a.default.createElement(c,{"data-testid":"loader"}):a.default.createElement(d,{style:T},w?a.default.createElement($,{"data-testid":"hero-video",title:"video-frame",src:`${w.src}?disabledkb=${_}&autoplay=${X}&controls=${Y}&loop=${A}&modestbranding=${D}&start=${F}&showInfo=${H}${V?`&end=${V}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):a.default.createElement(p,{"data-testid":"hero-image",$positionX:v==null?void 0:v.x,$positionY:v==null?void 0:v.y,$url:v==null?void 0:v.src,$centered:P},a.default.createElement(g,null,(k||B||E)&&a.default.createElement(h,{$maxWidth:W,$dynamicGutter:I,$centered:P},k&&a.default.createElement(y,{as:"h1",$color:G},k),B&&a.default.createElement(x,{$color:G},B),E&&a.default.createElement(b,{href:L},a.default.createElement(r.Button,{size:"large",as:"span",color:z!=null?z:"secondary",...J},O))),j&&a.default.createElement(s,{$pointerEvents:w?"none":"auto",$align:q||"flex-start",$direction:C||"column",$justify:S||"flex-start"},j))))};
|
|
@@ -1,55 +1,53 @@
|
|
|
1
|
-
import n from"react";import r,{keyframes as L}from"styled-components";import{Display3 as T,Title as q}from"../../typography/Heading/index.js";import{Button as
|
|
1
|
+
import n from"react";import r,{keyframes as L}from"styled-components";import{Display3 as T,Title as q}from"../../typography/Heading/index.js";import{Button as R}from"../Button/index.js";import{mq as a}from"../../shared/media-queries.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";const W=r.div`
|
|
2
2
|
position: relative;
|
|
3
3
|
min-height: 440px;
|
|
4
|
-
background-size: cover;
|
|
5
4
|
display: flex;
|
|
6
5
|
flex-direction: column;
|
|
7
|
-
|
|
8
|
-
`,g=L`
|
|
6
|
+
`,p=L`
|
|
9
7
|
0% {
|
|
10
|
-
background-color:#f5f5f5;
|
|
8
|
+
background-color:#f5f5f5;
|
|
11
9
|
}
|
|
12
|
-
|
|
10
|
+
|
|
13
11
|
50%{
|
|
14
12
|
background-color: #e5e5e5
|
|
15
13
|
}
|
|
16
|
-
|
|
14
|
+
|
|
17
15
|
100% {
|
|
18
|
-
background-color:#f5f5f5;
|
|
19
|
-
}`,
|
|
20
|
-
position: absolute;
|
|
16
|
+
background-color:#f5f5f5;
|
|
17
|
+
}`,_=r.div`
|
|
21
18
|
width: 100%;
|
|
22
|
-
height:
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
animation: ${g} 2s linear infinite;
|
|
26
|
-
`,_=r.div`
|
|
19
|
+
height: 440px;
|
|
20
|
+
animation: ${p} 2s linear infinite;
|
|
21
|
+
`,A=r.div`
|
|
27
22
|
pointer-events: ${({$pointerEvents:e})=>e};
|
|
28
|
-
position: relative;
|
|
29
23
|
display: flex;
|
|
30
24
|
flex-direction: ${({$direction:e})=>e};
|
|
31
25
|
align-items: ${({$align:e})=>e};
|
|
32
26
|
justify-content: ${({$justify:e})=>e};
|
|
33
|
-
padding:
|
|
27
|
+
padding: 3rem 1.5rem;
|
|
34
28
|
z-index: 1;
|
|
35
29
|
flex: 1;
|
|
36
|
-
`,
|
|
30
|
+
`,D=r.iframe`
|
|
37
31
|
position: absolute;
|
|
38
32
|
width: 100%;
|
|
39
33
|
height: 100%;
|
|
40
34
|
top: 0;
|
|
41
35
|
left: 0;
|
|
42
|
-
`,i=e=>typeof e=="number",$=e=>typeof e=="string",
|
|
43
|
-
position: absolute;
|
|
44
|
-
top: 0;
|
|
45
|
-
left: 0;
|
|
46
|
-
height: 100%;
|
|
36
|
+
`,i=e=>typeof e=="number",$=e=>typeof e=="string",F=({$positionX:e,$positionY:t})=>{if(i(e)&&i(t))return`${e}% ${t}%`;if($(e)&&$(t))return`${e} ${t}`;if(e||t){const o=i(e)?`${e}%`:e,c=i(t)?`${t}%`:t;return`${o||"50%"} ${c||"50%"}`}return"50% 50%"},N=r.div`
|
|
47
37
|
width: 100%;
|
|
48
|
-
|
|
49
|
-
|
|
38
|
+
min-height: 440px;
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
|
|
42
|
+
${({$centered:e})=>e&&"justify-content: center;"}
|
|
43
|
+
|
|
44
|
+
${({$url:e,...t})=>e&&`
|
|
45
|
+
background: url('${e}');
|
|
46
|
+
background-repeat: no-repeat;
|
|
47
|
+
background-size: cover;
|
|
48
|
+
background-position: ${F(t)};
|
|
49
|
+
`}
|
|
50
50
|
`,O=r.div`
|
|
51
|
-
width: 100%;
|
|
52
|
-
z-index: 1;
|
|
53
51
|
padding-left: 1rem;
|
|
54
52
|
padding-right: 1rem;
|
|
55
53
|
|
|
@@ -58,13 +56,14 @@ import n from"react";import r,{keyframes as L}from"styled-components";import{Dis
|
|
|
58
56
|
padding-right: 1.5rem;
|
|
59
57
|
}
|
|
60
58
|
`,J=r.div`
|
|
61
|
-
${({$centered:e})=>!e&&"margin-top: 3rem;"}
|
|
59
|
+
${({$centered:e})=>!e&&"margin-top: 3rem;"}
|
|
62
60
|
|
|
63
61
|
${({$centered:e})=>e&&`
|
|
64
62
|
display: flex;
|
|
65
63
|
flex-direction: column;
|
|
66
64
|
align-items: center;
|
|
67
|
-
|
|
65
|
+
text-align: center;
|
|
66
|
+
`}
|
|
68
67
|
|
|
69
68
|
${({$maxWidth:e,$dynamicGutter:t})=>!t&&`
|
|
70
69
|
width: 100%;
|
|
@@ -98,4 +97,4 @@ import n from"react";import r,{keyframes as L}from"styled-components";import{Dis
|
|
|
98
97
|
display: inline-block;
|
|
99
98
|
margin-top: 3rem;
|
|
100
99
|
text-decoration: none;
|
|
101
|
-
`,U=({imageProps:e,videoProps:t,children:o,align:c,direction:
|
|
100
|
+
`,U=({imageProps:e,videoProps:t,children:o,align:c,direction:x,justify:h,contentMaxWidth:y=64,heading:d,headingColor:s="dark",subheading:m,buttonProps:l,dynamicGutter:b,isLoading:w=!1,contentCentered:f=!1,containerStyle:v})=>{const{autoplay:k=0,controls:E=0,disablekb:j=0,end:u,loop:B=0,modestbranding:C=1,start:V=0,showInfo:S=0}=(t==null?void 0:t.ytConfig)||{},{link:z,text:H,color:g,...I}=l!=null?l:{};return w?n.createElement(_,{"data-testid":"loader"}):n.createElement(W,{style:v},t?n.createElement(D,{"data-testid":"hero-video",title:"video-frame",src:`${t.src}?disabledkb=${j}&autoplay=${k}&controls=${E}&loop=${B}&modestbranding=${C}&start=${V}&showInfo=${S}${u?`&end=${u}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):n.createElement(N,{"data-testid":"hero-image",$positionX:e==null?void 0:e.x,$positionY:e==null?void 0:e.y,$url:e==null?void 0:e.src,$centered:f},n.createElement(O,null,(d||m||l)&&n.createElement(J,{$maxWidth:y,$dynamicGutter:b,$centered:f},d&&n.createElement(K,{as:"h1",$color:s},d),m&&n.createElement(M,{$color:s},m),l&&n.createElement(Q,{href:z},n.createElement(R,{size:"large",as:"span",color:g!=null?g:"secondary",...I},H))),o&&n.createElement(A,{$pointerEvents:t?"none":"auto",$align:c||"flex-start",$direction:x||"column",$justify:h||"flex-start"},o))))};export{p as colorAnimation,U as default};
|