@highlight-ui/circular-progress - npm Package Compare versions

Comparing version 1.0.20 to 2.0.0-alpha.0

dist/cjs/index.js

@@ -6,4 +6,7 @@ 'use strict';
 var React = require('react');
+var colorTokens = require('@highlight-ui/tokens/dist/colors.json');
 var utilsCommons = require('@highlight-ui/utils-commons');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
 function _interopNamespace(e) {
@@ -28,2 +31,3 @@ if (e && e.__esModule) return e;
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var colorTokens__default = /*#__PURE__*/_interopDefaultLegacy(colorTokens);
 
@@ -56,3 +60,3 @@ /*! *****************************************************************************
 
-var styles = {"coolGrayLighter":"#f4f7f9","primaryBrandAccent":"#0db5df","circleProgress":"CircularProgress-module__1xreSWoN__v1-0-20"};
+var styles = {"circle":"CircularProgress-module__3NB5eWuu__v2-0-0-alpha-0","progressIndicator":"CircularProgress-module__He07toFd__v2-0-0-alpha-0"};
 
@@ -64,5 +68,4 @@ var WIDTH = 22;
 var CIRCUMFERENCE = RADIUS * Math.PI * 2; // dashlength should cover the whole circumference of the circle
-var BACKGROUND_COLOR = styles.coolGrayLighter;
 function CircularProgressWithRef(_a, ref) {
-    var metadata = _a.metadata, percentage = _a.percentage, _b = _a.color, color = _b === void 0 ? styles.primaryBrandAccent : _b;
+    var metadata = _a.metadata, percentage = _a.percentage, color = _a.color;
     var percentageNum = Math.abs(Number(percentage));
@@ -74,7 +77,8 @@ var finalPercentage = percentageNum > 100 ? 100 : percentageNum;
         React__namespace.createElement("svg", __assign({}, utilsCommons.parseMetadata(metadata), { width: WIDTH, height: WIDTH, viewBox: VIEWBOX }),
-            React__namespace.createElement("circle", { cx: halfWidth, cy: halfWidth, r: RADIUS, strokeWidth: STROKE_WIDTH + "px", stroke: BACKGROUND_COLOR, fill: "none" }),
-            React__namespace.createElement("circle", { className: styles.circleProgress, cx: halfWidth, cy: halfWidth, r: RADIUS, fill: "none", strokeWidth: STROKE_WIDTH + "px", transform: "rotate(-90 " + halfWidth + " " + halfWidth + ")", style: {
+            React__namespace.createElement("circle", { className: styles.circle, cx: halfWidth, cy: halfWidth, r: RADIUS, strokeWidth: STROKE_WIDTH + "px", fill: "none" }),
+            React__namespace.createElement("circle", { className: styles.progressIndicator, cx: halfWidth, cy: halfWidth, r: RADIUS, fill: "none", strokeWidth: STROKE_WIDTH + "px", transform: "rotate(-90 " + halfWidth + " " + halfWidth + ")", style: {
+                    stroke: color && colorTokens__default["default"][color],
                     strokeDasharray: CIRCUMFERENCE,
                     strokeDashoffset: dashOffset,
-                }, stroke: color }))));
+                } }))));
 }
@@ -81,0 +85,0 @@ var CircularProgress = React__namespace.forwardRef(CircularProgressWithRef);

dist/cjs/src/CircularProgress.d.ts

 import * as React from 'react';
-import { PropsWithMetadata } from '@highlight-ui/utils-commons';
+import { PropsWithMetadata, ColorToken } from '@highlight-ui/utils-commons';
 export declare type CircularProgressProps = PropsWithMetadata<{
     /** Percentage of the progress  */
     percentage: number;
-    /** Custom color of the progress circular line */
-    color?: string;
+    /** Custom color token for the progress circular line */
+    color?: ColorToken;
 }>;
@@ -13,4 +13,4 @@ export declare type CircularProgressRef = React.Ref<HTMLDivElement>;
     percentage: number;
-    /** Custom color of the progress circular line */
-    color?: string | undefined;
+    /** Custom color token for the progress circular line */
+    color?: "action-primary-default" | "action-primary-hover" | "action-primary-active" | "action-primary-focus" | "action-primary-disabled" | "action-secondary-default" | "action-secondary-hover" | "action-secondary-active" | "action-secondary-focus" | "action-secondary-disabled" | "action-critical-default" | "action-critical-hover" | "action-critical-active" | "action-critical-focus" | "action-critical-disabled" | "action-success-default" | "action-success-hover" | "action-success-active" | "action-success-focus" | "action-success-disabled" | "text-default" | "text-subdued" | "text-hover" | "text-disabled" | "text-hint-text" | "text-on-primary" | "text-on-emphasis" | "text-on-secondary" | "text-on-secondary-disabled" | "text-on-action-critical" | "text-on-action-success" | "text-on-interactive-subdued" | "text-on-background-warning" | "text-on-background-critical" | "text-on-background-success" | "text-on-interactive" | "background-default" | "background-subdued" | "background-subdued-selected" | "background-hover" | "background-disabled" | "background-emphasis" | "background-warning-default" | "background-warning-hover" | "background-critical-default" | "background-critical-hover" | "background-success-default" | "background-success-hover" | "icon-default" | "icon-subdued" | "icon-disabled" | "icon-hover" | "icon-critical" | "icon-success" | "icon-warning" | "icon-highlight" | "icon-on-emphasis" | "icon-on-primary" | "icon-on-secondary" | "icon-on-secondary-disabled" | "icon-on-critical" | "icon-on-success" | "icon-on-interactive-subdued" | "icon-on-background-warning" | "icon-on-background-critical" | "icon-on-background-success" | "icon-on-interactive" | "interactive-brand-default" | "interactive-brand-subdued" | "interactive-brand-hover" | "interactive-brand-disabled" | "interactive-critical-default" | "interactive-critical-hover" | "interactive-critical-disabled" | "focus-default" | "border-default" | "border-emphasis" | "border-subdued" | "border-hover" | "border-disabled" | "border-critical" | "border-warning" | "border-success" | "border-highlight" | "form-control-unselected-background" | "form-control-selected-background" | "form-control-unselected-disabled-background" | "form-control-selected-disabled-background" | "form-control-foreground" | "form-control-border-default" | "form-control-border-hover" | "form-control-border-disabled" | "backdrop" | "accent-10" | "accent-100" | "accent-105" | "accent-110" | "accent-115" | "neutral-10" | "neutral-20" | "neutral-40" | "neutral-60" | "neutral-80" | "neutral-white" | "neutral-black" | "neutral-cool-10" | "neutral-cool-20" | "neutral-cool-23" | "neutral-cool-25" | "neutral-cool-60" | "semantic-critical-10" | "semantic-critical-100" | "semantic-critical-105" | "semantic-critical-110" | "semantic-critical-115" | "semantic-warning-10" | "semantic-warning-100" | "semantic-warning-105" | "semantic-warning-110" | "semantic-warning-115" | "semantic-success-10" | "semantic-success-100" | "semantic-success-105" | "semantic-success-110" | "semantic-success-115" | "semantic-highlight-10" | "semantic-highlight-100" | "semantic-highlight-105" | "semantic-highlight-110" | "semantic-highlight-115" | "support-red-10" | "support-red-100" | "support-red-105" | "support-red-115" | "support-pink-10" | "support-pink-100" | "support-pink-110" | "support-pink-115" | "support-purple-10" | "support-purple-80" | "support-purple-100" | "support-purple-110" | "support-purple-120" | "support-dark-blue-10" | "support-dark-blue-100" | "support-dark-blue-110" | "support-dark-blue-115" | "support-green-10" | "support-green-100" | "support-green-110" | "support-green-115" | "support-light-green-10" | "support-light-green-100" | "support-light-green-110" | "support-light-green-115" | "support-yellow-10" | "support-yellow-100" | "support-yellow-105" | "support-yellow-115" | "support-brown-10" | "support-brown-20" | "support-brown-100" | "support-brown-105" | "support-grey-10" | "support-grey-100" | "support-grey-110" | "support-grey-115" | "support-grey-200" | "opacity-neutral-65" | "opacity-neutral-32" | "opacity-neutral-08" | "opacity-accent-38" | "opacity-critical-38" | "opacity-success-38" | undefined;
 } & {
@@ -17,0 +17,0 @@ metadata?: import("@highlight-ui/utils-commons").ComponentMetadata | undefined;

dist/esm/index.js

 import * as React from 'react';
+import colorTokens from '@highlight-ui/tokens/dist/colors.json';
 import { parseMetadata } from '@highlight-ui/utils-commons';
@@ -30,3 +31,3 @@
 
-var styles = {"coolGrayLighter":"#f4f7f9","primaryBrandAccent":"#0db5df","circleProgress":"CircularProgress-module__1xreSWoN__v1-0-20"};
+var styles = {"circle":"CircularProgress-module__3NB5eWuu__v2-0-0-alpha-0","progressIndicator":"CircularProgress-module__He07toFd__v2-0-0-alpha-0"};
 
@@ -38,5 +39,4 @@ var WIDTH = 22;
 var CIRCUMFERENCE = RADIUS * Math.PI * 2; // dashlength should cover the whole circumference of the circle
-var BACKGROUND_COLOR = styles.coolGrayLighter;
 function CircularProgressWithRef(_a, ref) {
-    var metadata = _a.metadata, percentage = _a.percentage, _b = _a.color, color = _b === void 0 ? styles.primaryBrandAccent : _b;
+    var metadata = _a.metadata, percentage = _a.percentage, color = _a.color;
     var percentageNum = Math.abs(Number(percentage));
@@ -48,7 +48,8 @@ var finalPercentage = percentageNum > 100 ? 100 : percentageNum;
         React.createElement("svg", __assign({}, parseMetadata(metadata), { width: WIDTH, height: WIDTH, viewBox: VIEWBOX }),
-            React.createElement("circle", { cx: halfWidth, cy: halfWidth, r: RADIUS, strokeWidth: STROKE_WIDTH + "px", stroke: BACKGROUND_COLOR, fill: "none" }),
-            React.createElement("circle", { className: styles.circleProgress, cx: halfWidth, cy: halfWidth, r: RADIUS, fill: "none", strokeWidth: STROKE_WIDTH + "px", transform: "rotate(-90 " + halfWidth + " " + halfWidth + ")", style: {
+            React.createElement("circle", { className: styles.circle, cx: halfWidth, cy: halfWidth, r: RADIUS, strokeWidth: STROKE_WIDTH + "px", fill: "none" }),
+            React.createElement("circle", { className: styles.progressIndicator, cx: halfWidth, cy: halfWidth, r: RADIUS, fill: "none", strokeWidth: STROKE_WIDTH + "px", transform: "rotate(-90 " + halfWidth + " " + halfWidth + ")", style: {
+                    stroke: color && colorTokens[color],
                     strokeDasharray: CIRCUMFERENCE,
                     strokeDashoffset: dashOffset,
-                }, stroke: color }))));
+                } }))));
 }
@@ -55,0 +56,0 @@ var CircularProgress = React.forwardRef(CircularProgressWithRef);

dist/esm/src/CircularProgress.d.ts

 import * as React from 'react';
-import { PropsWithMetadata } from '@highlight-ui/utils-commons';
+import { PropsWithMetadata, ColorToken } from '@highlight-ui/utils-commons';
 export declare type CircularProgressProps = PropsWithMetadata<{
     /** Percentage of the progress  */
     percentage: number;
-    /** Custom color of the progress circular line */
-    color?: string;
+    /** Custom color token for the progress circular line */
+    color?: ColorToken;
 }>;
@@ -13,4 +13,4 @@ export declare type CircularProgressRef = React.Ref<HTMLDivElement>;
     percentage: number;
-    /** Custom color of the progress circular line */
-    color?: string | undefined;
+    /** Custom color token for the progress circular line */
+    color?: "action-primary-default" | "action-primary-hover" | "action-primary-active" | "action-primary-focus" | "action-primary-disabled" | "action-secondary-default" | "action-secondary-hover" | "action-secondary-active" | "action-secondary-focus" | "action-secondary-disabled" | "action-critical-default" | "action-critical-hover" | "action-critical-active" | "action-critical-focus" | "action-critical-disabled" | "action-success-default" | "action-success-hover" | "action-success-active" | "action-success-focus" | "action-success-disabled" | "text-default" | "text-subdued" | "text-hover" | "text-disabled" | "text-hint-text" | "text-on-primary" | "text-on-emphasis" | "text-on-secondary" | "text-on-secondary-disabled" | "text-on-action-critical" | "text-on-action-success" | "text-on-interactive-subdued" | "text-on-background-warning" | "text-on-background-critical" | "text-on-background-success" | "text-on-interactive" | "background-default" | "background-subdued" | "background-subdued-selected" | "background-hover" | "background-disabled" | "background-emphasis" | "background-warning-default" | "background-warning-hover" | "background-critical-default" | "background-critical-hover" | "background-success-default" | "background-success-hover" | "icon-default" | "icon-subdued" | "icon-disabled" | "icon-hover" | "icon-critical" | "icon-success" | "icon-warning" | "icon-highlight" | "icon-on-emphasis" | "icon-on-primary" | "icon-on-secondary" | "icon-on-secondary-disabled" | "icon-on-critical" | "icon-on-success" | "icon-on-interactive-subdued" | "icon-on-background-warning" | "icon-on-background-critical" | "icon-on-background-success" | "icon-on-interactive" | "interactive-brand-default" | "interactive-brand-subdued" | "interactive-brand-hover" | "interactive-brand-disabled" | "interactive-critical-default" | "interactive-critical-hover" | "interactive-critical-disabled" | "focus-default" | "border-default" | "border-emphasis" | "border-subdued" | "border-hover" | "border-disabled" | "border-critical" | "border-warning" | "border-success" | "border-highlight" | "form-control-unselected-background" | "form-control-selected-background" | "form-control-unselected-disabled-background" | "form-control-selected-disabled-background" | "form-control-foreground" | "form-control-border-default" | "form-control-border-hover" | "form-control-border-disabled" | "backdrop" | "accent-10" | "accent-100" | "accent-105" | "accent-110" | "accent-115" | "neutral-10" | "neutral-20" | "neutral-40" | "neutral-60" | "neutral-80" | "neutral-white" | "neutral-black" | "neutral-cool-10" | "neutral-cool-20" | "neutral-cool-23" | "neutral-cool-25" | "neutral-cool-60" | "semantic-critical-10" | "semantic-critical-100" | "semantic-critical-105" | "semantic-critical-110" | "semantic-critical-115" | "semantic-warning-10" | "semantic-warning-100" | "semantic-warning-105" | "semantic-warning-110" | "semantic-warning-115" | "semantic-success-10" | "semantic-success-100" | "semantic-success-105" | "semantic-success-110" | "semantic-success-115" | "semantic-highlight-10" | "semantic-highlight-100" | "semantic-highlight-105" | "semantic-highlight-110" | "semantic-highlight-115" | "support-red-10" | "support-red-100" | "support-red-105" | "support-red-115" | "support-pink-10" | "support-pink-100" | "support-pink-110" | "support-pink-115" | "support-purple-10" | "support-purple-80" | "support-purple-100" | "support-purple-110" | "support-purple-120" | "support-dark-blue-10" | "support-dark-blue-100" | "support-dark-blue-110" | "support-dark-blue-115" | "support-green-10" | "support-green-100" | "support-green-110" | "support-green-115" | "support-light-green-10" | "support-light-green-100" | "support-light-green-110" | "support-light-green-115" | "support-yellow-10" | "support-yellow-100" | "support-yellow-105" | "support-yellow-115" | "support-brown-10" | "support-brown-20" | "support-brown-100" | "support-brown-105" | "support-grey-10" | "support-grey-100" | "support-grey-110" | "support-grey-115" | "support-grey-200" | "opacity-neutral-65" | "opacity-neutral-32" | "opacity-neutral-08" | "opacity-accent-38" | "opacity-critical-38" | "opacity-success-38" | undefined;
 } & {
@@ -17,0 +17,0 @@ metadata?: import("@highlight-ui/utils-commons").ComponentMetadata | undefined;

package.json

 {
   "name": "@highlight-ui/circular-progress",
-  "version": "1.0.20",
+  "version": "2.0.0-alpha.0",
   "author": "Personio GmbH",
@@ -26,6 +26,7 @@ "main": "dist/cjs/index.js",
   "devDependencies": {
-    "@highlight-ui/configs-base-jest": "^2.0.5",
-    "@highlight-ui/configs-base-tsconfig": "^2.0.1",
+    "@highlight-ui/configs-base-jest": "^2.0.6-alpha.0",
+    "@highlight-ui/configs-base-tsconfig": "^2.1.0-alpha.0",
     "@highlight-ui/configs-scripts": "^2.0.2",
     "@highlight-ui/theme": "^8.0.4",
+    "@highlight-ui/tokens": "^0.8.0-alpha.0",
     "@storybook/react": "^6.4.19",
@@ -40,3 +41,3 @@ "@testing-library/react": "^12.1.1",
   "dependencies": {
-    "@highlight-ui/utils-commons": "^1.3.14"
+    "@highlight-ui/utils-commons": "^2.0.0-alpha.0"
   },
@@ -47,3 +48,3 @@ "peerDependencies": {
   },
-  "gitHead": "2b72a3dec3eec32b4695c50b5035239993c74d56"
+  "gitHead": "3c3d92c48ebf625faf853a08bdc3fe8f0a98dc0e"
 }

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

54335

increased by19.56%

Lines of code

200

increased by23.46%

Worsened metrics

Dev dependency count

12

increased by9.09%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Added@highlight-ui/tokens@4.3.9(transitive)

• + Added@highlight-ui/utils-commons@2.7.1(transitive)

• - Removed@highlight-ui/utils-commons@1.3.14(transitive)

• Updated@highlight-ui/utils-commons@^2.0.0-alpha.0