@elliemae/ds-circular-progress-indicator 2.0.0-alpha.0 → 2.0.0-alpha.12

package/cjs/DSCircularProgressIndicator.js

@@ -19,13 +19,14 @@ const {
   classNameElement
 } = dsClassnames.convertPropToCssClassName('circular-progress-indicator');
 
-const CircularProgressIndicator = ({
-  size,
-  showLabel,
-  showTooltip,
-  waiting,
-  loading
-}) => {
+const CircularProgressIndicator = _ref => {
+  let {
+    size,
+    showLabel,
+    showTooltip,
+    waiting,
+    loading
+  } = _ref;
   const waitingLabel = 'Waiting...';
   const loadingLabel = 'Loading...';
   const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;
@@ -100,16 +101,16 @@ const CircularProgressIndicator = ({
       break;
   }
 
-  const labelText = /*#__PURE__*/_jsx__default['default']("p", {
+  const labelText = /*#__PURE__*/_jsx__default["default"]("p", {
     "data-testid": "circular-indicator-label",
     className: classNameElement('label'),
     style: {
-      fontSize: `${sizeLabel}px`
+      fontSize: "".concat(sizeLabel, "px")
     }
   }, void 0, currentLabel); // Only adds the tooltip if sizePx < 17 or showTooltip is true
 
 
-  const buildIndicator = Component => sizePx < 17 || showTooltip ? /*#__PURE__*/_jsx__default['default'](DSTooltip__default['default'], {
+  const buildIndicator = Component => sizePx < 17 || showTooltip ? /*#__PURE__*/_jsx__default["default"](DSTooltip__default["default"], {
     containerProps: {
       id: 'ds-circular-progress-indicator',
       'data-testid': 'circular-indicator-title'
@@ -120,126 +121,126 @@ const CircularProgressIndicator = ({
     placement: "bottom"
   }) : Component;
 
-  const grayTrack = /*#__PURE__*/_jsx__default['default']("circle", {
+  const grayTrack = /*#__PURE__*/_jsx__default["default"]("circle", {
     className: classNameElement('track'),
     cx: "50%",
     cy: "50%",
     fill: "none",
     r: "28",
-    strokeWidth: `${trackWidth}px`
+    strokeWidth: "".concat(trackWidth, "px")
   });
 
-  const grayArc = /*#__PURE__*/_jsx__default['default']("circle", {
+  const grayArc = /*#__PURE__*/_jsx__default["default"]("circle", {
     className: classNameElement('arc-gray'),
     stroke: "#E0E3E8",
-    strokeDasharray: `${grayArcStrokeDasharray}`,
-    strokeDashoffset: `${grayArcStrokeDashoffset}`,
+    strokeDasharray: "".concat(grayArcStrokeDasharray),
+    strokeDashoffset: "".concat(grayArcStrokeDashoffset),
     cx: "50%",
     cy: "50%",
     fill: "none",
     r: "28",
-    strokeWidth: `${trackWidth}px`
+    strokeWidth: "".concat(trackWidth, "px")
   });
 
-  const indicator = /*#__PURE__*/_jsx__default['default']("svg", {
-    height: `${sizePx}px`,
+  const indicator = /*#__PURE__*/_jsx__default["default"]("svg", {
+    height: "".concat(sizePx, "px"),
     version: "1.1",
     viewBox: "0 0 66 66",
-    width: `${sizePx}px`,
+    width: "".concat(sizePx, "px"),
     "data-testid": "circular-indicator"
-  }, void 0, /*#__PURE__*/_jsx__default['default']("defs", {}, void 0, /*#__PURE__*/_jsx__default['default']("linearGradient", {
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("defs", {}, void 0, /*#__PURE__*/_jsx__default["default"]("linearGradient", {
     id: "grad1",
     x1: "0%",
     x2: "100%",
     y1: "100%",
     y2: "0%"
-  }, void 0, /*#__PURE__*/_jsx__default['default']("stop", {
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("stop", {
     offset: "0%",
     style: {
       stopColor: '#E0E3E8',
       stopOpacity: 1
     }
-  }), /*#__PURE__*/_jsx__default['default']("stop", {
+  }), /*#__PURE__*/_jsx__default["default"]("stop", {
     offset: "89%",
     style: {
       stopColor: '#5594e2',
       stopOpacity: 1
     }
-  }), /*#__PURE__*/_jsx__default['default']("stop", {
+  }), /*#__PURE__*/_jsx__default["default"]("stop", {
     offset: "100%",
     style: {
       stopColor: '#5594e2',
       stopOpacity: 1
     }
-  })), /*#__PURE__*/_jsx__default['default']("linearGradient", {
+  })), /*#__PURE__*/_jsx__default["default"]("linearGradient", {
     id: "grad2",
     x1: "0%",
     x2: "100%",
     y1: "100%",
     y2: "0%"
-  }, void 0, /*#__PURE__*/_jsx__default['default']("stop", {
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("stop", {
     offset: "0%",
     style: {
       stopColor: '#5594e2',
       stopOpacity: 1
     }
-  }), /*#__PURE__*/_jsx__default['default']("stop", {
+  }), /*#__PURE__*/_jsx__default["default"]("stop", {
     offset: "11%",
     style: {
       stopColor: '#5594e2',
       stopOpacity: 1
     }
-  }), /*#__PURE__*/_jsx__default['default']("stop", {
+  }), /*#__PURE__*/_jsx__default["default"]("stop", {
     offset: "100%",
     style: {
       stopColor: '#E0E3E8',
       stopOpacity: 1
     }
-  })), /*#__PURE__*/_jsx__default['default']("marker", {
+  })), /*#__PURE__*/_jsx__default["default"]("marker", {
     id: "inverseL",
     viewBox: "0 0 5 10",
     refX: "0.5",
-    refY: `${markerRefY}`,
+    refY: "".concat(markerRefY),
     markerUnits: "strokeWidth",
     markerWidth: "0.5",
-    markerHeight: `${markerHeight}`,
+    markerHeight: "".concat(markerHeight),
     orient: "auto"
-  }, void 0, _path || (_path = /*#__PURE__*/_jsx__default['default']("path", {
+  }, void 0, _path || (_path = /*#__PURE__*/_jsx__default["default"]("path", {
     d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
     fill: "#FFF"
-  }))), /*#__PURE__*/_jsx__default['default']("marker", {
+  }))), /*#__PURE__*/_jsx__default["default"]("marker", {
     id: "inverseR",
     viewBox: "0 0 5 10",
     refX: "0",
     refY: "5",
     markerUnits: "strokeWidth",
     markerWidth: "0.7",
-    markerHeight: `${markerHeight}`
-  }, void 0, _path2 || (_path2 = /*#__PURE__*/_jsx__default['default']("path", {
+    markerHeight: "".concat(markerHeight)
+  }, void 0, _path2 || (_path2 = /*#__PURE__*/_jsx__default["default"]("path", {
     d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
     fill: "#FFF"
-  })))), grayTrack, !waiting && /*#__PURE__*/_jsx__default['default']("g", {
+  })))), grayTrack, !waiting && /*#__PURE__*/_jsx__default["default"]("g", {
     fill: "none",
     fillRule: "evenodd",
     stroke: "none",
     strokeWidth: "1"
-  }, void 0, /*#__PURE__*/_jsx__default['default']("path", {
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
     className: classNameElement('arc-blue'),
     d: "M30,5 C17.536025,6 6,17.536027 5,31",
     stroke: "#5594e2",
-    strokeWidth: `${strokeWidth - 0.5}px`,
+    strokeWidth: "".concat(strokeWidth - 0.5, "px"),
     strokeLinecap: "round",
     "data-testid": "circular-indicator-blue-arc"
-  }), /*#__PURE__*/_jsx__default['default']("path", {
+  }), /*#__PURE__*/_jsx__default["default"]("path", {
     className: classNameElement('arc-white'),
     d: "M33,5 C17.536027,5 5,17.536027 5,33",
     stroke: "#FFF",
-    strokeWidth: `${strokeWidth + 2}px`,
+    strokeWidth: "".concat(strokeWidth + 2, "px"),
     markerStart: "url(#inverseR)",
     markerEnd: "url(#inverseL)"
   }), grayArc));
 
-  return /*#__PURE__*/_jsx__default['default']("div", {
+  return /*#__PURE__*/_jsx__default["default"]("div", {
     className: classNameBlock('wrapper'),
     role: "status",
     "aria-hidden": waiting || loading ? 'false' : 'true'
@@ -264,4 +265,4 @@ const CircularProgressIndicatorWithSchema = reactDesc.describe(CircularProgressI
 CircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;
 
 exports.CircularProgressIndicatorWithSchema = CircularProgressIndicatorWithSchema;
-exports['default'] = CircularProgressIndicator;
+exports["default"] = CircularProgressIndicator;

package/cjs/index.js

@@ -7,5 +7,5 @@ var DSCircularProgressIndicator = require('./DSCircularProgressIndicator.js');
 
 
 exports.CircularProgressIndicatorWithSchema = DSCircularProgressIndicator.CircularProgressIndicatorWithSchema;
-exports.DSCircularProgressIndicator = DSCircularProgressIndicator['default'];
-exports.default = DSCircularProgressIndicator['default'];
+exports.DSCircularProgressIndicator = DSCircularProgressIndicator["default"];
+exports["default"] = DSCircularProgressIndicator["default"];

package/esm/DSCircularProgressIndicator.js

@@ -10,13 +10,14 @@ const {
   classNameElement
 } = convertPropToCssClassName('circular-progress-indicator');
 
-const CircularProgressIndicator = ({
-  size,
-  showLabel,
-  showTooltip,
-  waiting,
-  loading
-}) => {
+const CircularProgressIndicator = _ref => {
+  let {
+    size,
+    showLabel,
+    showTooltip,
+    waiting,
+    loading
+  } = _ref;
   const waitingLabel = 'Waiting...';
   const loadingLabel = 'Loading...';
   const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;
@@ -95,7 +96,7 @@ const CircularProgressIndicator = ({
     "data-testid": "circular-indicator-label",
     className: classNameElement('label'),
     style: {
-      fontSize: `${sizeLabel}px`
+      fontSize: "".concat(sizeLabel, "px")
     }
   }, void 0, currentLabel); // Only adds the tooltip if sizePx < 17 or showTooltip is true
 
@@ -117,26 +118,26 @@ const CircularProgressIndicator = ({
     cy: "50%",
     fill: "none",
     r: "28",
-    strokeWidth: `${trackWidth}px`
+    strokeWidth: "".concat(trackWidth, "px")
   });
 
   const grayArc = /*#__PURE__*/_jsx("circle", {
     className: classNameElement('arc-gray'),
     stroke: "#E0E3E8",
-    strokeDasharray: `${grayArcStrokeDasharray}`,
-    strokeDashoffset: `${grayArcStrokeDashoffset}`,
+    strokeDasharray: "".concat(grayArcStrokeDasharray),
+    strokeDashoffset: "".concat(grayArcStrokeDashoffset),
     cx: "50%",
     cy: "50%",
     fill: "none",
     r: "28",
-    strokeWidth: `${trackWidth}px`
+    strokeWidth: "".concat(trackWidth, "px")
   });
 
   const indicator = /*#__PURE__*/_jsx("svg", {
-    height: `${sizePx}px`,
+    height: "".concat(sizePx, "px"),
     version: "1.1",
     viewBox: "0 0 66 66",
-    width: `${sizePx}px`,
+    width: "".concat(sizePx, "px"),
     "data-testid": "circular-indicator"
   }, void 0, /*#__PURE__*/_jsx("defs", {}, void 0, /*#__PURE__*/_jsx("linearGradient", {
     id: "grad1",
@@ -190,10 +191,10 @@ const CircularProgressIndicator = ({
     id: "inverseL",
     viewBox: "0 0 5 10",
     refX: "0.5",
-    refY: `${markerRefY}`,
+    refY: "".concat(markerRefY),
     markerUnits: "strokeWidth",
     markerWidth: "0.5",
-    markerHeight: `${markerHeight}`,
+    markerHeight: "".concat(markerHeight),
     orient: "auto"
   }, void 0, _path || (_path = /*#__PURE__*/_jsx("path", {
     d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
@@ -205,7 +206,7 @@ const CircularProgressIndicator = ({
     refY: "5",
     markerUnits: "strokeWidth",
     markerWidth: "0.7",
-    markerHeight: `${markerHeight}`
+    markerHeight: "".concat(markerHeight)
   }, void 0, _path2 || (_path2 = /*#__PURE__*/_jsx("path", {
     d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
     fill: "#FFF"
@@ -218,14 +219,14 @@ const CircularProgressIndicator = ({
     className: classNameElement('arc-blue'),
     d: "M30,5 C17.536025,6 6,17.536027 5,31",
     stroke: "#5594e2",
-    strokeWidth: `${strokeWidth - 0.5}px`,
+    strokeWidth: "".concat(strokeWidth - 0.5, "px"),
     strokeLinecap: "round",
     "data-testid": "circular-indicator-blue-arc"
   }), /*#__PURE__*/_jsx("path", {
     className: classNameElement('arc-white'),
     d: "M33,5 C17.536027,5 5,17.536027 5,33",
     stroke: "#FFF",
-    strokeWidth: `${strokeWidth + 2}px`,
+    strokeWidth: "".concat(strokeWidth + 2, "px"),
     markerStart: "url(#inverseR)",
     markerEnd: "url(#inverseL)"
   }), grayArc));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-circular-progress-indicator",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.12",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Circular progress indicator",
   "module": "./esm/index.js",
@@ -36,9 +36,13 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-classnames": "2.0.0-alpha.0",
-    "@elliemae/ds-tooltip": "2.0.0-alpha.0",
-    "react-desc": "^4.1.3"
+    "@elliemae/ds-classnames": "2.0.0-alpha.12",
+    "@elliemae/ds-tooltip": "2.0.0-alpha.12",
+    "react-desc": "~4.1.3"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/react": "~12.1.2"
   },
   "peerDependencies": {
     "react": "^17.0.2",

package/types/DSCircularProgressIndicator.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 declare const CircularProgressIndicator: {
     ({ size, showLabel, showTooltip, waiting, loading }: {
@@ -15,13 +16,33 @@ declare const CircularProgressIndicator: {
         loading: boolean;
     };
     propTypes: {
+        size: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        showLabel: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        showTooltip: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        waiting: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        loading: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+    };
+};
+declare const CircularProgressIndicatorWithSchema: {
+    (props?: {
         size: any;
         showLabel: any;
         showTooltip: any;
         waiting: any;
         loading: any;
-    };
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
 };
-declare const CircularProgressIndicatorWithSchema: any;
 export { CircularProgressIndicatorWithSchema };
 export default CircularProgressIndicator;

package/cjs/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "commonjs",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}

package/esm/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "module",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}