@primer/components/lib-esm/ProgressBar.js

Primer react components

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import styled from 'styled-components';
import { width } from 'styled-system';
import { COMMON, get } from './constants';
import sx from './sx';
const Bar = styled.span.withConfig({
  displayName: "ProgressBar__Bar",
  componentId: "sc-1tiva13-0"
})(["width:", ";", ""], props => props.progress ? `${props.progress}%` : 0, COMMON);
const sizeMap = {
  small: '5px',
  large: '10px',
  default: '8px'
};
const ProgressContainer = styled.span.withConfig({
  displayName: "ProgressBar__ProgressContainer",
  componentId: "sc-1tiva13-1"
})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.border.default'), get('radii.1'), props => sizeMap[props.barSize || 'default'], COMMON, width, sx);

function ProgressBar({
  progress,
  bg,
  theme,
  ...rest
}) {
  return /*#__PURE__*/React.createElement(ProgressContainer, _extends({
    theme: theme
  }, rest), /*#__PURE__*/React.createElement(Bar, {
    progress: progress,
    bg: bg,
    theme: theme
  }));
}

ProgressBar.displayName = "ProgressBar";
ProgressBar.defaultProps = {
  bg: 'bg.successInverse',
  barSize: 'default'
};
export default ProgressBar;