UNPKG

@kiwicom/orbit-components

Version:

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

121 lines (106 loc) 4.25 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = exports.StyledBadge = void 0; var React = _interopRequireWildcard(require("react")); var _styledComponents = _interopRequireDefault(require("styled-components")); var _defaultTheme = _interopRequireDefault(require("../../defaultTheme")); var _rtl = require("../../utils/rtl"); var StyledBadge = (0, _styledComponents.default)(function (_ref) { var className = _ref.className, children = _ref.children, dataTest = _ref.dataTest, ariaLabel = _ref.ariaLabel; return /*#__PURE__*/React.createElement("div", { className: className, "data-test": dataTest, "aria-label": ariaLabel }, children); }).withConfig({ displayName: "BadgePrimitive__StyledBadge", componentId: "sc-1ibxlos-0" })(["font-family:", ";display:inline-flex;flex:0 0 auto;box-sizing:border-box;justify-content:center;align-items:center;min-height:", ";line-height:14px;font-size:", ";font-weight:", ";background:", ";color:", ";border-radius:", ";padding:", ";border:", ";"], function (_ref2) { var theme = _ref2.theme; return theme.orbit.fontFamily; }, function (_ref3) { var theme = _ref3.theme; return theme.orbit.heightBadge; }, function (_ref4) { var theme = _ref4.theme; return theme.orbit.fontSizeTextSmall; }, function (_ref5) { var theme = _ref5.theme; return theme.orbit.fontWeightMedium; }, function (_ref6) { var background = _ref6.background; return background; }, function (_ref7) { var foregroundColor = _ref7.foregroundColor; return foregroundColor; }, function (_ref8) { var theme = _ref8.theme; return theme.orbit.borderRadiusBadge; }, function (_ref9) { var theme = _ref9.theme; return theme.orbit.paddingBadge; }, function (_ref10) { var borderColor = _ref10.borderColor; return borderColor && "1px solid ".concat(borderColor); }); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198 exports.StyledBadge = StyledBadge; StyledBadge.defaultProps = { theme: _defaultTheme.default }; var IconContainer = (0, _styledComponents.default)(function (_ref11) { var className = _ref11.className, children = _ref11.children; return /*#__PURE__*/React.createElement("div", { className: className }, children); }).withConfig({ displayName: "BadgePrimitive__IconContainer", componentId: "sc-1ibxlos-1" })(["display:flex;flex-shrink:0;margin:", ";svg{height:", ";width:", ";}"], function (_ref12) { var theme = _ref12.theme, hasContent = _ref12.hasContent; return hasContent && (0, _rtl.rtlSpacing)(theme.orbit.marginBadgeIcon); }, function (_ref13) { var theme = _ref13.theme; return theme.orbit.widthIconSmall; }, function (_ref14) { var theme = _ref14.theme; return theme.orbit.heightIconSmall; }); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198 IconContainer.defaultProps = { theme: _defaultTheme.default }; var StyledBadgeContent = _styledComponents.default.div.withConfig({ displayName: "BadgePrimitive__StyledBadgeContent", componentId: "sc-1ibxlos-2" })(["padding:5px 0;line-height:1;"]); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198 StyledBadgeContent.defaultProps = { theme: _defaultTheme.default }; var BadgePrimitive = function BadgePrimitive(props) { var icon = props.icon, children = props.children, ariaLabel = props.ariaLabel, dataTest = props.dataTest, background = props.background, foregroundColor = props.foregroundColor, borderColor = props.borderColor; return /*#__PURE__*/React.createElement(StyledBadge, { background: background, foregroundColor: foregroundColor, dataTest: dataTest, ariaLabel: ariaLabel, borderColor: borderColor }, icon && /*#__PURE__*/React.createElement(IconContainer, { hasContent: !!children }, icon), /*#__PURE__*/React.createElement(StyledBadgeContent, null, children)); }; var _default = BadgePrimitive; exports.default = _default;