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

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 (3) hide show
  1. package/es/index.js +59 -17
  2. package/lib/index.js +59 -17
  3. package/package.json +6 -6
package/es/index.js CHANGED
@@ -1,8 +1,6 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
2
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
3
3
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
- import { faChevronUp } from '@fortawesome/free-solid-svg-icons';
5
- import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
6
4
  import { useGesture } from '@use-gesture/react';
7
5
  import classNames from 'classnames';
8
6
  import PropTypes from 'prop-types';
@@ -13,6 +11,45 @@ import Button from '@micromag/element-button';
13
11
  import Text from '@micromag/element-text';
14
12
  import WebView from '@micromag/element-webview';
15
13
 
14
+ var propTypes$1 = {
15
+ color: PropTypes.string,
16
+ className: PropTypes.string
17
+ };
18
+ var defaultProps$1 = {
19
+ color: 'currentColor',
20
+ className: null
21
+ };
22
+
23
+ var Arrow = function Arrow(_ref) {
24
+ var color = _ref.color,
25
+ className = _ref.className;
26
+ return /*#__PURE__*/React.createElement("svg", {
27
+ version: "1.1",
28
+ xmlns: "http://www.w3.org/2000/svg",
29
+ xmlnsXlink: "http://www.w3.org/1999/xlink",
30
+ x: "0",
31
+ y: "0px",
32
+ width: "48.53px",
33
+ height: "12.38px",
34
+ viewBox: "0 0 48.53 12.38",
35
+ className: className,
36
+ xmlSpace: "preserve"
37
+ }, /*#__PURE__*/React.createElement("g", {
38
+ transform: "matrix(1, 0, 0, 1, 0, 0)"
39
+ }, /*#__PURE__*/React.createElement("path", {
40
+ id: "b",
41
+ fill: "none",
42
+ stroke: color,
43
+ strokeWidth: "3px",
44
+ strokeLinejoin: "round",
45
+ strokeLinecap: "round",
46
+ d: "M1.5,10.88L24.26,1.5l22.77,9.38"
47
+ })));
48
+ };
49
+
50
+ Arrow.propTypes = propTypes$1;
51
+ Arrow.defaultProps = defaultProps$1;
52
+
16
53
  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","disabled":"micromag-element-call-to-action-disabled","inWebView":"micromag-element-call-to-action-inWebView","withMargin":"micromag-element-call-to-action-withMargin","webView":"micromag-element-call-to-action-webView","visible":"micromag-element-call-to-action-visible"};
17
54
 
18
55
  var propTypes = {
@@ -23,8 +60,8 @@ var propTypes = {
23
60
  disabled: PropTypes.bool,
24
61
  animationDisabled: PropTypes.bool,
25
62
  callToAction: PropTypes$1.callToAction,
26
- iconComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
27
- arrowComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
63
+ icon: PropTypes.node,
64
+ arrow: PropTypes.node,
28
65
  screenSize: PropTypes.shape({
29
66
  width: PropTypes.number,
30
67
  height: PropTypes.number
@@ -32,6 +69,7 @@ var propTypes = {
32
69
  dragAmount: PropTypes.number,
33
70
  className: PropTypes.string,
34
71
  buttonClassName: PropTypes.string,
72
+ buttonBorderClassName: PropTypes.string,
35
73
  labelClassName: PropTypes.string,
36
74
  arrowClassName: PropTypes.string,
37
75
  focusable: PropTypes.bool
@@ -41,12 +79,13 @@ var defaultProps = {
41
79
  disabled: false,
42
80
  animationDisabled: false,
43
81
  callToAction: null,
44
- iconComponent: null,
45
- arrowComponent: null,
82
+ icon: null,
83
+ arrow: null,
46
84
  screenSize: null,
47
85
  dragAmount: 50,
48
86
  className: null,
49
87
  buttonClassName: null,
88
+ buttonBorderClassName: null,
50
89
  labelClassName: null,
51
90
  arrowClassName: null,
52
91
  focusable: true
@@ -59,12 +98,13 @@ function CallToAction(_ref) {
59
98
  disabled = _ref.disabled,
60
99
  animationDisabled = _ref.animationDisabled,
61
100
  callToAction = _ref.callToAction,
62
- IconComponent = _ref.iconComponent,
63
- ArrowComponent = _ref.arrowComponent,
101
+ icon = _ref.icon,
102
+ arrow = _ref.arrow,
64
103
  screenSize = _ref.screenSize,
65
104
  dragAmount = _ref.dragAmount,
66
105
  className = _ref.className,
67
106
  buttonClassName = _ref.buttonClassName,
107
+ buttonBorderClassName = _ref.buttonBorderClassName,
68
108
  labelClassName = _ref.labelClassName,
69
109
  arrowClassName = _ref.arrowClassName,
70
110
  focusable = _ref.focusable;
@@ -111,7 +151,8 @@ function CallToAction(_ref) {
111
151
  return _objectSpread(_objectSpread({}, {
112
152
  fontSize: fontSize
113
153
  }), getStyleFromColor(color, 'color'));
114
- }, [fontSize, color]); // MobileSafari blocks popup no matter what
154
+ }, [fontSize, color]);
155
+ console.log(buttonStyle); // MobileSafari blocks popup no matter what
115
156
 
116
157
  var selfTargetLinkRef = useRef(null);
117
158
 
@@ -177,12 +218,11 @@ function CallToAction(_ref) {
177
218
  var onCloseWebView = useCallback(function () {
178
219
  setShowWebView(false);
179
220
  }, [setShowWebView]);
180
- var ArrowElement = ArrowComponent !== null ? /*#__PURE__*/React.createElement(ArrowComponent, {
221
+ var ArrowElement = arrow !== null ? /*#__PURE__*/React.createElement("div", {
181
222
  className: classNames([styles.arrow, _defineProperty({}, arrowClassName, arrowClassName !== null)])
182
- }) : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
223
+ }, arrow) : /*#__PURE__*/React.createElement(Arrow, {
183
224
  className: classNames([styles.arrow, _defineProperty({}, arrowClassName, arrowClassName !== null)]),
184
- style: arrowStyle,
185
- icon: faChevronUp
225
+ style: arrowStyle
186
226
  });
187
227
  return active ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
188
228
  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)]),
@@ -194,7 +234,9 @@ function CallToAction(_ref) {
194
234
  href: url,
195
235
  ref: selfTargetLinkRef,
196
236
  tabIndex: focusable ? '0' : '-1'
197
- }), swipeUpEnabled ? ArrowElement : null, /*#__PURE__*/React.createElement(Button, Object.assign({
237
+ }), swipeUpEnabled ? ArrowElement : null, /*#__PURE__*/React.createElement("div", {
238
+ className: classNames([styles.buttonBorder, _defineProperty({}, buttonBorderClassName, buttonBorderClassName !== null)])
239
+ }, /*#__PURE__*/React.createElement(Button, Object.assign({
198
240
  className: classNames([styles.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
199
241
  refButton: buttonRef,
200
242
  focusable: focusable,
@@ -208,11 +250,11 @@ function CallToAction(_ref) {
208
250
  external: true
209
251
  }), /*#__PURE__*/React.createElement("span", {
210
252
  className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
211
- }, IconComponent !== null ? /*#__PURE__*/React.createElement(IconComponent, {
253
+ }, icon !== null ? /*#__PURE__*/React.createElement("div", {
212
254
  className: styles.icon
213
- }) : null, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
255
+ }, icon) : null, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
214
256
  inline: true
215
- }))))), inWebView ? /*#__PURE__*/React.createElement(WebView, Object.assign({
257
+ })))))), inWebView ? /*#__PURE__*/React.createElement(WebView, Object.assign({
216
258
  className: classNames([styles.webView, _defineProperty({}, styles.visible, showWebView)]),
217
259
  src: url,
218
260
  disabled: !showWebView,
package/lib/index.js CHANGED
@@ -3,8 +3,6 @@
3
3
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
4
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
5
5
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
6
- var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
7
- var reactFontawesome = require('@fortawesome/react-fontawesome');
8
6
  var react = require('@use-gesture/react');
9
7
  var classNames = require('classnames');
10
8
  var PropTypes = require('prop-types');
@@ -27,6 +25,45 @@ var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
27
25
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
28
26
  var WebView__default = /*#__PURE__*/_interopDefaultLegacy(WebView);
29
27
 
28
+ var propTypes$1 = {
29
+ color: PropTypes__default["default"].string,
30
+ className: PropTypes__default["default"].string
31
+ };
32
+ var defaultProps$1 = {
33
+ color: 'currentColor',
34
+ className: null
35
+ };
36
+
37
+ var Arrow = function Arrow(_ref) {
38
+ var color = _ref.color,
39
+ className = _ref.className;
40
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
41
+ version: "1.1",
42
+ xmlns: "http://www.w3.org/2000/svg",
43
+ xmlnsXlink: "http://www.w3.org/1999/xlink",
44
+ x: "0",
45
+ y: "0px",
46
+ width: "48.53px",
47
+ height: "12.38px",
48
+ viewBox: "0 0 48.53 12.38",
49
+ className: className,
50
+ xmlSpace: "preserve"
51
+ }, /*#__PURE__*/React__default["default"].createElement("g", {
52
+ transform: "matrix(1, 0, 0, 1, 0, 0)"
53
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
54
+ id: "b",
55
+ fill: "none",
56
+ stroke: color,
57
+ strokeWidth: "3px",
58
+ strokeLinejoin: "round",
59
+ strokeLinecap: "round",
60
+ d: "M1.5,10.88L24.26,1.5l22.77,9.38"
61
+ })));
62
+ };
63
+
64
+ Arrow.propTypes = propTypes$1;
65
+ Arrow.defaultProps = defaultProps$1;
66
+
30
67
  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","disabled":"micromag-element-call-to-action-disabled","inWebView":"micromag-element-call-to-action-inWebView","withMargin":"micromag-element-call-to-action-withMargin","webView":"micromag-element-call-to-action-webView","visible":"micromag-element-call-to-action-visible"};
31
68
 
32
69
  var propTypes = {
@@ -37,8 +74,8 @@ var propTypes = {
37
74
  disabled: PropTypes__default["default"].bool,
38
75
  animationDisabled: PropTypes__default["default"].bool,
39
76
  callToAction: core.PropTypes.callToAction,
40
- iconComponent: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].func]),
41
- arrowComponent: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].func]),
77
+ icon: PropTypes__default["default"].node,
78
+ arrow: PropTypes__default["default"].node,
42
79
  screenSize: PropTypes__default["default"].shape({
43
80
  width: PropTypes__default["default"].number,
44
81
  height: PropTypes__default["default"].number
@@ -46,6 +83,7 @@ var propTypes = {
46
83
  dragAmount: PropTypes__default["default"].number,
47
84
  className: PropTypes__default["default"].string,
48
85
  buttonClassName: PropTypes__default["default"].string,
86
+ buttonBorderClassName: PropTypes__default["default"].string,
49
87
  labelClassName: PropTypes__default["default"].string,
50
88
  arrowClassName: PropTypes__default["default"].string,
51
89
  focusable: PropTypes__default["default"].bool
@@ -55,12 +93,13 @@ var defaultProps = {
55
93
  disabled: false,
56
94
  animationDisabled: false,
57
95
  callToAction: null,
58
- iconComponent: null,
59
- arrowComponent: null,
96
+ icon: null,
97
+ arrow: null,
60
98
  screenSize: null,
61
99
  dragAmount: 50,
62
100
  className: null,
63
101
  buttonClassName: null,
102
+ buttonBorderClassName: null,
64
103
  labelClassName: null,
65
104
  arrowClassName: null,
66
105
  focusable: true
@@ -73,12 +112,13 @@ function CallToAction(_ref) {
73
112
  disabled = _ref.disabled,
74
113
  animationDisabled = _ref.animationDisabled,
75
114
  callToAction = _ref.callToAction,
76
- IconComponent = _ref.iconComponent,
77
- ArrowComponent = _ref.arrowComponent,
115
+ icon = _ref.icon,
116
+ arrow = _ref.arrow,
78
117
  screenSize = _ref.screenSize,
79
118
  dragAmount = _ref.dragAmount,
80
119
  className = _ref.className,
81
120
  buttonClassName = _ref.buttonClassName,
121
+ buttonBorderClassName = _ref.buttonBorderClassName,
82
122
  labelClassName = _ref.labelClassName,
83
123
  arrowClassName = _ref.arrowClassName,
84
124
  focusable = _ref.focusable;
@@ -125,7 +165,8 @@ function CallToAction(_ref) {
125
165
  return _objectSpread__default["default"](_objectSpread__default["default"]({}, {
126
166
  fontSize: fontSize
127
167
  }), utils.getStyleFromColor(color, 'color'));
128
- }, [fontSize, color]); // MobileSafari blocks popup no matter what
168
+ }, [fontSize, color]);
169
+ console.log(buttonStyle); // MobileSafari blocks popup no matter what
129
170
 
130
171
  var selfTargetLinkRef = React.useRef(null);
131
172
 
@@ -191,12 +232,11 @@ function CallToAction(_ref) {
191
232
  var onCloseWebView = React.useCallback(function () {
192
233
  setShowWebView(false);
193
234
  }, [setShowWebView]);
194
- var ArrowElement = ArrowComponent !== null ? /*#__PURE__*/React__default["default"].createElement(ArrowComponent, {
235
+ var ArrowElement = arrow !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
195
236
  className: classNames__default["default"]([styles.arrow, _defineProperty__default["default"]({}, arrowClassName, arrowClassName !== null)])
196
- }) : /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
237
+ }, arrow) : /*#__PURE__*/React__default["default"].createElement(Arrow, {
197
238
  className: classNames__default["default"]([styles.arrow, _defineProperty__default["default"]({}, arrowClassName, arrowClassName !== null)]),
198
- style: arrowStyle,
199
- icon: freeSolidSvgIcons.faChevronUp
239
+ style: arrowStyle
200
240
  });
201
241
  return active ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
202
242
  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)]),
@@ -208,7 +248,9 @@ function CallToAction(_ref) {
208
248
  href: url,
209
249
  ref: selfTargetLinkRef,
210
250
  tabIndex: focusable ? '0' : '-1'
211
- }), swipeUpEnabled ? ArrowElement : null, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], Object.assign({
251
+ }), swipeUpEnabled ? ArrowElement : null, /*#__PURE__*/React__default["default"].createElement("div", {
252
+ className: classNames__default["default"]([styles.buttonBorder, _defineProperty__default["default"]({}, buttonBorderClassName, buttonBorderClassName !== null)])
253
+ }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], Object.assign({
212
254
  className: classNames__default["default"]([styles.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
213
255
  refButton: buttonRef,
214
256
  focusable: focusable,
@@ -222,11 +264,11 @@ function CallToAction(_ref) {
222
264
  external: true
223
265
  }), /*#__PURE__*/React__default["default"].createElement("span", {
224
266
  className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
225
- }, IconComponent !== null ? /*#__PURE__*/React__default["default"].createElement(IconComponent, {
267
+ }, icon !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
226
268
  className: styles.icon
227
- }) : null, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, label, {
269
+ }, icon) : null, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, label, {
228
270
  inline: true
229
- }))))), inWebView ? /*#__PURE__*/React__default["default"].createElement(WebView__default["default"], Object.assign({
271
+ })))))), inWebView ? /*#__PURE__*/React__default["default"].createElement(WebView__default["default"], Object.assign({
230
272
  className: classNames__default["default"]([styles.webView, _defineProperty__default["default"]({}, styles.visible, showWebView)]),
231
273
  src: url,
232
274
  disabled: !showWebView,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-call-to-action",
3
- "version": "0.3.57",
3
+ "version": "0.3.61",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -52,10 +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.57",
56
- "@micromag/element-button": "^0.3.57",
57
- "@micromag/element-text": "^0.3.57",
58
- "@micromag/element-webview": "^0.3.57",
55
+ "@micromag/core": "^0.3.61",
56
+ "@micromag/element-button": "^0.3.61",
57
+ "@micromag/element-text": "^0.3.61",
58
+ "@micromag/element-webview": "^0.3.61",
59
59
  "@react-spring/core": "^9.1.1",
60
60
  "@react-spring/web": "^9.1.1",
61
61
  "@use-gesture/react": "^10.2.4",
@@ -68,5 +68,5 @@
68
68
  "publishConfig": {
69
69
  "access": "public"
70
70
  },
71
- "gitHead": "0cd1abafd1bee77d9dccbedde58f7b83f2351794"
71
+ "gitHead": "d6066e12f37c8516f07172ea225667d28dca6434"
72
72
  }