@front10/basic-widget - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1-alpha.6

dist/basic-widget.cjs.development.js

@@ -47,3 +47,4 @@ 'use strict';
       content = _ref$content === void 0 ? "" : _ref$content,
-      props = _objectWithoutPropertiesLoose(_ref, ["level", "content"]);
+      sx = _ref.sx,
+      props = _objectWithoutPropertiesLoose(_ref, ["level", "content", "sx"]);
 
@@ -62,3 +63,6 @@ var as = "h2";
     variant: variant,
-    color: "coverHeading"
+    color: "coverHeading",
+    sx: _extends({
+      width: "100%"
+    }, sx)
   }, props, {
@@ -140,4 +144,3 @@ as: as
 var Image = function Image(_ref) {
-  var align = _ref.align,
-      width = _ref.width,
+  var width = _ref.width,
       height = _ref.height,
@@ -147,5 +150,3 @@ sx = _ref.sx,
 
-  return React.createElement(baseElements.Inline, {
-    align: align
-  }, React.createElement(baseElements.Image, Object.assign({}, props, {
+  return React.createElement(baseElements.Image, Object.assign({}, props, {
     sx: _extends({
@@ -155,8 +156,7 @@ width: width,
     }, sx)
-  })));
+  }));
 };
 
 var Video = function Video(_ref) {
-  var align = _ref.align,
-      width = _ref.width,
+  var width = _ref.width,
       height = _ref.height,
@@ -166,5 +166,3 @@ sx = _ref.sx,
 
-  return React.createElement(baseElements.Inline, {
-    align: align
-  }, React.createElement(baseElements.Video, Object.assign({}, props, {
+  return React.createElement(baseElements.Video, Object.assign({}, props, {
     sx: _extends({
@@ -174,27 +172,15 @@ width: width,
     }, sx)
-  })));
+  }));
 };
 
 var LinkButton = function LinkButton(_ref) {
-  var align = _ref.align,
-      props = _objectWithoutPropertiesLoose(_ref, ["align"]);
+  var props = _objectWithoutPropertiesLoose(_ref, ["align"]);
 
-  return React.createElement(baseElements.Inline, {
-    align: align
-  }, React.createElement(baseElements.LinkButton, Object.assign({}, props)));
+  return React.createElement(baseElements.LinkButton, Object.assign({}, props));
 };
 
 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,
-      props = _objectWithoutPropertiesLoose(_ref, ["align", "width", "height", "ref"]);
+  var props = _objectWithoutPropertiesLoose(_ref, ["align", "width", "height", "ref"]);
 
-  return React.createElement(baseElements.Container, {
-    sx: {
-      width: width,
-      height: height
-    }
-  }, React.createElement(baseElements.Embed, Object.assign({}, props)));
+  return React.createElement(baseElements.Embed, Object.assign({}, props));
 };
@@ -212,20 +198,38 @@
   "link-button": LinkButton,
-  separator: baseElements.Separator
+  separator: baseElements.Separator,
+  box: baseElements.Box,
+  inline: baseElements.Inline,
+  grid: baseElements.Grid,
+  stack: baseElements.Stack
 };
-function BasicWidget(_ref) {
+
+function buildDom(_ref) {
   var type = _ref.type,
-      settings = _ref.settings;
+      _ref$settings = _ref.settings,
+      children = _ref$settings.children,
+      settings = _objectWithoutPropertiesLoose(_ref$settings, ["children"]);
+
   var Component = components[type];
 
-  if (Component) {
-    return React.createElement(baseElements.Box, {
-      ml: "auto",
-      mr: "auto",
-      variant: "layout.container"
-    }, React.createElement(Component, Object.assign({}, settings)));
+  if (children) {
+    return React.createElement(Component, Object.assign({}, settings), children.map(function (child) {
+      return buildDom(child);
+    }));
   }
 
-  return null;
+  return React.createElement(Component, Object.assign({}, settings));
 }
 
+function BasicWidget(_ref2) {
+  var container = _ref2.container,
+      settings = _objectWithoutPropertiesLoose(_ref2, ["container"]);
+
+  var component = buildDom(settings);
+  return React.createElement(baseElements.Inline, Object.assign({
+    ml: "auto",
+    mr: "auto",
+    variant: "layout.container"
+  }, container), component);
+}
+
 var baseStyles = {
@@ -232,0 +236,0 @@ layout: {

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 a(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 r=function(n){var i=n.level,r=void 0===i?2:i,o=n.content,c=void 0===o?"":o,l=a(n,["level","content"]),g="h2",s="fontSize2";return 0===r||"0"===r?g="span":r>=0&&r<7&&(g="h"+r,s="fontSize"+r),t.createElement(e.Heading,Object.assign({variant:s,color:"coverHeading"},l,{as:g}),c)},o={cover:function(n){var i=n.src,o=n.backgroundColor,c=void 0===o?"white":o,l=n.backgroundPosition,g=void 0===l?"center":l,s=n.content,d=void 0===s?"":s,h=n.width,u=void 0===h?"100%":h,v=n.height,m=void 0===v?"400px":v,f=n.heading,p=n.align,b=void 0===p?"center":p,x=n.alignY,E=void 0===x?"center":x,w=n.opacity,y=void 0===w?.5:w,O=n.container,j=a(n,["src","backgroundColor","backgroundPosition","content","width","height","heading","align","alignY","opacity","container"]);return t.createElement(e.Inline,Object.assign({variant:"layout.container",m:"0"},O,{as:"figure"}),t.createElement(e.Inline,Object.assign({align:b,alignY:E,sx:{position:"relative",backgroundImage:'url("'+i+'")',backgroundColor:c,backgroundSize:"cover",backgroundPosition:g,width:u,height:m,"::before":{position:"absolute",right:0,left:0,top:0,bottom:0,minHeight:"inherit","background-color":"inherit","z-index":1,content:'""',opacity:y},"::after":{display:"block",minHeight:"inherit","font-size":0,content:"none"}}},j),t.createElement(e.Box,{sx:{zIndex:1}},t.createElement(r,Object.assign({content:d,textAlign:b,p:"1",variant:"layout.heading"},f)))))},heading:r,html:e.CustomHtml,paragraph:e.Paragraph,image:function(n){var r=n.align,o=n.width,c=n.height,l=n.sx,g=a(n,["align","width","height","sx","ref"]);return t.createElement(e.Inline,{align:r},t.createElement(e.Image,Object.assign({},g,{sx:i({width:o,height:c},l)})))},quote:e.Quote,video:function(n){var r=n.align,o=n.width,c=n.height,l=n.sx,g=a(n,["align","width","height","sx","ref"]);return t.createElement(e.Inline,{align:r},t.createElement(e.Video,Object.assign({},g,{sx:i({width:o,height:c},l)})))},embed:function(n){var i=n.width,r=void 0===i?"100%":i,o=n.height,c=void 0===o?"auto":o,l=a(n,["align","width","height","ref"]);return t.createElement(e.Container,{sx:{width:r,height:c}},t.createElement(e.Embed,Object.assign({},l)))},"link-button":function(n){var i=n.align,r=a(n,["align"]);return t.createElement(e.Inline,{align:i},t.createElement(e.LinkButton,Object.assign({},r)))},separator:e.Separator};function c(n){var i=o[n.type];return i?t.createElement(e.Box,{ml:"auto",mr:"auto",variant:"layout.container"},t.createElement(i,Object.assign({},n.settings))):null}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("@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={},a=Object.keys(e);for(i=0;i<a.length;i++)t.indexOf(n=a[i])>=0||(r[n]=e[n]);return r}var a=function(n){var a=n.level,o=void 0===a?2:a,c=n.content,g=void 0===c?"":c,l=n.sx,s=r(n,["level","content","sx"]),d="h2",u="fontSize2";return 0===o||"0"===o?d="span":o>=0&&o<7&&(d="h"+o,u="fontSize"+o),t.createElement(e.Heading,Object.assign({variant:u,color:"coverHeading",sx:i({width:"100%"},l)},s,{as:d}),g)},o={cover:function(n){var i=n.src,o=n.backgroundColor,c=void 0===o?"white":o,g=n.backgroundPosition,l=void 0===g?"center":g,s=n.content,d=void 0===s?"":s,u=n.width,h=void 0===u?"100%":u,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,j=n.opacity,k=void 0===j?.5:j,y=n.container,w=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"},y,{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:h,height:f,"::before":{position:"absolute",right:0,left:0,top:0,bottom:0,minHeight:"inherit","background-color":"inherit","z-index":1,content:'""',opacity:k},"::after":{display:"block",minHeight:"inherit","font-size":0,content:"none"}}},w),t.createElement(e.Box,{sx:{zIndex:1}},t.createElement(a,Object.assign({content:d,textAlign:p,p:"1",variant:"layout.heading"},m)))))},heading:a,html:e.CustomHtml,paragraph:e.Paragraph,image:function(n){var a=n.width,o=n.height,c=n.sx,g=r(n,["align","width","height","sx","ref"]);return t.createElement(e.Image,Object.assign({},g,{sx:i({width:a,height:o},c)}))},quote:e.Quote,video:function(n){var a=n.width,o=n.height,c=n.sx,g=r(n,["align","width","height","sx","ref"]);return t.createElement(e.Video,Object.assign({},g,{sx:i({width:a,height:o},c)}))},embed:function(n){var i=r(n,["align","width","height","ref"]);return t.createElement(e.Embed,Object.assign({},i))},"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,a=function e(n){var i=n.type,a=n.settings,c=a.children,g=r(a,["children"]),l=o[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),a)}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"}}});
 //# sourceMappingURL=basic-widget.cjs.production.min.js.map

dist/basic-widget.esm.js

@@ -1,2 +0,2 @@
-import { Heading as Heading$1, Inline, Box, Image as Image$1, Video as Video$1, LinkButton as LinkButton$1, Container, Embed as Embed$1, CustomHtml, Paragraph, Quote, Separator } from '@front10/base-elements';
+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 { createElement } from 'react';
@@ -43,3 +43,4 @@ import { withContainer } from '@front10/container-elements';
       content = _ref$content === void 0 ? "" : _ref$content,
-      props = _objectWithoutPropertiesLoose(_ref, ["level", "content"]);
+      sx = _ref.sx,
+      props = _objectWithoutPropertiesLoose(_ref, ["level", "content", "sx"]);
 
@@ -58,3 +59,6 @@ var as = "h2";
     variant: variant,
-    color: "coverHeading"
+    color: "coverHeading",
+    sx: _extends({
+      width: "100%"
+    }, sx)
   }, props, {
@@ -136,4 +140,3 @@ as: as
 var Image = function Image(_ref) {
-  var align = _ref.align,
-      width = _ref.width,
+  var width = _ref.width,
       height = _ref.height,
@@ -143,5 +146,3 @@ sx = _ref.sx,
 
-  return createElement(Inline, {
-    align: align
-  }, createElement(Image$1, Object.assign({}, props, {
+  return createElement(Image$1, Object.assign({}, props, {
     sx: _extends({
@@ -151,8 +152,7 @@ width: width,
     }, sx)
-  })));
+  }));
 };
 
 var Video = function Video(_ref) {
-  var align = _ref.align,
-      width = _ref.width,
+  var width = _ref.width,
       height = _ref.height,
@@ -162,5 +162,3 @@ sx = _ref.sx,
 
-  return createElement(Inline, {
-    align: align
-  }, createElement(Video$1, Object.assign({}, props, {
+  return createElement(Video$1, Object.assign({}, props, {
     sx: _extends({
@@ -170,27 +168,15 @@ width: width,
     }, sx)
-  })));
+  }));
 };
 
 var LinkButton = function LinkButton(_ref) {
-  var align = _ref.align,
-      props = _objectWithoutPropertiesLoose(_ref, ["align"]);
+  var props = _objectWithoutPropertiesLoose(_ref, ["align"]);
 
-  return createElement(Inline, {
-    align: align
-  }, createElement(LinkButton$1, Object.assign({}, props)));
+  return createElement(LinkButton$1, Object.assign({}, props));
 };
 
 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,
-      props = _objectWithoutPropertiesLoose(_ref, ["align", "width", "height", "ref"]);
+  var props = _objectWithoutPropertiesLoose(_ref, ["align", "width", "height", "ref"]);
 
-  return createElement(Container, {
-    sx: {
-      width: width,
-      height: height
-    }
-  }, createElement(Embed$1, Object.assign({}, props)));
+  return createElement(Embed$1, Object.assign({}, props));
 };
@@ -208,20 +194,38 @@
   "link-button": LinkButton,
-  separator: Separator
+  separator: Separator,
+  box: Box,
+  inline: Inline,
+  grid: Grid,
+  stack: Stack
 };
-function BasicWidget(_ref) {
+
+function buildDom(_ref) {
   var type = _ref.type,
-      settings = _ref.settings;
+      _ref$settings = _ref.settings,
+      children = _ref$settings.children,
+      settings = _objectWithoutPropertiesLoose(_ref$settings, ["children"]);
+
   var Component = components[type];
 
-  if (Component) {
-    return createElement(Box, {
-      ml: "auto",
-      mr: "auto",
-      variant: "layout.container"
-    }, createElement(Component, Object.assign({}, settings)));
+  if (children) {
+    return createElement(Component, Object.assign({}, settings), children.map(function (child) {
+      return buildDom(child);
+    }));
   }
 
-  return null;
+  return createElement(Component, Object.assign({}, settings));
 }
 
+function BasicWidget(_ref2) {
+  var container = _ref2.container,
+      settings = _objectWithoutPropertiesLoose(_ref2, ["container"]);
+
+  var component = buildDom(settings);
+  return createElement(Inline, Object.assign({
+    ml: "auto",
+    mr: "auto",
+    variant: "layout.container"
+  }, container), component);
+}
+
 var baseStyles = {
@@ -228,0 +232,0 @@ layout: {

dist/BasicWidget.d.ts

@@ -1,2 +0,2 @@
-import { Quote } from "@front10/base-elements";
+import { Quote, InlineProps } from "@front10/base-elements";
 import * as React from "react";
@@ -10,3 +10,3 @@ declare const components: {
         align: "left" | "right" | "center";
-        container: import("@front10/base-elements").InlineProps;
+        container: InlineProps;
         alignY: "bottom" | "top" | "center";
@@ -16,3 +16,3 @@ backgroundPosition: "bottom" | "top" | "center";
     } & React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement> & import("@theme-ui/components").BoxProps) => JSX.Element;
-    readonly heading: ({ level, content, ...props }: import("./Heading").HeadingProps) => JSX.Element;
+    readonly heading: ({ level, content, sx, ...props }: import("./Heading").HeadingProps) => JSX.Element;
     readonly html: ({ content, children, ...props }: React.PropsWithChildren<{
@@ -28,2 +28,6 @@ content?: string | undefined;
     readonly separator: (props: import("@theme-ui/components").BoxProps) => JSX.Element;
+    readonly box: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("theme-ui").BoxOwnProps, {}>;
+    readonly inline: React.ForwardRefExoticComponent<InlineProps & React.RefAttributes<HTMLDivElement>>;
+    readonly grid: React.ForwardRefExoticComponent<import("@front10/base-elements").GridProps & React.RefAttributes<HTMLDivElement>>;
+    readonly stack: React.ForwardRefExoticComponent<import("@front10/base-elements").StackProps & React.RefAttributes<HTMLDivElement>>;
 };
@@ -35,4 +39,5 @@ declare type Components = typeof components;
     settings: ComponentProps;
+    container: InlineProps;
 }
-export declare function BasicWidget({ type, settings }: Props): JSX.Element | null;
+export declare function BasicWidget({ container, ...settings }: Props): JSX.Element;
 export {};

dist/Heading.d.ts

@@ -8,3 +8,3 @@ /// <reference types="react" />
 export declare type HeadingProps = CustomHeadingProps & Omit<BaseHeadingProps, "as">;
-export declare const Heading: ({ level, content, ...props }: HeadingProps) => JSX.Element;
+export declare const Heading: ({ level, content, sx, ...props }: HeadingProps) => JSX.Element;
 export {};

package.json

 {
-  "version": "0.6.0",
+  "version": "0.6.1-alpha.6+28ae66c",
   "license": "",
@@ -40,7 +40,7 @@ "main": "dist/index.js",
   "dependencies": {
-    "@front10/base-elements": "^0.6.0",
-    "@front10/container-elements": "^0.6.0",
-    "@front10/utils": "^0.6.0"
+    "@front10/base-elements": "^0.6.1-alpha.6+28ae66c",
+    "@front10/container-elements": "^0.6.1-alpha.6+28ae66c",
+    "@front10/utils": "^0.8.0"
   },
-  "gitHead": "d7e07ed686e37945a70c8b5f0805a5d5671e6764"
+  "gitHead": "28ae66c5e6bda2e3025a2df43d74829b345af9b3"
 }

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

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

66095

increased by3.44%

Lines of code

841

increased by1.45%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@front10/base-elements@0.6.1-alpha.6(transitive)

• + Added@front10/container-elements@0.6.1-alpha.6(transitive)

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

• - Removed@front10/base-elements@0.6.0(transitive)

• - Removed@front10/container-elements@0.6.0(transitive)

• - Removed@front10/utils@0.6.0(transitive)

• Updated@front10/base-elements@^0.6.1-alpha.6+28ae66c

• Updated@front10/container-elements@^0.6.1-alpha.6+28ae66c

• Updated@front10/utils@^0.8.0