@commonsku/styles 1.17.23 → 1.17.24

package/dist/index.d.ts

@@ -3282,16 +3282,17 @@ type GearIconProps = SVGIconProps & {
 declare function GearIcon({ color, filled, size, altText, ...props }: GearIconProps): React__default.JSX.Element;
 
 type CircleProgressIconProps = SVGIconProps & {
-    sqSize?: number;
     strokeWidth?: number;
     percentage?: number;
     strokeColor?: string;
     textColor?: string;
     text?: string;
-    viewBox?: string;
     textStyle?: React__default.CSSProperties;
+    showCheckMarkOnComplete?: boolean;
+    size?: "tiny" | "small" | "medium" | "large" | "huge";
+    altText?: string;
 };
-declare function CircleProgressIcon({ sqSize, strokeWidth, percentage, strokeColor, textColor, text, textStyle, color, size, altText, ...props }: CircleProgressIconProps): React__default.JSX.Element;
+declare function CircleProgressIcon({ strokeWidth, percentage, strokeColor, textColor, text, textStyle, showCheckMarkOnComplete, size, altText, ...props }: CircleProgressIconProps): React__default.JSX.Element;
 
 declare function Loading({ height, width, animationDuration, barWidth, barRadius, colorful, bars, viewBox, rotate, startColor, endColor, ...props }: {
     height?: number;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import _, { map, pick, keys, isUndefined, get, uniqueId, assign, range as range$1, isEmpty, tail, toNumber, isString, filter, round, partial, debounce } from 'lodash';
 import styled, { css, createGlobalStyle, ThemeProvider, keyframes } from 'styled-components';
-import React, { useMemo, Fragment, useState, useEffect, useRef, useCallback, useImperativeHandle, Component, useLayoutEffect, forwardRef, createContext, memo } from 'react';
+import React, { useCallback, useMemo, Fragment, useState, useEffect, useRef, useImperativeHandle, Component, useLayoutEffect, forwardRef, createContext, memo } from 'react';
 import { useDropzone } from 'react-dropzone';
 import BaseSelect from 'react-select';
 export { components, createFilter, mergeStyles } from 'react-select';
@@ -1421,58 +1421,86 @@ var Theme = function (_a) {
         children));
 };
 
+var iconSizes$9 = {
+    tiny: {
+        width: 32,
+        height: 32,
+        viewBox: "0 0 32 32",
+        fontSize: ".6em",
+        defaultStrokeWidth: 3,
+    },
+    small: {
+        width: 40,
+        height: 40,
+        viewBox: "0 0 40 40",
+        fontSize: ".6em",
+        defaultStrokeWidth: 3,
+    },
+    medium: {
+        width: 48,
+        height: 48,
+        viewBox: "0 0 48 48",
+        fontSize: ".8em",
+        defaultStrokeWidth: 5,
+    },
+    large: {
+        width: 72,
+        height: 72,
+        viewBox: "0 0 72 72",
+        fontSize: "1em",
+        defaultStrokeWidth: 5,
+    },
+    huge: {
+        width: 96,
+        height: 96,
+        viewBox: "0 0 96 96",
+        fontSize: "1em",
+        defaultStrokeWidth: 5,
+    },
+    default: {
+        height: 48,
+        width: 48,
+        viewBox: "0 0 48 48",
+        fontSize: ".8em",
+        defaultStrokeWidth: 5,
+    },
+};
 function CircleProgressIcon(_a) {
-    var sqSize = _a.sqSize, strokeWidth = _a.strokeWidth, _b = _a.percentage, percentage = _b === void 0 ? 0 : _b, _c = _a.strokeColor, strokeColor = _c === void 0 ? teal.main : _c, _d = _a.textColor, textColor = _d === void 0 ? teal.main : _d, _e = _a.text, text = _e === void 0 ? '' : _e, _f = _a.textStyle, textStyle = _f === void 0 ? {} : _f, _g = _a.color; _g === void 0 ? teal.main : _g; var _h = _a.size, size = _h === void 0 ? "medium" : _h, _j = _a.altText, altText = _j === void 0 ? "Progress level" : _j, props = __rest(_a, ["sqSize", "strokeWidth", "percentage", "strokeColor", "textColor", "text", "textStyle", "color", "size", "altText"]);
-    var iconSizes = {
-        tiny: {
-            width: 32,
-            height: 32,
-            viewBox: "0 0 32 32",
-        },
-        small: {
-            width: 40,
-            height: 40,
-            viewBox: "0 0 40 40",
-        },
-        medium: {
-            width: 48,
-            height: 48,
-            viewBox: "0 0 48 48",
-        },
-        large: {
-            width: 72,
-            height: 72,
-            viewBox: "0 0 72 72",
-        },
-        huge: {
-            width: 96,
-            height: 96,
-            viewBox: "0 0 96 96",
-        },
-        default: {
-            height: 48,
-            width: 48,
-            viewBox: "0 0 48 48",
-        },
-    };
-    sqSize = iconSizes[size]["width"];
-    strokeWidth = size === "tiny" || size === "small" ? 3 : 5;
-    var radius = (sqSize - strokeWidth) / 2;
-    // const viewBox = `0 0 ${sqSize} ${sqSize}`;
+    var strokeWidth = _a.strokeWidth, _b = _a.percentage, percentage = _b === void 0 ? 0 : _b, _c = _a.strokeColor, strokeColor = _c === void 0 ? teal.main : _c, _d = _a.textColor, textColor = _d === void 0 ? teal.main : _d, _e = _a.text, text = _e === void 0 ? "" : _e, _f = _a.textStyle, textStyle = _f === void 0 ? {} : _f, _g = _a.showCheckMarkOnComplete, showCheckMarkOnComplete = _g === void 0 ? false : _g, _h = _a.size, size = _h === void 0 ? "medium" : _h, _j = _a.altText, altText = _j === void 0 ? "Progress level" : _j, props = __rest(_a, ["strokeWidth", "percentage", "strokeColor", "textColor", "text", "textStyle", "showCheckMarkOnComplete", "size", "altText"]);
+    var _k = iconSizes$9[size], width = _k.width, defaultStrokeWidth = _k.defaultStrokeWidth, fontSize = _k.fontSize; _k.viewBox;
+    strokeWidth = strokeWidth || defaultStrokeWidth;
+    var squareSize = width;
+    var radius = (squareSize - strokeWidth) / 2;
     var dashArray = radius * Math.PI * 2;
-    var dashOffset = dashArray - dashArray * percentage / 100;
-    return React.createElement(SVG$1, __assign({ size: size, iconSizes: iconSizes, "aria-labelledby": "CircleProgressIcon" }, props),
-        React.createElement("title", { id: "CircleProgressIcon" }, text !== '' ? "".concat(text, " stage") : percentage ? "".concat(percentage, "% completed") : altText),
-        React.createElement("circle", { className: "circle-background", cx: sqSize / 2, cy: sqSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), style: { fill: 'none', stroke: colors$1.disabledButtonBorder, } }),
-        React.createElement("circle", { className: "circle-progress", cx: sqSize / 2, cy: sqSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), transform: "rotate(-90 ".concat(sqSize / 2, " ").concat(sqSize / 2, ")"), style: {
+    var dashOffset = dashArray - (dashArray * percentage) / 100;
+    var isComplete = percentage === 100;
+    var renderInnerText = useCallback(function () { return (React.createElement("text", { className: "circle-text", x: "50%", y: "50%", dy: ".3em", textAnchor: "middle", style: __assign({ fontSize: fontSize, fontWeight: "bold", fill: textColor }, textStyle) }, text || "".concat(percentage, "%"))); }, [fontSize, textColor, textStyle, text, percentage]);
+    var renderCheckMark = useCallback(function () {
+        var preferredViewBox = 40;
+        var scale = squareSize / preferredViewBox;
+        var scaledPath = [
+            { x: 12.0006 * scale, y: 21.599 * scale },
+            { x: 17.5629 * scale, y: 27.1617 * scale },
+            { x: 29.1621 * scale, y: 15.5625 * scale },
+        ]
+            .map(function (p) { return "".concat(p.x, ",").concat(p.y); })
+            .join(" L");
+        return (React.createElement("path", { d: "M".concat(scaledPath), stroke: strokeColor, strokeWidth: "".concat(strokeWidth, "px"), fill: "none" }));
+    }, [squareSize, strokeColor, strokeWidth]);
+    return (React.createElement(SVG$1, __assign({ size: size, iconSizes: iconSizes$9, "aria-labelledby": "CircleProgressIcon" }, props),
+        React.createElement("title", { id: "CircleProgressIcon" }, altText || (text ? "".concat(text, " stage") : "".concat(percentage, "% completed"))),
+        React.createElement("circle", { className: "circle-background", cx: squareSize / 2, cy: squareSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), style: { fill: "none", stroke: colors$1.disabledButtonBorder } }),
+        React.createElement("circle", { className: "circle-progress", cx: squareSize / 2, cy: squareSize / 2, r: radius, strokeWidth: "".concat(strokeWidth, "px"), transform: "rotate(-90 ".concat(squareSize / 2, " ").concat(squareSize / 2, ")"), style: {
                 strokeDasharray: dashArray,
                 strokeDashoffset: dashOffset,
-                fill: 'none',
+                fill: "none",
                 stroke: strokeColor,
-                strokeLinecap: 'round',
-                strokeLinejoin: 'round',
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
             } }),
-        React.createElement("text", { className: "circle-text", x: "50%", y: "50%", dy: ".3em", textAnchor: "middle", style: __assign({ fontSize: size === "small" || size === "tiny" ? ".6em" : size === "medium" ? ".8em" : "1em", fontWeight: 'bold', fill: textColor }, textStyle) }, text || "".concat(percentage, "%")));
+        showCheckMarkOnComplete && isComplete
+            ? renderCheckMark()
+            : renderInnerText()));
 }
 
 var SVG = styled.svg(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), SharedStyles);