@micromag/element-call-to-action 0.3.541 → 0.3.547

package/es/index.js

@@ -48,7 +48,6 @@ var Arrow = function Arrow(_ref) {
 };
 Arrow.propTypes = propTypes$1;
 Arrow.defaultProps = defaultProps$1;
-var ArrowIcon = Arrow;
 
 var styles = {"container":"micromag-element-call-to-action-container","arrow":"micromag-element-call-to-action-arrow","upAndDown":"micromag-element-call-to-action-upAndDown","icon":"micromag-element-call-to-action-icon","label":"micromag-element-call-to-action-label","button":"micromag-element-call-to-action-button","selfTargetLink":"micromag-element-call-to-action-selfTargetLink","leavingFrame":"micromag-element-call-to-action-leavingFrame","appear":"micromag-element-call-to-action-appear","animationDisabled":"micromag-element-call-to-action-animationDisabled","invalidUrl":"micromag-element-call-to-action-invalidUrl","withMargin":"micromag-element-call-to-action-withMargin"};
 
@@ -215,7 +214,7 @@ function CallToAction(_ref) {
   }) : null, swipeUpEnabled ? /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.arrow, _defineProperty({}, arrowClassName, arrowClassName !== null)]),
     style: arrowStyle
-  }, arrow || /*#__PURE__*/React.createElement(ArrowIcon, null)) : null, /*#__PURE__*/React.createElement("div", {
+  }, arrow || /*#__PURE__*/React.createElement(Arrow, null)) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.buttonBorder, _defineProperty({}, buttonBorderClassName, buttonBorderClassName !== null)])
   }, /*#__PURE__*/React.createElement(Button, Object.assign({
     className: classNames([styles.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-call-to-action",
-    "version": "0.3.541",
+    "version": "0.3.547",
     "private": false,
     "description": "",
     "keywords": [
@@ -30,11 +30,10 @@
         }
     ],
     "license": "ISC",
-    "main": "lib/index.js",
+    "type": "module",
     "module": "es/index.js",
     "exports": {
         ".": {
-            "require": "./lib/index.js",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -63,10 +62,10 @@
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
-        "@micromag/core": "^0.3.541",
-        "@micromag/element-button": "^0.3.541",
-        "@micromag/element-text": "^0.3.541",
-        "@micromag/element-webview": "^0.3.541",
+        "@micromag/core": "^0.3.547",
+        "@micromag/element-button": "^0.3.547",
+        "@micromag/element-text": "^0.3.547",
+        "@micromag/element-webview": "^0.3.547",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.3.0",
@@ -80,5 +79,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6c04a7e327b5fbc096785c11320b3fbd3c5751c8"
+    "gitHead": "3c2f5904ce61fcfa61f673c38c2a5ec56e9e2b07"
 }

package/lib/index.js

@@ -1,251 +0,0 @@
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var react = require('@use-gesture/react');
-var classNames = require('classnames');
-var isString = require('lodash/isString');
-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');
-
-var propTypes$1 = {
-  color: PropTypes.string,
-  className: PropTypes.string
-};
-var defaultProps$1 = {
-  color: 'currentColor',
-  className: null
-};
-var Arrow = function Arrow(_ref) {
-  var color = _ref.color,
-    className = _ref.className;
-  return /*#__PURE__*/React.createElement("svg", {
-    version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    x: "0",
-    y: "0px",
-    width: "48.53px",
-    height: "12.38px",
-    viewBox: "0 0 48.53 12.38",
-    className: className,
-    xmlSpace: "preserve"
-  }, /*#__PURE__*/React.createElement("g", {
-    transform: "matrix(1, 0, 0, 1, 0, 0)"
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "b",
-    fill: "none",
-    stroke: color,
-    strokeWidth: "3px",
-    strokeLinejoin: "round",
-    strokeLinecap: "round",
-    d: "M1.5,10.88L24.26,1.5l22.77,9.38"
-  })));
-};
-Arrow.propTypes = propTypes$1;
-Arrow.defaultProps = defaultProps$1;
-var ArrowIcon = Arrow;
-
-var styles = {"container":"micromag-element-call-to-action-container","arrow":"micromag-element-call-to-action-arrow","upAndDown":"micromag-element-call-to-action-upAndDown","icon":"micromag-element-call-to-action-icon","label":"micromag-element-call-to-action-label","button":"micromag-element-call-to-action-button","selfTargetLink":"micromag-element-call-to-action-selfTargetLink","leavingFrame":"micromag-element-call-to-action-leavingFrame","appear":"micromag-element-call-to-action-appear","animationDisabled":"micromag-element-call-to-action-animationDisabled","invalidUrl":"micromag-element-call-to-action-invalidUrl","withMargin":"micromag-element-call-to-action-withMargin"};
-
-var propTypes = {
-  type: PropTypes.oneOf(['click', 'swipe-up', null]),
-  url: PropTypes.string,
-  label: core.PropTypes.textElement,
-  boxStyle: core.PropTypes.boxStyle,
-  inWebView: PropTypes.bool,
-  elRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any // eslint-disable-line
-  })]),
-  disabled: PropTypes.bool,
-  animationDisabled: PropTypes.bool,
-  icon: PropTypes.node,
-  arrow: PropTypes.node,
-  dragAmount: PropTypes.number,
-  className: PropTypes.string,
-  buttonClassName: PropTypes.string,
-  buttonBorderClassName: PropTypes.string,
-  labelClassName: PropTypes.string,
-  arrowClassName: PropTypes.string,
-  focusable: PropTypes.bool,
-  openWebView: PropTypes.func,
-  onClick: PropTypes.func
-};
-var defaultProps = {
-  type: null,
-  url: null,
-  label: null,
-  boxStyle: null,
-  inWebView: false,
-  elRef: null,
-  disabled: false,
-  animationDisabled: false,
-  icon: null,
-  arrow: null,
-  dragAmount: 50,
-  className: null,
-  buttonClassName: null,
-  buttonBorderClassName: null,
-  labelClassName: null,
-  arrowClassName: null,
-  focusable: true,
-  openWebView: null,
-  onClick: null
-};
-function CallToAction(_ref) {
-  var type = _ref.type,
-    url = _ref.url,
-    label = _ref.label,
-    boxStyle = _ref.boxStyle,
-    inWebView = _ref.inWebView,
-    elRef = _ref.elRef,
-    disabled = _ref.disabled,
-    animationDisabled = _ref.animationDisabled,
-    icon = _ref.icon,
-    arrow = _ref.arrow,
-    dragAmount = _ref.dragAmount,
-    className = _ref.className,
-    buttonClassName = _ref.buttonClassName,
-    buttonBorderClassName = _ref.buttonBorderClassName,
-    labelClassName = _ref.labelClassName,
-    arrowClassName = _ref.arrowClassName,
-    focusable = _ref.focusable,
-    openWebView = _ref.openWebView,
-    onClick = _ref.onClick;
-  var trackEvent = hooks.useTrackEvent();
-  var swipeUpEnabled = type === null || type === 'swipe-up';
-  var validUrl = React.useMemo(function () {
-    return utils.isValidUrl(url);
-  }, [url]);
-  var buttonRef = React.useRef(null);
-  var _ref2 = label || {},
-    _ref2$textStyle = _ref2.textStyle,
-    textStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
-  var _ref3 = textStyle || {},
-    _ref3$fontSize = _ref3.fontSize,
-    fontSize = _ref3$fontSize === void 0 ? null : _ref3$fontSize,
-    _ref3$color = _ref3.color,
-    color = _ref3$color === void 0 ? null : _ref3$color,
-    _ref3$lineHeight = _ref3.lineHeight,
-    lineHeight = _ref3$lineHeight === void 0 ? null : _ref3$lineHeight;
-  var _ref4 = boxStyle || {},
-    _ref4$backgroundColor = _ref4.backgroundColor,
-    backgroundColor = _ref4$backgroundColor === void 0 ? null : _ref4$backgroundColor;
-  var arrowStyle = React.useMemo(function () {
-    return _objectSpread(_objectSpread({}, {
-      fontSize: fontSize
-    }), backgroundColor === null ? utils.getStyleFromColor(color, 'color') : utils.getStyleFromColor(backgroundColor, 'color'));
-  }, [fontSize, backgroundColor, color]);
-
-  // MobileSafari blocks popup no matter what
-  var selfTargetLinkRef = React.useRef(null);
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    leaving = _useState2[0],
-    setLeaving = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    toggled = _useState4[0],
-    setToggled = _useState4[1];
-
-  // On click
-  var onClickLink = React.useCallback(function (e) {
-    var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'click';
-    setToggled(!toggled);
-    if (inWebView && openWebView !== null) {
-      openWebView({
-        url: url
-      });
-    }
-    if (onClick !== null && action === 'cllick') {
-      onClick(e);
-    }
-    if (trackEvent !== null) {
-      trackEvent('call_to_action', isString(action) ? action : 'click', url);
-    }
-  }, [toggled, url, onClick, trackEvent, inWebView, openWebView]);
-  var onDrag = React.useCallback(function (_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();
-  }, []);
-  var onDragEnd = React.useCallback(function (_ref6) {
-    var _ref6$movement = _slicedToArray(_ref6.movement, 2),
-      my = _ref6$movement[1];
-    if (my < -dragAmount) {
-      if (inWebView) {
-        onClickLink(null, 'swipe');
-      } else if (utils.isIos() && selfTargetLinkRef.current !== null) {
-        selfTargetLinkRef.current.click();
-        setLeaving(true);
-        onClickLink(null, 'swipe');
-      } else if (buttonRef.current) {
-        buttonRef.current.click();
-        onClickLink(null, 'swipe');
-      }
-    }
-  }, [dragAmount, inWebView, onClickLink, setLeaving]);
-  var bind = react.useGesture({
-    onDrag: onDrag,
-    onDragEnd: onDragEnd
-  });
-  React.useEffect(function () {
-    var onPageHide = function onPageHide() {
-      setLeaving(false);
-    };
-    window.addEventListener('pagehide', onPageHide);
-    return function () {
-      window.removeEventListener('pagehide', onPageHide);
-    };
-  }, [setLeaving]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.disabled, disabled), styles.animationDisabled, animationDisabled), styles.invalidUrl, !validUrl), styles.inWebView, inWebView)]),
-    ref: elRef
-  }, leaving ? /*#__PURE__*/React.createElement("div", {
-    className: styles.leavingFrame
-  }) : null, !inWebView && swipeUpEnabled ? /*#__PURE__*/React.createElement("a", {
-    className: styles.selfTargetLink,
-    href: url,
-    ref: selfTargetLinkRef,
-    tabIndex: focusable ? '0' : '-1'
-  }) : null, swipeUpEnabled ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.arrow, _defineProperty({}, arrowClassName, arrowClassName !== null)]),
-    style: arrowStyle
-  }, arrow || /*#__PURE__*/React.createElement(ArrowIcon, null)) : null, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.buttonBorder, _defineProperty({}, buttonBorderClassName, buttonBorderClassName !== null)])
-  }, /*#__PURE__*/React.createElement(Button, Object.assign({
-    className: classNames([styles.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
-    refButton: buttonRef,
-    focusable: focusable,
-    buttonStyle: boxStyle,
-    inline: true,
-    "aria-pressed": toggled,
-    href: !inWebView ? url : null,
-    external: true,
-    onClick: onClickLink
-  }, swipeUpEnabled && !disabled ? bind() : null), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
-  }, icon !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles.icon
-  }, icon) : null, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
-    textStyle: _objectSpread(_objectSpread({}, textStyle), {}, {
-      lineHeight: lineHeight || 1
-    }),
-    inline: true
-  }))))));
-}
-CallToAction.propTypes = propTypes;
-CallToAction.defaultProps = defaultProps;
-var CallToAction$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(CallToAction, Object.assign({
-    elRef: ref
-  }, props));
-});
-
-module.exports = CallToAction$1;