pouncejs/dist/cjs/components/Heading/Heading.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.Heading = exports.HeadingLevelContext = exports.DEFAULT_HEADING_LEVEL = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireDefault(require("react"));

var _Box = _interopRequireDefault(require("../Box"));

var _useHeadingStyles = _interopRequireDefault(require("./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">`).
var DEFAULT_HEADING_LEVEL = 2;
exports.DEFAULT_HEADING_LEVEL = DEFAULT_HEADING_LEVEL;

var HeadingLevelContext = /*#__PURE__*/_react.default.createContext(null);

exports.HeadingLevelContext = HeadingLevelContext;

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

  var level = _react.default.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.default.createElement(_Box.default, (0, _extends2.default)({
    as: as || hTag,
    ref: ref,
    fontWeight: "normal"
  }, styles, rest));
});

exports.Heading = Heading;
var _default = Heading;
exports.default = _default;