@primer/react
Version:
An implementation of GitHub's Primer Design System using React
51 lines (45 loc) • 2.26 kB
JavaScript
;
var React = require('react');
var styled = require('styled-components');
var constants = require('../constants.js');
var sx = require('../sx.js');
var useRefObjectAsForwardedRef = require('../hooks/useRefObjectAsForwardedRef.js');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
const StyledHeading = styled__default.default.h2.withConfig({
displayName: "Heading__StyledHeading",
componentId: "sc-1c1dgg0-0"
})(["font-weight:", ";font-size:", ";margin:0;", ";"], constants.get('fontWeights.bold'), constants.get('fontSizes.5'), sx.default);
const Heading = /*#__PURE__*/React.forwardRef(({
as: Component = 'h2',
...props
}, forwardedRef) => {
const innerRef = React__default.default.useRef(null);
useRefObjectAsForwardedRef.useRefObjectAsForwardedRef(forwardedRef, innerRef);
if (process.env.NODE_ENV !== "production") {
/**
* The Linter yells because it thinks this conditionally calls an effect,
* but since this is a compile-time flag and not a runtime conditional
* this is safe, and ensures the entire effect is kept out of prod builds
* shaving precious bytes from the output, and avoiding mounting a noop effect
*/
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useEffect(() => {
if (innerRef.current && !(innerRef.current instanceof HTMLHeadingElement)) {
// eslint-disable-next-line no-console
console.warn('This Heading component should be an instanceof of h1-h6');
}
}, [innerRef]);
}
return /*#__PURE__*/React__default.default.createElement(StyledHeading, _extends({
as: Component
}, props, {
// @ts-ignore shh
ref: innerRef
}));
});
Heading.displayName = 'Heading';
var Heading$1 = Heading;
module.exports = Heading$1;