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