@catho/quantum/ProgressBar/ProgressBar.js

Catho react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _theme = require("../shared/theme");
var _shared = require("../shared");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var Bar = _styledComponents["default"].div.withConfig({
  displayName: "ProgressBar__Bar",
  componentId: "sc-zq5mzq-0"
})(["border-radius:8px;margin-top:8px;overflow:hidden;position:relative;", ""], function (_ref) {
  var height = _ref.height,
    width = _ref.width,
    background = _ref.background;
  return "\n    background-color: ".concat((0, _shared.hexToRgba)(background, 0.39), ";\n    height: ").concat(height, ";\n    width: ").concat(width, "; \n  ");
});
var Content = _styledComponents["default"].div.withConfig({
  displayName: "ProgressBar__Content",
  componentId: "sc-zq5mzq-1"
})(["border-radius:8px;display:inline-block;height:100%;left:0;position:absolute;top:0;transition:width 0.4s linear;", ""], function (_ref2) {
  var background = _ref2.background,
    progress = _ref2.progress;
  return "\n    background-color: ".concat(background, ";\n    width: ").concat(progress, "%;\n  ");
});
var Wrapper = _styledComponents["default"].div.withConfig({
  displayName: "ProgressBar__Wrapper",
  componentId: "sc-zq5mzq-2"
})(["display:flex;flex-direction:column;font-stretch:normal;font-style:normal;font-weight:normal;letter-spacing:0.18px;line-height:1.5;"]);
var ProgressLabel = _styledComponents["default"].span.withConfig({
  displayName: "ProgressBar__ProgressLabel",
  componentId: "sc-zq5mzq-3"
})(["", ""], function (_ref3) {
  var textColor = _ref3.textColor;
  return "\n    color: ".concat(textColor, ";\n  ");
});
ProgressLabel.displayName = 'ProgressLabel';
var ProgressBar = function ProgressBar(_ref4) {
  var _ref4$width = _ref4.width,
    width = _ref4$width === void 0 ? '250px' : _ref4$width,
    _ref4$height = _ref4.height,
    height = _ref4$height === void 0 ? '8px' : _ref4$height,
    _ref4$progressText = _ref4.progressText,
    progressText = _ref4$progressText === void 0 ? null : _ref4$progressText,
    _ref4$progressPercent = _ref4.progressPercent,
    progressPercent = _ref4$progressPercent === void 0 ? 0 : _ref4$progressPercent,
    _ref4$label = _ref4.label,
    label = _ref4$label === void 0 ? '%' : _ref4$label,
    _ref4$skin = _ref4.skin,
    skin = _ref4$skin === void 0 ? 'primary' : _ref4$skin,
    _ref4$theme = _ref4.theme,
    theme = _ref4$theme === void 0 ? {
      components: {
        progressBar: _theme.components.progressBar
      }
    } : _ref4$theme;
  var _theme$components$pro = theme.components.progressBar.skins[skin],
    background = _theme$components$pro.background,
    textColor = _theme$components$pro.textColor;
  var progressLabel = progressText === null ? progressPercent : progressText;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Bar, {
      background: background,
      height: height,
      width: width,
      role: "progressbar",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
        background: background,
        progress: progressPercent
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ProgressLabel, {
      textColor: textColor,
      children: [progressLabel, label]
    })]
  });
};
ProgressBar.propTypes = {
  skin: _propTypes["default"].oneOf(['neutral', 'primary', 'secondary']),
  theme: _propTypes["default"].shape({
    components: _propTypes["default"].shape({
      progressBar: _propTypes["default"].object
    })
  }),
  width: _propTypes["default"].string,
  height: _propTypes["default"].string,
  progressText: _propTypes["default"].number,
  progressPercent: _propTypes["default"].number,
  label: _propTypes["default"].string
};
var _default = exports["default"] = ProgressBar;