@telia/styleguide/atoms/AnimatedProgressBar/AnimatedProgressBar.js

This is a living styleguide, showing the Atomic Design components which should be used in Telia Norway's web applications to achieve a common look & feel, and therefore user experience.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames3 = _interopRequireDefault(require("classnames"));

/**
 * Status: *finished*.
 *
 * An animated progress bar with changeable bar and background color.
 * Basically copied from https://codepen.io/holdencreative/pen/vEVbwv with some modifications
 */
var AnimatedProgressBar = function AnimatedProgressBar(_ref) {
  var backgroundColor = _ref.backgroundColor,
      color = _ref.color;
  return _react.default.createElement("div", {
    className: (0, _classnames3.default)('animated-progress-bar', (0, _defineProperty2.default)({}, "animated-progress-bar-color--".concat(backgroundColor), backgroundColor))
  }, _react.default.createElement("div", {
    className: (0, _classnames3.default)('indeterminate', (0, _defineProperty2.default)({}, "animated-progress-bar-color--".concat(color), color))
  }));
};

AnimatedProgressBar.defaultProps = {
  backgroundColor: 'grey',
  color: 'purple'
};
AnimatedProgressBar.propTypes = process.env.NODE_ENV !== "production" ? {
  backgroundColor: _propTypes.default.oneOf(['light-grey', 'grey', 'white', 'black', 'purple']),
  color: _propTypes.default.oneOf(['light-grey', 'white', 'purple', 'grey', 'black'])
} : {};
var _default = AnimatedProgressBar;
exports.default = _default;