@micromag/element-call-to-action 0.3.98 → 0.3.105

package/assets/css/styles.css

@@ -1 +1 @@
-@-webkit-keyframes micromag-element-call-to-action-appear{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes micromag-element-call-to-action-appear{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.micromag-element-call-to-action-container{position:relative;z-index:100;padding-bottom:5px;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease;opacity:1;text-align:center}.micromag-element-call-to-action-container .micromag-element-call-to-action-arrow{display:block;margin:0 auto 3px;-webkit-animation:micromag-element-call-to-action-upAndDown .5s ease-in-out infinite alternate;animation:micromag-element-call-to-action-upAndDown .5s ease-in-out infinite alternate}.micromag-element-call-to-action-container .micromag-element-call-to-action-icon,.micromag-element-call-to-action-container .micromag-element-call-to-action-label{display:inline-block}.micromag-element-call-to-action-container .micromag-element-call-to-action-label{line-height:1}.micromag-element-call-to-action-container .micromag-element-call-to-action-button{display:block;margin:0 auto;padding:5px 10px;background-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;-webkit-user-drag:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-button:hover{text-decoration:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-selfTargetLink{display:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-leavingFrame{position:fixed;top:0;left:0;width:100vw;height:100vh;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:micromag-element-call-to-action-appear .5s ease both;animation:micromag-element-call-to-action-appear .5s ease both;opacity:0;background-color:#fff}.micromag-element-call-to-action-container.micromag-element-call-to-action-animationDisabled .micromag-element-call-to-action-arrow{-webkit-animation:none;animation:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-invalidUrl{opacity:.5;pointer-events:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-invalidUrl .micromag-element-call-to-action-arrow{-webkit-animation:none;animation:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-disabled{opacity:0;pointer-events:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-inWebView{width:100%}.micromag-element-call-to-action-container.micromag-element-call-to-action-withMargin{margin-bottom:5px}.micromag-element-call-to-action-webView{position:absolute;z-index:9999;top:100%;width:100%;height:100%;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;-o-transition:transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease}.micromag-element-call-to-action-webView.micromag-element-call-to-action-visible{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}@-webkit-keyframes micromag-element-call-to-action-upAndDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}@keyframes micromag-element-call-to-action-upAndDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}
+@-webkit-keyframes micromag-element-call-to-action-appear{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes micromag-element-call-to-action-appear{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.micromag-element-call-to-action-container{position:relative;z-index:100;padding-bottom:5px;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease;opacity:1;text-align:center}.micromag-element-call-to-action-container .micromag-element-call-to-action-arrow{display:block;margin:0 auto 3px;-webkit-animation:micromag-element-call-to-action-upAndDown .5s ease-in-out infinite alternate;animation:micromag-element-call-to-action-upAndDown .5s ease-in-out infinite alternate}.micromag-element-call-to-action-container .micromag-element-call-to-action-icon,.micromag-element-call-to-action-container .micromag-element-call-to-action-label{display:inline-block;vertical-align:middle}.micromag-element-call-to-action-container .micromag-element-call-to-action-label{line-height:1}.micromag-element-call-to-action-container .micromag-element-call-to-action-button{display:block;margin:0 auto;padding:5px 10px;background-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;-webkit-user-drag:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-button:hover{text-decoration:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-selfTargetLink{display:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-leavingFrame{position:fixed;top:0;left:0;width:100vw;height:100vh;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:micromag-element-call-to-action-appear .5s ease both;animation:micromag-element-call-to-action-appear .5s ease both;opacity:0;background-color:#fff}.micromag-element-call-to-action-container.micromag-element-call-to-action-animationDisabled .micromag-element-call-to-action-arrow{-webkit-animation:none;animation:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-invalidUrl{opacity:.5;pointer-events:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-invalidUrl .micromag-element-call-to-action-arrow{-webkit-animation:none;animation:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-disabled{opacity:0;pointer-events:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-inWebView{width:100%}.micromag-element-call-to-action-container.micromag-element-call-to-action-withMargin{margin-bottom:5px}.micromag-element-call-to-action-webView{position:absolute;z-index:9999;top:100%;width:100%;height:100%;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;-o-transition:transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease}.micromag-element-call-to-action-webView.micromag-element-call-to-action-visible{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}@-webkit-keyframes micromag-element-call-to-action-upAndDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}@keyframes micromag-element-call-to-action-upAndDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}

package/es/index.js

@@ -4,8 +4,9 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useGesture } from '@use-gesture/react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';
+import React, { useState, useMemo, useRef, useCallback, useEffect } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
+import { useTrackEvent } from '@micromag/core/hooks';
 import { isValidUrl, getStyleFromColor, isIos } from '@micromag/core/utils';
 import Button from '@micromag/element-button';
 import Text from '@micromag/element-text';
@@ -74,7 +75,8 @@ var propTypes = {
   arrowClassName: PropTypes.string,
   focusable: PropTypes.bool,
   enableInteraction: PropTypes.func,
-  disableInteraction: PropTypes.func
+  disableInteraction: PropTypes.func,
+  onClick: PropTypes.func
 };
 var defaultProps = {
   elRef: null,
@@ -92,7 +94,8 @@ var defaultProps = {
   arrowClassName: null,
   focusable: true,
   enableInteraction: null,
-  disableInteraction: null
+  disableInteraction: null,
+  onClick: null
 };
 
 function CallToAction(_ref) {
@@ -113,7 +116,8 @@ function CallToAction(_ref) {
       arrowClassName = _ref.arrowClassName,
       focusable = _ref.focusable,
       enableInteraction = _ref.enableInteraction,
-      disableInteraction = _ref.disableInteraction;
+      disableInteraction = _ref.disableInteraction,
+      onClick = _ref.onClick;
 
   var _ref2 = callToAction || {},
       _ref2$active = _ref2.active,
@@ -129,6 +133,8 @@ function CallToAction(_ref) {
       _ref2$inWebView = _ref2.inWebView,
       inWebView = _ref2$inWebView === void 0 ? false : _ref2$inWebView;
 
+  var trackEvent = useTrackEvent();
+
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       showWebView = _useState2[0],
@@ -172,8 +178,25 @@ function CallToAction(_ref) {
   var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
       leaving = _useState6[0],
-      setLeaving = _useState6[1];
+      setLeaving = _useState6[1]; // On click
+
+
+  var onClickLink = useCallback(function () {
+    var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'click';
+
+    if (trackEvent !== null) {
+      trackEvent('call_to_action', action, url);
+    }
 
+    if (onClick !== null) {
+      onClick();
+    }
+  }, [url, onClick, trackEvent]);
+  var onClickClose = useCallback(function () {
+    if (trackEvent !== null) {
+      trackEvent('call_to_action', 'close', url);
+    }
+  }, [url, trackEvent]);
   var bind = useGesture({
     onDrag: function onDrag(_ref6) {
       var event = _ref6.event;
@@ -188,11 +211,14 @@ function CallToAction(_ref) {
         if (inWebView) {
           setShowWebView(true);
           setDisabledWebView(false);
+          onClickLink('swipe');
         } else if (isIos() && selfTargetLinkRef.current !== null) {
           selfTargetLinkRef.current.click();
           setLeaving(true);
+          onClickLink('swipe');
         } else if (buttonRef.current) {
           buttonRef.current.click();
+          onClickLink('swipe');
         }
       }
     }
@@ -231,14 +257,18 @@ function CallToAction(_ref) {
     if (disableInteraction !== null) {
       disableInteraction();
     }
-  }, [setShowWebView, setDisabledWebView, disableInteraction]);
+
+    onClickLink('click');
+  }, [setShowWebView, setDisabledWebView, disableInteraction, onClickLink]);
   var onCloseWebView = useCallback(function () {
     setShowWebView(false);
 
     if (enableInteraction !== null) {
       enableInteraction();
     }
-  }, [setShowWebView, enableInteraction]);
+
+    onClickClose();
+  }, [setShowWebView, enableInteraction, onClickClose]);
   var ArrowElement = arrow !== null ? /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.arrow, _defineProperty({}, arrowClassName, arrowClassName !== null)]),
     style: arrowStyle
@@ -270,7 +300,8 @@ function CallToAction(_ref) {
     onClick: onOpenWebView
   } : {
     href: url,
-    external: true
+    external: true,
+    onClick: onClickLink
   }), /*#__PURE__*/React.createElement("span", {
     className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
   }, icon !== null ? /*#__PURE__*/React.createElement("div", {

package/lib/index.js

@@ -8,6 +8,7 @@ var classNames = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var core = require('@micromag/core');
+var hooks = require('@micromag/core/hooks');
 var utils = require('@micromag/core/utils');
 var Button = require('@micromag/element-button');
 var Text = require('@micromag/element-text');
@@ -88,7 +89,8 @@ var propTypes = {
   arrowClassName: PropTypes__default["default"].string,
   focusable: PropTypes__default["default"].bool,
   enableInteraction: PropTypes__default["default"].func,
-  disableInteraction: PropTypes__default["default"].func
+  disableInteraction: PropTypes__default["default"].func,
+  onClick: PropTypes__default["default"].func
 };
 var defaultProps = {
   elRef: null,
@@ -106,7 +108,8 @@ var defaultProps = {
   arrowClassName: null,
   focusable: true,
   enableInteraction: null,
-  disableInteraction: null
+  disableInteraction: null,
+  onClick: null
 };
 
 function CallToAction(_ref) {
@@ -127,7 +130,8 @@ function CallToAction(_ref) {
       arrowClassName = _ref.arrowClassName,
       focusable = _ref.focusable,
       enableInteraction = _ref.enableInteraction,
-      disableInteraction = _ref.disableInteraction;
+      disableInteraction = _ref.disableInteraction,
+      onClick = _ref.onClick;
 
   var _ref2 = callToAction || {},
       _ref2$active = _ref2.active,
@@ -143,6 +147,8 @@ function CallToAction(_ref) {
       _ref2$inWebView = _ref2.inWebView,
       inWebView = _ref2$inWebView === void 0 ? false : _ref2$inWebView;
 
+  var trackEvent = hooks.useTrackEvent();
+
   var _useState = React.useState(false),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
       showWebView = _useState2[0],
@@ -186,8 +192,25 @@ function CallToAction(_ref) {
   var _useState5 = React.useState(false),
       _useState6 = _slicedToArray__default["default"](_useState5, 2),
       leaving = _useState6[0],
-      setLeaving = _useState6[1];
+      setLeaving = _useState6[1]; // On click
+
+
+  var onClickLink = React.useCallback(function () {
+    var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'click';
+
+    if (trackEvent !== null) {
+      trackEvent('call_to_action', action, url);
+    }
 
+    if (onClick !== null) {
+      onClick();
+    }
+  }, [url, onClick, trackEvent]);
+  var onClickClose = React.useCallback(function () {
+    if (trackEvent !== null) {
+      trackEvent('call_to_action', 'close', url);
+    }
+  }, [url, trackEvent]);
   var bind = react.useGesture({
     onDrag: function onDrag(_ref6) {
       var event = _ref6.event;
@@ -202,11 +225,14 @@ function CallToAction(_ref) {
         if (inWebView) {
           setShowWebView(true);
           setDisabledWebView(false);
+          onClickLink('swipe');
         } else if (utils.isIos() && selfTargetLinkRef.current !== null) {
           selfTargetLinkRef.current.click();
           setLeaving(true);
+          onClickLink('swipe');
         } else if (buttonRef.current) {
           buttonRef.current.click();
+          onClickLink('swipe');
         }
       }
     }
@@ -245,14 +271,18 @@ function CallToAction(_ref) {
     if (disableInteraction !== null) {
       disableInteraction();
     }
-  }, [setShowWebView, setDisabledWebView, disableInteraction]);
+
+    onClickLink('click');
+  }, [setShowWebView, setDisabledWebView, disableInteraction, onClickLink]);
   var onCloseWebView = React.useCallback(function () {
     setShowWebView(false);
 
     if (enableInteraction !== null) {
       enableInteraction();
     }
-  }, [setShowWebView, enableInteraction]);
+
+    onClickClose();
+  }, [setShowWebView, enableInteraction, onClickClose]);
   var ArrowElement = arrow !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.arrow, _defineProperty__default["default"]({}, arrowClassName, arrowClassName !== null)]),
     style: arrowStyle
@@ -284,7 +314,8 @@ function CallToAction(_ref) {
     onClick: onOpenWebView
   } : {
     href: url,
-    external: true
+    external: true,
+    onClick: onClickLink
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
   }, icon !== null ? /*#__PURE__*/React__default["default"].createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-call-to-action",
-    "version": "0.3.98",
+    "version": "0.3.105",
     "description": "",
     "keywords": [
         "javascript"
@@ -40,22 +40,22 @@
         "prepare": "../../scripts/prepare-package.sh"
     },
     "devDependencies": {
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
     },
     "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.13.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.91",
-        "@micromag/element-button": "^0.3.91",
-        "@micromag/element-text": "^0.3.91",
-        "@micromag/element-webview": "^0.3.98",
+        "@micromag/core": "^0.3.105",
+        "@micromag/element-button": "^0.3.105",
+        "@micromag/element-text": "^0.3.105",
+        "@micromag/element-webview": "^0.3.105",
         "@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": "240a044625270e640a9df457eaf6c3b1edf3466e"
+    "gitHead": "fb6c28846c08f30c035ebbc162a4135b8b4d42a5"
 }