@telia/styleguide/atoms/Heading/Heading.js

This is a living styleguide, showing the Atomic Design components which should be used in Telia Norway's web applications to achieve a common look & feel, and therefore user experience.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

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

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames2 = _interopRequireDefault(require("classnames"));

/**
 * Status: *finished*.
 *
 * The Heading component should be used for page titles, sub-titles, etc.
 * Currently, only h1, h2, h3 and h4 headings have been defined.
 *
 * Margin for headings should be handled in the components that make use of this component.
 * See <a href='/information-article-5' class='link'>this sample page</a> that make use of the
 * <a href='/components/molecules#RichText' class='link'>RichText component</a> to style headings in running text.
 */
var Heading = function Heading(_ref) {
  var _classnames;

  var level = _ref.level,
      text = _ref.text,
      children = _ref.children,
      className = _ref.className,
      rest = (0, _objectWithoutProperties2.default)(_ref, ["level", "text", "children", "className"]);
  var TagName = "h".concat(level);
  return _react.default.createElement(TagName, (0, _extends2.default)({
    className: (0, _classnames2.default)('heading', (_classnames = {}, (0, _defineProperty2.default)(_classnames, className, className), (0, _defineProperty2.default)(_classnames, "heading--level-".concat(level), level), _classnames))
  }, rest), text, children);
};

Heading.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Level of this heading (1-6). */
  level: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,

  /** Content of this heading. */
  text: _propTypes.default.node,

  /** Content of this heading. */
  children: _propTypes.default.node
} : {};
var _default = Heading;
exports.default = _default;