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

Pantheon's React Design Toolkit

import PropTypes from 'prop-types';
import { GRAY_3, GRAY_4, GRAY_5, GRAY_6, GRAY_7, YELLOW_3, CYAN_3, RED_3, RED_4, BLUE_2, BLUE_3, ORANGE_3, ORANGE_4, GREEN_2, GREEN_3, GREEN_5 } from '../consts/colors.json.js';
import { jsx } from 'react/jsx-runtime';

var ProgressBar = function ProgressBar(_ref) {
  var backgroundColor = _ref.backgroundColor,
    percentage = _ref.percentage,
    transitionDuration = _ref.transitionDuration,
    transitionTimingFunction = _ref.transitionTimingFunction;
  return /*#__PURE__*/jsx("div", {
    className: "rounded h-2 overflow-hidden bg-gray-2",
    children: /*#__PURE__*/jsx("div", {
      className: "rounded h-2 overflow-hidden w-full ".concat(percentage >= 100 ? 'bg-green-3' : 'rounded-t rounded-l bg-blue-3', " motion-reduce:duration-almost-0"),
      style: {
        backgroundColor: backgroundColor,
        transitionDuration: transitionDuration,
        transitionTimingFunction: transitionTimingFunction,
        transform: "translateX(-".concat(100 - percentage, "%)")
      }
    })
  });
};
var acceptedColors = [GRAY_3.hex, GRAY_4.hex, GRAY_5.hex, GRAY_6.hex, GRAY_7.hex, YELLOW_3.hex, CYAN_3.hex, RED_3.hex, RED_4.hex, BLUE_2.hex, BLUE_3.hex, ORANGE_3.hex, ORANGE_4.hex, GREEN_2.hex, GREEN_3.hex, GREEN_5.hex];

// TODO: until transition duration is exposed as css class instead of inline style it will override the 'prefers reduce motion' rule

ProgressBar.defaultProps = {
  backgroundColor: null,
  transitionDuration: '0.3s',
  transitionTimingFunction: 'linear'
};
ProgressBar.propTypes = {
  /**
   * Override for background color.
   */
  backgroundColor: PropTypes.oneOf(acceptedColors),
  /**
   * Percent complete.
   */
  percentage: PropTypes.number.isRequired,
  /**
   * Transition Duration.
   */
  transitionDuration: PropTypes.string,
  /**
   * Transition Timing.
   */
  transitionTimingFunction: PropTypes.string
};
var ProgressBar$1 = ProgressBar;

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