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