@micromag/element-call-to-action 0.3.34 → 0.3.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +61 -26
  3. package/lib/index.js +64 -27
  4. package/package.json +6 -4
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- @-webkit-keyframes micromag-element-call-to-action-appear{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}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:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.micromag-element-call-to-action-container{position:relative;-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{-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-label{display:block}.micromag-element-call-to-action-container .micromag-element-call-to-action-button{display:block;margin:0 auto;padding:20px 0;-ms-touch-action:none;touch-action:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select: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}@-webkit-keyframes micromag-element-call-to-action-upAndDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(25%);transform:translateY(25%)}}@keyframes micromag-element-call-to-action-upAndDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(25%);transform:translateY(25%)}}
1
+ @-webkit-keyframes micromag-element-call-to-action-appear{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}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:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.micromag-element-call-to-action-container{position:relative;-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{-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-label{display:block}.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-withMargin{margin-bottom:5px}.micromag-element-call-to-action-container.micromag-element-call-to-action-withWebView,.micromag-element-call-to-action-webView{width:100%}.micromag-element-call-to-action-webView{position:absolute;top:102%;-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(-102%);-ms-transform:translateY(-102%);transform:translateY(-102%)}@-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 CHANGED
@@ -1,18 +1,19 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
3
2
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
3
+ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
4
  import { faChevronUp } from '@fortawesome/free-solid-svg-icons';
5
5
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
6
- import { PropTypes as PropTypes$1 } from '@micromag/core';
7
- import { Button } from '@micromag/core/components';
8
- import { isValidUrl, getStyleFromColor, isIos } from '@micromag/core/utils';
9
- import Text from '@micromag/element-text';
10
6
  import { useGesture } from '@use-gesture/react';
11
7
  import classNames from 'classnames';
12
8
  import PropTypes from 'prop-types';
13
- import React, { useMemo, useRef, useState, useEffect } from 'react';
9
+ import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';
10
+ import { PropTypes as PropTypes$1 } from '@micromag/core';
11
+ import { isValidUrl, getStyleFromColor, isIos, getStyleFromBox } from '@micromag/core/utils';
12
+ import Button from '@micromag/element-button';
13
+ import Text from '@micromag/element-text';
14
+ import WebView from '@micromag/element-webview';
14
15
 
15
- var styles = {"container":"micromag-element-call-to-action-container","arrow":"micromag-element-call-to-action-arrow","upAndDown":"micromag-element-call-to-action-upAndDown","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","disabled":"micromag-element-call-to-action-disabled"};
16
+ var styles = {"container":"micromag-element-call-to-action-container","arrow":"micromag-element-call-to-action-arrow","upAndDown":"micromag-element-call-to-action-upAndDown","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","disabled":"micromag-element-call-to-action-disabled","withMargin":"micromag-element-call-to-action-withMargin","withWebView":"micromag-element-call-to-action-withWebView","webView":"micromag-element-call-to-action-webView","visible":"micromag-element-call-to-action-visible"};
16
17
 
17
18
  var propTypes = {
18
19
  elRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
@@ -22,6 +23,10 @@ var propTypes = {
22
23
  disabled: PropTypes.bool,
23
24
  animationDisabled: PropTypes.bool,
24
25
  callToAction: PropTypes$1.callToAction,
26
+ screenSize: PropTypes.shape({
27
+ width: PropTypes.number,
28
+ height: PropTypes.number
29
+ }),
25
30
  dragAmount: PropTypes.number,
26
31
  className: PropTypes.string,
27
32
  focusable: PropTypes.bool
@@ -31,6 +36,7 @@ var defaultProps = {
31
36
  disabled: false,
32
37
  animationDisabled: false,
33
38
  callToAction: null,
39
+ screenSize: null,
34
40
  dragAmount: 50,
35
41
  className: null,
36
42
  focusable: true
@@ -43,6 +49,7 @@ function CallToAction(_ref) {
43
49
  disabled = _ref.disabled,
44
50
  animationDisabled = _ref.animationDisabled,
45
51
  callToAction = _ref.callToAction,
52
+ screenSize = _ref.screenSize,
46
53
  dragAmount = _ref.dragAmount,
47
54
  className = _ref.className,
48
55
  focusable = _ref.focusable;
@@ -55,7 +62,16 @@ function CallToAction(_ref) {
55
62
  _ref2$url = _ref2.url,
56
63
  url = _ref2$url === void 0 ? null : _ref2$url,
57
64
  _ref2$label = _ref2.label,
58
- label = _ref2$label === void 0 ? null : _ref2$label;
65
+ label = _ref2$label === void 0 ? null : _ref2$label,
66
+ _ref2$buttonStyle = _ref2.buttonStyle,
67
+ buttonStyle = _ref2$buttonStyle === void 0 ? null : _ref2$buttonStyle,
68
+ _ref2$inWebView = _ref2.inWebView,
69
+ inWebView = _ref2$inWebView === void 0 ? false : _ref2$inWebView;
70
+
71
+ var _useState = useState(false),
72
+ _useState2 = _slicedToArray(_useState, 2),
73
+ showWebView = _useState2[0],
74
+ setShowWebView = _useState2[1];
59
75
 
60
76
  var swipeUpEnabled = type === null || type === 'swipe-up';
61
77
  var validUrl = useMemo(function () {
@@ -79,10 +95,10 @@ function CallToAction(_ref) {
79
95
 
80
96
  var selfTargetLinkRef = useRef(null);
81
97
 
82
- var _useState = useState(false),
83
- _useState2 = _slicedToArray(_useState, 2),
84
- leaving = _useState2[0],
85
- setLeaving = _useState2[1];
98
+ var _useState3 = useState(false),
99
+ _useState4 = _slicedToArray(_useState3, 2),
100
+ leaving = _useState4[0],
101
+ setLeaving = _useState4[1];
86
102
 
87
103
  var bind = useGesture({
88
104
  onDrag: function onDrag(_ref4) {
@@ -95,10 +111,12 @@ function CallToAction(_ref) {
95
111
  my = _ref5$movement[1];
96
112
 
97
113
  if (my < -dragAmount) {
98
- if (isIos()) {
114
+ if (inWebView) {
115
+ setShowWebView(true);
116
+ } else if (isIos()) {
99
117
  selfTargetLinkRef.current.click();
100
118
  setLeaving(true);
101
- } else {
119
+ } else if (buttonRef.current) {
102
120
  buttonRef.current.click();
103
121
  }
104
122
  }
@@ -114,8 +132,15 @@ function CallToAction(_ref) {
114
132
  window.removeEventListener('pagehide', onPageHide);
115
133
  };
116
134
  }, [setLeaving]);
117
- return active ? /*#__PURE__*/React.createElement("div", {
118
- className: classNames([styles.container, (_ref6 = {}, _defineProperty(_ref6, className, className !== null), _defineProperty(_ref6, styles.disabled, disabled), _defineProperty(_ref6, styles.animationDisabled, animationDisabled), _defineProperty(_ref6, styles.invalidUrl, !validUrl), _ref6)]),
135
+ var onOpenWebView = useCallback(function () {
136
+ setShowWebView(true);
137
+ }, [setShowWebView]);
138
+ var onCloseWebView = useCallback(function () {
139
+ setShowWebView(false);
140
+ }, [setShowWebView]);
141
+ console.log(callToAction, inWebView, showWebView);
142
+ return active ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
143
+ className: classNames([styles.container, (_ref6 = {}, _defineProperty(_ref6, className, className !== null), _defineProperty(_ref6, styles.disabled, disabled), _defineProperty(_ref6, styles.animationDisabled, animationDisabled), _defineProperty(_ref6, styles.invalidUrl, !validUrl), _defineProperty(_ref6, styles.withWebView, inWebView), _ref6)]),
119
144
  ref: elRef
120
145
  }, leaving ? /*#__PURE__*/React.createElement("div", {
121
146
  className: styles.leavingFrame
@@ -124,22 +149,32 @@ function CallToAction(_ref) {
124
149
  href: url,
125
150
  ref: selfTargetLinkRef,
126
151
  tabIndex: focusable ? '0' : '-1'
127
- }), /*#__PURE__*/React.createElement(Button, Object.assign({
128
- href: url,
129
- external: true,
130
- className: styles.button,
131
- withoutStyle: true,
132
- refButton: buttonRef,
133
- focusable: focusable
134
- }, swipeUpEnabled && !disabled ? bind() : null), swipeUpEnabled ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
152
+ }), swipeUpEnabled ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
135
153
  className: styles.arrow,
136
154
  style: arrowStyle,
137
155
  icon: faChevronUp
138
- }) : null, /*#__PURE__*/React.createElement("span", {
156
+ }) : null, /*#__PURE__*/React.createElement(Button, Object.assign({
157
+ className: styles.button,
158
+ refButton: buttonRef,
159
+ focusable: focusable,
160
+ buttonStyle: _objectSpread({
161
+ marginBottom: 10
162
+ }, getStyleFromBox(buttonStyle))
163
+ }, swipeUpEnabled && !disabled ? bind() : null, inWebView ? {
164
+ onClick: onOpenWebView
165
+ } : {
166
+ href: url,
167
+ external: true
168
+ }), /*#__PURE__*/React.createElement("span", {
139
169
  className: styles.label
140
170
  }, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
141
171
  inline: true
142
- }))))) : null;
172
+ }))))), inWebView ? /*#__PURE__*/React.createElement(WebView, Object.assign({
173
+ className: classNames([styles.webView, _defineProperty({}, styles.visible, showWebView)]),
174
+ src: url,
175
+ closeable: true,
176
+ onClose: onCloseWebView
177
+ }, screenSize)) : null) : null;
143
178
  }
144
179
 
145
180
  CallToAction.propTypes = propTypes;
package/lib/index.js CHANGED
@@ -1,30 +1,33 @@
1
1
  'use strict';
2
2
 
3
3
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
- var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
5
4
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
5
+ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
6
6
  var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
7
7
  var reactFontawesome = require('@fortawesome/react-fontawesome');
8
- var core = require('@micromag/core');
9
- var components = require('@micromag/core/components');
10
- var utils = require('@micromag/core/utils');
11
- var Text = require('@micromag/element-text');
12
8
  var react = require('@use-gesture/react');
13
9
  var classNames = require('classnames');
14
10
  var PropTypes = require('prop-types');
15
11
  var React = require('react');
12
+ var core = require('@micromag/core');
13
+ var utils = require('@micromag/core/utils');
14
+ var Button = require('@micromag/element-button');
15
+ var Text = require('@micromag/element-text');
16
+ var WebView = require('@micromag/element-webview');
16
17
 
17
18
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
19
 
19
20
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
20
- var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
21
21
  var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
22
- var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
22
+ var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
23
23
  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
24
24
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
25
25
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
26
+ var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
27
+ var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
28
+ var WebView__default = /*#__PURE__*/_interopDefaultLegacy(WebView);
26
29
 
27
- var styles = {"container":"micromag-element-call-to-action-container","arrow":"micromag-element-call-to-action-arrow","upAndDown":"micromag-element-call-to-action-upAndDown","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","disabled":"micromag-element-call-to-action-disabled"};
30
+ var styles = {"container":"micromag-element-call-to-action-container","arrow":"micromag-element-call-to-action-arrow","upAndDown":"micromag-element-call-to-action-upAndDown","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","disabled":"micromag-element-call-to-action-disabled","withMargin":"micromag-element-call-to-action-withMargin","withWebView":"micromag-element-call-to-action-withWebView","webView":"micromag-element-call-to-action-webView","visible":"micromag-element-call-to-action-visible"};
28
31
 
29
32
  var propTypes = {
30
33
  elRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
@@ -34,6 +37,10 @@ var propTypes = {
34
37
  disabled: PropTypes__default["default"].bool,
35
38
  animationDisabled: PropTypes__default["default"].bool,
36
39
  callToAction: core.PropTypes.callToAction,
40
+ screenSize: PropTypes__default["default"].shape({
41
+ width: PropTypes__default["default"].number,
42
+ height: PropTypes__default["default"].number
43
+ }),
37
44
  dragAmount: PropTypes__default["default"].number,
38
45
  className: PropTypes__default["default"].string,
39
46
  focusable: PropTypes__default["default"].bool
@@ -43,6 +50,7 @@ var defaultProps = {
43
50
  disabled: false,
44
51
  animationDisabled: false,
45
52
  callToAction: null,
53
+ screenSize: null,
46
54
  dragAmount: 50,
47
55
  className: null,
48
56
  focusable: true
@@ -55,6 +63,7 @@ function CallToAction(_ref) {
55
63
  disabled = _ref.disabled,
56
64
  animationDisabled = _ref.animationDisabled,
57
65
  callToAction = _ref.callToAction,
66
+ screenSize = _ref.screenSize,
58
67
  dragAmount = _ref.dragAmount,
59
68
  className = _ref.className,
60
69
  focusable = _ref.focusable;
@@ -67,7 +76,16 @@ function CallToAction(_ref) {
67
76
  _ref2$url = _ref2.url,
68
77
  url = _ref2$url === void 0 ? null : _ref2$url,
69
78
  _ref2$label = _ref2.label,
70
- label = _ref2$label === void 0 ? null : _ref2$label;
79
+ label = _ref2$label === void 0 ? null : _ref2$label,
80
+ _ref2$buttonStyle = _ref2.buttonStyle,
81
+ buttonStyle = _ref2$buttonStyle === void 0 ? null : _ref2$buttonStyle,
82
+ _ref2$inWebView = _ref2.inWebView,
83
+ inWebView = _ref2$inWebView === void 0 ? false : _ref2$inWebView;
84
+
85
+ var _useState = React.useState(false),
86
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
87
+ showWebView = _useState2[0],
88
+ setShowWebView = _useState2[1];
71
89
 
72
90
  var swipeUpEnabled = type === null || type === 'swipe-up';
73
91
  var validUrl = React.useMemo(function () {
@@ -91,10 +109,10 @@ function CallToAction(_ref) {
91
109
 
92
110
  var selfTargetLinkRef = React.useRef(null);
93
111
 
94
- var _useState = React.useState(false),
95
- _useState2 = _slicedToArray__default["default"](_useState, 2),
96
- leaving = _useState2[0],
97
- setLeaving = _useState2[1];
112
+ var _useState3 = React.useState(false),
113
+ _useState4 = _slicedToArray__default["default"](_useState3, 2),
114
+ leaving = _useState4[0],
115
+ setLeaving = _useState4[1];
98
116
 
99
117
  var bind = react.useGesture({
100
118
  onDrag: function onDrag(_ref4) {
@@ -107,10 +125,12 @@ function CallToAction(_ref) {
107
125
  my = _ref5$movement[1];
108
126
 
109
127
  if (my < -dragAmount) {
110
- if (utils.isIos()) {
128
+ if (inWebView) {
129
+ setShowWebView(true);
130
+ } else if (utils.isIos()) {
111
131
  selfTargetLinkRef.current.click();
112
132
  setLeaving(true);
113
- } else {
133
+ } else if (buttonRef.current) {
114
134
  buttonRef.current.click();
115
135
  }
116
136
  }
@@ -126,8 +146,15 @@ function CallToAction(_ref) {
126
146
  window.removeEventListener('pagehide', onPageHide);
127
147
  };
128
148
  }, [setLeaving]);
129
- return active ? /*#__PURE__*/React__default["default"].createElement("div", {
130
- className: classNames__default["default"]([styles.container, (_ref6 = {}, _defineProperty__default["default"](_ref6, className, className !== null), _defineProperty__default["default"](_ref6, styles.disabled, disabled), _defineProperty__default["default"](_ref6, styles.animationDisabled, animationDisabled), _defineProperty__default["default"](_ref6, styles.invalidUrl, !validUrl), _ref6)]),
149
+ var onOpenWebView = React.useCallback(function () {
150
+ setShowWebView(true);
151
+ }, [setShowWebView]);
152
+ var onCloseWebView = React.useCallback(function () {
153
+ setShowWebView(false);
154
+ }, [setShowWebView]);
155
+ console.log(callToAction, inWebView, showWebView);
156
+ return active ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
157
+ className: classNames__default["default"]([styles.container, (_ref6 = {}, _defineProperty__default["default"](_ref6, className, className !== null), _defineProperty__default["default"](_ref6, styles.disabled, disabled), _defineProperty__default["default"](_ref6, styles.animationDisabled, animationDisabled), _defineProperty__default["default"](_ref6, styles.invalidUrl, !validUrl), _defineProperty__default["default"](_ref6, styles.withWebView, inWebView), _ref6)]),
131
158
  ref: elRef
132
159
  }, leaving ? /*#__PURE__*/React__default["default"].createElement("div", {
133
160
  className: styles.leavingFrame
@@ -136,22 +163,32 @@ function CallToAction(_ref) {
136
163
  href: url,
137
164
  ref: selfTargetLinkRef,
138
165
  tabIndex: focusable ? '0' : '-1'
139
- }), /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
140
- href: url,
141
- external: true,
142
- className: styles.button,
143
- withoutStyle: true,
144
- refButton: buttonRef,
145
- focusable: focusable
146
- }, swipeUpEnabled && !disabled ? bind() : null), swipeUpEnabled ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
166
+ }), swipeUpEnabled ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
147
167
  className: styles.arrow,
148
168
  style: arrowStyle,
149
169
  icon: freeSolidSvgIcons.faChevronUp
150
- }) : null, /*#__PURE__*/React__default["default"].createElement("span", {
170
+ }) : null, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], Object.assign({
171
+ className: styles.button,
172
+ refButton: buttonRef,
173
+ focusable: focusable,
174
+ buttonStyle: _objectSpread__default["default"]({
175
+ marginBottom: 10
176
+ }, utils.getStyleFromBox(buttonStyle))
177
+ }, swipeUpEnabled && !disabled ? bind() : null, inWebView ? {
178
+ onClick: onOpenWebView
179
+ } : {
180
+ href: url,
181
+ external: true
182
+ }), /*#__PURE__*/React__default["default"].createElement("span", {
151
183
  className: styles.label
152
184
  }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, label, {
153
185
  inline: true
154
- }))))) : null;
186
+ }))))), inWebView ? /*#__PURE__*/React__default["default"].createElement(WebView__default["default"], Object.assign({
187
+ className: classNames__default["default"]([styles.webView, _defineProperty__default["default"]({}, styles.visible, showWebView)]),
188
+ src: url,
189
+ closeable: true,
190
+ onClose: onCloseWebView
191
+ }, screenSize)) : null) : null;
155
192
  }
156
193
 
157
194
  CallToAction.propTypes = propTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-call-to-action",
3
- "version": "0.3.34",
3
+ "version": "0.3.39",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -52,8 +52,10 @@
52
52
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
53
53
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
54
54
  "@fortawesome/react-fontawesome": "^0.1.13",
55
- "@micromag/core": "^0.3.34",
56
- "@micromag/element-text": "^0.3.34",
55
+ "@micromag/core": "^0.3.39",
56
+ "@micromag/element-button": "^0.3.39",
57
+ "@micromag/element-text": "^0.3.39",
58
+ "@micromag/element-webview": "^0.3.39",
57
59
  "@react-spring/core": "^9.1.1",
58
60
  "@react-spring/web": "^9.1.1",
59
61
  "@use-gesture/react": "^10.2.4",
@@ -66,5 +68,5 @@
66
68
  "publishConfig": {
67
69
  "access": "public"
68
70
  },
69
- "gitHead": "f8332cb20e6c8cf2cbdba28fc965877684174b2f"
71
+ "gitHead": "cda0a9924ae03347ffb2cdbc86d25b0f7e3ae70e"
70
72
  }