@kvdbil/components 14.1.1 → 14.2.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"),i=require("../../shared/media-queries.js");function a(v){return v&&typeof v=="object"&&"default"in v?v:{default:v}}var r=a(e),o=a(t);const l=o.default.div`
+"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 a(w){return w&&typeof w=="object"&&"default"in w?w:{default:w}}var r=a(e),o=a(t);const l=o.default.div`
   position: relative;
   min-height: 440px;
   display: flex;
@@ -19,11 +19,11 @@
   height: 440px;
   animation: ${d} 2s linear infinite;
 `,u=o.default.div`
-  pointer-events: ${({$pointerEvents:v})=>v};
+  pointer-events: ${({$pointerEvents:w})=>w};
   display: flex;
-  flex-direction: ${({$direction:v})=>v};
-  align-items: ${({$align:v})=>v};
-  justify-content: ${({$justify:v})=>v};
+  flex-direction: ${({$direction:w})=>w};
+  align-items: ${({$align:w})=>w};
+  justify-content: ${({$justify:w})=>w};
   padding: 3rem 1.5rem;
   z-index: 1;
   flex: 1;
@@ -33,67 +33,67 @@
   height: 100%;
   top: 0;
   left: 0;
-`,$=v=>typeof v=="number",f=v=>typeof v=="string",m=o.default.div`
+`,$=w=>typeof w=="number",f=w=>typeof w=="string",m=o.default.div`
   width: 100%;
   min-height: 440px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 
-  ${({$url:v,...w})=>v&&`
-    background: url('${v}');
+  ${({$url:w,...b})=>w&&`
+    background: url('${w}');
     background-repeat: no-repeat;
     background-size: cover;
-    background-position: ${(({$positionX:b,$positionY:k})=>$(b)&&$(k)?`${b}% ${k}%`:f(b)&&f(k)?`${b} ${k}`:b||k?`${($(b)?`${b}%`:b)||"50%"} ${($(k)?`${k}%`:k)||"50%"}`:"50% 50%")(w)};
+    background-position: ${(({$positionX:v,$positionY:E})=>$(v)&&$(E)?`${v}% ${E}%`:f(v)&&f(E)?`${v} ${E}`:v||E?`${($(v)?`${v}%`:v)||"50%"} ${($(E)?`${E}%`:E)||"50%"}`:"50% 50%")(b)};
   `}
 `,p=o.default.div`
   padding-left: 1rem;
   padding-right: 1rem;
+  z-index: 2;
 
   ${i.mq("tablet")} {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
 `,g=o.default.div`
-  
-  ${({$centered:v})=>v&&`
+  ${({$centered:w})=>w&&`
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
   `}
 
-  ${({$maxWidth:v,$dynamicGutter:w})=>!w&&`
+  ${({$maxWidth:w,$dynamicGutter:b})=>!b&&`
     width: 100%;
     margin-left: auto;
     margin-right: auto;
-    max-width: ${v}rem;
+    max-width: ${w}rem;
   `}
 
-  ${({$dynamicGutter:v})=>v&&`
+  ${({$dynamicGutter:w})=>w&&`
     ${i.mq("tablet")} {
-      margin-left: ${v.tabletVw}vw;
-      margin-right: ${v.tabletVw}vw;
+      margin-left: ${w.tabletVw}vw;
+      margin-right: ${w.tabletVw}vw;
     }
 
     ${i.mq("laptop")} {
-      margin-left: ${v.laptopVw}vw;
-      margin-right: ${v.laptopVw}vw;
+      margin-left: ${w.laptopVw}vw;
+      margin-right: ${w.laptopVw}vw;
     }
   `}
 `,h=o.default(n.Display3)`
   margin: 0;
-  color: ${({$color:v,theme:w})=>w.colors.text[v]};
+  color: ${({$color:w,theme:b})=>b.colors.text[w]};
 
-  ${({$shadow:v})=>v&&"text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);"}
+  ${({$shadow:w})=>w&&"text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);"}
 `,x=o.default(n.Title)`
   margin: 0.25rem 0;
-  color: ${({$color:v,theme:w})=>w.colors.text[v]};
+  color: ${({$color:w,theme:b})=>b.colors.text[w]};
 
-  ${({$shadow:v})=>v&&"text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);"}
+  ${({$shadow:w})=>w&&"text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);"}
 `,y=o.default.div`
   display: inline-block;
   margin-top: 3rem;
 
-  ${({$shadow:v,theme:w})=>v&&`box-shadow: ${w.elevations.elevation8};`}
-`;exports.colorAnimation=d,exports.default=({imageProps:v,videoProps:w,children:b,align:k,direction:P,justify:S,contentMaxWidth:W=64,heading:E,headingColor:V="dark",subheading:j,button:q,dynamicGutter:z,isLoading:I=!1,contentCentered:M=!1,containerStyle:X,elementShadow:G=!1})=>{const{autoplay:Y=0,controls:_=0,disablekb:A=0,end:C,loop:B=0,modestbranding:D=1,start:F=0,showInfo:H=0}=(w==null?void 0:w.ytConfig)||{};return I?r.default.createElement(s,{"data-testid":"loader"}):r.default.createElement(l,{style:X},w?r.default.createElement(c,{"data-testid":"hero-video",title:"video-frame",src:`${w.src}?disabledkb=${A}&autoplay=${Y}&controls=${_}&loop=${B}&modestbranding=${D}&start=${F}&showInfo=${H}${C?`&end=${C}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):r.default.createElement(m,{"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},r.default.createElement(p,null,(E||j||q)&&r.default.createElement(g,{$maxWidth:W,$dynamicGutter:z,$centered:M},E&&r.default.createElement(h,{as:"h1",$color:V,$shadow:G},E),j&&r.default.createElement(x,{$color:V,$shadow:G},j),q&&r.default.createElement(y,{$shadow:G},q)),b&&r.default.createElement(u,{$pointerEvents:w?"none":"auto",$align:k||"flex-start",$direction:P||"column",$justify:S||"flex-start"},b))))};
+  ${({$shadow:w,theme:b})=>w&&`box-shadow: ${b.elevations.elevation8};`}
+`;exports.colorAnimation=d,exports.default=({imageProps:w,imageElement:b,videoProps:v,children:E,align:P,direction:S,justify:W,contentMaxWidth:I=64,heading:k,headingColor:z="dark",subheading:j,button:q,dynamicGutter:M,isLoading:G=!1,contentCentered:X=!1,containerStyle:Y,elementShadow:V=!1})=>{const{autoplay:_=0,controls:A=0,disablekb:B=0,end:C,loop:D=0,modestbranding:F=1,start:H=0,showInfo:L=0}=(v==null?void 0:v.ytConfig)||{};return G?r.default.createElement(s,{"data-testid":"loader"}):r.default.createElement(l,{style:Y},v?r.default.createElement(c,{"data-testid":"hero-video",title:"video-frame",src:`${v.src}?disabledkb=${B}&autoplay=${_}&controls=${A}&loop=${D}&modestbranding=${F}&start=${H}&showInfo=${L}${C?`&end=${C}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):r.default.createElement(m,{"data-testid":"hero-image",$positionX:b||w==null?void 0:w.x,$positionY:b||w==null?void 0:w.y,$url:b||w==null?void 0:w.src},b,r.default.createElement(p,null,(k||j||q)&&r.default.createElement(g,{$maxWidth:I,$dynamicGutter:M,$centered:X},k&&r.default.createElement(h,{as:"h1",$color:z,$shadow:V},k),j&&r.default.createElement(x,{$color:z,$shadow:V},j),q&&r.default.createElement(y,{$shadow:V},q)),E&&r.default.createElement(u,{$pointerEvents:v?"none":"auto",$align:P||"flex-start",$direction:S||"column",$justify:W||"flex-start"},E))))};

package/esm/components/Hero/index.js

@@ -1,9 +1,9 @@
-import r from"react";import n,{keyframes as I}from"styled-components";import{Display3 as W,Title as q}from"../../typography/Heading/index.js";import{mq as m}from"../../shared/media-queries.js";const z=n.div`
+import r from"react";import n,{keyframes as I}from"styled-components";import{Display3 as W,Title as q}from"../../typography/Heading/index.js";import{mq as f}from"../../shared/media-queries.js";const L=n.div`
   position: relative;
   min-height: 440px;
   display: flex;
   flex-direction: column;
-`,u=I`
+`,$=I`
   0% {
     background-color:#f5f5f5;
   }
@@ -14,11 +14,11 @@ import r from"react";import n,{keyframes as I}from"styled-components";import{Dis
 
   100% {
     background-color:#f5f5f5;
-  }`,L=n.div`
+  }`,R=n.div`
   width: 100%;
   height: 440px;
-  animation: ${u} 2s linear infinite;
-`,R=n.div`
+  animation: ${$} 2s linear infinite;
+`,_=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 I}from"styled-components";import{Dis
   padding: 3rem 1.5rem;
   z-index: 1;
   flex: 1;
-`,_=n.iframe`
+`,A=n.iframe`
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
-`,o=e=>typeof e=="number",$=e=>typeof e=="string",A=({$positionX:e,$positionY:t})=>{if(o(e)&&o(t))return`${e}% ${t}%`;if($(e)&&$(t))return`${e} ${t}`;if(e||t){const a=o(e)?`${e}%`:e,l=o(t)?`${t}%`:t;return`${a||"50%"} ${l||"50%"}`}return"50% 50%"},D=n.div`
+`,l=e=>typeof e=="number",p=e=>typeof e=="string",D=({$positionX:e,$positionY:t})=>{if(l(e)&&l(t))return`${e}% ${t}%`;if(p(e)&&p(t))return`${e} ${t}`;if(e||t){const a=l(e)?`${e}%`:e,o=l(t)?`${t}%`:t;return`${a||"50%"} ${o||"50%"}`}return"50% 50%"},F=n.div`
   width: 100%;
   min-height: 440px;
   display: flex;
@@ -44,18 +44,18 @@ import r from"react";import n,{keyframes as I}from"styled-components";import{Dis
     background: url('${e}');
     background-repeat: no-repeat;
     background-size: cover;
-    background-position: ${A(t)};
+    background-position: ${D(t)};
   `}
-`,F=n.div`
+`,N=n.div`
   padding-left: 1rem;
   padding-right: 1rem;
+  z-index: 2;
 
-  ${m("tablet")} {
+  ${f("tablet")} {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
-`,N=n.div`
-  
+`,O=n.div`
   ${({$centered:e})=>e&&`
     display: flex;
     flex-direction: column;
@@ -71,29 +71,29 @@ import r from"react";import n,{keyframes as I}from"styled-components";import{Dis
   `}
 
   ${({$dynamicGutter:e})=>e&&`
-    ${m("tablet")} {
+    ${f("tablet")} {
       margin-left: ${e.tabletVw}vw;
       margin-right: ${e.tabletVw}vw;
     }
 
-    ${m("laptop")} {
+    ${f("laptop")} {
       margin-left: ${e.laptopVw}vw;
       margin-right: ${e.laptopVw}vw;
     }
   `}
-`,O=n(W)`
+`,S=n(W)`
   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);"}
-`,S=n(q)`
+`,T=n(q)`
   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);"}
-`,T=n.div`
+`,J=n.div`
   display: inline-block;
   margin-top: 3rem;
 
   ${({$shadow:e,theme:t})=>e&&`box-shadow: ${t.elevations.elevation8};`}
-`,J=({imageProps:e,videoProps:t,children:a,align:l,direction:p,justify:x,contentMaxWidth:h=64,heading:i,headingColor:f="dark",subheading:c,button:d,dynamicGutter:b,isLoading:w=!1,contentCentered:v=!1,containerStyle:y,elementShadow:s=!1})=>{const{autoplay:k=0,controls:E=0,disablekb:j=0,end:g,loop:C=0,modestbranding:V=1,start:B=0,showInfo:H=0}=(t==null?void 0:t.ytConfig)||{};return w?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=${C}&modestbranding=${V}&start=${B}&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},r.createElement(F,null,(i||c||d)&&r.createElement(N,{$maxWidth:h,$dynamicGutter:b,$centered:v},i&&r.createElement(O,{as:"h1",$color:f,$shadow:s},i),c&&r.createElement(S,{$color:f,$shadow:s},c),d&&r.createElement(T,{$shadow:s},d)),a&&r.createElement(R,{$pointerEvents:t?"none":"auto",$align:l||"flex-start",$direction:p||"column",$justify:x||"flex-start"},a))))};export{u as colorAnimation,J as default};
+`,K=({imageProps:e,imageElement:t,videoProps:a,children:o,align:g,direction:x,justify:h,contentMaxWidth:v=64,heading:i,headingColor:m="dark",subheading:d,button:c,dynamicGutter:b,isLoading:w=!1,contentCentered:y=!1,containerStyle:k,elementShadow:s=!1})=>{const{autoplay:E=0,controls:j=0,disablekb:C=0,end:u,loop:V=0,modestbranding:B=1,start:z=0,showInfo:H=0}=(a==null?void 0:a.ytConfig)||{};return w?r.createElement(R,{"data-testid":"loader"}):r.createElement(L,{style:k},a?r.createElement(A,{"data-testid":"hero-video",title:"video-frame",src:`${a.src}?disabledkb=${C}&autoplay=${E}&controls=${j}&loop=${V}&modestbranding=${B}&start=${z}&showInfo=${H}${u?`&end=${u}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):r.createElement(F,{"data-testid":"hero-image",$positionX:t||e==null?void 0:e.x,$positionY:t||e==null?void 0:e.y,$url:t||e==null?void 0:e.src},t,r.createElement(N,null,(i||d||c)&&r.createElement(O,{$maxWidth:v,$dynamicGutter:b,$centered:y},i&&r.createElement(S,{as:"h1",$color:m,$shadow:s},i),d&&r.createElement(T,{$color:m,$shadow:s},d),c&&r.createElement(J,{$shadow:s},c)),o&&r.createElement(_,{$pointerEvents:a?"none":"auto",$align:g||"flex-start",$direction:x||"column",$justify:h||"flex-start"},o))))};export{$ as colorAnimation,K as default};

package/package.json

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

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

@@ -35,6 +35,7 @@ export interface HeroProps {
     containerStyle?: Record<string, string>;
     videoProps?: VideoProps;
     imageProps?: ImageProps;
+    imageElement?: ReactNode;
     justify?: Justify;
     align?: Align;
     direction?: Direction;
@@ -48,5 +49,5 @@ export interface HeroProps {
     contentCentered?: boolean;
     elementShadow?: boolean;
 }
-declare const Hero: ({ imageProps, videoProps, children, align, direction, justify, contentMaxWidth, heading, headingColor, subheading, button, dynamicGutter, isLoading, contentCentered, containerStyle, elementShadow, }: HeroProps) => JSX.Element;
+declare const Hero: ({ imageProps, imageElement, videoProps, children, align, direction, justify, contentMaxWidth, heading, headingColor, subheading, button, dynamicGutter, isLoading, contentCentered, containerStyle, elementShadow, }: HeroProps) => JSX.Element;
 export default Hero;