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