backpack-ui/dist/components/contentHeader/index.js

Lonely Planet's Components

"use strict";

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

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

var _extends3 = _interopRequireDefault(_extends2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _objectAssign = require("object-assign");

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _heading = require("../heading");

var _heading2 = _interopRequireDefault(_heading);

var _moreLink = require("../moreLink");

var _moreLink2 = _interopRequireDefault(_moreLink);

var _grid = require("../../utils/grid");

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

var styles = {
  container: {
    base: {},

    border: {
      bottom: {
        borderBottom: ".1rem solid " + _colors2.default.borderPrimary,
        paddingBottom: ".7rem",
        marginBottom: (0, _grid.gutter)("static")
      },

      top: {
        borderTop: ".1rem solid " + _colors2.default.borderPrimary,
        paddingTop: ".7rem",
        marginTop: (0, _grid.gutter)("static")
      }
    }
  },

  heading: {
    base: {
      float: "left"
    }
  },

  link: {
    base: {
      float: "right"
    }
  }
};

function ContentHeader(_ref) {
  var title = _ref.title,
      heading = _ref.heading,
      border = _ref.border,
      moreLink = _ref.moreLink;

  var style = {
    container: [styles.container.base]
  };

  if (border) {
    style.container.push(styles.container.border[border]);
  }

  var hasLink = moreLink && moreLink.href && moreLink.children;

  var headerClassName = hasLink ? "ContentHeader clearfix" : "ContentHeader";

  var headingStyle = (0, _objectAssign2.default)({}, hasLink && styles.heading.base, heading.override);

  return _react2.default.createElement(
    "header",
    {
      className: headerClassName,
      style: style.container
    },
    _react2.default.createElement(
      _heading2.default,
      (0, _extends3.default)({}, heading, { override: headingStyle }),
      title
    ),
    hasLink && _react2.default.createElement(_moreLink2.default, (0, _extends3.default)({}, moreLink, { style: styles.link.base, caps: true }))
  );
}

ContentHeader.propTypes = {
  /**
   * Title of the content widget
   */
  title: _propTypes2.default.string.isRequired,

  /**
   * Options for Heading component
   */
  heading: _propTypes2.default.shape(_heading2.default.propTypes).isRequired,

  /**
   * Adds a border to the header
   */
  border: _propTypes2.default.oneOf(["", "top", "bottom"]),

  /**
   * Options for MoreLink component
   */
  moreLink: _propTypes2.default.shape(_moreLink2.default.propTypes)
};

ContentHeader.defaultProps = {
  title: "",

  heading: {},

  border: "",

  moreLink: {}
};

ContentHeader.styles = styles;

exports.default = (0, _radium2.default)(ContentHeader);