@razorpay/blade
Version:
The Design System that powers Razorpay
95 lines (92 loc) • 3.79 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import '../BaseText/index.js';
import { useValidateAsProp } from '../utils.js';
import '../../Box/styledProps/index.js';
import '../../../utils/index.js';
import { jsx } from 'react/jsx-runtime';
import { getPlatformType } from '../../../utils/getPlatformType/getPlatformType.js';
import { BaseText } from '../BaseText/BaseText.web.js';
import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
var _excluded = ["as", "size", "weight", "color", "children", "testID", "textAlign", "textDecorationLine"];
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 validAsValues = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
var getProps = function getProps(_ref) {
var as = _ref.as,
size = _ref.size,
weight = _ref.weight,
color = _ref.color,
testID = _ref.testID;
var isPlatformWeb = getPlatformType() === 'browser' || getPlatformType() === 'node';
var letterSpacing = weight === 'medium' || weight === 'regular' ? 50 : 100;
var props = {
color: color,
fontSize: 800,
fontWeight: weight,
fontStyle: 'normal',
lineHeight: 800,
fontFamily: 'heading',
accessibilityProps: isPlatformWeb ? {} : {
role: 'heading'
},
componentName: 'display',
testID: testID,
letterSpacing: letterSpacing
};
if (size === 'small') {
props.fontSize = 800;
props.lineHeight = 800;
} else if (size === 'medium') {
props.fontSize = 900;
props.lineHeight = 900;
} else if (size === 'large') {
props.fontSize = 1000;
props.lineHeight = 1000;
} else if (size === 'xlarge') {
props.fontSize = 1100;
props.lineHeight = 1100;
}
props.as = isPlatformWeb ? 'h1' : undefined;
// override the computed `as` prop if user passed an `as` prop
props.as = as || props.as;
return props;
};
var _Display = function _Display(_ref2, ref) {
var as = _ref2.as,
_ref2$size = _ref2.size,
size = _ref2$size === void 0 ? 'small' : _ref2$size,
_ref2$weight = _ref2.weight,
weight = _ref2$weight === void 0 ? 'semibold' : _ref2$weight,
_ref2$color = _ref2.color,
color = _ref2$color === void 0 ? 'surface.text.gray.normal' : _ref2$color,
children = _ref2.children,
testID = _ref2.testID,
textAlign = _ref2.textAlign,
textDecorationLine = _ref2.textDecorationLine,
styledProps = _objectWithoutProperties(_ref2, _excluded);
useValidateAsProp({
componentName: 'Display',
as: as,
validAsValues: validAsValues
});
var props = getProps({
as: as,
size: size,
color: color,
weight: weight,
testID: testID
});
return /*#__PURE__*/jsx(BaseText, _objectSpread(_objectSpread(_objectSpread({
ref: ref
}, props), {}, {
textAlign: textAlign,
textDecorationLine: textDecorationLine
}, getStyledProps(styledProps)), {}, {
children: children
}));
};
var Display = /*#__PURE__*/React__default.forwardRef(_Display);
export { Display };
//# sourceMappingURL=Display.js.map