pouncejs/dist/esm/components/Heading/Heading.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import Box from '../Box';
import useHeadingStyles from './useHeadingStyles'; // Default heading levels to `h2`:
//
// This is so that you can drop `<Heading>` on a page _anywhere_ and it will be
// semantically correct. Since you should _usually_ only have 1 `h1` on the page,
// that can be done by explicitly overriding the `as` prop (`<Heading as="h1">`).

export var DEFAULT_HEADING_LEVEL = 2;
export var HeadingLevelContext = /*#__PURE__*/React.createContext(null);

/**
 * Responsive typographic component. Anywhere you want to add a title to something
 * then you can use this
 * */
export var Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
  var _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'medium' : _ref$size,
      as = _ref.as,
      rest = _objectWithoutPropertiesLoose(_ref, ["size", "as"]);

  var styles = useHeadingStyles({
    size: size
  });
  var level = React.useContext(HeadingLevelContext); // `Math.min` makes sure that the heading level is never above a h6

  var hTag = 'h' + Math.min(level || DEFAULT_HEADING_LEVEL, 6);
  return /*#__PURE__*/React.createElement(Box, _extends({
    as: as || hTag,
    ref: ref,
    fontWeight: "normal"
  }, styles, rest));
});
export default Heading;