@micromag/element-call-to-action 0.3.63 → 0.3.66

package/es/index.js

@@ -92,7 +92,7 @@ var defaultProps = {
 };
 
 function CallToAction(_ref) {
-  var _ref8;
+  var _ref9;
 
   var elRef = _ref.elRef,
       disabled = _ref.disabled,
@@ -147,11 +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]); // 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);
 
@@ -161,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) {
@@ -218,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

package/lib/index.js

@@ -106,7 +106,7 @@ var defaultProps = {
 };
 
 function CallToAction(_ref) {
-  var _ref8;
+  var _ref9;
 
   var elRef = _ref.elRef,
       disabled = _ref.disabled,
@@ -161,11 +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]); // 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);
 
@@ -175,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) {
@@ -232,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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-call-to-action",
-    "version": "0.3.63",
+    "version": "0.3.66",
     "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.63",
-        "@micromag/element-button": "^0.3.63",
-        "@micromag/element-text": "^0.3.63",
-        "@micromag/element-webview": "^0.3.63",
+        "@micromag/core": "^0.3.66",
+        "@micromag/element-button": "^0.3.66",
+        "@micromag/element-text": "^0.3.66",
+        "@micromag/element-webview": "^0.3.66",
         "@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": "002ba9d6db19aa37ea77a2465942060661f19dcf"
+    "gitHead": "264bfc8506d254073e1d55ffb9d8dd97e5b78c0b"
 }