@razorpay/blade
Version:
The Design System that powers Razorpay
99 lines (95 loc) • 3.81 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 { isReactNative } from '../../../utils/platform/isReactNative.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 getHeadingProps = function getHeadingProps(_ref) {
var as = _ref.as,
size = _ref.size,
weight = _ref.weight,
color = _ref.color,
testID = _ref.testID;
var props = {
color: color,
fontSize: 300,
fontWeight: weight !== null && weight !== void 0 ? weight : 'semibold',
fontStyle: 'normal',
lineHeight: 300,
fontFamily: 'heading',
accessibilityProps: isReactNative() ? {
role: 'heading'
} : {},
componentName: 'heading',
testID: testID
};
if (size === 'small') {
props.fontSize = 300;
props.lineHeight = 300;
props.as = 'h6';
} else if (size === 'medium') {
props.fontSize = 400;
props.lineHeight = 400;
props.as = 'h5';
} else if (size === 'large') {
props.fontSize = 500;
props.lineHeight = 500;
props.as = 'h4';
} else if (size === 'xlarge') {
props.fontSize = 600;
props.lineHeight = 600;
props.as = 'h3';
} else if (size === '2xlarge') {
props.fontSize = 700;
props.lineHeight = 700;
props.as = 'h2';
}
// override the computed `as` prop if user passed an `as` prop
props.as = as || props.as;
return props;
};
var _Heading = function _Heading(_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: 'Heading',
as: as,
validAsValues: validAsValues
});
var props = getHeadingProps({
as: as,
size: size,
weight: weight,
color: color,
testID: testID
});
return /*#__PURE__*/jsx(BaseText, _objectSpread(_objectSpread(_objectSpread({}, props), {}, {
ref: ref,
textAlign: textAlign,
textDecorationLine: textDecorationLine
}, getStyledProps(styledProps)), {}, {
children: children
}));
};
var Heading = /*#__PURE__*/React__default.forwardRef(_Heading);
export { Heading, getHeadingProps };
//# sourceMappingURL=Heading.js.map