@razorpay/blade
Version:
The Design System that powers Razorpay
162 lines (158 loc) • 6.15 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import styled from 'styled-components';
import '../../../utils/makeTypographySize/index.web.js';
import '../BaseText/index.js';
import '../../Box/BaseBox/index.js';
import '../../Box/styledProps/index.js';
import '../../../utils/index.js';
import '../../../utils/metaAttribute/index.js';
import '../../../utils/makeSpace/index.js';
import '../../../utils/logger/index.js';
import { jsx } from 'react/jsx-runtime';
import { getPlatformType } from '../../../utils/getPlatformType/getPlatformType.js';
import { throwBladeError } from '../../../utils/logger/logger.js';
import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
import { makeSpace } from '../../../utils/makeSpace/makeSpace.js';
import { makeTypographySize } from '../../../utils/makeTypographySize/makeTypographySize.web.js';
import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
import { BaseText } from '../BaseText/BaseText.web.js';
var _excluded = ["children", "size", "weight", "isHighlighted", "color", "testID", "textTransform"];
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 platformType = getPlatformType();
var isPlatformWeb = platformType === 'browser' || platformType === 'node';
var getCodeFontSizeAndLineHeight = function getCodeFontSizeAndLineHeight(size) {
switch (size) {
case 'medium':
return {
fontSize: 75,
lineHeight: 75,
letterSpacing: 100
};
case 'small':
return {
fontSize: 25,
lineHeight: 25,
letterSpacing: 100
};
default:
if (true) {
throwBladeError({
moduleName: 'Code',
message: "Unexpected size: ".concat(size)
});
}
return undefined;
}
};
var CodeContainer = /*#__PURE__*/styled(BaseBox).withConfig({
displayName: "Code__CodeContainer",
componentId: "l9m17z-0"
})(function (props) {
var padding = "".concat(makeSpace(props.theme.spacing[0]), " ").concat(makeSpace(props.theme.spacing[2]));
return {
padding: padding,
backgroundColor: props.isHighlighted ? props.theme.colors.feedback.background.neutral.subtle : undefined,
borderRadius: props.theme.border.radius.xsmall,
display: isPlatformWeb ? 'inline-block' : 'flex',
alignSelf: isPlatformWeb ? undefined : 'center',
verticalAlign: 'middle',
lineHeight: makeTypographySize(props.theme.typography.lineHeights[0])
};
});
var getCodeColor = function getCodeColor(_ref) {
var isHighlighted = _ref.isHighlighted,
color = _ref.color;
if (isHighlighted) {
if (true) {
if (color) {
throwBladeError({
moduleName: 'Code',
message: '`color` prop cannot be used without `isHighlighted={false}`'
});
}
}
return 'surface.text.gray.subtle';
}
if (color) {
return color;
}
return 'surface.text.gray.normal';
};
var _Code = function _Code(_ref2, ref) {
var children = _ref2.children,
_ref2$size = _ref2.size,
size = _ref2$size === void 0 ? 'small' : _ref2$size,
_ref2$weight = _ref2.weight,
weight = _ref2$weight === void 0 ? 'regular' : _ref2$weight,
_ref2$isHighlighted = _ref2.isHighlighted,
isHighlighted = _ref2$isHighlighted === void 0 ? true : _ref2$isHighlighted,
color = _ref2.color,
testID = _ref2.testID,
textTransform = _ref2.textTransform,
styledProps = _objectWithoutProperties(_ref2, _excluded);
var _ref3 = getCodeFontSizeAndLineHeight(size),
fontSize = _ref3.fontSize,
lineHeight = _ref3.lineHeight,
letterSpacing = _ref3.letterSpacing;
var codeTextColor = React__default.useMemo(function () {
return getCodeColor({
isHighlighted: isHighlighted,
color: color
});
}, [isHighlighted, color]);
return /*#__PURE__*/jsx(CodeContainer, _objectSpread(_objectSpread(_objectSpread({
ref: ref,
size: size,
isHighlighted: isHighlighted,
as: isPlatformWeb ? 'span' : undefined
}, metaAttribute({
name: MetaConstants.Code,
testID: testID
})), getStyledProps(styledProps)), {}, {
children: /*#__PURE__*/jsx(BaseText, {
color: codeTextColor,
fontFamily: "code",
fontSize: fontSize,
fontWeight: weight,
as: isPlatformWeb ? 'code' : undefined,
lineHeight: lineHeight,
letterSpacing: letterSpacing,
textTransform: textTransform,
children: children
})
}));
};
/**
* Code component can be used for displaying token, variable names, or inlined code snippets.
*
* ## Usage
*
* ### In Web
* In web, you can use it inside `Text` component or individually. The component is set to display `inline-block`
*
* ```tsx
* <Text>
* Lorem ipsum <Code>SENTRY_TOKEN</Code> normal text
* </Text>
* ```
*
* ### In React Native
*
* In React Native, you would have to align it using flex to make sure the Code and the surrounding text is correctly aligned
*
* ```tsx
* <Box flexWrap="wrap" flexDirection="row" alignItems="flex-start">
* <Text>Lorem ipsum </Text>
* <Code>SENTRY_TOKEN</Code>
* <Text> normal text</Text>
* </Box>
* ```
*/
var Code = /*#__PURE__*/React__default.forwardRef(_Code);
export { Code };
//# sourceMappingURL=Code.js.map