@razorpay/blade
Version:
The Design System that powers Razorpay
30 lines (27 loc) • 4.19 kB
JavaScript
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { StyledBadge } from './StyledBadge.native.js';
import { badgeHeight, horizontalPadding, iconPadding, iconSize } from './badgeTokens.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
import '../Typography/Heading/Heading.js';
import { Text } from '../Typography/Text/Text.js';
import '../Typography/Code/Code.js';
import '../Typography/Display/Display.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.native.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import '@babel/runtime/helpers/slicedToArray';
import 'react-native';
import '../../tokens/global/typography.js';
import '../../tokens/global/motion.js';
import { throwBladeError } from '../../utils/logger/logger.js';
import { isReactNative } from '../../utils/platform/isReactNative.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import '../BladeProvider/useTheme.js';
import { getStringFromReactText } from '../../utils/getStringChildren/getStringChildren.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { jsx, jsxs } from 'react/jsx-runtime';
var _excluded=["children","emphasis","icon","size","color","testID"];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'){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.${emphasis}`;}else {props.textColor=emphasis==='intense'?`surface.text.staticWhite.normal`:`feedback.text.${color}.intense`;props.iconColor=emphasis==='intense'?`surface.icon.staticWhite.normal`:`feedback.icon.${color}.intense`;props.backgroundColor=`feedback.background.${color}.${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(__DEV__){if(!(childrenString!=null&&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 jsx(BaseBox,Object.assign({ref:ref,display:isReactNative()?'flex':'inline-flex'},metaAttribute({name:MetaConstants.Badge,testID:testID}),getStyledProps(props),makeAnalyticsAttribute(props),{children:jsx(StyledBadge,{height:makeSize(badgeHeight[size]),backgroundColor:backgroundColor,size:size,textAlign:'left',children:jsxs(BaseBox,{paddingX:horizontalPadding[size],display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",overflow:"hidden",children:[Icon?jsx(BaseBox,{paddingRight:Boolean(Icon)?iconPadding[size]:'spacing.0',display:"flex",children:jsx(Icon,{color:iconColor,size:iconSize[size]})}):null,jsx(Text,Object.assign({},badgeTextSizes[size],{weight:"medium",truncateAfterLines:1,color:textColor,children:children}))]})})}));};var Badge=assignWithoutSideEffects(React__default.forwardRef(_Badge),{displayName:'Badge',componentId:'Badge'});
export { Badge };
//# sourceMappingURL=Badge.js.map