UNPKG

backpack-ui

Version:

Lonely Planet's Components

275 lines (223 loc) 6.27 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _base2; var _react = require("react"); var _react2 = _interopRequireDefault(_react); var _radium = require("radium"); var _radium2 = _interopRequireDefault(_radium); var _settings = require("../../../settings.json"); var _color = require("../../utils/color"); var _heading = require("../heading"); var _heading2 = _interopRequireDefault(_heading); var _price = require("../price"); var _price2 = _interopRequireDefault(_price); var _moreLink = require("../moreLink"); var _moreLink2 = _interopRequireDefault(_moreLink); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function calculateContentWidth(imageWidth) { return (630 - 60 - imageWidth - 30) / (630 - 60) * 100 + "%"; } var styles = { container: { base: _defineProperty({ backgroundColor: _settings.color.white, boxShadow: "0 0 20px rgba(" + (0, _color.rgb)(_settings.color.black) + ", .05)", overflow: "hidden" }, "@media (min-width: " + _settings.media.min["600"] + ")", { padding: 30 / 630 * 100 + "%" }) }, content: { base: (_base2 = {}, _defineProperty(_base2, "@media (max-width: " + _settings.media.max["600"] + ")", { padding: "25px" }), _defineProperty(_base2, "@media (min-width: " + _settings.media.min["600"] + ")", { float: "right" }), _base2), align: { center: { alignSelf: "center" } }, type: { activity: _defineProperty({}, "@media (min-width: " + _settings.media.min["600"] + ")", { width: calculateContentWidth(300) }), book: _defineProperty({}, "@media (min-width: " + _settings.media.min["600"] + ")", { width: calculateContentWidth(80) }) } }, heading: { base: { fontSize: "20px", lineHeight: 26 / 20 } }, description: { base: { color: _settings.color.text, fontSize: "14px", lineHeight: 1.5, marginTop: "1em", paddingRight: 40 / 14 + "em" } }, image: { base: _defineProperty({}, "@media (min-width: " + _settings.media.min["600"] + ")", { float: "left", marginRight: 30 / 630 * 100 + "%" }), type: { activity: _defineProperty({}, "@media (min-width: " + _settings.media.min["600"] + ")", { width: 300 / (630 - 60) * 100 + "%" }), book: _defineProperty({}, "@media (min-width: " + _settings.media.min["600"] + ")", { width: 80 / (630 - 60) * 100 + "%" }) }, anchor: { display: "block" }, img: { display: "block" } }, category: { base: { color: _settings.color.lightText, fontSize: "11px", lineHeight: 1, marginBottom: 4 / 11 + "em", textTransform: "uppercase" } }, price: { base: { marginTop: "12px" } }, moreLink: { base: { marginTop: "16px" } } }; function Callout(_ref) { var type = _ref.type; var heading = _ref.heading; var slug = _ref.slug; var image = _ref.image; var price = _ref.price; var description = _ref.description; var category = _ref.category; var align = _ref.align; return _react2.default.createElement( "div", { className: "Callout", style: styles.container.base, "data-type": type }, _react2.default.createElement( "div", { className: "Callout-image", style: [styles.image.base, type && styles.image.type[type]] }, _react2.default.createElement( "a", { href: slug, style: styles.image.anchor }, _react2.default.createElement("img", { style: styles.image.img, src: image, alt: "" }) ) ), _react2.default.createElement( "div", { className: "Callout-content", style: [styles.content.base, type && styles.content.type[type], align && styles.content.align[align]] }, category && _react2.default.createElement( "div", { style: styles.category.base }, category, " ", type ), _react2.default.createElement( _heading2.default, { size: "medium", weight: "thick", override: styles.heading.base }, _react2.default.createElement( "a", { href: slug, style: { color: "inherit" } }, heading ) ), price && price.amount && _react2.default.createElement( "div", { className: "Callout-price", style: styles.price.base }, _react2.default.createElement(_price2.default, { amount: price.amount, currency: price.currency, thin: true }) ), description && _react2.default.createElement( "p", { style: styles.description.base }, description ), _react2.default.createElement( "div", { className: "Callout-moreLink", style: styles.moreLink.base }, _react2.default.createElement( _moreLink2.default, { href: slug, size: "small", caps: true }, "Learn more" ) ) ) ); } Callout.propTypes = { type: _react2.default.PropTypes.oneOf(["activity", "book"]).isRequired, heading: _react2.default.PropTypes.string.isRequired, slug: _react2.default.PropTypes.string.isRequired, image: _react2.default.PropTypes.string.isRequired, price: _react2.default.PropTypes.shape(_price2.default.propTypes), description: _react2.default.PropTypes.string, category: _react2.default.PropTypes.string, align: _react2.default.PropTypes.oneOf(["", "center"]) }; Callout.defaultProps = { type: "", heading: "", slug: "", image: "", price: {}, description: "", category: "", align: "" }; Callout.styles = styles; exports.default = (0, _radium2.default)(Callout);