@front10/basic-widget - npm Package Compare versions

Comparing version 0.9.0-alpha.0 to 0.12.0

dist/basic-widget.cjs.development.js

@@ -7,2 +7,3 @@ 'use strict';
 var React = require('react');
+var nanoid = require('nanoid');
 var containerElements = require('@front10/container-elements');
@@ -72,2 +73,6 @@
 
+var bgGradient = function bgGradient(backgroundGradient, gradientReduction, gradientColor) {
+  if (backgroundGradient === "circular") return "radial-gradient(at center center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) " + gradientReduction + "%, " + gradientColor + " 100%)";else if (backgroundGradient === "up") return "linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) " + gradientReduction + "%, " + gradientColor + " 100%)";else if (backgroundGradient === "45deg") return "linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) " + gradientReduction + "%, " + gradientColor + " 100%)";else if (backgroundGradient === "-45deg") return "linear-gradient(-45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) " + gradientReduction + "%, " + gradientColor + " 100%)";else return "linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) " + gradientReduction + "%, " + gradientColor + " 100%)";
+};
+
 var Cover = function Cover(_ref) {
@@ -79,4 +84,22 @@ var src = _ref.src,
       backgroundPosition = _ref$backgroundPositi === void 0 ? "center" : _ref$backgroundPositi,
-      _ref$content = _ref.content,
-      content = _ref$content === void 0 ? "" : _ref$content,
+      _ref$headingContent = _ref.headingContent,
+      headingContent = _ref$headingContent === void 0 ? "" : _ref$headingContent,
+      _ref$headingSpacing = _ref.headingSpacing,
+      headingSpacing = _ref$headingSpacing === void 0 ? "16px" : _ref$headingSpacing,
+      _ref$subHeadingConten = _ref.subHeadingContent,
+      subHeadingContent = _ref$subHeadingConten === void 0 ? "" : _ref$subHeadingConten,
+      _ref$subHeadingColor = _ref.subHeadingColor,
+      subHeadingColor = _ref$subHeadingColor === void 0 ? "white" : _ref$subHeadingColor,
+      _ref$parallax = _ref.parallax,
+      parallax = _ref$parallax === void 0 ? true : _ref$parallax,
+      _ref$buttonsSpacing = _ref.buttonsSpacing,
+      buttonsSpacing = _ref$buttonsSpacing === void 0 ? "48px" : _ref$buttonsSpacing,
+      _ref$backgroundGradie = _ref.backgroundGradient,
+      backgroundGradient = _ref$backgroundGradie === void 0 ? "circular" : _ref$backgroundGradie,
+      _ref$gradientReductio = _ref.gradientReduction,
+      gradientReduction = _ref$gradientReductio === void 0 ? 50 : _ref$gradientReductio,
+      _ref$headingColor = _ref.headingColor,
+      headingColor = _ref$headingColor === void 0 ? "white" : _ref$headingColor,
+      _ref$gradientColor = _ref.gradientColor,
+      gradientColor = _ref$gradientColor === void 0 ? "#454545" : _ref$gradientColor,
       _ref$width = _ref.width,
@@ -87,2 +110,5 @@ width = _ref$width === void 0 ? "100%" : _ref$width,
       heading = _ref.heading,
+      subHeading = _ref.subHeading,
+      primaryButton = _ref.primaryButton,
+      secondaryButton = _ref.secondaryButton,
       _ref$align = _ref.align,
@@ -92,6 +118,14 @@ align = _ref$align === void 0 ? "center" : _ref$align,
       alignY = _ref$alignY === void 0 ? "center" : _ref$alignY,
-      _ref$opacity = _ref.opacity,
-      opacity = _ref$opacity === void 0 ? 0.5 : _ref$opacity,
+      _ref$showHeading = _ref.showHeading,
+      showHeading = _ref$showHeading === void 0 ? true : _ref$showHeading,
+      _ref$showSubHeading = _ref.showSubHeading,
+      showSubHeading = _ref$showSubHeading === void 0 ? true : _ref$showSubHeading,
+      _ref$showButtons = _ref.showButtons,
+      showButtons = _ref$showButtons === void 0 ? true : _ref$showButtons,
+      _ref$showPrimaryButto = _ref.showPrimaryButton,
+      showPrimaryButton = _ref$showPrimaryButto === void 0 ? true : _ref$showPrimaryButto,
+      _ref$showSecondaryBut = _ref.showSecondaryButton,
+      showSecondaryButton = _ref$showSecondaryBut === void 0 ? true : _ref$showSecondaryBut,
       container = _ref.container,
-      props = _objectWithoutPropertiesLoose(_ref, ["src", "backgroundColor", "backgroundPosition", "content", "width", "height", "heading", "align", "alignY", "opacity", "container"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["src", "backgroundColor", "backgroundPosition", "headingContent", "headingSpacing", "subHeadingContent", "subHeadingColor", "parallax", "buttonsSpacing", "backgroundGradient", "gradientReduction", "headingColor", "gradientColor", "width", "height", "heading", "subHeading", "primaryButton", "secondaryButton", "align", "alignY", "showHeading", "showSubHeading", "showButtons", "showPrimaryButton", "showSecondaryButton", "container"]);
 
@@ -109,20 +143,10 @@ return React.createElement(baseElements.Inline, Object.assign({
       position: "relative",
-      backgroundImage: "url(\"" + src + "\")",
+      backgroundImage: (backgroundGradient === "none" ? "" : bgGradient(backgroundGradient, gradientReduction, gradientColor) + ",") + " url(\"" + src + "\")",
       backgroundColor: backgroundColor,
       backgroundSize: "cover",
       backgroundPosition: backgroundPosition,
+      backgroundAttachment: parallax ? "fixed" : "unset",
+      backgroundBlendMode: "multiply",
       width: width,
       height: height,
-      "::before": {
-        position: "absolute",
-        right: 0,
-        left: 0,
-        top: 0,
-        bottom: 0,
-        minHeight: "inherit",
-        "background-color": "inherit",
-        "z-index": 1,
-        content: '""',
-        opacity: opacity
-      },
       "::after": {
@@ -137,10 +161,36 @@ display: "block",
     sx: {
-      zIndex: 1
+      zIndex: 1,
+      paddingTop: "80px",
+      paddingBottom: "80px"
     }
-  }, React.createElement(Heading, Object.assign({
-    content: content,
+  }, showHeading && React.createElement(Heading, Object.assign({
+    content: headingContent,
     textAlign: align,
     p: "1",
-    variant: "layout.heading"
-  }, heading)))));
+    variant: "layout.heading",
+    sx: {
+      mb: headingSpacing,
+      color: headingColor,
+      textTransform: "uppercase",
+      textShadow: "0px 3px 6px rgba(0,0,0,0)"
+    }
+  }, heading)), showSubHeading && React.createElement(baseElements.Paragraph, Object.assign({
+    content: subHeadingContent,
+    textAlign: align,
+    variant: "text.fontSize2",
+    sx: {
+      color: subHeadingColor,
+      textShadow: "0px 3px 6px rgba(0,0,0,0)"
+    }
+  }, subHeading)), showButtons && React.createElement(baseElements.Inline, {
+    gap: 4,
+    align: align,
+    sx: {
+      mt: buttonsSpacing
+    }
+  }, showPrimaryButton && React.createElement(baseElements.LinkButton, Object.assign({
+    variant: "coverPrimary"
+  }, primaryButton)), showSecondaryButton && React.createElement(baseElements.LinkButton, Object.assign({
+    variant: "coverSecondary"
+  }, secondaryButton))))));
 };
@@ -162,8 +212,55 @@
 
+var Embed = function Embed(_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "100%" : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? "auto" : _ref$height,
+      ref = _ref.ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["width", "height", "ref"]);
+
+  return React.createElement(baseElements.Embed, Object.assign({
+    height: height,
+    width: width,
+    ref: ref
+  }, props));
+};
+
+function normalizeYouTubeUrl(url) {
+  if (url === void 0) {
+    url = "";
+  }
+
+  var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+  var match = url.match(regExp);
+  var id = match && match[7].length === 11 ? match[7] : "";
+
+  if (id === "") {
+    console.log("Not valid youtube URl");
+  }
+
+  return "https://www.youtube.com/embed/" + id;
+}
+
 var Video = function Video(_ref) {
-  var width = _ref.width,
+  var align = _ref.align,
+      width = _ref.width,
       height = _ref.height,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["align", "width", "height", "sx", "ref"]);
+      _ref$src = _ref.src,
+      src = _ref$src === void 0 ? "" : _ref$src,
+      props = _objectWithoutPropertiesLoose(_ref, ["align", "width", "height", "sx", "ref", "src"]);
 
+  if (/youtube.com/.test(src)) {
+    var normalizedUrl = normalizeYouTubeUrl(src);
+    normalizedUrl += props.controls ? "?controls=1" : "?controls=0";
+    return React.createElement(Embed, Object.assign({}, props, {
+      align: align,
+      src: normalizedUrl,
+      width: width,
+      height: height,
+      sx: _extends({}, sx),
+      title: nanoid.nanoid()
+    }));
+  }
+
   return React.createElement(baseElements.Video, Object.assign({}, props, {
@@ -183,17 +280,2 @@ sx: _extends({
 
-var Embed = function Embed(_ref) {
-  var _ref$width = _ref.width,
-      width = _ref$width === void 0 ? "100%" : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? "auto" : _ref$height,
-      ref = _ref.ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["width", "height", "ref"]);
-
-  return React.createElement(baseElements.Embed, Object.assign({
-    height: height,
-    width: width,
-    ref: ref
-  }, props));
-};
-
 var components = {
@@ -200,0 +282,0 @@ cover: Cover,

dist/basic-widget.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@front10/base-elements"),t=require("react"),n=require("@front10/container-elements");function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}function r(e,t){if(null==e)return{};var n,i,r={},o=Object.keys(e);for(i=0;i<o.length;i++)t.indexOf(n=o[i])>=0||(r[n]=e[n]);return r}var o=function(n){var o=n.level,a=void 0===o?2:o,c=n.content,g=void 0===c?"":c,l=n.sx,s=r(n,["level","content","sx"]),d="h2",h="fontSize2";return 0===a||"0"===a?d="span":a>=0&&a<7&&(d="h"+a,h="fontSize"+a),t.createElement(e.Heading,Object.assign({variant:h,color:"coverHeading",sx:i({width:"100%"},l)},s,{as:d}),g)},a={cover:function(n){var i=n.src,a=n.backgroundColor,c=void 0===a?"white":a,g=n.backgroundPosition,l=void 0===g?"center":g,s=n.content,d=void 0===s?"":s,h=n.width,u=void 0===h?"100%":h,v=n.height,f=void 0===v?"400px":v,m=n.heading,b=n.align,p=void 0===b?"center":b,x=n.alignY,O=void 0===x?"center":x,w=n.opacity,j=void 0===w?.5:w,k=n.container,y=r(n,["src","backgroundColor","backgroundPosition","content","width","height","heading","align","alignY","opacity","container"]);return t.createElement(e.Inline,Object.assign({variant:"layout.container",m:"0"},k,{as:"figure"}),t.createElement(e.Inline,Object.assign({align:p,alignY:O,sx:{position:"relative",backgroundImage:'url("'+i+'")',backgroundColor:c,backgroundSize:"cover",backgroundPosition:l,width:u,height:f,"::before":{position:"absolute",right:0,left:0,top:0,bottom:0,minHeight:"inherit","background-color":"inherit","z-index":1,content:'""',opacity:j},"::after":{display:"block",minHeight:"inherit","font-size":0,content:"none"}}},y),t.createElement(e.Box,{sx:{zIndex:1}},t.createElement(o,Object.assign({content:d,textAlign:p,p:"1",variant:"layout.heading"},m)))))},heading:o,html:e.CustomHtml,paragraph:e.Paragraph,image:function(n){var o=n.width,a=n.height,c=n.sx,g=r(n,["align","width","height","sx","ref"]);return t.createElement(e.Image,Object.assign({},g,{sx:i({width:o,height:a},c)}))},quote:e.Quote,video:function(n){var o=n.width,a=n.height,c=n.sx,g=r(n,["align","width","height","sx","ref"]);return t.createElement(e.Video,Object.assign({},g,{sx:i({width:o,height:a},c)}))},embed:function(n){var i=n.width,o=void 0===i?"100%":i,a=n.height,c=void 0===a?"auto":a,g=n.ref,l=r(n,["width","height","ref"]);return t.createElement(e.Embed,Object.assign({height:c,width:o,ref:g},l))},"link-button":function(n){var i=r(n,["align"]);return t.createElement(e.LinkButton,Object.assign({},i))},separator:e.Separator,box:e.Box,inline:e.Inline,grid:e.Grid,stack:e.Stack};function c(n){var i=n.container,o=function e(n){var i=n.type,o=n.settings,c=o.children,g=r(o,["children"]),l=a[i];return c?t.createElement(l,Object.assign({},g),c.map((function(t){return e(t)}))):t.createElement(l,Object.assign({},g))}(r(n,["container"]));return t.createElement(e.Inline,Object.assign({ml:"auto",mr:"auto",variant:"layout.container"},i),o)}exports.BasicWidget=n.withContainer(c,{layout:{container:{display:"flex"},quote:{variant:"text.fontSize4",paddingTop:2,paddingBottom:2,paddingLeft:4,paddingRight:4,marginBottom:4,margin:0,p:{marginBottom:3}},footer:{color:"softColor"}}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@front10/base-elements"),t=require("react"),n=require("nanoid"),i=require("@front10/container-elements");function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}function r(e,t){if(null==e)return{};var n,i,a={},r=Object.keys(e);for(i=0;i<r.length;i++)t.indexOf(n=r[i])>=0||(a[n]=e[n]);return a}var o=function(n){var i=n.level,o=void 0===i?2:i,d=n.content,g=void 0===d?"":d,c=n.sx,s=r(n,["level","content","sx"]),l="h2",u="fontSize2";return 0===o||"0"===o?l="span":o>=0&&o<7&&(l="h"+o,u="fontSize"+o),t.createElement(e.Heading,Object.assign({variant:u,color:"coverHeading",sx:a({width:"100%"},c)},s,{as:l}),g)},d=function(e,t,n){return"circular"===e?"radial-gradient(at center center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) "+t+"%, "+n+" 100%)":"up"===e?"linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) "+t+"%, "+n+" 100%)":"45deg"===e?"linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) "+t+"%, "+n+" 100%)":"-45deg"===e?"linear-gradient(-45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) "+t+"%, "+n+" 100%)":"linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) "+t+"%, "+n+" 100%)"},g=function(n){var i=n.width,a=void 0===i?"100%":i,o=n.height,d=void 0===o?"auto":o,g=n.ref,c=r(n,["width","height","ref"]);return t.createElement(e.Embed,Object.assign({height:d,width:a,ref:g},c))},c={cover:function(n){var i=n.src,a=n.backgroundColor,g=void 0===a?"white":a,c=n.backgroundPosition,s=void 0===c?"center":c,l=n.headingContent,u=void 0===l?"":l,h=n.headingSpacing,b=void 0===h?"16px":h,v=n.subHeadingContent,p=void 0===v?"":v,m=n.subHeadingColor,x=void 0===m?"white":m,f=n.parallax,w=void 0===f||f,y=n.buttonsSpacing,B=void 0===y?"48px":y,O=n.backgroundGradient,k=void 0===O?"circular":O,j=n.gradientReduction,E=void 0===j?50:j,S=n.headingColor,C=void 0===S?"white":S,H=n.gradientColor,P=void 0===H?"#454545":H,I=n.width,z=void 0===I?"100%":I,q=n.height,L=void 0===q?"400px":q,R=n.heading,A=n.subHeading,G=n.primaryButton,T=n.secondaryButton,Y=n.align,M=void 0===Y?"center":Y,_=n.alignY,N=void 0===_?"center":_,Q=n.showHeading,U=void 0===Q||Q,V=n.showSubHeading,W=void 0===V||V,D=n.showButtons,F=void 0===D||D,J=n.showPrimaryButton,K=void 0===J||J,X=n.showSecondaryButton,Z=void 0===X||X,$=n.container,ee=r(n,["src","backgroundColor","backgroundPosition","headingContent","headingSpacing","subHeadingContent","subHeadingColor","parallax","buttonsSpacing","backgroundGradient","gradientReduction","headingColor","gradientColor","width","height","heading","subHeading","primaryButton","secondaryButton","align","alignY","showHeading","showSubHeading","showButtons","showPrimaryButton","showSecondaryButton","container"]);return t.createElement(e.Inline,Object.assign({variant:"layout.container",m:"0"},$,{as:"figure"}),t.createElement(e.Inline,Object.assign({align:M,alignY:N,sx:{position:"relative",backgroundImage:("none"===k?"":d(k,E,P)+",")+' url("'+i+'")',backgroundColor:g,backgroundSize:"cover",backgroundPosition:s,backgroundAttachment:w?"fixed":"unset",backgroundBlendMode:"multiply",width:z,height:L,"::after":{display:"block",minHeight:"inherit","font-size":0,content:"none"}}},ee),t.createElement(e.Box,{sx:{zIndex:1,paddingTop:"80px",paddingBottom:"80px"}},U&&t.createElement(o,Object.assign({content:u,textAlign:M,p:"1",variant:"layout.heading",sx:{mb:b,color:C,textTransform:"uppercase",textShadow:"0px 3px 6px rgba(0,0,0,0)"}},R)),W&&t.createElement(e.Paragraph,Object.assign({content:p,textAlign:M,variant:"text.fontSize2",sx:{color:x,textShadow:"0px 3px 6px rgba(0,0,0,0)"}},A)),F&&t.createElement(e.Inline,{gap:4,align:M,sx:{mt:B}},K&&t.createElement(e.LinkButton,Object.assign({variant:"coverPrimary"},G)),Z&&t.createElement(e.LinkButton,Object.assign({variant:"coverSecondary"},T))))))},heading:o,html:e.CustomHtml,paragraph:e.Paragraph,image:function(n){var i=n.width,o=n.height,d=n.sx,g=r(n,["align","width","height","sx","ref"]);return t.createElement(e.Image,Object.assign({},g,{sx:a({width:i,height:o},d)}))},quote:e.Quote,video:function(i){var o=i.align,d=i.width,c=i.height,s=i.sx,l=i.src,u=void 0===l?"":l,h=r(i,["align","width","height","sx","ref","src"]);if(/youtube.com/.test(u)){var b=function(e){void 0===e&&(e="");var t=e.match(/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/),n=t&&11===t[7].length?t[7]:"";return""===n&&console.log("Not valid youtube URl"),"https://www.youtube.com/embed/"+n}(u);return t.createElement(g,Object.assign({},h,{align:o,src:b+=h.controls?"?controls=1":"?controls=0",width:d,height:c,sx:a({},s),title:n.nanoid()}))}return t.createElement(e.Video,Object.assign({},h,{sx:a({width:d,height:c},s)}))},embed:g,"link-button":function(n){var i=r(n,["align"]);return t.createElement(e.LinkButton,Object.assign({},i))},separator:e.Separator,box:e.Box,inline:e.Inline,grid:e.Grid,stack:e.Stack};function s(n){var i=n.container,a=function e(n){var i=n.type,a=n.settings,o=a.children,d=r(a,["children"]),g=c[i];return o?t.createElement(g,Object.assign({},d),o.map((function(t){return e(t)}))):t.createElement(g,Object.assign({},d))}(r(n,["container"]));return t.createElement(e.Inline,Object.assign({ml:"auto",mr:"auto",variant:"layout.container"},i),a)}exports.BasicWidget=i.withContainer(s,{layout:{container:{display:"flex"},quote:{variant:"text.fontSize4",paddingTop:2,paddingBottom:2,paddingLeft:4,paddingRight:4,marginBottom:4,margin:0,p:{marginBottom:3}},footer:{color:"softColor"}}});
 //# sourceMappingURL=basic-widget.cjs.production.min.js.map

dist/basic-widget.esm.js

@@ -1,3 +0,4 @@
-import { Heading as Heading$1, Inline, Box, Image as Image$1, Video as Video$1, LinkButton as LinkButton$1, Embed as Embed$1, CustomHtml, Paragraph, Quote, Separator, Grid, Stack } from '@front10/base-elements';
+import { Heading as Heading$1, Inline, Box, Paragraph, LinkButton as LinkButton$1, Image as Image$1, Embed as Embed$1, Video as Video$1, CustomHtml, Quote, Separator, Grid, Stack } from '@front10/base-elements';
 import { createElement } from 'react';
+import { nanoid } from 'nanoid';
 import { withContainer } from '@front10/container-elements';
@@ -67,2 +68,6 @@
 
+var bgGradient = function bgGradient(backgroundGradient, gradientReduction, gradientColor) {
+  if (backgroundGradient === "circular") return "radial-gradient(at center center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) " + gradientReduction + "%, " + gradientColor + " 100%)";else if (backgroundGradient === "up") return "linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) " + gradientReduction + "%, " + gradientColor + " 100%)";else if (backgroundGradient === "45deg") return "linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) " + gradientReduction + "%, " + gradientColor + " 100%)";else if (backgroundGradient === "-45deg") return "linear-gradient(-45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) " + gradientReduction + "%, " + gradientColor + " 100%)";else return "linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) " + gradientReduction + "%, " + gradientColor + " 100%)";
+};
+
 var Cover = function Cover(_ref) {
@@ -74,4 +79,22 @@ var src = _ref.src,
       backgroundPosition = _ref$backgroundPositi === void 0 ? "center" : _ref$backgroundPositi,
-      _ref$content = _ref.content,
-      content = _ref$content === void 0 ? "" : _ref$content,
+      _ref$headingContent = _ref.headingContent,
+      headingContent = _ref$headingContent === void 0 ? "" : _ref$headingContent,
+      _ref$headingSpacing = _ref.headingSpacing,
+      headingSpacing = _ref$headingSpacing === void 0 ? "16px" : _ref$headingSpacing,
+      _ref$subHeadingConten = _ref.subHeadingContent,
+      subHeadingContent = _ref$subHeadingConten === void 0 ? "" : _ref$subHeadingConten,
+      _ref$subHeadingColor = _ref.subHeadingColor,
+      subHeadingColor = _ref$subHeadingColor === void 0 ? "white" : _ref$subHeadingColor,
+      _ref$parallax = _ref.parallax,
+      parallax = _ref$parallax === void 0 ? true : _ref$parallax,
+      _ref$buttonsSpacing = _ref.buttonsSpacing,
+      buttonsSpacing = _ref$buttonsSpacing === void 0 ? "48px" : _ref$buttonsSpacing,
+      _ref$backgroundGradie = _ref.backgroundGradient,
+      backgroundGradient = _ref$backgroundGradie === void 0 ? "circular" : _ref$backgroundGradie,
+      _ref$gradientReductio = _ref.gradientReduction,
+      gradientReduction = _ref$gradientReductio === void 0 ? 50 : _ref$gradientReductio,
+      _ref$headingColor = _ref.headingColor,
+      headingColor = _ref$headingColor === void 0 ? "white" : _ref$headingColor,
+      _ref$gradientColor = _ref.gradientColor,
+      gradientColor = _ref$gradientColor === void 0 ? "#454545" : _ref$gradientColor,
       _ref$width = _ref.width,
@@ -82,2 +105,5 @@ width = _ref$width === void 0 ? "100%" : _ref$width,
       heading = _ref.heading,
+      subHeading = _ref.subHeading,
+      primaryButton = _ref.primaryButton,
+      secondaryButton = _ref.secondaryButton,
       _ref$align = _ref.align,
@@ -87,6 +113,14 @@ align = _ref$align === void 0 ? "center" : _ref$align,
       alignY = _ref$alignY === void 0 ? "center" : _ref$alignY,
-      _ref$opacity = _ref.opacity,
-      opacity = _ref$opacity === void 0 ? 0.5 : _ref$opacity,
+      _ref$showHeading = _ref.showHeading,
+      showHeading = _ref$showHeading === void 0 ? true : _ref$showHeading,
+      _ref$showSubHeading = _ref.showSubHeading,
+      showSubHeading = _ref$showSubHeading === void 0 ? true : _ref$showSubHeading,
+      _ref$showButtons = _ref.showButtons,
+      showButtons = _ref$showButtons === void 0 ? true : _ref$showButtons,
+      _ref$showPrimaryButto = _ref.showPrimaryButton,
+      showPrimaryButton = _ref$showPrimaryButto === void 0 ? true : _ref$showPrimaryButto,
+      _ref$showSecondaryBut = _ref.showSecondaryButton,
+      showSecondaryButton = _ref$showSecondaryBut === void 0 ? true : _ref$showSecondaryBut,
       container = _ref.container,
-      props = _objectWithoutPropertiesLoose(_ref, ["src", "backgroundColor", "backgroundPosition", "content", "width", "height", "heading", "align", "alignY", "opacity", "container"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["src", "backgroundColor", "backgroundPosition", "headingContent", "headingSpacing", "subHeadingContent", "subHeadingColor", "parallax", "buttonsSpacing", "backgroundGradient", "gradientReduction", "headingColor", "gradientColor", "width", "height", "heading", "subHeading", "primaryButton", "secondaryButton", "align", "alignY", "showHeading", "showSubHeading", "showButtons", "showPrimaryButton", "showSecondaryButton", "container"]);
 
@@ -104,20 +138,10 @@ return createElement(Inline, Object.assign({
       position: "relative",
-      backgroundImage: "url(\"" + src + "\")",
+      backgroundImage: (backgroundGradient === "none" ? "" : bgGradient(backgroundGradient, gradientReduction, gradientColor) + ",") + " url(\"" + src + "\")",
       backgroundColor: backgroundColor,
       backgroundSize: "cover",
       backgroundPosition: backgroundPosition,
+      backgroundAttachment: parallax ? "fixed" : "unset",
+      backgroundBlendMode: "multiply",
       width: width,
       height: height,
-      "::before": {
-        position: "absolute",
-        right: 0,
-        left: 0,
-        top: 0,
-        bottom: 0,
-        minHeight: "inherit",
-        "background-color": "inherit",
-        "z-index": 1,
-        content: '""',
-        opacity: opacity
-      },
       "::after": {
@@ -132,10 +156,36 @@ display: "block",
     sx: {
-      zIndex: 1
+      zIndex: 1,
+      paddingTop: "80px",
+      paddingBottom: "80px"
     }
-  }, createElement(Heading, Object.assign({
-    content: content,
+  }, showHeading && createElement(Heading, Object.assign({
+    content: headingContent,
     textAlign: align,
     p: "1",
-    variant: "layout.heading"
-  }, heading)))));
+    variant: "layout.heading",
+    sx: {
+      mb: headingSpacing,
+      color: headingColor,
+      textTransform: "uppercase",
+      textShadow: "0px 3px 6px rgba(0,0,0,0)"
+    }
+  }, heading)), showSubHeading && createElement(Paragraph, Object.assign({
+    content: subHeadingContent,
+    textAlign: align,
+    variant: "text.fontSize2",
+    sx: {
+      color: subHeadingColor,
+      textShadow: "0px 3px 6px rgba(0,0,0,0)"
+    }
+  }, subHeading)), showButtons && createElement(Inline, {
+    gap: 4,
+    align: align,
+    sx: {
+      mt: buttonsSpacing
+    }
+  }, showPrimaryButton && createElement(LinkButton$1, Object.assign({
+    variant: "coverPrimary"
+  }, primaryButton)), showSecondaryButton && createElement(LinkButton$1, Object.assign({
+    variant: "coverSecondary"
+  }, secondaryButton))))));
 };
@@ -157,8 +207,55 @@
 
+var Embed = function Embed(_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "100%" : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? "auto" : _ref$height,
+      ref = _ref.ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["width", "height", "ref"]);
+
+  return createElement(Embed$1, Object.assign({
+    height: height,
+    width: width,
+    ref: ref
+  }, props));
+};
+
+function normalizeYouTubeUrl(url) {
+  if (url === void 0) {
+    url = "";
+  }
+
+  var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+  var match = url.match(regExp);
+  var id = match && match[7].length === 11 ? match[7] : "";
+
+  if (id === "") {
+    console.log("Not valid youtube URl");
+  }
+
+  return "https://www.youtube.com/embed/" + id;
+}
+
 var Video = function Video(_ref) {
-  var width = _ref.width,
+  var align = _ref.align,
+      width = _ref.width,
       height = _ref.height,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["align", "width", "height", "sx", "ref"]);
+      _ref$src = _ref.src,
+      src = _ref$src === void 0 ? "" : _ref$src,
+      props = _objectWithoutPropertiesLoose(_ref, ["align", "width", "height", "sx", "ref", "src"]);
 
+  if (/youtube.com/.test(src)) {
+    var normalizedUrl = normalizeYouTubeUrl(src);
+    normalizedUrl += props.controls ? "?controls=1" : "?controls=0";
+    return createElement(Embed, Object.assign({}, props, {
+      align: align,
+      src: normalizedUrl,
+      width: width,
+      height: height,
+      sx: _extends({}, sx),
+      title: nanoid()
+    }));
+  }
+
   return createElement(Video$1, Object.assign({}, props, {
@@ -178,17 +275,2 @@ sx: _extends({
 
-var Embed = function Embed(_ref) {
-  var _ref$width = _ref.width,
-      width = _ref$width === void 0 ? "100%" : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? "auto" : _ref$height,
-      ref = _ref.ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["width", "height", "ref"]);
-
-  return createElement(Embed$1, Object.assign({
-    height: height,
-    width: width,
-    ref: ref
-  }, props));
-};
-
 var components = {
@@ -195,0 +277,0 @@ cover: Cover,

dist/Cover.d.ts

 /// <reference types="react" />
-import { BoxProps, InlineProps } from "@front10/base-elements";
+import { BoxProps, InlineProps, ParagraphProps, LinkButtonProps } from "@front10/base-elements";
 import { HeadingProps } from "./Heading";
 declare type NativeImageProps = JSX.IntrinsicElements["img"];
 declare type CoverCustomProps = {
-    content?: string;
+    headingContent?: string;
+    subHeadingContent?: string;
+    subHeadingColor?: string;
+    headingSpacing?: string;
+    headingColor?: string;
+    buttonsSpacing?: string;
     width?: string;
     height?: string;
+    parallax: boolean;
+    primaryButtonContent: string;
+    secondaryButtonContent: string;
+    backgroundGradient: "circular" | "up" | "down" | "45deg" | "-45deg" | "none";
+    gradientReduction: number;
+    gradientColor: string;
     heading: HeadingProps;
+    primaryButton: LinkButtonProps;
+    secondaryButton: LinkButtonProps;
+    subHeading: ParagraphProps;
     align: "left" | "center" | "right";
@@ -14,6 +28,10 @@ container: InlineProps;
     backgroundPosition: "bottom" | "center" | "top";
-    opacity?: number;
+    showHeading: boolean;
+    showSubHeading: boolean;
+    showButtons: boolean;
+    showPrimaryButton: boolean;
+    showSecondaryButton: boolean;
 };
 declare type CoverProps = CoverCustomProps & NativeImageProps & BoxProps;
-export declare const Cover: ({ src, backgroundColor, backgroundPosition, content, width, height, heading, align, alignY, opacity, container, ...props }: CoverProps) => JSX.Element;
+export declare const Cover: ({ src, backgroundColor, backgroundPosition, headingContent, headingSpacing, subHeadingContent, subHeadingColor, parallax, buttonsSpacing, backgroundGradient, gradientReduction, headingColor, gradientColor, width, height, heading, subHeading, primaryButton, secondaryButton, align, alignY, showHeading, showSubHeading, showButtons, showPrimaryButton, showSecondaryButton, container, ...props }: CoverProps) => JSX.Element;
 export {};

dist/Video.d.ts

@@ -9,3 +9,3 @@ /// <reference types="react" />
 export declare type ParagraphProps = CustomProps & BaseProps;
-export declare const Video: ({ align, width, height, sx, ref, ...props }: ParagraphProps) => JSX.Element;
+export declare const Video: ({ align, width, height, sx, ref, src, ...props }: ParagraphProps) => JSX.Element;
 export {};

package.json

 {
-  "version": "0.9.0-alpha.0",
+  "version": "0.12.0",
   "license": "",
@@ -40,7 +40,7 @@ "main": "dist/index.js",
   "dependencies": {
-    "@front10/base-elements": "^0.9.0-alpha.0",
-    "@front10/container-elements": "^0.9.0-alpha.0",
-    "@front10/utils": "^0.9.0-alpha.0"
+    "@front10/base-elements": "^0.12.0",
+    "@front10/container-elements": "^0.12.0",
+    "@front10/utils": "^0.12.0"
   },
-  "gitHead": "34254d65bfc026b871cf80156b2430c1d3c6a906"
+  "gitHead": "d687ee592daaef93cd2c92ce315022699b5d7e96"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

103631

increased by54.4%

Lines of code

1170

increased by36.36%

Dependency changes

• + Added@front10/base-elements@0.12.0(transitive)

• + Added@front10/container-elements@0.12.0(transitive)

• + Added@front10/utils@0.12.0(transitive)

• - Removed@front10/base-elements@0.9.0-alpha.0(transitive)

• - Removed@front10/container-elements@0.9.0-alpha.0(transitive)

• - Removed@front10/utils@0.9.0-alpha.0(transitive)

• Updated@front10/base-elements@^0.12.0

• Updated@front10/container-elements@^0.12.0

• Updated@front10/utils@^0.12.0