backpack-ui
Version:
Lonely Planet's Components
275 lines (223 loc) • 6.27 kB
JavaScript
"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);