@catho/quantum
Version:
Catho react components
131 lines (130 loc) • 5.96 kB
JavaScript
"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 _Icon = _interopRequireDefault(require("../Icon"));
var _shared = require("../Grid/sub-components/shared");
var _theme = require("../shared/theme");
var _shared2 = require("../shared");
var _jsxRuntime = require("react/jsx-runtime");
var _templateObject;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
var mediaQueries = (0, _shared.query)(_shared2.BREAKPOINTS);
var Bar = _styledComponents["default"].div.withConfig({
displayName: "ChargeBar__Bar",
componentId: "sc-1o3pxly-0"
})(["overflow:hidden;position:relative;border-radius:4px;height:4px;", ";", ""], mediaQueries.medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border-radius: 8px;\n height: 8px;\n "]))), function (_ref) {
var width = _ref.width,
background = _ref.background,
xxsmall = _ref.spacing.xxsmall;
return "\n background-color: ".concat((0, _shared2.hexToRgba)(background, 0.39), ";\n width: ").concat(width, "; \n margin-top: ").concat(xxsmall, "px;\n ");
});
var Content = _styledComponents["default"].div.withConfig({
displayName: "ChargeBar__Content",
componentId: "sc-1o3pxly-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: "ChargeBar__Wrapper",
componentId: "sc-1o3pxly-2"
})(["display:flex;flex-direction:column;font-stretch:normal;font-style:normal;font-weight:normal;letter-spacing:0.18px;line-height:1.5;", ""], function (_ref3) {
var width = _ref3.width,
background = _ref3.background,
baseFontSize = _ref3.baseFontSize;
return "\n width: ".concat(width, ";\n color: ").concat(background, ";\n font-size: ").concat(baseFontSize * 0.875, "px;\n");
});
var ProgressLabel = _styledComponents["default"].span.withConfig({
displayName: "ChargeBar__ProgressLabel",
componentId: "sc-1o3pxly-3"
})(["display:inline-block;"]);
var InfoBlock = _styledComponents["default"].div.withConfig({
displayName: "ChargeBar__InfoBlock",
componentId: "sc-1o3pxly-4"
})(["display:flex;justify-content:space-between;align-items:center;svg + span{flex:1;}"]);
var LabelInfo = _styledComponents["default"].span.withConfig({
displayName: "ChargeBar__LabelInfo",
componentId: "sc-1o3pxly-5"
})(["", " height:17px;"], function (_ref4) {
var xsmall = _ref4.spacing.xsmall;
return "\n margin-left: ".concat(xsmall, "px;\n ");
});
ProgressLabel.displayName = 'ProgressLabel';
LabelInfo.displayName = 'LabelInfo';
var ChargeBar = function ChargeBar(_ref5) {
var _ref5$width = _ref5.width,
width = _ref5$width === void 0 ? '250px' : _ref5$width,
_ref5$progressPercent = _ref5.progressPercent,
progressPercent = _ref5$progressPercent === void 0 ? 50 : _ref5$progressPercent,
_ref5$label = _ref5.label,
label = _ref5$label === void 0 ? 'default informative text' : _ref5$label,
_ref5$skin = _ref5.skin,
skin = _ref5$skin === void 0 ? 'primary' : _ref5$skin,
_ref5$theme = _ref5.theme,
theme = _ref5$theme === void 0 ? {
components: {
chargeBar: _theme.components.chargeBar
},
spacing: _theme.spacing,
baseFontSize: _theme.baseFontSize
} : _ref5$theme;
var background = theme.components.chargeBar.skins[skin].background,
spacing = theme.spacing,
baseFontSize = theme.baseFontSize;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
width: width,
background: background,
baseFontSize: baseFontSize,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(InfoBlock, {
id: "chargebar-label",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
name: "whatshot",
size: "small",
skin: background
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelInfo, {
spacing: spacing,
children: label
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ProgressLabel, {
children: [progressPercent, "%"]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Bar, {
background: background,
width: width,
spacing: spacing,
role: "progressbar",
tabIndex: "0",
"aria-labelledby": "chargebar-label",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
background: background,
progress: progressPercent
})
})]
});
};
ChargeBar.propTypes = {
/** This prop sets the color of bar and text. */
skin: _propTypes["default"].oneOf(['neutral', 'primary', 'secondary', 'success']),
theme: _propTypes["default"].shape({
components: _propTypes["default"].shape({
chargeBar: _propTypes["default"].object
}),
spacing: _propTypes["default"].object,
baseFontSize: _propTypes["default"].number
}),
/** This prop sets the width of component, its can be in px or % */
width: _propTypes["default"].string,
/** This prop receives a number of 1 until 100. Its the progress bar in component */progressPercent: function progressPercent(props, propName) {
var percentRange = props[propName];
if (!percentRange) return null;
return percentRange >= 0 && percentRange <= 100 ? null : new Error('Must be within range of 0 to 100');
},
/** This prop receives the text that describe the progress bar */
label: _propTypes["default"].string
};
var _default = exports["default"] = ChargeBar;