@micromag/element-call-to-action 0.3.61 → 0.3.65

package/es/index.js

@@ -92,7 +92,7 @@ var defaultProps = {
 };
 
 function CallToAction(_ref) {
-  var _ref8;
+  var _ref9;
 
   var elRef = _ref.elRef,
       disabled = _ref.disabled,
@@ -118,8 +118,8 @@ function CallToAction(_ref) {
       url = _ref2$url === void 0 ? null : _ref2$url,
       _ref2$label = _ref2.label,
       label = _ref2$label === void 0 ? null : _ref2$label,
-      _ref2$buttonStyle = _ref2.buttonStyle,
-      buttonStyle = _ref2$buttonStyle === void 0 ? null : _ref2$buttonStyle,
+      _ref2$boxStyle = _ref2.boxStyle,
+      boxStyle = _ref2$boxStyle === void 0 ? null : _ref2$boxStyle,
       _ref2$inWebView = _ref2.inWebView,
       inWebView = _ref2$inWebView === void 0 ? false : _ref2$inWebView;
 
@@ -147,12 +147,16 @@ function CallToAction(_ref) {
       fontSize = _ref3$textStyle$fontS === void 0 ? null : _ref3$textStyle$fontS,
       _ref3$textStyle$color = _ref3$textStyle.color,
       color = _ref3$textStyle$color === void 0 ? null : _ref3$textStyle$color;
+
+  var _ref4 = boxStyle || {},
+      _ref4$backgroundColor = _ref4.backgroundColor,
+      backgroundColor = _ref4$backgroundColor === void 0 ? null : _ref4$backgroundColor;
+
   var arrowStyle = useMemo(function () {
     return _objectSpread(_objectSpread({}, {
       fontSize: fontSize
-    }), getStyleFromColor(color, 'color'));
-  }, [fontSize, color]);
-  console.log(buttonStyle); // MobileSafari blocks popup no matter what
+    }), backgroundColor === null ? getStyleFromColor(color, 'color') : getStyleFromColor(backgroundColor, 'color'));
+  }, [fontSize, backgroundColor, color]); // MobileSafari blocks popup no matter what
 
   var selfTargetLinkRef = useRef(null);
 
@@ -162,14 +166,14 @@ function CallToAction(_ref) {
       setLeaving = _useState6[1];
 
   var bind = useGesture({
-    onDrag: function onDrag(_ref4) {
-      var event = _ref4.event;
+    onDrag: function onDrag(_ref5) {
+      var event = _ref5.event;
       // fix firefox https://use-gesture.netlify.app/docs/faq/#why-cant-i-properly-drag-an-image-or-a-link
       event.preventDefault();
     },
-    onDragEnd: function onDragEnd(_ref5) {
-      var _ref5$movement = _slicedToArray(_ref5.movement, 2),
-          my = _ref5$movement[1];
+    onDragEnd: function onDragEnd(_ref6) {
+      var _ref6$movement = _slicedToArray(_ref6.movement, 2),
+          my = _ref6$movement[1];
 
       if (my < -dragAmount) {
         if (inWebView) {
@@ -219,13 +223,14 @@ function CallToAction(_ref) {
     setShowWebView(false);
   }, [setShowWebView]);
   var ArrowElement = arrow !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.arrow, _defineProperty({}, arrowClassName, arrowClassName !== null)])
-  }, arrow) : /*#__PURE__*/React.createElement(Arrow, {
     className: classNames([styles.arrow, _defineProperty({}, arrowClassName, arrowClassName !== null)]),
     style: arrowStyle
-  });
+  }, arrow) : /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.arrow, _defineProperty({}, arrowClassName, arrowClassName !== null)]),
+    style: arrowStyle
+  }, /*#__PURE__*/React.createElement(Arrow, null));
   return active ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref8 = {}, _defineProperty(_ref8, className, className !== null), _defineProperty(_ref8, styles.disabled, disabled), _defineProperty(_ref8, styles.animationDisabled, animationDisabled), _defineProperty(_ref8, styles.invalidUrl, !validUrl), _defineProperty(_ref8, styles.inWebView, inWebView), _ref8)]),
+    className: classNames([styles.container, (_ref9 = {}, _defineProperty(_ref9, className, className !== null), _defineProperty(_ref9, styles.disabled, disabled), _defineProperty(_ref9, styles.animationDisabled, animationDisabled), _defineProperty(_ref9, styles.invalidUrl, !validUrl), _defineProperty(_ref9, styles.inWebView, inWebView), _ref9)]),
     ref: elRef
   }, leaving ? /*#__PURE__*/React.createElement("div", {
     className: styles.leavingFrame
@@ -242,7 +247,7 @@ function CallToAction(_ref) {
     focusable: focusable,
     buttonStyle: _objectSpread({
       marginBottom: 10
-    }, buttonStyle)
+    }, boxStyle)
   }, swipeUpEnabled && !disabled ? bind() : null, inWebView ? {
     onClick: onOpenWebView
   } : {

package/lib/index.js

@@ -106,7 +106,7 @@ var defaultProps = {
 };
 
 function CallToAction(_ref) {
-  var _ref8;
+  var _ref9;
 
   var elRef = _ref.elRef,
       disabled = _ref.disabled,
@@ -132,8 +132,8 @@ function CallToAction(_ref) {
       url = _ref2$url === void 0 ? null : _ref2$url,
       _ref2$label = _ref2.label,
       label = _ref2$label === void 0 ? null : _ref2$label,
-      _ref2$buttonStyle = _ref2.buttonStyle,
-      buttonStyle = _ref2$buttonStyle === void 0 ? null : _ref2$buttonStyle,
+      _ref2$boxStyle = _ref2.boxStyle,
+      boxStyle = _ref2$boxStyle === void 0 ? null : _ref2$boxStyle,
       _ref2$inWebView = _ref2.inWebView,
       inWebView = _ref2$inWebView === void 0 ? false : _ref2$inWebView;
 
@@ -161,12 +161,16 @@ function CallToAction(_ref) {
       fontSize = _ref3$textStyle$fontS === void 0 ? null : _ref3$textStyle$fontS,
       _ref3$textStyle$color = _ref3$textStyle.color,
       color = _ref3$textStyle$color === void 0 ? null : _ref3$textStyle$color;
+
+  var _ref4 = boxStyle || {},
+      _ref4$backgroundColor = _ref4.backgroundColor,
+      backgroundColor = _ref4$backgroundColor === void 0 ? null : _ref4$backgroundColor;
+
   var arrowStyle = React.useMemo(function () {
     return _objectSpread__default["default"](_objectSpread__default["default"]({}, {
       fontSize: fontSize
-    }), utils.getStyleFromColor(color, 'color'));
-  }, [fontSize, color]);
-  console.log(buttonStyle); // MobileSafari blocks popup no matter what
+    }), backgroundColor === null ? utils.getStyleFromColor(color, 'color') : utils.getStyleFromColor(backgroundColor, 'color'));
+  }, [fontSize, backgroundColor, color]); // MobileSafari blocks popup no matter what
 
   var selfTargetLinkRef = React.useRef(null);
 
@@ -176,14 +180,14 @@ function CallToAction(_ref) {
       setLeaving = _useState6[1];
 
   var bind = react.useGesture({
-    onDrag: function onDrag(_ref4) {
-      var event = _ref4.event;
+    onDrag: function onDrag(_ref5) {
+      var event = _ref5.event;
       // fix firefox https://use-gesture.netlify.app/docs/faq/#why-cant-i-properly-drag-an-image-or-a-link
       event.preventDefault();
     },
-    onDragEnd: function onDragEnd(_ref5) {
-      var _ref5$movement = _slicedToArray__default["default"](_ref5.movement, 2),
-          my = _ref5$movement[1];
+    onDragEnd: function onDragEnd(_ref6) {
+      var _ref6$movement = _slicedToArray__default["default"](_ref6.movement, 2),
+          my = _ref6$movement[1];
 
       if (my < -dragAmount) {
         if (inWebView) {
@@ -233,13 +237,14 @@ function CallToAction(_ref) {
     setShowWebView(false);
   }, [setShowWebView]);
   var ArrowElement = arrow !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.arrow, _defineProperty__default["default"]({}, arrowClassName, arrowClassName !== null)])
-  }, arrow) : /*#__PURE__*/React__default["default"].createElement(Arrow, {
     className: classNames__default["default"]([styles.arrow, _defineProperty__default["default"]({}, arrowClassName, arrowClassName !== null)]),
     style: arrowStyle
-  });
+  }, arrow) : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles.arrow, _defineProperty__default["default"]({}, arrowClassName, arrowClassName !== null)]),
+    style: arrowStyle
+  }, /*#__PURE__*/React__default["default"].createElement(Arrow, null));
   return active ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, className, className !== null), _defineProperty__default["default"](_ref8, styles.disabled, disabled), _defineProperty__default["default"](_ref8, styles.animationDisabled, animationDisabled), _defineProperty__default["default"](_ref8, styles.invalidUrl, !validUrl), _defineProperty__default["default"](_ref8, styles.inWebView, inWebView), _ref8)]),
+    className: classNames__default["default"]([styles.container, (_ref9 = {}, _defineProperty__default["default"](_ref9, className, className !== null), _defineProperty__default["default"](_ref9, styles.disabled, disabled), _defineProperty__default["default"](_ref9, styles.animationDisabled, animationDisabled), _defineProperty__default["default"](_ref9, styles.invalidUrl, !validUrl), _defineProperty__default["default"](_ref9, styles.inWebView, inWebView), _ref9)]),
     ref: elRef
   }, leaving ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles.leavingFrame
@@ -256,7 +261,7 @@ function CallToAction(_ref) {
     focusable: focusable,
     buttonStyle: _objectSpread__default["default"]({
       marginBottom: 10
-    }, buttonStyle)
+    }, boxStyle)
   }, swipeUpEnabled && !disabled ? bind() : null, inWebView ? {
     onClick: onOpenWebView
   } : {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-call-to-action",
-    "version": "0.3.61",
+    "version": "0.3.65",
     "description": "",
     "keywords": [
         "javascript"
@@ -52,10 +52,10 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.61",
-        "@micromag/element-button": "^0.3.61",
-        "@micromag/element-text": "^0.3.61",
-        "@micromag/element-webview": "^0.3.61",
+        "@micromag/core": "^0.3.64",
+        "@micromag/element-button": "^0.3.64",
+        "@micromag/element-text": "^0.3.64",
+        "@micromag/element-webview": "^0.3.64",
         "@react-spring/core": "^9.1.1",
         "@react-spring/web": "^9.1.1",
         "@use-gesture/react": "^10.2.4",
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "d6066e12f37c8516f07172ea225667d28dca6434"
+    "gitHead": "aa150c0fbb32c481b04e4c98863b7656db714845"
 }