@kvdbil/components 13.9.2 → 13.10.0

package/cjs/components/Hero/index.js

@@ -1,4 +1,4 @@
-"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`
+"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(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 o=a(e),l=a(t);const d=l.default.div`
   position: relative;
   min-height: 440px;
   display: flex;
@@ -19,11 +19,11 @@
   height: 440px;
   animation: ${u} 2s linear infinite;
 `,c=l.default.div`
-  pointer-events: ${({$pointerEvents:w})=>w};
+  pointer-events: ${({$pointerEvents:v})=>v};
   display: flex;
-  flex-direction: ${({$direction:w})=>w};
-  align-items: ${({$align:w})=>w};
-  justify-content: ${({$justify:w})=>w};
+  flex-direction: ${({$direction:v})=>v};
+  align-items: ${({$align:v})=>v};
+  justify-content: ${({$justify:v})=>v};
   padding: 3rem 1.5rem;
   z-index: 1;
   flex: 1;
@@ -33,19 +33,19 @@
   height: 100%;
   top: 0;
   left: 0;
-`,$=w=>typeof w=="number",m=w=>typeof w=="string",f=l.default.div`
+`,$=v=>typeof v=="number",m=v=>typeof v=="string",f=l.default.div`
   width: 100%;
   min-height: 440px;
   display: flex;
   flex-direction: column;
 
-  ${({$centered:w})=>w&&"justify-content: center;"}
+  ${({$centered:v})=>v&&"justify-content: center;"}
 
-  ${({$url:w,...v})=>w&&`
-    background: url('${w}');
+  ${({$url:v,...E})=>v&&`
+    background: url('${v}');
     background-repeat: no-repeat;
     background-size: cover;
-    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)};
+    background-position: ${(({$positionX:k,$positionY:j})=>$(k)&&$(j)?`${k}% ${j}%`:m(k)&&m(j)?`${k} ${j}`:k||j?`${($(k)?`${k}%`:k)||"50%"} ${($(j)?`${j}%`:j)||"50%"}`:"50% 50%")(E)};
   `}
 `,g=l.default.div`
   padding-left: 1rem;
@@ -56,52 +56,53 @@
     padding-right: 1.5rem;
   }
 `,x=l.default.div`
-  ${({$centered:w})=>!w&&"margin-top: 3rem;"}
+  ${({$centered:v})=>!v&&"margin-top: 3rem;"}
 
-  ${({$centered:w})=>w&&`
+  ${({$centered:v})=>v&&`
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
   `}
 
-  ${({$maxWidth:w,$dynamicGutter:v})=>!v&&`
+  ${({$maxWidth:v,$dynamicGutter:E})=>!E&&`
     width: 100%;
     margin-left: auto;
     margin-right: auto;
-    max-width: ${w}rem;
+    max-width: ${v}rem;
   `}
 
-  ${({$dynamicGutter:w})=>w&&`
+  ${({$dynamicGutter:v})=>v&&`
     ${i.mq("tablet")} {
-      margin-left: ${w.tabletVw}vw;
-      margin-right: ${w.tabletVw}vw;
+      margin-left: ${v.tabletVw}vw;
+      margin-right: ${v.tabletVw}vw;
     }
 
     ${i.mq("laptop")} {
-      margin-left: ${w.laptopVw}vw;
-      margin-right: ${w.laptopVw}vw;
+      margin-left: ${v.laptopVw}vw;
+      margin-right: ${v.laptopVw}vw;
     }
   `}
 
   ${i.mq("laptop")} {
-    ${({$centered:w})=>!w&&"margin-top: 3.75rem;"}
+    ${({$centered:v})=>!v&&"margin-top: 3.75rem;"}
   }
 `,h=l.default(n.Display3)`
   margin: 0;
-  color: ${({$color:w,theme:v})=>v.colors.text[w]};
+  color: ${({$color:v,theme:E})=>E.colors.text[v]};
 
-  ${({shadow:w})=>w&&"text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);"}
+  ${({shadow:v})=>v&&"text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);"}
 `,y=l.default(n.Title)`
   margin: 0.25rem 0;
-  color: ${({$color:w,theme:v})=>v.colors.text[w]};
+  color: ${({$color:v,theme:E})=>E.colors.text[v]};
 
-  ${({shadow:w})=>w&&"text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);"}
-`,b=l.default.a`
+  ${({shadow:v})=>v&&"text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);"}
+`,b=l.default.div`
   display: inline-block;
   margin-top: 3rem;
+`,w=l.default.a`
   text-decoration: none;
 
-  ${({shadow:w})=>w&&`box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.1),
+  ${({shadow:v})=>v&&`box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.1),
   0px 3px 14px 0px rgba(0, 0, 0, 0.09), 0px 4px 5px 0px rgba(0, 0, 0, 0.15);`}
-`;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))))};
+`;exports.colorAnimation=u,exports.default=({imageProps:v,videoProps:E,children:k,align:j,direction:M,justify:T,contentMaxWidth:X=64,heading:V,headingColor:C="dark",subheading:z,button:S,buttonProps:q,dynamicGutter:Y,isLoading:_=!1,contentCentered:G=!1,containerStyle:A,elementShadow:B=!1})=>{const{autoplay:P=0,controls:D=0,disablekb:F=0,end:W,loop:H=0,modestbranding:L=1,start:O=0,showInfo:J=0}=(E==null?void 0:E.ytConfig)||{},{link:K,text:N,color:I,...Q}=q!=null?q:{};return _?o.default.createElement(s,{"data-testid":"loader"}):o.default.createElement(d,{style:A},E?o.default.createElement(p,{"data-testid":"hero-video",title:"video-frame",src:`${E.src}?disabledkb=${F}&autoplay=${P}&controls=${D}&loop=${H}&modestbranding=${L}&start=${O}&showInfo=${J}${W?`&end=${W}`:""}`,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:v==null?void 0:v.x,$positionY:v==null?void 0:v.y,$url:v==null?void 0:v.src,$centered:G},o.default.createElement(g,null,(V||z||S||q)&&o.default.createElement(x,{$maxWidth:X,$dynamicGutter:Y,$centered:G},V&&o.default.createElement(h,{as:"h1",$color:C,shadow:B},V),z&&o.default.createElement(y,{$color:C,shadow:B},z),(S||q)&&o.default.createElement(b,null,S&&!q&&S,!S&&q&&o.default.createElement(w,{href:K,shadow:B},o.default.createElement(r.Button,{size:"large",as:"span",color:I!=null?I:"secondary",...Q},N)))),k&&o.default.createElement(c,{$pointerEvents:E?"none":"auto",$align:j||"flex-start",$direction:M||"column",$justify:T||"flex-start"},k))))};

package/esm/components/Hero/index.js

@@ -1,9 +1,9 @@
-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`
+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 _}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 A=n.div`
   position: relative;
   min-height: 440px;
   display: flex;
   flex-direction: column;
-`,u=q`
+`,$=q`
   0% {
     background-color:#f5f5f5;
   }
@@ -14,11 +14,11 @@ import r from"react";import n,{keyframes as q}from"styled-components";import{Dis
 
   100% {
     background-color:#f5f5f5;
-  }`,A=n.div`
+  }`,D=n.div`
   width: 100%;
   height: 440px;
-  animation: ${u} 2s linear infinite;
-`,D=n.div`
+  animation: ${$} 2s linear infinite;
+`,F=n.div`
   pointer-events: ${({$pointerEvents:e})=>e};
   display: flex;
   flex-direction: ${({$direction:e})=>e};
@@ -27,13 +27,13 @@ import r from"react";import n,{keyframes as q}from"styled-components";import{Dis
   padding: 3rem 1.5rem;
   z-index: 1;
   flex: 1;
-`,F=n.iframe`
+`,N=n.iframe`
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
-`,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`
+`,c=e=>typeof e=="number",h=e=>typeof e=="string",O=({$positionX:e,$positionY:t})=>{if(c(e)&&c(t))return`${e}% ${t}%`;if(h(e)&&h(t))return`${e} ${t}`;if(e||t){const l=c(e)?`${e}%`:e,d=c(t)?`${t}%`:t;return`${l||"50%"} ${d||"50%"}`}return"50% 50%"},J=n.div`
   width: 100%;
   min-height: 440px;
   display: flex;
@@ -45,17 +45,17 @@ import r from"react";import n,{keyframes as q}from"styled-components";import{Dis
     background: url('${e}');
     background-repeat: no-repeat;
     background-size: cover;
-    background-position: ${N(t)};
+    background-position: ${O(t)};
   `}
-`,J=n.div`
+`,K=n.div`
   padding-left: 1rem;
   padding-right: 1rem;
 
-  ${l("tablet")} {
+  ${i("tablet")} {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
-`,K=n.div`
+`,M=n.div`
   ${({$centered:e})=>!e&&"margin-top: 3rem;"}
 
   ${({$centered:e})=>e&&`
@@ -73,35 +73,36 @@ import r from"react";import n,{keyframes as q}from"styled-components";import{Dis
   `}
 
   ${({$dynamicGutter:e})=>e&&`
-    ${l("tablet")} {
+    ${i("tablet")} {
       margin-left: ${e.tabletVw}vw;
       margin-right: ${e.tabletVw}vw;
     }
 
-    ${l("laptop")} {
+    ${i("laptop")} {
       margin-left: ${e.laptopVw}vw;
       margin-right: ${e.laptopVw}vw;
     }
   `}
 
-  ${l("laptop")} {
+  ${i("laptop")} {
     ${({$centered:e})=>!e&&"margin-top: 3.75rem;"}
   }
-`,M=n(R)`
+`,Q=n(R)`
   margin: 0;
   color: ${({$color:e,theme:t})=>t.colors.text[e]};
 
   ${({shadow:e})=>e&&"text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);"}
-`,Q=n(S)`
+`,U=n(S)`
   margin: 0.25rem 0;
   color: ${({$color:e,theme:t})=>t.colors.text[e]};
 
   ${({shadow:e})=>e&&"text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);"}
-`,U=n.a`
+`,Z=n.div`
   display: inline-block;
   margin-top: 3rem;
+`,G=n.a`
   text-decoration: none;
 
   ${({shadow:e})=>e&&`box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.1),
   0px 3px 14px 0px rgba(0, 0, 0, 0.09), 0px 4px 5px 0px rgba(0, 0, 0, 0.15);`}
-`,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};
+`,X=({imageProps:e,videoProps:t,children:l,align:d,direction:y,justify:w,contentMaxWidth:b=64,heading:s,headingColor:f="dark",subheading:m,button:o,buttonProps:a,dynamicGutter:v,isLoading:k=!1,contentCentered:x=!1,containerStyle:E,elementShadow:p=!1})=>{const{autoplay:j=0,controls:B=0,disablekb:C=0,end:g,loop:V=0,modestbranding:L=1,start:z=0,showInfo:H=0}=(t==null?void 0:t.ytConfig)||{},{link:I,text:T,color:u,...W}=a!=null?a:{};return k?r.createElement(D,{"data-testid":"loader"}):r.createElement(A,{style:E},t?r.createElement(N,{"data-testid":"hero-video",title:"video-frame",src:`${t.src}?disabledkb=${C}&autoplay=${j}&controls=${B}&loop=${V}&modestbranding=${L}&start=${z}&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(J,{"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:x},r.createElement(K,null,(s||m||o||a)&&r.createElement(M,{$maxWidth:b,$dynamicGutter:v,$centered:x},s&&r.createElement(Q,{as:"h1",$color:f,shadow:p},s),m&&r.createElement(U,{$color:f,shadow:p},m),(o||a)&&r.createElement(Z,null,o&&!a&&o,!o&&a&&r.createElement(G,{href:I,shadow:p},r.createElement(_,{size:"large",as:"span",color:u!=null?u:"secondary",...W},T)))),l&&r.createElement(F,{$pointerEvents:t?"none":"auto",$align:d||"flex-start",$direction:y||"column",$justify:w||"flex-start"},l))))};export{$ as colorAnimation,X as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "13.9.2",
+  "version": "13.10.0",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/types/components/Hero/index.d.ts

@@ -43,6 +43,7 @@ export interface HeroProps {
     heading?: ReactNode;
     headingColor?: DarkOrLight;
     subheading?: ReactNode;
+    button?: ReactNode;
     buttonProps?: Omit<ButtonProps, 'children' | 'ref'> & {
         link: string;
         text: string;
@@ -52,5 +53,5 @@ export interface HeroProps {
     contentCentered?: boolean;
     elementShadow?: boolean;
 }
-declare const Hero: ({ imageProps, videoProps, children, align, direction, justify, contentMaxWidth, heading, headingColor, subheading, buttonProps, dynamicGutter, isLoading, contentCentered, containerStyle, elementShadow, }: HeroProps) => JSX.Element;
+declare const Hero: ({ imageProps, videoProps, children, align, direction, justify, contentMaxWidth, heading, headingColor, subheading, button, buttonProps, dynamicGutter, isLoading, contentCentered, containerStyle, elementShadow, }: HeroProps) => JSX.Element;
 export default Hero;