@hsds/spinner - npm Package Compare versions

Comparing version 7.9.2-alpha.6 to 8.0.0

CHANGELOG.md

@@ -5,2 +5,4 @@ # Changelog
 
+## [8.0.0](https://github.com/helpscout/hsds/compare/components-spinner-7.1.5...components-spinner-8.0.0) (2023-09-05)
+
 ### [7.9.2-alpha.6](https://github.com/helpscout/hsds/compare/components-spinner-7.9.2-alpha.5...components-spinner-7.9.2-alpha.6) (2023-08-21)
@@ -12,2 +14,8 @@
 
+### [7.9.2-alpha.6](https://github.com/helpscout/hsds/compare/components-spinner-7.9.2-alpha.5...components-spinner-7.9.2-alpha.6) (2023-08-21)
+
+### [7.9.2-alpha.5](https://github.com/helpscout/hsds/compare/components-spinner-7.1.3...components-spinner-7.9.2-alpha.5) (2023-08-10)
+
+### [7.9.2-alpha.4](https://github.com/helpscout/hsds/compare/components-spinner-7.9.2-alpha.3...components-spinner-7.9.2-alpha.4) (2023-07-17)
+
 ### [7.1.3](https://github.com/helpscout/hsds/compare/components-spinner-7.1.2...components-spinner-7.1.3) (2023-08-09)
@@ -14,0 +22,0 @@

package.json

 {
   "name": "@hsds/spinner",
-  "version": "7.9.2-alpha.6",
+  "version": "8.0.0",
   "peerDependencies": {
@@ -14,6 +14,6 @@ "prop-types": "~15.7.2",
   "dependencies": {
-    "@hsds/utils-react": "7.9.2-alpha.6",
-    "@hsds/visually-hidden": "7.9.2-alpha.6",
+    "@hsds/utils-react": "8.0.0",
+    "@hsds/visually-hidden": "8.0.0",
     "classnames": "2.3.1"
   }
 }

README.md

@@ -8,3 +8,1 @@ # spinner
 Run `nx test spinner` to execute the unit tests via [Jest](https://jestjs.io).
-
-> Up to date with hsds-react `v3.54.11`

Spinner.js

 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.Spinner = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.Spinner = Spinner;
+exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -14,66 +14,43 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-class Spinner extends _react.default.PureComponent {
-  getClassName() {
-    const {
-      className
-    } = this.props;
-    return (0, _classnames.default)(Spinner.className, className);
-  }
-  getSize() {
-    const {
-      size
-    } = this.props;
-    const defaultSize = 16;
-    if (typeof size === 'string') {
-      return _Spinner.legacySizes[size] || defaultSize;
-    }
-    return size;
-  }
-  render() {
-    const {
-      color,
-      shade,
-      isRounded,
-      speed,
-      ...rest
-    } = this.props;
-    const spinnerSize = this.getSize();
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Spinner2.SpinnerUI, {
-      ...(0, _utilsReact.getValidProps)(rest),
-      "aria-busy": true,
-      className: this.getClassName(),
+function Spinner(_ref) {
+  let {
+    'data-cy': dataCy = 'Spinner',
+    color = 'currentColor',
+    isRounded = true,
+    shade = 'default',
+    size = 16,
+    speed = 1400,
+    className,
+    ...rest
+  } = _ref;
+  const spinnerSize = (0, _Spinner.getSize)(size);
+  const SpinnerCircleProps = {
+    className: 'c-SpinnerCircle',
+    color,
+    cx: 44,
+    cy: 44,
+    r: 20.2,
+    shade,
+    isRounded,
+    speed,
+    spinnerSize
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Spinner2.SpinnerUI, {
+    ...(0, _utilsReact.getValidProps)(rest),
+    "aria-busy": true,
+    className: (0, _classnames.default)('c-Spinner', className),
+    spinnerSize: spinnerSize,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner2.SpinnerSVGUI, {
+      className: "c-SpinnerSVG",
+      speed: speed,
       spinnerSize: spinnerSize,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner2.SpinnerSVGUI, {
-        className: "c-SpinnerSVG",
-        speed: speed,
-        spinnerSize: spinnerSize,
-        viewBox: "22 22 44 44",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner2.SpinnerCircleUI, {
-          className: 'c-SpinnerCircle',
-          color,
-          cx: 44,
-          cy: 44,
-          r: 20.2,
-          shade,
-          isRounded,
-          speed,
-          spinnerSize
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.default, {
-        children: "Loading"
-      })]
-    });
-  }
+      viewBox: "22 22 44 44",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner2.SpinnerCircleUI, {
+        ...SpinnerCircleProps
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.default, {
+      children: "Loading"
+    })]
+  });
 }
-exports.Spinner = Spinner;
-_defineProperty(Spinner, "className", 'c-Spinner');
-Spinner.defaultProps = {
-  color: 'currentColor',
-  'data-cy': 'Spinner',
-  isRounded: true,
-  shade: 'default',
-  size: 16,
-  speed: 1400
-};
 Spinner.propTypes = {
@@ -80,0 +57,0 @@ /** Custom class names to be added to the component. */

Spinner.utils.js

 "use strict";
 
 exports.__esModule = true;
+exports.getSize = getSize;
 exports.legacySizes = void 0;
@@ -12,2 +13,9 @@ const legacySizes = {
 };
-exports.legacySizes = legacySizes;
+exports.legacySizes = legacySizes;
+function getSize(size) {
+  const defaultSize = 16;
+  if (typeof size === 'string') {
+    return legacySizes[size] || defaultSize;
+  }
+  return size;
+}

src/Spinner.js

@@ -1,3 +0,1 @@
-import React from 'react'
-
 import classNames from 'classnames'
@@ -10,72 +8,49 @@ import PropTypes from 'prop-types'
 
-import { legacySizes } from './Spinner.utils'
+import { getSize } from './Spinner.utils'
 
 import { SpinnerCircleUI, SpinnerSVGUI, SpinnerUI } from './Spinner.styles'
 
-export class Spinner extends React.PureComponent {
-  static className = 'c-Spinner'
-
-  getClassName() {
-    const { className } = this.props
-
-    return classNames(Spinner.className, className)
+export function Spinner({
+  'data-cy': dataCy = 'Spinner',
+  color = 'currentColor',
+  isRounded = true,
+  shade = 'default',
+  size = 16,
+  speed = 1400,
+  className,
+  ...rest
+}) {
+  const spinnerSize = getSize(size)
+  const SpinnerCircleProps = {
+    className: 'c-SpinnerCircle',
+    color,
+    cx: 44,
+    cy: 44,
+    r: 20.2,
+    shade,
+    isRounded,
+    speed,
+    spinnerSize,
   }
 
-  getSize() {
-    const { size } = this.props
-    const defaultSize = 16
-
-    if (typeof size === 'string') {
-      return legacySizes[size] || defaultSize
-    }
-
-    return size
-  }
-
-  render() {
-    const { color, shade, isRounded, speed, ...rest } = this.props
-    const spinnerSize = this.getSize()
-
-    return (
-      <SpinnerUI
-        {...getValidProps(rest)}
-        aria-busy={true}
-        className={this.getClassName()}
+  return (
+    <SpinnerUI
+      {...getValidProps(rest)}
+      aria-busy={true}
+      className={classNames('c-Spinner', className)}
+      spinnerSize={spinnerSize}
+    >
+      <SpinnerSVGUI
+        className="c-SpinnerSVG"
+        speed={speed}
         spinnerSize={spinnerSize}
+        viewBox="22 22 44 44"
       >
-        <SpinnerSVGUI
-          className="c-SpinnerSVG"
-          speed={speed}
-          spinnerSize={spinnerSize}
-          viewBox="22 22 44 44"
-        >
-          <SpinnerCircleUI
-            {...{
-              className: 'c-SpinnerCircle',
-              color,
-              cx: 44,
-              cy: 44,
-              r: 20.2,
-              shade,
-              isRounded,
-              speed,
-              spinnerSize,
-            }}
-          />
-        </SpinnerSVGUI>
-        <VisuallyHidden>Loading</VisuallyHidden>
-      </SpinnerUI>
-    )
-  }
+        <SpinnerCircleUI {...SpinnerCircleProps} />
+      </SpinnerSVGUI>
+      <VisuallyHidden>Loading</VisuallyHidden>
+    </SpinnerUI>
+  )
 }
 
-Spinner.defaultProps = {
-  color: 'currentColor',
-  'data-cy': 'Spinner',
-  isRounded: true,
-  shade: 'default',
-  size: 16,
-  speed: 1400,
-}
-
 Spinner.propTypes = {
@@ -82,0 +57,0 @@ /** Custom class names to be added to the component. */

src/Spinner.utils.js

@@ -8,1 +8,11 @@ export const legacySizes = {
 }
+
+export function getSize(size) {
+  const defaultSize = 16
+
+  if (typeof size === 'string') {
+    return legacySizes[size] || defaultSize
+  }
+
+  return size
+}

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

16800

decreased by-2.87%

Lines of code

351

decreased by-6.65%

Number of lines in readme file

8

decreased by-20%

Dependency changes

• + Added@hsds/tokens@1.0.0(transitive)

• + Added@hsds/utils-color@8.0.0(transitive)

• + Added@hsds/utils-constants@8.0.0(transitive)

• + Added@hsds/utils-mixins@8.0.0(transitive)

• + Added@hsds/utils-react@8.0.0(transitive)

• + Added@hsds/utils-sass@8.0.0(transitive)

• + Added@hsds/visually-hidden@8.0.0(transitive)

• - Removed@hsds/utils-color@7.9.2-alpha.6(transitive)

• - Removed@hsds/utils-constants@7.9.2-alpha.6(transitive)

• - Removed@hsds/utils-mixins@7.9.2-alpha.6(transitive)

• - Removed@hsds/utils-react@7.9.2-alpha.6(transitive)

• - Removed@hsds/utils-sass@7.9.2-alpha.6(transitive)

• - Removed@hsds/visually-hidden@7.9.2-alpha.6(transitive)

• Updated@hsds/utils-react@8.0.0

• Updated@hsds/visually-hidden@8.0.0