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