@kvdbil/components 11.1.0 → 11.2.0
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.
|
@@ -73,4 +73,4 @@
|
|
|
73
73
|
display: inline-block;
|
|
74
74
|
margin-top: 3rem;
|
|
75
75
|
text-decoration: none;
|
|
76
|
-
`;exports.default=({imageProps:x,containerStyle:v,videoProps:
|
|
76
|
+
`;exports.default=({imageProps:x,containerStyle:v,videoProps:b,children:E,align:G,direction:P,justify:V,contentMaxWidth:S=64,heading:j,headingColor:k="dark",subheading:q,buttonProps:w,dynamicGutter:W})=>{const{autoplay:C=0,controls:H=0,disablekb:I=0,end:B,loop:M=0,modestbranding:T=1,start:X=0,showInfo:Y=0}=(b==null?void 0:b.ytConfig)||{},{link:_,text:D,color:z,...F}=w!=null?w:{};return a.default.createElement(d,{style:v},b?a.default.createElement(s,{"data-testid":"hero-video",title:"video-frame",src:`${b.src}?disabledkb=${I}&autoplay=${C}&controls=${H}&loop=${M}&modestbranding=${T}&start=${X}&showInfo=${Y}${B?`&end=${B}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):a.default.createElement(m,{$positionX:x==null?void 0:x.x,$positionY:x==null?void 0:x.y,src:x==null?void 0:x.src,alt:"Hero background"}),(j||q||w)&&a.default.createElement($,null,a.default.createElement(f,{$maxWidth:S,$dynamicGutter:W},j&&a.default.createElement(g,{as:"h1",$color:k},j),q&&a.default.createElement(h,{$color:k},q),w&&a.default.createElement(y,{href:_},a.default.createElement(r.Button,{size:"large",as:"span",color:z!=null?z:"secondary",...F},D)))),E&&a.default.createElement(u,{$pointerEvents:b?"none":"auto",$align:G||"flex-start",$direction:P||"column",$justify:V||"flex-start"},E))};
|
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
import r from"react";import n from"styled-components";import{Display3 as
|
|
1
|
+
import r from"react";import n from"styled-components";import{Display3 as H,Title as S}from"../../typography/Heading/index.js";import{Button as I}from"../Button/index.js";import{mq as i}from"../../shared/media-queries.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";const T=n.div`
|
|
2
2
|
position: relative;
|
|
3
3
|
min-height: 440px;
|
|
4
4
|
background-size: cover;
|
|
5
5
|
display: flex;
|
|
6
6
|
flex-direction: column;
|
|
7
|
-
`,
|
|
8
|
-
pointer-events: ${({$pointerEvents:
|
|
7
|
+
`,q=n.div`
|
|
8
|
+
pointer-events: ${({$pointerEvents:t})=>t};
|
|
9
9
|
position: relative;
|
|
10
10
|
display: flex;
|
|
11
|
-
flex-direction: ${({$direction:
|
|
12
|
-
align-items: ${({$align:
|
|
13
|
-
justify-content: ${({$justify:
|
|
11
|
+
flex-direction: ${({$direction:t})=>t};
|
|
12
|
+
align-items: ${({$align:t})=>t};
|
|
13
|
+
justify-content: ${({$justify:t})=>t};
|
|
14
14
|
padding: 50px;
|
|
15
15
|
z-index: 1;
|
|
16
16
|
flex: 1;
|
|
17
|
-
`,
|
|
17
|
+
`,L=n.iframe`
|
|
18
18
|
position: absolute;
|
|
19
19
|
width: 100%;
|
|
20
20
|
height: 100%;
|
|
21
21
|
top: 0;
|
|
22
22
|
left: 0;
|
|
23
|
-
`,c=
|
|
23
|
+
`,c=t=>typeof t=="number",u=t=>typeof t=="string",R=({$positionX:t,$positionY:e})=>{if(c(t)&&c(e))return`${t}% ${e}%`;if(u(t)&&u(e))return`${t} ${e}`;if(t||e){const o=c(t)?`${t}%`:t,l=c(e)?`${e}%`:e;return`${o||"50%"} ${l||"50%"}`}return"50% 50%"},W=n.img`
|
|
24
24
|
position: absolute;
|
|
25
25
|
top: 0;
|
|
26
26
|
left: 0;
|
|
27
27
|
height: 100%;
|
|
28
28
|
width: 100%;
|
|
29
29
|
object-fit: cover;
|
|
30
|
-
object-position: ${
|
|
31
|
-
`,
|
|
30
|
+
object-position: ${R};
|
|
31
|
+
`,_=n.div`
|
|
32
32
|
width: 100%;
|
|
33
33
|
z-index: 1;
|
|
34
34
|
padding-left: 1rem;
|
|
@@ -38,39 +38,39 @@ import r from"react";import n from"styled-components";import{Display3 as V,Title
|
|
|
38
38
|
padding-left: 1.5rem;
|
|
39
39
|
padding-right: 1.5rem;
|
|
40
40
|
}
|
|
41
|
-
`,
|
|
41
|
+
`,D=n.div`
|
|
42
42
|
margin-top: 3rem;
|
|
43
43
|
|
|
44
|
-
${({$maxWidth:
|
|
44
|
+
${({$maxWidth:t,$dynamicGutter:e})=>!e&&`
|
|
45
45
|
width: 100%;
|
|
46
46
|
margin-left: auto;
|
|
47
47
|
margin-right: auto;
|
|
48
|
-
max-width: ${
|
|
48
|
+
max-width: ${t}rem;
|
|
49
49
|
`}
|
|
50
50
|
|
|
51
|
-
${({$dynamicGutter:
|
|
51
|
+
${({$dynamicGutter:t})=>t&&`
|
|
52
52
|
${i("tablet")} {
|
|
53
|
-
margin-left: ${
|
|
54
|
-
margin-right: ${
|
|
53
|
+
margin-left: ${t.tabletVw}vw;
|
|
54
|
+
margin-right: ${t.tabletVw}vw;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
${i("laptop")} {
|
|
58
|
-
margin-left: ${
|
|
59
|
-
margin-right: ${
|
|
58
|
+
margin-left: ${t.laptopVw}vw;
|
|
59
|
+
margin-right: ${t.laptopVw}vw;
|
|
60
60
|
}
|
|
61
61
|
`}
|
|
62
62
|
|
|
63
63
|
${i("laptop")} {
|
|
64
64
|
margin-top: 3.75rem;
|
|
65
65
|
}
|
|
66
|
-
`,
|
|
66
|
+
`,F=n(H)`
|
|
67
67
|
margin: 0;
|
|
68
|
-
color: ${({$color:
|
|
69
|
-
`,
|
|
68
|
+
color: ${({$color:t,theme:e})=>e.colors.text[t]};
|
|
69
|
+
`,N=n(S)`
|
|
70
70
|
margin: 0.25rem 0;
|
|
71
|
-
color: ${({$color:
|
|
72
|
-
`,
|
|
71
|
+
color: ${({$color:t,theme:e})=>e.colors.text[t]};
|
|
72
|
+
`,O=n.a`
|
|
73
73
|
display: inline-block;
|
|
74
74
|
margin-top: 3rem;
|
|
75
75
|
text-decoration: none;
|
|
76
|
-
`,
|
|
76
|
+
`,A=({imageProps:t,containerStyle:e,videoProps:o,children:l,align:g,direction:$,justify:h,contentMaxWidth:x=64,heading:d,headingColor:s="dark",subheading:m,buttonProps:a,dynamicGutter:y})=>{const{autoplay:b=0,controls:w=0,disablekb:v=0,end:p,loop:j=0,modestbranding:E=1,start:k=0,showInfo:B=0}=(o==null?void 0:o.ytConfig)||{},{link:C,text:V,color:f,...z}=a!=null?a:{};return r.createElement(T,{style:e},o?r.createElement(L,{"data-testid":"hero-video",title:"video-frame",src:`${o.src}?disabledkb=${v}&autoplay=${b}&controls=${w}&loop=${j}&modestbranding=${E}&start=${k}&showInfo=${B}${p?`&end=${p}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):r.createElement(W,{$positionX:t==null?void 0:t.x,$positionY:t==null?void 0:t.y,src:t==null?void 0:t.src,alt:"Hero background"}),(d||m||a)&&r.createElement(_,null,r.createElement(D,{$maxWidth:x,$dynamicGutter:y},d&&r.createElement(F,{as:"h1",$color:s},d),m&&r.createElement(N,{$color:s},m),a&&r.createElement(O,{href:C},r.createElement(I,{size:"large",as:"span",color:f!=null?f:"secondary",...z},V)))),l&&r.createElement(q,{$pointerEvents:o?"none":"auto",$align:g||"flex-start",$direction:$||"column",$justify:h||"flex-start"},l))};export{A as default};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { CSSProperties } from 'styled-components';
|
|
3
|
-
import {
|
|
3
|
+
import { ButtonProps } from '../../components/Button';
|
|
4
4
|
declare type Justify = Exclude<CSSProperties['justifyContent'], number>;
|
|
5
5
|
declare type Align = Exclude<CSSProperties['alignItems'], number>;
|
|
6
6
|
declare type Direction = CSSProperties['flexDirection'];
|
|
@@ -42,10 +42,9 @@ export interface HeroProps {
|
|
|
42
42
|
heading?: ReactNode;
|
|
43
43
|
headingColor?: DarkOrLight;
|
|
44
44
|
subheading?: ReactNode;
|
|
45
|
-
buttonProps?: {
|
|
45
|
+
buttonProps?: Omit<ButtonProps, 'children' | 'ref'> & {
|
|
46
46
|
link: string;
|
|
47
47
|
text: string;
|
|
48
|
-
color?: Color;
|
|
49
48
|
};
|
|
50
49
|
dynamicGutter?: DynamicGutter;
|
|
51
50
|
}
|