@kvdbil/components 11.4.0 → 11.5.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 +46 -28
  2. package/esm/components/Hero/index.js +29 -11
  3. package/package.json +5 -3
  4. package/types/components/Hero/index.d.ts +3 -1
package/cjs/components/Hero/index.js CHANGED
@@ -1,76 +1,94 @@
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`
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`
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=l.default.div`
8
- pointer-events: ${({$pointerEvents:x})=>x};
7
+ `,u=t.keyframes`
8
+ 0% {
9
+ background-color:#f5f5f5;
10
+ }
11
+
12
+ 50%{
13
+ background-color: #e5e5e5
14
+ }
15
+
16
+ 100% {
17
+ background-color:#f5f5f5;
18
+ }`,s=l.default.div`
19
+ position: absolute;
20
+ width: 100%;
21
+ height: 100%;
22
+ top: 0;
23
+ left: 0;
24
+ animation: ${u} 2s linear infinite;
25
+ `,c=l.default.div`
26
+ pointer-events: ${({$pointerEvents:v})=>v};
9
27
  position: relative;
10
28
  display: flex;
11
- flex-direction: ${({$direction:x})=>x};
12
- align-items: ${({$align:x})=>x};
13
- justify-content: ${({$justify:x})=>x};
29
+ flex-direction: ${({$direction:v})=>v};
30
+ align-items: ${({$align:v})=>v};
31
+ justify-content: ${({$justify:v})=>v};
14
32
  padding: 50px;
15
33
  z-index: 1;
16
34
  flex: 1;
17
- `,s=l.default.iframe`
35
+ `,f=l.default.iframe`
18
36
  position: absolute;
19
37
  width: 100%;
20
38
  height: 100%;
21
39
  top: 0;
22
40
  left: 0;
23
- `,c=x=>typeof x=="number",p=x=>typeof x=="string",m=l.default.img`
41
+ `,m=v=>typeof v=="number",p=v=>typeof v=="string",$=l.default.img`
24
42
  position: absolute;
25
43
  top: 0;
26
44
  left: 0;
27
45
  height: 100%;
28
46
  width: 100%;
29
47
  object-fit: cover;
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
- `,$=l.default.div`
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
+ `,g=l.default.div`
32
50
  width: 100%;
33
51
  z-index: 1;
34
52
  padding-left: 1rem;
35
53
  padding-right: 1rem;
36
54
 
37
- ${n.mq("tablet")} {
55
+ ${r.mq("tablet")} {
38
56
  padding-left: 1.5rem;
39
57
  padding-right: 1.5rem;
40
58
  }
41
- `,f=l.default.div`
59
+ `,h=l.default.div`
42
60
  margin-top: 3rem;
43
61
 
44
- ${({$maxWidth:x,$dynamicGutter:v})=>!v&&`
62
+ ${({$maxWidth:v,$dynamicGutter:w})=>!w&&`
45
63
  width: 100%;
46
64
  margin-left: auto;
47
65
  margin-right: auto;
48
- max-width: ${x}rem;
66
+ max-width: ${v}rem;
49
67
  `}
50
68
 
51
- ${({$dynamicGutter:x})=>x&&`
52
- ${n.mq("tablet")} {
53
- margin-left: ${x.tabletVw}vw;
54
- margin-right: ${x.tabletVw}vw;
69
+ ${({$dynamicGutter:v})=>v&&`
70
+ ${r.mq("tablet")} {
71
+ margin-left: ${v.tabletVw}vw;
72
+ margin-right: ${v.tabletVw}vw;
55
73
  }
56
74
 
57
- ${n.mq("laptop")} {
58
- margin-left: ${x.laptopVw}vw;
59
- margin-right: ${x.laptopVw}vw;
75
+ ${r.mq("laptop")} {
76
+ margin-left: ${v.laptopVw}vw;
77
+ margin-right: ${v.laptopVw}vw;
60
78
  }
61
79
  `}
62
80
 
63
- ${n.mq("laptop")} {
81
+ ${r.mq("laptop")} {
64
82
  margin-top: 3.75rem;
65
83
  }
66
- `,g=l.default(i.Display3)`
84
+ `,y=l.default(i.Display3)`
67
85
  margin: 0;
68
- color: ${({$color:x,theme:v})=>v.colors.text[x]};
69
- `,h=l.default(i.Title)`
86
+ color: ${({$color:v,theme:w})=>w.colors.text[v]};
87
+ `,x=l.default(i.Title)`
70
88
  margin: 0.25rem 0;
71
- color: ${({$color:x,theme:v})=>v.colors.text[x]};
72
- `,y=l.default.a`
89
+ color: ${({$color:v,theme:w})=>w.colors.text[v]};
90
+ `,b=l.default.a`
73
91
  display: inline-block;
74
92
  margin-top: 3rem;
75
93
  text-decoration: none;
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))};
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))};
package/esm/components/Hero/index.js CHANGED
@@ -1,10 +1,28 @@
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`
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`
2
2
  position: relative;
3
3
  min-height: 440px;
4
4
  background-size: cover;
5
5
  display: flex;
6
6
  flex-direction: column;
7
- `,q=n.div`
7
+ `,u=I`
8
+ 0% {
9
+ background-color:#f5f5f5;
10
+ }
11
+
12
+ 50%{
13
+ background-color: #e5e5e5
14
+ }
15
+
16
+ 100% {
17
+ background-color:#f5f5f5;
18
+ }`,R=r.div`
19
+ position: absolute;
20
+ width: 100%;
21
+ height: 100%;
22
+ top: 0;
23
+ left: 0;
24
+ animation: ${u} 2s linear infinite;
25
+ `,W=r.div`
8
26
  pointer-events: ${({$pointerEvents:t})=>t};
9
27
  position: relative;
10
28
  display: flex;
@@ -14,21 +32,21 @@ import r from"react";import n from"styled-components";import{Display3 as H,Title
14
32
  padding: 50px;
15
33
  z-index: 1;
16
34
  flex: 1;
17
- `,L=n.iframe`
35
+ `,_=r.iframe`
18
36
  position: absolute;
19
37
  width: 100%;
20
38
  height: 100%;
21
39
  top: 0;
22
40
  left: 0;
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`
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`
24
42
  position: absolute;
25
43
  top: 0;
26
44
  left: 0;
27
45
  height: 100%;
28
46
  width: 100%;
29
47
  object-fit: cover;
30
- object-position: ${R};
31
- `,_=n.div`
48
+ object-position: ${A};
49
+ `,N=r.div`
32
50
  width: 100%;
33
51
  z-index: 1;
34
52
  padding-left: 1rem;
@@ -38,7 +56,7 @@ import r from"react";import n from"styled-components";import{Display3 as H,Title
38
56
  padding-left: 1.5rem;
39
57
  padding-right: 1.5rem;
40
58
  }
41
- `,D=n.div`
59
+ `,O=r.div`
42
60
  margin-top: 3rem;
43
61
 
44
62
  ${({$maxWidth:t,$dynamicGutter:e})=>!e&&`
@@ -63,14 +81,14 @@ import r from"react";import n from"styled-components";import{Display3 as H,Title
63
81
  ${i("laptop")} {
64
82
  margin-top: 3.75rem;
65
83
  }
66
- `,F=n(H)`
84
+ `,J=r(L)`
67
85
  margin: 0;
68
86
  color: ${({$color:t,theme:e})=>e.colors.text[t]};
69
- `,N=n(S)`
87
+ `,K=r(T)`
70
88
  margin: 0.25rem 0;
71
89
  color: ${({$color:t,theme:e})=>e.colors.text[t]};
72
- `,O=n.a`
90
+ `,M=r.a`
73
91
  display: inline-block;
74
92
  margin-top: 3rem;
75
93
  text-decoration: none;
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};
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};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kvdbil/components",
3
- "version": "11.4.0",
3
+ "version": "11.5.0",
4
4
  "sideEffects": false,
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
@@ -14,7 +14,7 @@
14
14
  "scripts": {
15
15
  "start": "yarn dev",
16
16
  "dev": "yarn start-storybook -s ./public -p 6006 watch-css",
17
- "test": "CI=true react-scripts test",
17
+ "test": "cross-env CI=true react-scripts test",
18
18
  "test:watch": "react-scripts test",
19
19
  "type-check": "tsc",
20
20
  "generateIcons": "svgr --icon 1em --template ./src/icons/template.js -d ./src/icons/components ./src/icons/svgs --typescript",
@@ -76,6 +76,7 @@
76
76
  "@typescript-eslint/eslint-plugin": "^4.30.0",
77
77
  "@typescript-eslint/parser": "^4.30.0",
78
78
  "babel-plugin-styled-components": "^1.10.0",
79
+ "cross-env": "^7.0.3",
79
80
  "esbuild": "^0.13.1",
80
81
  "eslint-config-prettier": "^8.3.0",
81
82
  "eslint-config-react-app": "^6.0.0",
@@ -120,5 +121,6 @@
120
121
  },
121
122
  "author": "",
122
123
  "license": "ISC",
123
- "homepage": "https://bitbucket.org/kvarndammen/kvdbil-components#readme"
124
+ "homepage": "https://bitbucket.org/kvarndammen/kvdbil-components#readme",
125
+ "dependencies": {}
124
126
  }
package/types/components/Hero/index.d.ts CHANGED
@@ -5,6 +5,7 @@ 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
+ export declare const colorAnimation: import("styled-components").Keyframes;
8
9
  declare type ObjectPositionX = number | 'center' | 'left' | 'right';
9
10
  declare type ObjectPositionY = number | 'center' | 'top' | 'bottom';
10
11
  declare type DynamicGutter = {
@@ -47,6 +48,7 @@ export interface HeroProps {
47
48
  text: string;
48
49
  };
49
50
  dynamicGutter?: DynamicGutter;
51
+ isLoading?: boolean;
50
52
  }
51
- declare const Hero: ({ imageProps, containerStyle, videoProps, children, align, direction, justify, contentMaxWidth, heading, headingColor, subheading, buttonProps, dynamicGutter, }: HeroProps) => JSX.Element;
53
+ declare const Hero: ({ imageProps, containerStyle, videoProps, children, align, direction, justify, contentMaxWidth, heading, headingColor, subheading, buttonProps, dynamicGutter, isLoading, }: HeroProps) => JSX.Element;
52
54
  export default Hero;