@semcore/spin - npm Package Compare versions

Comparing version 3.2.2 to 3.3.0

CHANGELOG.md

@@ -5,2 +5,12 @@ # Changelog
 
+## [3.3.0] - 2022-02-28
+
+### Changed
+
+- Rewrite the component to svg
+
+### Added
+
+- Added roundings
+
 ## [3.2.2] - 2022-02-24
@@ -7,0 +17,0 @@

lib/cjs/Spin.js

@@ -49,20 +49,20 @@ "use strict";
 /*__inner_css_start__*/
-"@-webkit-keyframes spin-rotate_jbivl0{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spin-rotate_jbivl0{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.___SSpin_1nyws_gg_{display:block;flex-shrink:0;box-sizing:border-box;-webkit-animation-name:spin-rotate_jbivl0;animation-name:spin-rotate_jbivl0;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-duration:.75s;animation-duration:.75s;border-radius:50%;border-style:solid;border-bottom-color:transparent;border-left-color:transparent;color:var(--theme_jbivl0)}.___SSpin_1nyws_gg_._theme_dark_1nyws_gg_{color:rgba(0,0,0,.3)}.___SSpin_1nyws_gg_._theme_invert_1nyws_gg_{color:#fff}.___SSpin_1nyws_gg_.__centered_1nyws_gg_{margin:auto}.___SSpin_1nyws_gg_._size_xxs_1nyws_gg_{width:10px;height:10px;border-width:1px}.___SSpin_1nyws_gg_._size_xs_1nyws_gg_{width:16px;height:16px;border-width:2px}.___SSpin_1nyws_gg_._size_s_1nyws_gg_{width:20px;height:20px;border-width:3px}.___SSpin_1nyws_gg_._size_m_1nyws_gg_{width:24px;height:24px;border-width:4px}.___SSpin_1nyws_gg_._size_l_1nyws_gg_{width:32px;height:32px;border-width:6px}.___SSpin_1nyws_gg_._size_xl_1nyws_gg_{width:48px;height:48px;border-width:8px}.___SSpin_1nyws_gg_._size_xxl_1nyws_gg_{width:72px;height:72px;border-width:10px}"
+"@-webkit-keyframes spin-rotate_10z1di7{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spin-rotate_10z1di7{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.___SSpin_1w4mt_gg_{display:block;flex-shrink:0;box-sizing:border-box;-webkit-animation-name:spin-rotate_10z1di7;animation-name:spin-rotate_10z1di7;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-duration:.75s;animation-duration:.75s;fill:var(--theme_10z1di7)}.___SSpin_1w4mt_gg_._theme_dark_1w4mt_gg_{fill:rgba(0,0,0,.3)}.___SSpin_1w4mt_gg_._theme_invert_1w4mt_gg_{fill:#fff}.___SSpin_1w4mt_gg_.__centered_1w4mt_gg_{margin:auto}.___SSpin_1w4mt_gg_._size_xxs_1w4mt_gg_{width:10px;height:10px}.___SSpin_1w4mt_gg_._size_xs_1w4mt_gg_{width:16px;height:16px}.___SSpin_1w4mt_gg_._size_s_1w4mt_gg_{width:20px;height:20px}.___SSpin_1w4mt_gg_._size_m_1w4mt_gg_{width:24px;height:24px}.___SSpin_1w4mt_gg_._size_l_1w4mt_gg_{width:32px;height:32px}.___SSpin_1w4mt_gg_._size_xl_1w4mt_gg_{width:48px;height:48px}.___SSpin_1w4mt_gg_._size_xxl_1w4mt_gg_{width:72px;height:72px}"
 /*__inner_css_end__*/
-, "jbivl0_gg_")
+, "10z1di7_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@spin-rotate": "spin-rotate_jbivl0",
-  "__SSpin": "___SSpin_1nyws_gg_",
-  "--theme": "--theme_jbivl0",
-  "_theme_dark": "_theme_dark_1nyws_gg_",
-  "_theme_invert": "_theme_invert_1nyws_gg_",
-  "_centered": "__centered_1nyws_gg_",
-  "_size_xxs": "_size_xxs_1nyws_gg_",
-  "_size_xs": "_size_xs_1nyws_gg_",
-  "_size_s": "_size_s_1nyws_gg_",
-  "_size_m": "_size_m_1nyws_gg_",
-  "_size_l": "_size_l_1nyws_gg_",
-  "_size_xl": "_size_xl_1nyws_gg_",
-  "_size_xxl": "_size_xxl_1nyws_gg_"
+  "@spin-rotate": "spin-rotate_10z1di7",
+  "__SSpin": "___SSpin_1w4mt_gg_",
+  "--theme": "--theme_10z1di7",
+  "_theme_dark": "_theme_dark_1w4mt_gg_",
+  "_theme_invert": "_theme_invert_1w4mt_gg_",
+  "_centered": "__centered_1w4mt_gg_",
+  "_size_xxs": "_size_xxs_1w4mt_gg_",
+  "_size_xs": "_size_xs_1w4mt_gg_",
+  "_size_s": "_size_s_1w4mt_gg_",
+  "_size_m": "_size_m_1w4mt_gg_",
+  "_size_l": "_size_l_1w4mt_gg_",
+  "_size_xl": "_size_xl_1w4mt_gg_",
+  "_size_xxl": "_size_xxl_1w4mt_gg_"
 });
@@ -88,7 +88,12 @@
       var _this$asProps = this.asProps,
+          Children = _this$asProps.Children,
           styles = _this$asProps.styles,
           theme = _this$asProps.theme;
       return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSpin, _ref2.cn("SSpin", _objectSpread({}, (0, _core.assignProps)({
+        "tag": "svg",
+        "viewBox": "0 0 24 24",
         "use:theme": (0, _color["default"])(theme)
-      }, _ref))));
+      }, _ref))), /*#__PURE__*/_react["default"].createElement("path", _ref2.cn("path", {
+        "d": "M16.98 20.6256C17.5433 21.6013 18.8054 21.9477 19.6718 21.2274C21.567 19.6517 22.9447 17.5183 23.5911 15.1058C24.4148 12.0317 23.9836 8.75621 22.3923 6C20.801 3.24379 18.18 1.23261 15.1058 0.408891C12.6934 -0.237529 10.1569 -0.111098 7.84473 0.742337C6.78777 1.13246 6.45667 2.39867 7.02 3.37439V3.37439C7.58333 4.3501 8.83088 4.65471 9.91792 4.35856C11.2588 3.99325 12.6844 3.984 14.0498 4.34987C16.0788 4.89352 17.8087 6.2209 18.8589 8.04C19.9092 9.8591 20.1938 12.0209 19.6501 14.0498C19.2843 15.4153 18.5634 16.6453 17.5766 17.6239C16.7766 18.4172 16.4167 19.6499 16.98 20.6256V20.6256Z"
+      })), /*#__PURE__*/_react["default"].createElement(Children, _ref2.cn("Children", {})));
     }
@@ -95,0 +100,0 @@ }]);

lib/es6/Spin.js

@@ -28,20 +28,20 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 /*__inner_css_start__*/
-"@-webkit-keyframes spin-rotate_jbivl0{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spin-rotate_jbivl0{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.___SSpin_1nyws_gg_{display:block;flex-shrink:0;box-sizing:border-box;-webkit-animation-name:spin-rotate_jbivl0;animation-name:spin-rotate_jbivl0;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-duration:.75s;animation-duration:.75s;border-radius:50%;border-style:solid;border-bottom-color:transparent;border-left-color:transparent;color:var(--theme_jbivl0)}.___SSpin_1nyws_gg_._theme_dark_1nyws_gg_{color:rgba(0,0,0,.3)}.___SSpin_1nyws_gg_._theme_invert_1nyws_gg_{color:#fff}.___SSpin_1nyws_gg_.__centered_1nyws_gg_{margin:auto}.___SSpin_1nyws_gg_._size_xxs_1nyws_gg_{width:10px;height:10px;border-width:1px}.___SSpin_1nyws_gg_._size_xs_1nyws_gg_{width:16px;height:16px;border-width:2px}.___SSpin_1nyws_gg_._size_s_1nyws_gg_{width:20px;height:20px;border-width:3px}.___SSpin_1nyws_gg_._size_m_1nyws_gg_{width:24px;height:24px;border-width:4px}.___SSpin_1nyws_gg_._size_l_1nyws_gg_{width:32px;height:32px;border-width:6px}.___SSpin_1nyws_gg_._size_xl_1nyws_gg_{width:48px;height:48px;border-width:8px}.___SSpin_1nyws_gg_._size_xxl_1nyws_gg_{width:72px;height:72px;border-width:10px}"
+"@-webkit-keyframes spin-rotate_10z1di7{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spin-rotate_10z1di7{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.___SSpin_1w4mt_gg_{display:block;flex-shrink:0;box-sizing:border-box;-webkit-animation-name:spin-rotate_10z1di7;animation-name:spin-rotate_10z1di7;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-duration:.75s;animation-duration:.75s;fill:var(--theme_10z1di7)}.___SSpin_1w4mt_gg_._theme_dark_1w4mt_gg_{fill:rgba(0,0,0,.3)}.___SSpin_1w4mt_gg_._theme_invert_1w4mt_gg_{fill:#fff}.___SSpin_1w4mt_gg_.__centered_1w4mt_gg_{margin:auto}.___SSpin_1w4mt_gg_._size_xxs_1w4mt_gg_{width:10px;height:10px}.___SSpin_1w4mt_gg_._size_xs_1w4mt_gg_{width:16px;height:16px}.___SSpin_1w4mt_gg_._size_s_1w4mt_gg_{width:20px;height:20px}.___SSpin_1w4mt_gg_._size_m_1w4mt_gg_{width:24px;height:24px}.___SSpin_1w4mt_gg_._size_l_1w4mt_gg_{width:32px;height:32px}.___SSpin_1w4mt_gg_._size_xl_1w4mt_gg_{width:48px;height:48px}.___SSpin_1w4mt_gg_._size_xxl_1w4mt_gg_{width:72px;height:72px}"
 /*__inner_css_end__*/
-, "jbivl0_gg_")
+, "10z1di7_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@spin-rotate": "spin-rotate_jbivl0",
-  "__SSpin": "___SSpin_1nyws_gg_",
-  "--theme": "--theme_jbivl0",
-  "_theme_dark": "_theme_dark_1nyws_gg_",
-  "_theme_invert": "_theme_invert_1nyws_gg_",
-  "_centered": "__centered_1nyws_gg_",
-  "_size_xxs": "_size_xxs_1nyws_gg_",
-  "_size_xs": "_size_xs_1nyws_gg_",
-  "_size_s": "_size_s_1nyws_gg_",
-  "_size_m": "_size_m_1nyws_gg_",
-  "_size_l": "_size_l_1nyws_gg_",
-  "_size_xl": "_size_xl_1nyws_gg_",
-  "_size_xxl": "_size_xxl_1nyws_gg_"
+  "@spin-rotate": "spin-rotate_10z1di7",
+  "__SSpin": "___SSpin_1w4mt_gg_",
+  "--theme": "--theme_10z1di7",
+  "_theme_dark": "_theme_dark_1w4mt_gg_",
+  "_theme_invert": "_theme_invert_1w4mt_gg_",
+  "_centered": "__centered_1w4mt_gg_",
+  "_size_xxs": "_size_xxs_1w4mt_gg_",
+  "_size_xs": "_size_xs_1w4mt_gg_",
+  "_size_s": "_size_s_1w4mt_gg_",
+  "_size_m": "_size_m_1w4mt_gg_",
+  "_size_l": "_size_l_1w4mt_gg_",
+  "_size_xl": "_size_xl_1w4mt_gg_",
+  "_size_xxl": "_size_xxl_1w4mt_gg_"
 });
@@ -68,7 +68,12 @@
       var _this$asProps = this.asProps,
+          Children = _this$asProps.Children,
           styles = _this$asProps.styles,
           theme = _this$asProps.theme;
       return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SSpin, _ref2.cn("SSpin", _objectSpread({}, _assignProps({
+        "tag": "svg",
+        "viewBox": "0 0 24 24",
         "use:theme": resolveColor(theme)
-      }, _ref))));
+      }, _ref))), /*#__PURE__*/React.createElement("path", _ref2.cn("path", {
+        "d": "M16.98 20.6256C17.5433 21.6013 18.8054 21.9477 19.6718 21.2274C21.567 19.6517 22.9447 17.5183 23.5911 15.1058C24.4148 12.0317 23.9836 8.75621 22.3923 6C20.801 3.24379 18.18 1.23261 15.1058 0.408891C12.6934 -0.237529 10.1569 -0.111098 7.84473 0.742337C6.78777 1.13246 6.45667 2.39867 7.02 3.37439V3.37439C7.58333 4.3501 8.83088 4.65471 9.91792 4.35856C11.2588 3.99325 12.6844 3.984 14.0498 4.34987C16.0788 4.89352 17.8087 6.2209 18.8589 8.04C19.9092 9.8591 20.1938 12.0209 19.6501 14.0498C19.2843 15.4153 18.5634 16.6453 17.5766 17.6239C16.7766 18.4172 16.4167 19.6499 16.98 20.6256V20.6256Z"
+      })), /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})));
     }
@@ -75,0 +80,0 @@ }]);

package.json

 {
   "name": "@semcore/spin",
   "description": "SEMRush Spin Component",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "main": "lib/cjs/index.js",
@@ -6,0 +6,0 @@ "module": "lib/es6/index.js",

src/Spin.js

@@ -18,4 +18,9 @@ import React from 'react';
     const SSpin = Root;
-    const { styles, theme } = this.asProps;
-    return sstyled(styles)(<SSpin render={Box} use:theme={resolveColor(theme)} />);
+    const { Children, styles, theme } = this.asProps;
+    return sstyled(styles)(
+      <SSpin render={Box} tag="svg" viewBox="0 0 24 24" use:theme={resolveColor(theme)}>
+        <path d="M16.98 20.6256C17.5433 21.6013 18.8054 21.9477 19.6718 21.2274C21.567 19.6517 22.9447 17.5183 23.5911 15.1058C24.4148 12.0317 23.9836 8.75621 22.3923 6C20.801 3.24379 18.18 1.23261 15.1058 0.408891C12.6934 -0.237529 10.1569 -0.111098 7.84473 0.742337C6.78777 1.13246 6.45667 2.39867 7.02 3.37439V3.37439C7.58333 4.3501 8.83088 4.65471 9.91792 4.35856C11.2588 3.99325 12.6844 3.984 14.0498 4.34987C16.0788 4.89352 17.8087 6.2209 18.8589 8.04C19.9092 9.8591 20.1938 12.0209 19.6501 14.0498C19.2843 15.4153 18.5634 16.6453 17.5766 17.6239C16.7766 18.4172 16.4167 19.6499 16.98 20.6256V20.6256Z" />
+        <Children />
+      </SSpin>,
+    );
   }
@@ -22,0 +27,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29934

increased by10.96%

Worsened metrics

Lines of code

448

decreased by-3.03%

No dependency changes