@hsds/spinner - npm Package Compare versions

Comparing version 9.0.1 to 9.0.2-next.0

CHANGELOG.md

@@ -5,2 +5,4 @@ # Changelog
 
+## [9.0.2-next.0](https://github.com/helpscout/hsds/compare/components-spinner-9.0.1...components-spinner-9.0.2-next.0) (2024-02-28)
+
 ## [9.0.1](https://github.com/helpscout/hsds/compare/components-spinner-9.0.0...components-spinner-9.0.1) (2024-02-07)
@@ -7,0 +9,0 @@

package.json

 {
   "name": "@hsds/spinner",
-  "version": "9.0.1",
+  "version": "9.0.2-next.0",
   "peerDependencies": {
@@ -13,6 +13,6 @@ "prop-types": "~15.7.2",
   "dependencies": {
-    "@hsds/utils-react": "9.0.0",
-    "@hsds/visually-hidden": "9.0.1",
+    "@hsds/utils-react": "9.0.1-next.0",
+    "@hsds/visually-hidden": "9.0.2-next.0",
     "classnames": "2.3.1"
   }
 }

Spinner.js

@@ -24,14 +24,2 @@ "use strict";
 }) {
-  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, {
@@ -41,10 +29,19 @@ ...(0, _utilsReact.getValidProps)(rest),
     className: (0, _classnames.default)('c-Spinner', className),
-    spinnerSize: spinnerSize,
+    style: {
+      '--hsds-spinner-size': size !== 16 && `${(0, _Spinner.getSize)(size)}px`
+    },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner2.SpinnerSVGUI, {
       className: "c-SpinnerSVG",
-      speed: speed,
-      spinnerSize: spinnerSize,
       viewBox: "22 22 44 44",
+      style: {
+        '--hsds-spinner-speed': speed !== 1400 && `${speed}ms`
+      },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner2.SpinnerCircleUI, {
-        ...SpinnerCircleProps
+        className: (0, _classnames.default)('c-SpinnerCircle', isRounded && 'is-rounded', `is-shade-${shade}`),
+        cx: 44,
+        cy: 44,
+        r: 20.2,
+        style: {
+          '--hsds-spinner-circle-stroke': color !== 'currentColor' && color
+        }
       })
@@ -64,3 +61,3 @@ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.default, {
   /** Determines the opacity of the spinner. */
-  shade: _propTypes.default.string,
+  shade: _propTypes.default.oneOf(['default', 'extraMuted', 'faint', 'muted', 'slightlyMuted', 'subtle']),
   /** Determines the size of the spinner. */
@@ -67,0 +64,0 @@ size: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),

Spinner.styles.js

@@ -10,2 +10,3 @@ "use strict";
   shades: {
+    default: '1',
     extraMuted: '0.3',
@@ -22,13 +23,3 @@ faint: '0.4',
   componentId: "sc-sjlhhj-0"
-})(props => {
-  const {
-    spinnerSize
-  } = props;
-  return `
-    
-    display: block;
-    width: ${spinnerSize}px;
-    height: ${spinnerSize}px;
-  `;
-});
+})(["--hsds-spinner-size:", "px;display:block;width:var(--hsds-spinner-size);height:var(--hsds-spinner-size);"], config.defaultSize);
 exports.SpinnerUI = SpinnerUI;
@@ -38,24 +29,3 @@ const SpinnerSVGUI = (0, _styledComponents.default)('svg').withConfig({
   componentId: "sc-sjlhhj-1"
-})(props => {
-  const {
-    speed,
-    spinnerSize
-  } = props;
-  return `
-    
-    animation: SpinnerUIAnimation ${speed}ms linear infinite;
-    display: block;
-    width: ${spinnerSize}px;
-    height: ${spinnerSize}px;
-    x: 0px;
-    y: 0px;
-    will-change: transform;
-
-    @keyframes SpinnerUIAnimation {
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-  `;
-});
+})(["--hsds-spinner-speed:1400ms;animation:SpinnerUIAnimation var(--hsds-spinner-speed) linear infinite;display:block;width:var(--hsds-spinner-size);height:var(--hsds-spinner-size);will-change:transform;@keyframes SpinnerUIAnimation{100%{transform:rotate(360deg);}}"]);
 exports.SpinnerSVGUI = SpinnerSVGUI;
@@ -65,44 +35,3 @@ const SpinnerCircleUI = (0, _styledComponents.default)('circle').withConfig({
   componentId: "sc-sjlhhj-2"
-})(props => {
-  const {
-    color,
-    shade,
-    isRounded,
-    speed
-  } = props;
-  const lineCap = isRounded ? 'round' : 'square';
-  const opacity = config.shades[shade];
-  return `
-    
-    animation: SpinnerCircleUIAnimation ${speed}ms ease-in-out infinite;
-    display: block;
-    fill: transparent;
-    opacity: ${opacity};
-    stroke: ${color};
-    stroke-width: 3.6;
-    stroke-linecap: ${lineCap};
-    stroke-dasharray: 80px, 200px;
-    stroke-dashoffset: 0px;
-    will-change: transform, stroke-dashoffset;
-
-    @keyframes SpinnerCircleUIAnimation {
-      0% {
-        stroke-dasharray: 1px, 200px;
-        stroke-dashoffset: 0px;
-        opacity: 0;
-      }
-      0.1% {
-        opacity: 1;
-      }
-      50% {
-        stroke-dasharray: 100px, 200px;
-        stroke-dashoffset: -15px;
-      }
-      100% {
-        stroke-dasharray: 100px, 200px;
-        stroke-dashoffset: -125px;
-      }
-    }
-  `;
-});
+})(["--hsds-spinner-circle-stroke:currentColor;animation:SpinnerCircleUIAnimation var(--hsds-spinner-speed) ease-in-out infinite;display:block;fill:transparent;opacity:", ";stroke:var(--hsds-spinner-circle-stroke);stroke-width:3.6;stroke-linecap:rounded;stroke-dasharray:80px,200px;stroke-dashoffset:0px;will-change:transform,stroke-dashoffset;&:not(.is-rounded){stroke-linecap:square;}&.is-shade-extraMuted{opacity:", ";}&.is-shade-faint{opacity:", ";}&.is-shade-muted{opacity:", ";}&.is-shade-slightlyMuted{opacity:", ";}&.is-shade-subtle{opacity:", ";}@keyframes SpinnerCircleUIAnimation{0%{stroke-dasharray:1px,200px;stroke-dashoffset:0px;opacity:0;}0.1%{opacity:1;}50%{stroke-dasharray:100px,200px;stroke-dashoffset:-15px;}100%{stroke-dasharray:100px,200px;stroke-dashoffset:-125px;}}"], config.shades.default, config.shades.extraMuted, config.shades.faint, config.shades.muted, config.shades.slightlyMuted, config.shades.subtle);
 exports.SpinnerCircleUI = SpinnerCircleUI;

src/Spinner.js

@@ -22,15 +22,2 @@ import classNames from 'classnames'
 }) {
-  const spinnerSize = getSize(size)
-  const SpinnerCircleProps = {
-    className: 'c-SpinnerCircle',
-    color,
-    cx: 44,
-    cy: 44,
-    r: 20.2,
-    shade,
-    isRounded,
-    speed,
-    spinnerSize,
-  }
-
   return (
@@ -41,11 +28,26 @@ <SpinnerUI
       className={classNames('c-Spinner', className)}
-      spinnerSize={spinnerSize}
+      style={{
+        '--hsds-spinner-size': size !== 16 && `${getSize(size)}px`,
+      }}
     >
       <SpinnerSVGUI
         className="c-SpinnerSVG"
-        speed={speed}
-        spinnerSize={spinnerSize}
         viewBox="22 22 44 44"
+        style={{
+          '--hsds-spinner-speed': speed !== 1400 && `${speed}ms`,
+        }}
       >
-        <SpinnerCircleUI {...SpinnerCircleProps} />
+        <SpinnerCircleUI
+          className={classNames(
+            'c-SpinnerCircle',
+            isRounded && 'is-rounded',
+            `is-shade-${shade}`
+          )}
+          cx={44}
+          cy={44}
+          r={20.2}
+          style={{
+            '--hsds-spinner-circle-stroke': color !== 'currentColor' && color,
+          }}
+        />
       </SpinnerSVGUI>
@@ -65,3 +67,10 @@ <VisuallyHidden>Loading</VisuallyHidden>
   /** Determines the opacity of the spinner. */
-  shade: PropTypes.string,
+  shade: PropTypes.oneOf([
+    'default',
+    'extraMuted',
+    'faint',
+    'muted',
+    'slightlyMuted',
+    'subtle',
+  ]),
   /** Determines the size of the spinner. */
@@ -68,0 +77,0 @@ size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

src/Spinner.styles.js

@@ -6,2 +6,3 @@ import styled from 'styled-components'
   shades: {
+    default: '1',
     extraMuted: '0.3',
@@ -15,72 +16,80 @@ faint: '0.4',
 
-export const SpinnerUI = styled('div')(props => {
-  const { spinnerSize } = props
+export const SpinnerUI = styled('div')`
+  --hsds-spinner-size: ${config.defaultSize}px;
+  display: block;
+  width: var(--hsds-spinner-size);
+  height: var(--hsds-spinner-size);
+`
 
-  return `
-    
-    display: block;
-    width: ${spinnerSize}px;
-    height: ${spinnerSize}px;
-  `
-})
+export const SpinnerSVGUI = styled('svg')`
+  --hsds-spinner-speed: 1400ms;
+  animation: SpinnerUIAnimation var(--hsds-spinner-speed) linear infinite;
+  display: block;
+  width: var(--hsds-spinner-size);
+  height: var(--hsds-spinner-size);
+  will-change: transform;
 
-export const SpinnerSVGUI = styled('svg')(props => {
-  const { speed, spinnerSize } = props
+  @keyframes SpinnerUIAnimation {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`
 
-  return `
-    
-    animation: SpinnerUIAnimation ${speed}ms linear infinite;
-    display: block;
-    width: ${spinnerSize}px;
-    height: ${spinnerSize}px;
-    x: 0px;
-    y: 0px;
-    will-change: transform;
+export const SpinnerCircleUI = styled('circle')`
+  --hsds-spinner-circle-stroke: currentColor;
+  animation: SpinnerCircleUIAnimation var(--hsds-spinner-speed) ease-in-out
+    infinite;
+  display: block;
+  fill: transparent;
+  opacity: ${config.shades.default};
+  stroke: var(--hsds-spinner-circle-stroke);
+  stroke-width: 3.6;
+  stroke-linecap: rounded;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0px;
+  will-change: transform, stroke-dashoffset;
 
-    @keyframes SpinnerUIAnimation {
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-  `
-})
+  &:not(.is-rounded) {
+    stroke-linecap: square;
+  }
 
-export const SpinnerCircleUI = styled('circle')(props => {
-  const { color, shade, isRounded, speed } = props
+  &.is-shade-extraMuted {
+    opacity: ${config.shades.extraMuted};
+  }
 
-  const lineCap = isRounded ? 'round' : 'square'
-  const opacity = config.shades[shade]
+  &.is-shade-faint {
+    opacity: ${config.shades.faint};
+  }
 
-  return `
-    
-    animation: SpinnerCircleUIAnimation ${speed}ms ease-in-out infinite;
-    display: block;
-    fill: transparent;
-    opacity: ${opacity};
-    stroke: ${color};
-    stroke-width: 3.6;
-    stroke-linecap: ${lineCap};
-    stroke-dasharray: 80px, 200px;
-    stroke-dashoffset: 0px;
-    will-change: transform, stroke-dashoffset;
+  &.is-shade-muted {
+    opacity: ${config.shades.muted};
+  }
 
-    @keyframes SpinnerCircleUIAnimation {
-      0% {
-        stroke-dasharray: 1px, 200px;
-        stroke-dashoffset: 0px;
-        opacity: 0;
-      }
-      0.1% {
-        opacity: 1;
-      }
-      50% {
-        stroke-dasharray: 100px, 200px;
-        stroke-dashoffset: -15px;
-      }
-      100% {
-        stroke-dasharray: 100px, 200px;
-        stroke-dashoffset: -125px;
-      }
+  &.is-shade-slightlyMuted {
+    opacity: ${config.shades.slightlyMuted};
+  }
+
+  &.is-shade-subtle {
+    opacity: ${config.shades.subtle};
+  }
+
+  @keyframes SpinnerCircleUIAnimation {
+    0% {
+      stroke-dasharray: 1px, 200px;
+      stroke-dashoffset: 0px;
+      opacity: 0;
     }
-  `
-})
+    0.1% {
+      opacity: 1;
+    }
+    50% {
+      stroke-dasharray: 100px, 200px;
+      stroke-dashoffset: -15px;
+    }
+    100% {
+      stroke-dasharray: 100px, 200px;
+      stroke-dashoffset: -125px;
+    }
+  }
+`

New 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

Total package byte prevSize

21935

increased by3.62%

Worsened metrics

Lines of code

305

decreased by-12.86%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Added@hsds/tokens@2.1.1-next.0(transitive)

• + Added@hsds/utils-color@9.0.2-next.0(transitive)

• + Added@hsds/utils-constants@9.0.1-next.0(transitive)

• + Added@hsds/utils-mixins@9.0.2-next.0(transitive)

• + Added@hsds/utils-react@9.0.1-next.0(transitive)

• + Added@hsds/utils-sass@9.0.1-next.0(transitive)

• + Added@hsds/visually-hidden@9.0.2-next.0(transitive)

• - Removed@hsds/tokens@2.1.0(transitive)

• - Removed@hsds/utils-color@9.0.1(transitive)

• - Removed@hsds/utils-constants@9.0.0(transitive)

• - Removed@hsds/utils-mixins@9.0.1(transitive)

• - Removed@hsds/utils-react@9.0.0(transitive)

• - Removed@hsds/utils-sass@9.0.0(transitive)

• - Removed@hsds/visually-hidden@9.0.1(transitive)

• Updated@hsds/utils-react@9.0.1-next.0

• Updated@hsds/visually-hidden@9.0.2-next.0