@kvdbil/components 11.0.1 → 11.3.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 +37 -23
  3. package/package.json +7 -1
  4. package/types/components/Hero/index.d.ts +8 -4
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: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))};
package/esm/components/Hero/index.js CHANGED
@@ -1,62 +1,76 @@
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 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
- `,S=n.div`
8
- pointer-events: ${({$pointerEvents:e})=>e};
7
+ `,q=n.div`
8
+ pointer-events: ${({$pointerEvents:t})=>t};
9
9
  position: relative;
10
10
  display: flex;
11
- flex-direction: ${({$direction:e})=>e};
12
- align-items: ${({$align:e})=>e};
13
- justify-content: ${({$justify:e})=>e};
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
- `,I=n.iframe`
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
- `,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=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
- `,R=n.div`
30
+ object-position: ${R};
31
+ `,_=n.div`
32
32
  width: 100%;
33
33
  z-index: 1;
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
- `,T=n.div`
41
+ `,D=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:t,$dynamicGutter:e})=>!e&&`
45
+ width: 100%;
46
+ margin-left: auto;
47
+ margin-right: auto;
48
+ max-width: ${t}rem;
49
+ `}
50
+
51
+ ${({$dynamicGutter:t})=>t&&`
52
+ ${i("tablet")} {
53
+ margin-left: ${t.tabletVw}vw;
54
+ margin-right: ${t.tabletVw}vw;
55
+ }
56
+
57
+ ${i("laptop")} {
58
+ margin-left: ${t.laptopVw}vw;
59
+ margin-right: ${t.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
+ `,F=n(H)`
53
67
  margin: 0;
54
- color: ${({$color:e,theme:t})=>t.colors.text[e]};
55
- `,D=n(z)`
68
+ color: ${({$color:t,theme:e})=>e.colors.text[t]};
69
+ `,N=n(S)`
56
70
  margin: 0.25rem 0;
57
- color: ${({$color:e,theme:t})=>t.colors.text[e]};
58
- `,F=n.a`
71
+ color: ${({$color:t,theme:e})=>e.colors.text[t]};
72
+ `,O=n.a`
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
+ `,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,10 +1,16 @@
1
1
  {
2
2
  "name": "@kvdbil/components",
3
- "version": "11.0.1",
3
+ "version": "11.3.0",
4
4
  "sideEffects": false,
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
7
7
  "types": "types/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "import": "./esm/index.js",
11
+ "require": "./cjs/index.js"
12
+ }
13
+ },
8
14
  "scripts": {
9
15
  "start": "yarn dev",
10
16
  "dev": "yarn start-storybook -s ./public -p 6006 watch-css",
package/types/components/Hero/index.d.ts CHANGED
@@ -1,12 +1,16 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { CSSProperties } from 'styled-components';
3
- import { Color } from '../../Types';
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'];
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;
@@ -38,11 +42,11 @@ export interface HeroProps {
38
42
  heading?: ReactNode;
39
43
  headingColor?: DarkOrLight;
40
44
  subheading?: ReactNode;
41
- buttonProps?: {
45
+ buttonProps?: Omit<ButtonProps, 'children' | 'ref'> & {
42
46
  link: string;
43
47
  text: string;
44
- color?: Color;
45
48
  };
49
+ dynamicGutter?: DynamicGutter;
46
50
  }
47
- declare const Hero: ({ imageProps, containerStyle, videoProps, children, align, direction, justify, contentMaxWidth, heading, headingColor, subheading, buttonProps, }: HeroProps) => JSX.Element;
51
+ declare const Hero: ({ imageProps, containerStyle, videoProps, children, align, direction, justify, contentMaxWidth, heading, headingColor, subheading, buttonProps, dynamicGutter, }: HeroProps) => JSX.Element;
48
52
  export default Hero;