'use strict';

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

require('./style.css');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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 _react2.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 && _react2.default.createElement(
      'span',
      { className: 'visually-hidden' },
      compHeading.titleContext
    )
  );
};

CompHeading.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The heading text displayed. */
  title: _propTypes2.default.string.isRequired,
  /** Hidden context of title element for accessibility. */
  titleContext: _propTypes2.default.string,
  /** The heading level e.g. H1, H2, etc. */
  level: _propTypes2.default.number,
  /** Being deprecated, use level instead. */
  sub: _propTypes2.default.bool,
  /** The color of the heading underline. */
  color: _propTypes2.default.string,
  /** The heading id. */
  id: _propTypes2.default.string,
  /** Whether you want the heading to be centered or left on the page. */
  centered: _propTypes2.default.bool,
  /** Whether you want the heading to be a sidebar or not. */
  sidebar: _propTypes2.default.bool
} : {};

CompHeading.defaultProps = {
  titleContext: '',
  level: 2,
  sub: false,
  color: '',
  id: '',
  centered: false,
  sidebar: false
};

exports.default = CompHeading;
module.exports = exports['default'];