boldr-ui/Headline/Headline.js

UI components for Boldr

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var validTypes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

/**
 * A heading should always be the visual and describing start of
 * another content section.
 */
var Headline = function Headline(_ref) {
  var _mergeClassNames;

  var className = _ref.className,
      type = _ref.type,
      theme = _ref.theme,
      lightText = _ref.lightText,
      children = _ref.children,
      rest = (0, _objectWithoutProperties3.default)(_ref, ['className', 'type', 'theme', 'lightText', 'children']);

  var themeClassName = theme || type;
  var finalClassName = (0, _classnames2.default)((_mergeClassNames = {
    'boldrui-h': true,
    'boldrui-h-light': lightText
  }, (0, _defineProperty3.default)(_mergeClassNames, themeClassName, true), (0, _defineProperty3.default)(_mergeClassNames, className, className && className.length), _mergeClassNames));

  switch (type) {
    case 'h1':
      return _react2.default.createElement(
        'h1',
        (0, _extends3.default)({}, rest, { className: finalClassName }),
        children
      );
    case 'h2':
      return _react2.default.createElement(
        'h2',
        (0, _extends3.default)({}, rest, { className: finalClassName }),
        children
      );
    case 'h3':
      return _react2.default.createElement(
        'h3',
        (0, _extends3.default)({}, rest, { className: finalClassName }),
        children
      );
    case 'h4':
      return _react2.default.createElement(
        'h4',
        (0, _extends3.default)({}, rest, { className: finalClassName }),
        children
      );
    case 'h5':
      return _react2.default.createElement(
        'h5',
        (0, _extends3.default)({}, rest, { className: finalClassName }),
        children
      );
    case 'h6':
      return _react2.default.createElement(
        'h6',
        (0, _extends3.default)({}, rest, { className: finalClassName }),
        children
      );
    default:
      return '';
  }
};
Headline.propTypes = process.env.NODE_ENV !== "production" ? {
  children: _propTypes2.default.node.isRequired,
  lightText: _propTypes2.default.bool,
  /**
   * The semantic type of the heading, default to `h1`.
   */
  type: _propTypes2.default.oneOf(validTypes),

  /**
   * To separate the semantic meaning and the visual styles,
   * you can also set an optional theme, to have the semantic
   * meaning of a `h1` but the visual appearance of a `h4`.
   */
  theme: _propTypes2.default.oneOf(validTypes),
  className: _propTypes2.default.string
} : {};
Headline.defaultProps = {
  type: 'h1'
};

exports.default = Headline;