@kvdbil/components 8.4.1 → 8.4.2

package/cjs/components/Hero/index.js

@@ -1,26 +1,32 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),r=require("../../theme.js");function o(f){return f&&typeof f=="object"&&"default"in f?f:{default:f}}var l=o(e),i=o(t);const a=i.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),o=require("../../theme.js");function i(p){return p&&typeof p=="object"&&"default"in p?p:{default:p}}var r=i(e),n=i(t);const l=n.default.div`
   position: relative;
-  height: 60vh;
-  max-height: 600px;
-  background-color: ${r.default.colors.primary.main};
+  min-height: 500px;
+  background-color: ${o.default.colors.primary.main};
   background-size: cover;
-`,d=i.default.div`
+  display: flex;
+`,a=n.default.div`
+  pointer-events: ${({$pointerEvents:p})=>p};
   position: relative;
   display: flex;
+  flex-direction: ${({$direction:p})=>p};
+  align-items: ${({$align:p})=>p};
+  justify-content: ${({$justify:p})=>p};
   padding: 50px;
   z-index: 1;
-`,n=i.default.iframe`
+  flex: 1;
+`,d=n.default.iframe`
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
-`,c=i.default.img`
+`,s=p=>typeof p=="number",u=p=>typeof p=="string",c=n.default.img`
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   object-fit: cover;
-  background-color: ${r.default.colors.primary.main};
-`;function u(f){const{imageProps:s,containerStyle:m,videoProps:p,children:h}=f,v={objectPosition:`${(s==null?void 0:s.x)?s.x:"50%"} ${(s==null?void 0:s.y)?s.y:"50%"}`};return l.default.createElement(a,{style:m},p?l.default.createElement(n,{"data-testid":"hero-video",title:"video-frame",src:p.src,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):l.default.createElement(l.default.Fragment,null,l.default.createElement(c,{src:s==null?void 0:s.src,alt:"Hero background",style:v}),l.default.createElement(d,null,h)))}exports.Hero=u,exports.default=u;
+  background-color: ${o.default.colors.primary.main};
+  object-position: ${({$positionX:p,$positionY:$})=>s(p)&&s($)?`${p}% ${$}%`:u(p)&&u($)?`${p} ${$}`:p||$?`${(s(p)?`${p}%`:p)||"50%"} ${(s($)?`${$}%`:$)||"50%"}`:"50% 50%"};
+`;function f(p){const{imageProps:$,containerStyle:g,videoProps:m,children:v,align:b,direction:h,justify:x}=p,{autoplay:j=0,controls:w=0,disablekb:k=0,end:y,loop:E=0,modestbranding:q=1,start:P=0,showInfo:z=0}=(m==null?void 0:m.ytConfig)||{};return r.default.createElement(l,{style:g},m?r.default.createElement(d,{"data-testid":"hero-video",title:"video-frame",src:`${m.src}?disabledkb=${k}&autoplay=${j}&controls=${w}&loop=${E}&modestbranding=${q}&start=${P}&showInfo=${z}${y?`&end=${y}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):r.default.createElement(c,{$positionX:$==null?void 0:$.x,$positionY:$==null?void 0:$.y,src:$==null?void 0:$.src,alt:"Hero background"}),r.default.createElement(a,{$pointerEvents:m?"none":"auto",$align:b||"flex-start",$direction:h||"column",$justify:x||"flex-start"},v))}exports.Hero=f,exports.default=f;

package/esm/components/Hero/index.js

@@ -1,26 +1,32 @@
-import t from"react";import o from"styled-components";import i from"../../theme.js";const d=o.div`
+import r from"react";import n from"styled-components";import c from"../../theme.js";const w=n.div`
   position: relative;
-  height: 60vh;
-  max-height: 600px;
-  background-color: ${i.colors.primary.main};
+  min-height: 500px;
+  background-color: ${c.colors.primary.main};
   background-size: cover;
-`,m=o.div`
+  display: flex;
+`,j=n.div`
+  pointer-events: ${({$pointerEvents:e})=>e};
   position: relative;
   display: flex;
+  flex-direction: ${({$direction:e})=>e};
+  align-items: ${({$align:e})=>e};
+  justify-content: ${({$justify:e})=>e};
   padding: 50px;
   z-index: 1;
-`,p=o.iframe`
+  flex: 1;
+`,k=n.iframe`
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
-`,u=o.img`
+`,i=e=>typeof e=="number",s=e=>typeof e=="string",E=({$positionX:e,$positionY:t})=>{if(i(e)&&i(t))return`${e}% ${t}%`;if(s(e)&&s(t))return`${e} ${t}`;if(e||t){const l=i(e)?`${e}%`:e,o=i(t)?`${t}%`:t;return`${l||"50%"} ${o||"50%"}`}return"50% 50%"},I=n.img`
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   object-fit: cover;
-  background-color: ${i.colors.primary.main};
-`;function l(a){const{imageProps:e,containerStyle:n,videoProps:r,children:c}=a,s={objectPosition:`${(e==null?void 0:e.x)?e.x:"50%"} ${(e==null?void 0:e.y)?e.y:"50%"}`};return t.createElement(d,{style:n},r?t.createElement(p,{"data-testid":"hero-video",title:"video-frame",src:r.src,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):t.createElement(t.Fragment,null,t.createElement(u,{src:e==null?void 0:e.src,alt:"Hero background",style:s}),t.createElement(m,null,c)))}export{l as Hero,l as default};
+  background-color: ${c.colors.primary.main};
+  object-position: ${E};
+`;function d(e){const{imageProps:t,containerStyle:l,videoProps:o,children:u,align:m,direction:f,justify:p}=e,{autoplay:g=0,controls:y=0,disablekb:b=0,end:a,loop:h=0,modestbranding:v=1,start:$=0,showInfo:x=0}=(o==null?void 0:o.ytConfig)||{};return r.createElement(w,{style:l},o?r.createElement(k,{"data-testid":"hero-video",title:"video-frame",src:`${o.src}?disabledkb=${b}&autoplay=${g}&controls=${y}&loop=${h}&modestbranding=${v}&start=${$}&showInfo=${x}${a?`&end=${a}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):r.createElement(I,{$positionX:t==null?void 0:t.x,$positionY:t==null?void 0:t.y,src:t==null?void 0:t.src,alt:"Hero background"}),r.createElement(j,{$pointerEvents:o?"none":"auto",$align:m||"flex-start",$direction:f||"column",$justify:p||"flex-start"},u))}export{d as Hero,d as default};

package/package.json

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

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

@@ -1,17 +1,37 @@
 import { ReactNode } from 'react';
+import { CSSProperties } from 'styled-components';
+declare type Justify = Exclude<CSSProperties['justifyContent'], number>;
+declare type Align = Exclude<CSSProperties['alignItems'], number>;
+declare type Direction = CSSProperties['flexDirection'];
+declare type ObjectPositionX = number | 'center' | 'left' | 'right';
+declare type ObjectPositionY = number | 'center' | 'top' | 'bottom';
 export interface HeroBaseProps {
     children?: ReactNode;
     containerStyle?: Record<string, string>;
     videoProps?: VideoProps;
     imageProps?: ImageProps;
+    justify?: Justify;
+    align?: Align;
+    direction?: Direction;
 }
+declare type YouTubeVideoProps = {
+    autoplay: 0 | 1;
+    controls: 0 | 1;
+    disablekb: 0 | 1;
+    end: number;
+    loop: 0 | 1;
+    modestbranding: 0 | 1;
+    start: number;
+    showInfo: 0 | 1;
+};
 declare type ImageProps = {
     src: string;
-    x?: string | number;
-    y?: string | number;
+    x?: ObjectPositionX;
+    y?: ObjectPositionY;
 };
 declare type VideoProps = {
     src: string;
+    ytConfig?: Partial<YouTubeVideoProps>;
 };
 export interface ImageBannerProps extends HeroBaseProps {
     imageProps: ImageProps;