@razorpay/blade
Version:
The Design System that powers Razorpay
136 lines (133 loc) • 6.08 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { StyledBadge } from './StyledBadge.web.js';
import { badgeHeight, horizontalPadding, iconPadding, iconSize } from './badgeTokens.js';
import '../Box/BaseBox/index.js';
import '../Typography/index.js';
import '../../utils/metaAttribute/index.js';
import '../Box/styledProps/index.js';
import '../../utils/getStringChildren/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/index.js';
import '../../utils/logger/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { getStringFromReactText } from '../../utils/getStringChildren/getStringChildren.js';
import { throwBladeError } from '../../utils/logger/logger.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { isReactNative } from '../../utils/platform/isReactNative.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import { Text } from '../Typography/Text/Text.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["children", "emphasis", "icon", "size", "color", "testID"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var getColorProps = function getColorProps(_ref) {
var color = _ref.color,
emphasis = _ref.emphasis;
var props = {
iconColor: 'feedback.icon.neutral.intense',
textColor: 'feedback.text.neutral.intense',
backgroundColor: 'feedback.background.neutral.subtle'
};
if (color === 'primary') {
// primary color badge
props.textColor = emphasis === 'intense' ? "surface.text.staticWhite.normal" : "surface.text.primary.normal";
props.iconColor = emphasis === 'intense' ? "surface.icon.staticWhite.normal" : "surface.icon.primary.normal";
props.backgroundColor = "surface.background.primary.".concat(emphasis);
} else {
// feedback colors badge
props.textColor = emphasis === 'intense' ? "surface.text.staticWhite.normal" : "feedback.text.".concat(color, ".intense");
props.iconColor = emphasis === 'intense' ? "surface.icon.staticWhite.normal" : "feedback.icon.".concat(color, ".intense");
props.backgroundColor = "feedback.background.".concat(color, ".").concat(emphasis);
}
return props;
};
var _Badge = function _Badge(_ref2, ref) {
var children = _ref2.children,
_ref2$emphasis = _ref2.emphasis,
emphasis = _ref2$emphasis === void 0 ? 'subtle' : _ref2$emphasis,
Icon = _ref2.icon,
_ref2$size = _ref2.size,
size = _ref2$size === void 0 ? 'medium' : _ref2$size,
_ref2$color = _ref2.color,
color = _ref2$color === void 0 ? 'neutral' : _ref2$color,
testID = _ref2.testID,
props = _objectWithoutProperties(_ref2, _excluded);
var childrenString = getStringFromReactText(children);
if (false) {
if (!(childrenString !== null && childrenString !== void 0 && childrenString.trim())) {
throwBladeError({
message: 'Text as children is required for Badge.',
moduleName: 'Badge'
});
}
}
var _getColorProps = getColorProps({
color: color,
emphasis: emphasis
}),
backgroundColor = _getColorProps.backgroundColor,
iconColor = _getColorProps.iconColor,
textColor = _getColorProps.textColor;
var badgeTextSizes = {
small: {
variant: 'body',
size: 'xsmall'
},
medium: {
variant: 'body',
size: 'small'
},
large: {
variant: 'body',
size: 'small'
}
};
return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
ref: ref,
display: isReactNative() ? 'flex' : 'inline-flex'
}, metaAttribute({
name: MetaConstants.Badge,
testID: testID
})), getStyledProps(props)), makeAnalyticsAttribute(props)), {}, {
children: /*#__PURE__*/jsx(StyledBadge, {
height: makeSize(badgeHeight[size]),
backgroundColor: backgroundColor,
size: size,
textAlign: 'left',
children: /*#__PURE__*/jsxs(BaseBox, {
paddingX: horizontalPadding[size],
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
overflow: "hidden",
children: [Icon ? /*#__PURE__*/jsx(BaseBox, {
paddingRight: Boolean(Icon) ? iconPadding[size] : 'spacing.0',
display: "flex",
children: /*#__PURE__*/jsx(Icon, {
color: iconColor,
size: iconSize[size]
})
}) : null, /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, badgeTextSizes[size]), {}, {
weight: "medium",
truncateAfterLines: 1,
color: textColor,
children: children
}))]
})
})
}));
};
var Badge = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_Badge), {
displayName: 'Badge',
componentId: 'Badge'
});
export { Badge };
//# sourceMappingURL=Badge.js.map