@massds/mayflower-react/dist/CompHeading/index.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
/**
 * CompHeading module.
 * @module @massds/mayflower-react/CompHeading
 * @requires module:@massds/mayflower-assets/scss/01-atoms/comp-heading
 */

var CompHeading = function CompHeading(props) {
  var compHeading = props;
  var Element = "h" + (compHeading.sub ? 3 : compHeading.level);
  var classes = ['ma__comp-heading'];
  if (compHeading.color) {
    classes.push("ma__comp-heading--" + compHeading.color);
  }
  if (compHeading.centered) {
    classes.push('ma__comp-heading--centered');
  }
  if (compHeading.sidebar) {
    classes.push('ma__comp-heading--sidebar');
  }
  classes = classes.join(' ');
  return /*#__PURE__*/_react["default"].createElement(Element, {
    className: classes,
    tabIndex: "-1",
    id: compHeading.id || null
  }, compHeading.title,
  // Allows compHeading to render custom children component (this feature is used in rideshare report and it's not in Mayflower PatternLab)
  compHeading.children, compHeading.titleContext && /*#__PURE__*/_react["default"].createElement("span", {
    className: "visually-hidden"
  }, compHeading.titleContext));
};
CompHeading.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The heading text displayed. */
  title: _propTypes["default"].string,
  /** Hidden context of title element for accessibility. */
  titleContext: _propTypes["default"].string,
  /** The heading level e.g. H1, H2, etc. */
  level: _propTypes["default"].number,
  /** Being deprecated, use level instead. */
  sub: _propTypes["default"].bool,
  /** The color of the heading underline. */
  color: _propTypes["default"].string,
  /** The heading id. */
  id: _propTypes["default"].string,
  /** Whether you want the heading to be centered or left on the page. */
  centered: _propTypes["default"].bool,
  /** Whether you want the heading to be a sidebar or not. */
  sidebar: _propTypes["default"].bool,
  children: _propTypes["default"].node
} : {};
CompHeading.defaultProps = {
  titleContext: '',
  level: 2,
  sub: false,
  color: '',
  id: '',
  centered: false,
  sidebar: false
};
var _default = exports["default"] = CompHeading;
module.exports = exports.default;