@atlaskit/progress-bar/dist/esm/components/progress-bar.js

A progress bar communicates the status of a system process.

/* progress-bar.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./progress-bar.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import { fg } from '@atlaskit/platform-feature-flags';
var MIN_VALUE = 0;
var MAX_VALUE = 1;
var increasingBarAnimation = null;
var decreasingBarAnimation = null;
var containerStyles = null;
var containerStylesT26Shape = null;
var containerAppearance = {
  default: "_bfhki8nm",
  success: "_bfhki8nm",
  inverse: "_bfhk1vck"
};
var barAppearance = {
  default: "_bfhk1aqn",
  success: "_bfhkkcmj",
  inverse: "_bfhkvuon"
};
var barStyles = null;
var barStylesT26Shape = null;
var determinateBarStyles = null;
var increasingBarStyles = null;
var decreasingBarStyles = null;

/**
 * __Progress bar__
 *
 * A progress bar displays the status of a given process.
 *
 * - [Examples](https://atlassian.design/components/progress-bar/examples)
 * - [Code](https://atlassian.design/components/progress-bar/code)
 * - [Usage](https://atlassian.design/components/progress-bar/usage)
 */
var ProgressBar = function ProgressBar(_ref) {
  var _ref$appearance = _ref.appearance,
    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
    ariaLabel = _ref.ariaLabel,
    _ref$isIndeterminate = _ref.isIndeterminate,
    isIndeterminate = _ref$isIndeterminate === void 0 ? false : _ref$isIndeterminate,
    _ref$testId = _ref.testId,
    testId = _ref$testId === void 0 ? 'progress-bar' : _ref$testId,
    _ref$value = _ref.value,
    value = _ref$value === void 0 ? 0 : _ref$value;
  var valueParsed = isIndeterminate ? MIN_VALUE : Math.max(MIN_VALUE, Math.min(value, MAX_VALUE));
  return /*#__PURE__*/React.createElement("div", {
    role: "progressbar",
    "aria-label": ariaLabel,
    "aria-valuemin": MIN_VALUE,
    "aria-valuenow": valueParsed,
    "aria-valuemax": MAX_VALUE,
    "data-testid": testId,
    className: ax(["_2rkofajl _1reo15vq _18m915vq _1bsb1osq _4t3ii2wt _kqswh2mm _bfhki8nm", fg('platform-dst-shape-theme-default') && "_2rko1rr0", containerAppearance[appearance]])
  }, isIndeterminate ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    className: ax(["_2rkofajl _1e0c1ule _4t3ii2wt _kqswstnw", barAppearance[appearance], "_5sagymdr _tip812c5 _j7hq7g40", fg('platform-dst-shape-theme-default') && "_2rko1rr0"])
  }), /*#__PURE__*/React.createElement("span", {
    className: ax(["_2rkofajl _1e0c1ule _4t3ii2wt _kqswstnw", barAppearance[appearance], "_ju251bs3 _5sagymdr _tip812c5 _j7hqio0v", fg('platform-dst-shape-theme-default') && "_2rko1rr0"])
  })) : /*#__PURE__*/React.createElement("span", {
    style: {
      width: "".concat(Number(value) * 100, "%")
    },
    className: ax(["_2rkofajl _1e0c1ule _4t3ii2wt _kqswstnw", barAppearance[appearance], "_v564calv", fg('platform-dst-shape-theme-default') && "_2rko1rr0"])
  }));
};
export default ProgressBar;