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

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 +19 -13
  2. package/lib/index.js +19 -13
  3. package/package.json +6 -6
package/es/index.js CHANGED
@@ -23,8 +23,8 @@ var propTypes = {
23
23
  disabled: PropTypes.bool,
24
24
  animationDisabled: PropTypes.bool,
25
25
  callToAction: PropTypes$1.callToAction,
26
- iconComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
27
- arrowComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
26
+ icon: PropTypes.node,
27
+ arrow: PropTypes.node,
28
28
  screenSize: PropTypes.shape({
29
29
  width: PropTypes.number,
30
30
  height: PropTypes.number
@@ -32,6 +32,7 @@ var propTypes = {
32
32
  dragAmount: PropTypes.number,
33
33
  className: PropTypes.string,
34
34
  buttonClassName: PropTypes.string,
35
+ buttonBorderClassName: PropTypes.string,
35
36
  labelClassName: PropTypes.string,
36
37
  arrowClassName: PropTypes.string,
37
38
  focusable: PropTypes.bool
@@ -41,12 +42,13 @@ var defaultProps = {
41
42
  disabled: false,
42
43
  animationDisabled: false,
43
44
  callToAction: null,
44
- iconComponent: null,
45
- arrowComponent: null,
45
+ icon: null,
46
+ arrow: null,
46
47
  screenSize: null,
47
48
  dragAmount: 50,
48
49
  className: null,
49
50
  buttonClassName: null,
51
+ buttonBorderClassName: null,
50
52
  labelClassName: null,
51
53
  arrowClassName: null,
52
54
  focusable: true
@@ -59,12 +61,13 @@ function CallToAction(_ref) {
59
61
  disabled = _ref.disabled,
60
62
  animationDisabled = _ref.animationDisabled,
61
63
  callToAction = _ref.callToAction,
62
- IconComponent = _ref.iconComponent,
63
- ArrowComponent = _ref.arrowComponent,
64
+ icon = _ref.icon,
65
+ arrow = _ref.arrow,
64
66
  screenSize = _ref.screenSize,
65
67
  dragAmount = _ref.dragAmount,
66
68
  className = _ref.className,
67
69
  buttonClassName = _ref.buttonClassName,
70
+ buttonBorderClassName = _ref.buttonBorderClassName,
68
71
  labelClassName = _ref.labelClassName,
69
72
  arrowClassName = _ref.arrowClassName,
70
73
  focusable = _ref.focusable;
@@ -111,7 +114,8 @@ function CallToAction(_ref) {
111
114
  return _objectSpread(_objectSpread({}, {
112
115
  fontSize: fontSize
113
116
  }), getStyleFromColor(color, 'color'));
114
- }, [fontSize, color]); // MobileSafari blocks popup no matter what
117
+ }, [fontSize, color]);
118
+ console.log(buttonStyle); // MobileSafari blocks popup no matter what
115
119
 
116
120
  var selfTargetLinkRef = useRef(null);
117
121
 
@@ -177,9 +181,9 @@ function CallToAction(_ref) {
177
181
  var onCloseWebView = useCallback(function () {
178
182
  setShowWebView(false);
179
183
  }, [setShowWebView]);
180
- var ArrowElement = ArrowComponent !== null ? /*#__PURE__*/React.createElement(ArrowComponent, {
184
+ var ArrowElement = arrow !== null ? /*#__PURE__*/React.createElement("div", {
181
185
  className: classNames([styles.arrow, _defineProperty({}, arrowClassName, arrowClassName !== null)])
182
- }) : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
186
+ }, arrow) : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
183
187
  className: classNames([styles.arrow, _defineProperty({}, arrowClassName, arrowClassName !== null)]),
184
188
  style: arrowStyle,
185
189
  icon: faChevronUp
@@ -194,7 +198,9 @@ function CallToAction(_ref) {
194
198
  href: url,
195
199
  ref: selfTargetLinkRef,
196
200
  tabIndex: focusable ? '0' : '-1'
197
- }), swipeUpEnabled ? ArrowElement : null, /*#__PURE__*/React.createElement(Button, Object.assign({
201
+ }), swipeUpEnabled ? ArrowElement : null, /*#__PURE__*/React.createElement("div", {
202
+ className: classNames([styles.buttonBorder, _defineProperty({}, buttonBorderClassName, buttonBorderClassName !== null)])
203
+ }, /*#__PURE__*/React.createElement(Button, Object.assign({
198
204
  className: classNames([styles.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
199
205
  refButton: buttonRef,
200
206
  focusable: focusable,
@@ -208,11 +214,11 @@ function CallToAction(_ref) {
208
214
  external: true
209
215
  }), /*#__PURE__*/React.createElement("span", {
210
216
  className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
211
- }, IconComponent !== null ? /*#__PURE__*/React.createElement(IconComponent, {
217
+ }, icon !== null ? /*#__PURE__*/React.createElement("div", {
212
218
  className: styles.icon
213
- }) : null, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
219
+ }, icon) : null, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
214
220
  inline: true
215
- }))))), inWebView ? /*#__PURE__*/React.createElement(WebView, Object.assign({
221
+ })))))), inWebView ? /*#__PURE__*/React.createElement(WebView, Object.assign({
216
222
  className: classNames([styles.webView, _defineProperty({}, styles.visible, showWebView)]),
217
223
  src: url,
218
224
  disabled: !showWebView,
package/lib/index.js CHANGED
@@ -37,8 +37,8 @@ var propTypes = {
37
37
  disabled: PropTypes__default["default"].bool,
38
38
  animationDisabled: PropTypes__default["default"].bool,
39
39
  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]),
40
+ icon: PropTypes__default["default"].node,
41
+ arrow: PropTypes__default["default"].node,
42
42
  screenSize: PropTypes__default["default"].shape({
43
43
  width: PropTypes__default["default"].number,
44
44
  height: PropTypes__default["default"].number
@@ -46,6 +46,7 @@ var propTypes = {
46
46
  dragAmount: PropTypes__default["default"].number,
47
47
  className: PropTypes__default["default"].string,
48
48
  buttonClassName: PropTypes__default["default"].string,
49
+ buttonBorderClassName: PropTypes__default["default"].string,
49
50
  labelClassName: PropTypes__default["default"].string,
50
51
  arrowClassName: PropTypes__default["default"].string,
51
52
  focusable: PropTypes__default["default"].bool
@@ -55,12 +56,13 @@ var defaultProps = {
55
56
  disabled: false,
56
57
  animationDisabled: false,
57
58
  callToAction: null,
58
- iconComponent: null,
59
- arrowComponent: null,
59
+ icon: null,
60
+ arrow: null,
60
61
  screenSize: null,
61
62
  dragAmount: 50,
62
63
  className: null,
63
64
  buttonClassName: null,
65
+ buttonBorderClassName: null,
64
66
  labelClassName: null,
65
67
  arrowClassName: null,
66
68
  focusable: true
@@ -73,12 +75,13 @@ function CallToAction(_ref) {
73
75
  disabled = _ref.disabled,
74
76
  animationDisabled = _ref.animationDisabled,
75
77
  callToAction = _ref.callToAction,
76
- IconComponent = _ref.iconComponent,
77
- ArrowComponent = _ref.arrowComponent,
78
+ icon = _ref.icon,
79
+ arrow = _ref.arrow,
78
80
  screenSize = _ref.screenSize,
79
81
  dragAmount = _ref.dragAmount,
80
82
  className = _ref.className,
81
83
  buttonClassName = _ref.buttonClassName,
84
+ buttonBorderClassName = _ref.buttonBorderClassName,
82
85
  labelClassName = _ref.labelClassName,
83
86
  arrowClassName = _ref.arrowClassName,
84
87
  focusable = _ref.focusable;
@@ -125,7 +128,8 @@ function CallToAction(_ref) {
125
128
  return _objectSpread__default["default"](_objectSpread__default["default"]({}, {
126
129
  fontSize: fontSize
127
130
  }), utils.getStyleFromColor(color, 'color'));
128
- }, [fontSize, color]); // MobileSafari blocks popup no matter what
131
+ }, [fontSize, color]);
132
+ console.log(buttonStyle); // MobileSafari blocks popup no matter what
129
133
 
130
134
  var selfTargetLinkRef = React.useRef(null);
131
135
 
@@ -191,9 +195,9 @@ function CallToAction(_ref) {
191
195
  var onCloseWebView = React.useCallback(function () {
192
196
  setShowWebView(false);
193
197
  }, [setShowWebView]);
194
- var ArrowElement = ArrowComponent !== null ? /*#__PURE__*/React__default["default"].createElement(ArrowComponent, {
198
+ var ArrowElement = arrow !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
195
199
  className: classNames__default["default"]([styles.arrow, _defineProperty__default["default"]({}, arrowClassName, arrowClassName !== null)])
196
- }) : /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
200
+ }, arrow) : /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
197
201
  className: classNames__default["default"]([styles.arrow, _defineProperty__default["default"]({}, arrowClassName, arrowClassName !== null)]),
198
202
  style: arrowStyle,
199
203
  icon: freeSolidSvgIcons.faChevronUp
@@ -208,7 +212,9 @@ function CallToAction(_ref) {
208
212
  href: url,
209
213
  ref: selfTargetLinkRef,
210
214
  tabIndex: focusable ? '0' : '-1'
211
- }), swipeUpEnabled ? ArrowElement : null, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], Object.assign({
215
+ }), swipeUpEnabled ? ArrowElement : null, /*#__PURE__*/React__default["default"].createElement("div", {
216
+ className: classNames__default["default"]([styles.buttonBorder, _defineProperty__default["default"]({}, buttonBorderClassName, buttonBorderClassName !== null)])
217
+ }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], Object.assign({
212
218
  className: classNames__default["default"]([styles.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
213
219
  refButton: buttonRef,
214
220
  focusable: focusable,
@@ -222,11 +228,11 @@ function CallToAction(_ref) {
222
228
  external: true
223
229
  }), /*#__PURE__*/React__default["default"].createElement("span", {
224
230
  className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
225
- }, IconComponent !== null ? /*#__PURE__*/React__default["default"].createElement(IconComponent, {
231
+ }, icon !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
226
232
  className: styles.icon
227
- }) : null, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, label, {
233
+ }, icon) : null, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, label, {
228
234
  inline: true
229
- }))))), inWebView ? /*#__PURE__*/React__default["default"].createElement(WebView__default["default"], Object.assign({
235
+ })))))), inWebView ? /*#__PURE__*/React__default["default"].createElement(WebView__default["default"], Object.assign({
230
236
  className: classNames__default["default"]([styles.webView, _defineProperty__default["default"]({}, styles.visible, showWebView)]),
231
237
  src: url,
232
238
  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.58",
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.58",
56
+ "@micromag/element-button": "^0.3.58",
57
+ "@micromag/element-text": "^0.3.58",
58
+ "@micromag/element-webview": "^0.3.58",
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": "80fc5af53d50e031d2516967d52ca61e789d52de"
72
72
  }