UNPKG

@primer/react

Version:

An implementation of GitHub's Primer Design System using React

44 lines (41 loc) 1.97 kB
import React__default, { forwardRef, useEffect } from 'react'; import styled from 'styled-components'; import { get } from '../constants.js'; import sx from '../sx.js'; import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js'; 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.h2.withConfig({ displayName: "Heading__StyledHeading", componentId: "sc-1c1dgg0-0" })(["font-weight:", ";font-size:", ";margin:0;", ";"], get('fontWeights.bold'), get('fontSizes.5'), sx); const Heading = /*#__PURE__*/forwardRef(({ as: Component = 'h2', ...props }, forwardedRef) => { const innerRef = React__default.useRef(null); 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 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.createElement(StyledHeading, _extends({ as: Component }, props, { // @ts-ignore shh ref: innerRef })); }); Heading.displayName = 'Heading'; var Heading$1 = Heading; export { Heading$1 as default };