backpack-ui
Version:
Lonely Planet's Components
138 lines (100 loc) • 3.19 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _radium = require("radium");
var _radium2 = _interopRequireDefault(_radium);
var _objectAssign = require("object-assign");
var _objectAssign2 = _interopRequireDefault(_objectAssign);
var _settings = require("../../../settings.json");
var _settings2 = _interopRequireDefault(_settings);
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 " + _settings2.default.color.gray,
paddingBottom: ".7rem",
marginBottom: (0, _grid.gutter)("static")
},
top: {
borderTop: ".1rem solid " + _settings2.default.color.gray,
paddingTop: ".7rem",
marginTop: (0, _grid.gutter)("static")
}
}
},
heading: {
base: {
float: "left"
}
},
link: {
base: {
float: "right"
}
}
};
function ContentHeader(_ref) {
var title = _ref.title;
var heading = _ref.heading;
var border = _ref.border;
var 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,
_extends({}, heading, { override: headingStyle }),
title
),
hasLink && _react2.default.createElement(_moreLink2.default, _extends({}, moreLink, { style: styles.link.base, caps: true }))
);
}
ContentHeader.propTypes = {
/**
* Title of the content widget
*/
title: _react2.default.PropTypes.string.isRequired,
/**
* Options for Heading component
*/
heading: _react2.default.PropTypes.shape(_heading2.default.propTypes).isRequired,
/**
* Adds a border to the header
*/
border: _react2.default.PropTypes.oneOf(["", "top", "bottom"]),
/**
* Options for MoreLink component
*/
moreLink: _react2.default.PropTypes.shape(_moreLink2.default.propTypes)
};
ContentHeader.defaultProps = {
title: "",
heading: {},
border: "",
moreLink: {}
};
ContentHeader.styles = styles;
exports.default = (0, _radium2.default)(ContentHeader);