@micromag/element-call-to-action 0.3.71 → 0.3.76

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 -17
  3. package/lib/index.js +24 -17
  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) {
@@ -230,7 +233,7 @@ function CallToAction(_ref) {
230
233
  style: arrowStyle
231
234
  }, /*#__PURE__*/React.createElement(Arrow, null));
232
235
  return active ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
233
- 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)]),
234
237
  ref: elRef
235
238
  }, leaving ? /*#__PURE__*/React.createElement("div", {
236
239
  className: styles.leavingFrame
@@ -247,7 +250,8 @@ function CallToAction(_ref) {
247
250
  focusable: focusable,
248
251
  buttonStyle: _objectSpread({
249
252
  marginBottom: 10
250
- }, boxStyle)
253
+ }, boxStyle),
254
+ inline: true
251
255
  }, swipeUpEnabled && !disabled ? bind() : null, inWebView ? {
252
256
  onClick: onOpenWebView
253
257
  } : {
@@ -258,6 +262,9 @@ function CallToAction(_ref) {
258
262
  }, icon !== null ? /*#__PURE__*/React.createElement("div", {
259
263
  className: styles.icon
260
264
  }, icon) : null, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
265
+ textStyle: _objectSpread(_objectSpread({}, textStyle), {}, {
266
+ lineHeight: lineHeight || 1
267
+ }),
261
268
  inline: true
262
269
  })))))), inWebView ? /*#__PURE__*/React.createElement(WebView, Object.assign({
263
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) {
@@ -244,7 +247,7 @@ function CallToAction(_ref) {
244
247
  style: arrowStyle
245
248
  }, /*#__PURE__*/React__default["default"].createElement(Arrow, null));
246
249
  return active ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
247
- 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)]),
248
251
  ref: elRef
249
252
  }, leaving ? /*#__PURE__*/React__default["default"].createElement("div", {
250
253
  className: styles.leavingFrame
@@ -261,7 +264,8 @@ function CallToAction(_ref) {
261
264
  focusable: focusable,
262
265
  buttonStyle: _objectSpread__default["default"]({
263
266
  marginBottom: 10
264
- }, boxStyle)
267
+ }, boxStyle),
268
+ inline: true
265
269
  }, swipeUpEnabled && !disabled ? bind() : null, inWebView ? {
266
270
  onClick: onOpenWebView
267
271
  } : {
@@ -272,6 +276,9 @@ function CallToAction(_ref) {
272
276
  }, icon !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
273
277
  className: styles.icon
274
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
+ }),
275
282
  inline: true
276
283
  })))))), inWebView ? /*#__PURE__*/React__default["default"].createElement(WebView__default["default"], Object.assign({
277
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.71",
3
+ "version": "0.3.76",
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.71",
56
- "@micromag/element-button": "^0.3.71",
57
- "@micromag/element-text": "^0.3.71",
58
- "@micromag/element-webview": "^0.3.71",
55
+ "@micromag/core": "^0.3.74",
56
+ "@micromag/element-button": "^0.3.76",
57
+ "@micromag/element-text": "^0.3.74",
58
+ "@micromag/element-webview": "^0.3.76",
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": "50093d0adc731dfb58656015179c4ac0b1c6765f"
71
+ "gitHead": "c86e3ead134f626899cfdfc34fac84eb1d02864a"
72
72
  }