@micromag/element-call-to-action 0.3.74 → 0.3.78

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 +24 -18
  3. package/lib/index.js +24 -18
  4. package/package.json +6 -6
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{display:block;margin:0 auto;-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-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(-90%);-ms-transform:translateY(-90%);transform:translateY(-90%)}@-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%)}}
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;margin-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;-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(-90%);-ms-transform:translateY(-90%);transform:translateY(-90%)}@-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
@@ -92,7 +92,7 @@ var defaultProps = {
92
92
  };
93
93
 
94
94
  function CallToAction(_ref) {
95
- var _ref9;
95
+ var _ref10;
96
96
 
97
97
  var elRef = _ref.elRef,
98
98
  disabled = _ref.disabled,
@@ -140,17 +140,20 @@ function CallToAction(_ref) {
140
140
  var buttonRef = useRef(null);
141
141
 
142
142
  var _ref3 = label || {},
143
- _ref3$textStyle = _ref3.textStyle;
143
+ _ref3$textStyle = _ref3.textStyle,
144
+ textStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
144
145
 
145
- _ref3$textStyle = _ref3$textStyle === void 0 ? {} : _ref3$textStyle;
146
- var _ref3$textStyle$fontS = _ref3$textStyle.fontSize,
147
- fontSize = _ref3$textStyle$fontS === void 0 ? null : _ref3$textStyle$fontS,
148
- _ref3$textStyle$color = _ref3$textStyle.color,
149
- color = _ref3$textStyle$color === void 0 ? null : _ref3$textStyle$color;
146
+ var _ref4 = textStyle || {},
147
+ _ref4$fontSize = _ref4.fontSize,
148
+ fontSize = _ref4$fontSize === void 0 ? null : _ref4$fontSize,
149
+ _ref4$color = _ref4.color,
150
+ color = _ref4$color === void 0 ? null : _ref4$color,
151
+ _ref4$lineHeight = _ref4.lineHeight,
152
+ lineHeight = _ref4$lineHeight === void 0 ? null : _ref4$lineHeight;
150
153
 
151
- var _ref4 = boxStyle || {},
152
- _ref4$backgroundColor = _ref4.backgroundColor,
153
- backgroundColor = _ref4$backgroundColor === void 0 ? null : _ref4$backgroundColor;
154
+ var _ref5 = boxStyle || {},
155
+ _ref5$backgroundColor = _ref5.backgroundColor,
156
+ backgroundColor = _ref5$backgroundColor === void 0 ? null : _ref5$backgroundColor;
154
157
 
155
158
  var arrowStyle = useMemo(function () {
156
159
  return _objectSpread(_objectSpread({}, {
@@ -166,14 +169,14 @@ function CallToAction(_ref) {
166
169
  setLeaving = _useState6[1];
167
170
 
168
171
  var bind = useGesture({
169
- onDrag: function onDrag(_ref5) {
170
- var event = _ref5.event;
172
+ onDrag: function onDrag(_ref6) {
173
+ var event = _ref6.event;
171
174
  // fix firefox https://use-gesture.netlify.app/docs/faq/#why-cant-i-properly-drag-an-image-or-a-link
172
175
  event.preventDefault();
173
176
  },
174
- onDragEnd: function onDragEnd(_ref6) {
175
- var _ref6$movement = _slicedToArray(_ref6.movement, 2),
176
- my = _ref6$movement[1];
177
+ onDragEnd: function onDragEnd(_ref7) {
178
+ var _ref7$movement = _slicedToArray(_ref7.movement, 2),
179
+ my = _ref7$movement[1];
177
180
 
178
181
  if (my < -dragAmount) {
179
182
  if (inWebView) {
@@ -229,9 +232,8 @@ function CallToAction(_ref) {
229
232
  className: classNames([styles.arrow, _defineProperty({}, arrowClassName, arrowClassName !== null)]),
230
233
  style: arrowStyle
231
234
  }, /*#__PURE__*/React.createElement(Arrow, null));
232
- console.log('bs', boxStyle);
233
235
  return active ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
234
- className: classNames([styles.container, (_ref9 = {}, _defineProperty(_ref9, className, className !== null), _defineProperty(_ref9, styles.disabled, disabled), _defineProperty(_ref9, styles.animationDisabled, animationDisabled), _defineProperty(_ref9, styles.invalidUrl, !validUrl), _defineProperty(_ref9, styles.inWebView, inWebView), _ref9)]),
236
+ className: classNames([styles.container, (_ref10 = {}, _defineProperty(_ref10, className, className !== null), _defineProperty(_ref10, styles.disabled, disabled), _defineProperty(_ref10, styles.animationDisabled, animationDisabled), _defineProperty(_ref10, styles.invalidUrl, !validUrl), _defineProperty(_ref10, styles.inWebView, inWebView), _ref10)]),
235
237
  ref: elRef
236
238
  }, leaving ? /*#__PURE__*/React.createElement("div", {
237
239
  className: styles.leavingFrame
@@ -248,7 +250,8 @@ function CallToAction(_ref) {
248
250
  focusable: focusable,
249
251
  buttonStyle: _objectSpread({
250
252
  marginBottom: 10
251
- }, boxStyle)
253
+ }, boxStyle),
254
+ inline: true
252
255
  }, swipeUpEnabled && !disabled ? bind() : null, inWebView ? {
253
256
  onClick: onOpenWebView
254
257
  } : {
@@ -259,6 +262,9 @@ function CallToAction(_ref) {
259
262
  }, icon !== null ? /*#__PURE__*/React.createElement("div", {
260
263
  className: styles.icon
261
264
  }, icon) : null, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
265
+ textStyle: _objectSpread(_objectSpread({}, textStyle), {}, {
266
+ lineHeight: lineHeight || 1
267
+ }),
262
268
  inline: true
263
269
  })))))), inWebView ? /*#__PURE__*/React.createElement(WebView, Object.assign({
264
270
  className: classNames([styles.webView, _defineProperty({}, styles.visible, showWebView)]),
package/lib/index.js CHANGED
@@ -106,7 +106,7 @@ var defaultProps = {
106
106
  };
107
107
 
108
108
  function CallToAction(_ref) {
109
- var _ref9;
109
+ var _ref10;
110
110
 
111
111
  var elRef = _ref.elRef,
112
112
  disabled = _ref.disabled,
@@ -154,17 +154,20 @@ function CallToAction(_ref) {
154
154
  var buttonRef = React.useRef(null);
155
155
 
156
156
  var _ref3 = label || {},
157
- _ref3$textStyle = _ref3.textStyle;
157
+ _ref3$textStyle = _ref3.textStyle,
158
+ textStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
158
159
 
159
- _ref3$textStyle = _ref3$textStyle === void 0 ? {} : _ref3$textStyle;
160
- var _ref3$textStyle$fontS = _ref3$textStyle.fontSize,
161
- fontSize = _ref3$textStyle$fontS === void 0 ? null : _ref3$textStyle$fontS,
162
- _ref3$textStyle$color = _ref3$textStyle.color,
163
- color = _ref3$textStyle$color === void 0 ? null : _ref3$textStyle$color;
160
+ var _ref4 = textStyle || {},
161
+ _ref4$fontSize = _ref4.fontSize,
162
+ fontSize = _ref4$fontSize === void 0 ? null : _ref4$fontSize,
163
+ _ref4$color = _ref4.color,
164
+ color = _ref4$color === void 0 ? null : _ref4$color,
165
+ _ref4$lineHeight = _ref4.lineHeight,
166
+ lineHeight = _ref4$lineHeight === void 0 ? null : _ref4$lineHeight;
164
167
 
165
- var _ref4 = boxStyle || {},
166
- _ref4$backgroundColor = _ref4.backgroundColor,
167
- backgroundColor = _ref4$backgroundColor === void 0 ? null : _ref4$backgroundColor;
168
+ var _ref5 = boxStyle || {},
169
+ _ref5$backgroundColor = _ref5.backgroundColor,
170
+ backgroundColor = _ref5$backgroundColor === void 0 ? null : _ref5$backgroundColor;
168
171
 
169
172
  var arrowStyle = React.useMemo(function () {
170
173
  return _objectSpread__default["default"](_objectSpread__default["default"]({}, {
@@ -180,14 +183,14 @@ function CallToAction(_ref) {
180
183
  setLeaving = _useState6[1];
181
184
 
182
185
  var bind = react.useGesture({
183
- onDrag: function onDrag(_ref5) {
184
- var event = _ref5.event;
186
+ onDrag: function onDrag(_ref6) {
187
+ var event = _ref6.event;
185
188
  // fix firefox https://use-gesture.netlify.app/docs/faq/#why-cant-i-properly-drag-an-image-or-a-link
186
189
  event.preventDefault();
187
190
  },
188
- onDragEnd: function onDragEnd(_ref6) {
189
- var _ref6$movement = _slicedToArray__default["default"](_ref6.movement, 2),
190
- my = _ref6$movement[1];
191
+ onDragEnd: function onDragEnd(_ref7) {
192
+ var _ref7$movement = _slicedToArray__default["default"](_ref7.movement, 2),
193
+ my = _ref7$movement[1];
191
194
 
192
195
  if (my < -dragAmount) {
193
196
  if (inWebView) {
@@ -243,9 +246,8 @@ function CallToAction(_ref) {
243
246
  className: classNames__default["default"]([styles.arrow, _defineProperty__default["default"]({}, arrowClassName, arrowClassName !== null)]),
244
247
  style: arrowStyle
245
248
  }, /*#__PURE__*/React__default["default"].createElement(Arrow, null));
246
- console.log('bs', boxStyle);
247
249
  return active ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
248
- className: classNames__default["default"]([styles.container, (_ref9 = {}, _defineProperty__default["default"](_ref9, className, className !== null), _defineProperty__default["default"](_ref9, styles.disabled, disabled), _defineProperty__default["default"](_ref9, styles.animationDisabled, animationDisabled), _defineProperty__default["default"](_ref9, styles.invalidUrl, !validUrl), _defineProperty__default["default"](_ref9, styles.inWebView, inWebView), _ref9)]),
250
+ className: classNames__default["default"]([styles.container, (_ref10 = {}, _defineProperty__default["default"](_ref10, className, className !== null), _defineProperty__default["default"](_ref10, styles.disabled, disabled), _defineProperty__default["default"](_ref10, styles.animationDisabled, animationDisabled), _defineProperty__default["default"](_ref10, styles.invalidUrl, !validUrl), _defineProperty__default["default"](_ref10, styles.inWebView, inWebView), _ref10)]),
249
251
  ref: elRef
250
252
  }, leaving ? /*#__PURE__*/React__default["default"].createElement("div", {
251
253
  className: styles.leavingFrame
@@ -262,7 +264,8 @@ function CallToAction(_ref) {
262
264
  focusable: focusable,
263
265
  buttonStyle: _objectSpread__default["default"]({
264
266
  marginBottom: 10
265
- }, boxStyle)
267
+ }, boxStyle),
268
+ inline: true
266
269
  }, swipeUpEnabled && !disabled ? bind() : null, inWebView ? {
267
270
  onClick: onOpenWebView
268
271
  } : {
@@ -273,6 +276,9 @@ function CallToAction(_ref) {
273
276
  }, icon !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
274
277
  className: styles.icon
275
278
  }, icon) : null, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, label, {
279
+ textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, textStyle), {}, {
280
+ lineHeight: lineHeight || 1
281
+ }),
276
282
  inline: true
277
283
  })))))), inWebView ? /*#__PURE__*/React__default["default"].createElement(WebView__default["default"], Object.assign({
278
284
  className: classNames__default["default"]([styles.webView, _defineProperty__default["default"]({}, styles.visible, showWebView)]),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-call-to-action",
3
- "version": "0.3.74",
3
+ "version": "0.3.78",
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.74",
56
- "@micromag/element-button": "^0.3.74",
57
- "@micromag/element-text": "^0.3.74",
58
- "@micromag/element-webview": "^0.3.74",
55
+ "@micromag/core": "^0.3.78",
56
+ "@micromag/element-button": "^0.3.78",
57
+ "@micromag/element-text": "^0.3.78",
58
+ "@micromag/element-webview": "^0.3.78",
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": "c85b6b4ca7ff2162222291ca6ccaae79789c8db6"
71
+ "gitHead": "68be4e95203a5c15cefe58e423fe43eb374f3a7f"
72
72
  }