@pantheon-systems/design-toolkit-react/dist/ProgressIndicators/ProgressCircle.js

Pantheon's React Design Toolkit

import PropTypes from 'prop-types';
import { jsxs, jsx } from 'react/jsx-runtime';

var ProgressCircle = function ProgressCircle(_ref) {
  var borderColor = _ref.borderColor,
    innerColor = _ref.innerColor,
    progress = _ref.progress,
    progressColor = _ref.progressColor,
    size = _ref.size,
    title = _ref.title;
  var getDefaultClasses = function getDefaultClasses() {
    var classes = [];
    if (!borderColor) {
      classes.push('stroke-gray-2');
    }
    if (!innerColor) {
      classes.push('fill-white');
    }
    return classes.join(' ');
  };
  var getProgressColor = function getProgressColor() {
    if (progress >= 90) {
      return 'stroke-green-3';
    }
    if (progress >= 50) {
      return 'stroke-orange-3';
    }
    return 'stroke-red-3';
  };
  return /*#__PURE__*/jsxs("svg", {
    className: "inline-block",
    height: "".concat(size),
    role: "img",
    viewBox: "0 0 36 36",
    width: "".concat(size),
    children: [/*#__PURE__*/jsx("title", {
      children: title
    }), /*#__PURE__*/jsx("path", {
      className: getDefaultClasses(),
      d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831",
      fill: "".concat(innerColor),
      stroke: "".concat(borderColor),
      strokeWidth: 4
    }), /*#__PURE__*/jsx("path", {
      className: "animate-progress-circle ".concat(!progressColor && getProgressColor()),
      d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831",
      fill: "none",
      stroke: "".concat(progressColor),
      strokeDasharray: "".concat(progress, " 100"),
      strokeLinecap: "round",
      strokeWidth: 4
    })]
  });
};
ProgressCircle.propTypes = {
  /**
   * Override for base border color.
   */
  borderColor: PropTypes.string,
  /**
   * Override for color of inner circle.
   */
  innerColor: PropTypes.string,
  /**
   * Percent complete.
   */
  progress: PropTypes.number.isRequired,
  /**
   * Override for progress color.
   */
  progressColor: PropTypes.string,
  /**
   * Size (height and width are equal).
   */
  size: PropTypes.number,
  /**
   * Title of SVG.
   */
  title: PropTypes.string.isRequired
};
ProgressCircle.defaultProps = {
  borderColor: null,
  innerColor: null,
  progressColor: null,
  size: 40
};
var ProgressCircle$1 = ProgressCircle;

export { ProgressCircle$1 as default };
//# sourceMappingURL=ProgressCircle.js.map