backpack-ui
Version:
Lonely Planet's Components
306 lines (248 loc) • 9.29 kB
JavaScript
"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 _content, _rightContent, _leftContentMiddle, _title, _paragraph;
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 _heading = require("../heading");
var _heading2 = _interopRequireDefault(_heading);
var _container = require("../container");
var _container2 = _interopRequireDefault(_container);
var _videoPopout = require("../video/videoPopout");
var _videoPopout2 = _interopRequireDefault(_videoPopout);
var _videoEmbed = require("../video/videoEmbed");
var _videoEmbed2 = _interopRequireDefault(_videoEmbed);
var _mq = require("../../styles/mq");
var _mq2 = _interopRequireDefault(_mq);
var _typography = require("../../styles/typography");
var _colors = require("../../styles/colors");
var _colors2 = _interopRequireDefault(_colors);
var _dimensions = require("../../styles/dimensions");
var _dimensions2 = _interopRequireDefault(_dimensions);
var _zIndex = require("../../styles/zIndex");
var _zIndex2 = _interopRequireDefault(_zIndex);
var _font = require("../../utils/font");
var _font2 = _interopRequireDefault(_font);
var _grid = require("../../utils/grid");
var _propTypes3 = require("../../utils/propTypes");
var _propTypes4 = _interopRequireDefault(_propTypes3);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var styles = {
container: {
backgroundColor: "#1f1f1f",
color: _colors2.default.bgPrimary,
display: "flex",
fontFamily: (0, _font2.default)("benton"),
position: "relative"
},
background: {
backgroundSize: "cover",
backgroundPosition: "center",
filter: "grayscale(100%)",
height: "100%",
left: 0,
opacity: 0.4,
position: "absolute",
right: 0,
top: 0,
width: "100%",
zIndex: _zIndex2.default.default
},
content: (_content = {
display: "flex",
paddingBottom: (0, _grid.gutter)("static"),
paddingTop: (0, _grid.gutter)("static"),
width: "100%",
zIndex: _zIndex2.default.default + 1
}, (0, _defineProperty3.default)(_content, "@media (max-width: " + _mq2.default.max["960"] + ")", {
flexDirection: "column"
}), (0, _defineProperty3.default)(_content, "@media (min-width: " + _mq2.default.min["960"] + ")", {
paddingBottom: "60px",
paddingTop: "56px"
}), _content),
leftContent: (0, _defineProperty3.default)({
display: "flex",
flexDirection: "column",
justifyContent: "flex-start",
position: "relative"
}, "@media (min-width: " + _mq2.default.min["960"] + ")", {
width: "40%",
paddingRight: "80px"
}),
rightContent: (_rightContent = {
display: "flex",
flex: "0 0 auto",
flexDirection: "column",
justifyContent: "center",
flexGrow: 1
}, (0, _defineProperty3.default)(_rightContent, "@media (max-width: " + _mq2.default.max["480"] + ")", {
paddingTop: (0, _grid.gutter)("static", 1, 0.5)
}), (0, _defineProperty3.default)(_rightContent, "@media (min-width: " + _mq2.default.min["480"] + ") and (max-width: " + _mq2.default.max["960"] + ")", {
paddingTop: (0, _grid.gutter)("static")
}), (0, _defineProperty3.default)(_rightContent, "@media (min-width: " + _mq2.default.min["960"] + ")", {
width: (0, _grid.percentage)("718px", _dimensions2.default.maxWidth + "px")
}), _rightContent),
leftContentTop: {
paddingBottom: (0, _grid.gutter)("static")
},
leftContentMiddle: (_leftContentMiddle = {
display: "flex",
flexDirection: "column",
flexGrow: 1,
justifyContent: "center"
}, (0, _defineProperty3.default)(_leftContentMiddle, "@media (min-width: " + _mq2.default.min["720"] + ") and (max-width: " + _mq2.default.max["960"] + ")", {
flexDirection: "row",
justifyContent: "flex-start",
paddingBottom: 0
}), (0, _defineProperty3.default)(_leftContentMiddle, "@media (min-width: " + _mq2.default.min["960"] + ")", {
paddingBottom: "60px"
}), _leftContentMiddle),
adSlot: (0, _defineProperty3.default)({
float: "right"
}, "@media (min-width: " + _mq2.default.min["960"] + ")", {
float: "none",
paddingBottom: "8px",
paddingTop: "32px"
}),
zone: (0, _defineProperty3.default)({
display: "inline-block",
fontSize: "18px",
fontWeight: _typography.fontWeightLight,
left: 0,
lineHeight: _typography.lineHeightHeading6,
position: "relative",
top: 0
}, "@media (min-width: " + _mq2.default.min["720"] + ")", {
fontSize: _typography.fontSizeHeading6 + "px"
}),
title: (_title = {
color: _colors2.default.textOverlay,
fontSize: _typography.fontSizeHeading3 + "px",
fontWeight: _typography.fontWeightMedium,
lineHeight: _typography.lineHeightHeading3
}, (0, _defineProperty3.default)(_title, "@media (min-width: " + _mq2.default.min["720"] + ") and (max-width: " + _mq2.default.max["960"] + ")", {
fontSize: _typography.fontSizeHeading4 + "px",
lineHeight: _typography.lineHeightHeading4,
paddingRight: "20px",
width: "50%"
}), (0, _defineProperty3.default)(_title, "@media (max-width: " + _mq2.default.max["720"] + ")", {
fontSize: _typography.fontSizeHeading5 + "px",
lineHeight: _typography.lineHeightHeading5
}), _title),
paragraph: (_paragraph = {
fontSize: _typography.fontSizeBodyArticleSmall + "px",
fontWeight: _typography.fontWeightLight,
lineHeight: _typography.lineHeightBodyArticleSmall,
marginTop: "24px"
}, (0, _defineProperty3.default)(_paragraph, "@media (min-width: " + _mq2.default.min["720"] + ") and (max-width: " + _mq2.default.max["960"] + ")", {
marginTop: 0,
paddingLeft: "20px",
width: "50%"
}), (0, _defineProperty3.default)(_paragraph, "@media (max-width: " + _mq2.default.max["720"] + ")", {
fontSize: _typography.fontSizeBodySmall + "px",
lineHeight: _typography.lineHeightBodySmall,
marginTop: "12px"
}), _paragraph)
};
var SpotlightZone = function SpotlightZone(_ref) {
var zone = _ref.zone,
title = _ref.title,
paragraph = _ref.paragraph,
videoPopout = _ref.videoPopout,
videoEmbed = _ref.videoEmbed,
backgroundImageUrl = _ref.backgroundImageUrl,
adSlot = _ref.adSlot,
style = _ref.style;
return _react2.default.createElement(
"div",
{
className: "SpotlightZone",
style: [styles.container, style]
},
_react2.default.createElement(
_container2.default,
{ style: styles.content },
_react2.default.createElement(
"div",
{ style: styles.leftContent },
_react2.default.createElement(
"div",
{ style: styles.leftContentTop },
_react2.default.createElement(
"div",
{ style: styles.zone },
zone
),
_react2.default.createElement(
"div",
{ style: styles.adSlot },
adSlot
)
),
_react2.default.createElement(
"div",
{ style: styles.leftContentMiddle },
_react2.default.createElement(
_heading2.default,
{
level: 2,
tracking: "tight",
weight: "thin",
override: styles.title
},
title
),
_react2.default.createElement("p", {
style: styles.paragraph,
dangerouslySetInnerHTML: { __html: paragraph }
})
)
),
_react2.default.createElement(
"div",
{ style: styles.rightContent },
_react2.default.createElement(_videoPopout2.default, (0, _extends3.default)({}, videoPopout, {
videoEmbed: (0, _extends3.default)({}, videoEmbed, {
vjsLP: (0, _extends3.default)({
showTitle: false,
showDescription: false
}, videoEmbed.vjsLP || {})
}),
style: { height: "auto" }
}))
)
),
_react2.default.createElement("div", {
style: [styles.background, { backgroundImage: backgroundImageUrl ? "url(\"" + backgroundImageUrl + "\")" : "none" }],
"aria-hidden": "true"
})
);
};
SpotlightZone.propTypes = {
zone: _propTypes2.default.string.isRequired,
title: _propTypes2.default.string.isRequired,
paragraph: _propTypes2.default.string.isRequired,
videoPopout: _propTypes2.default.shape(_videoPopout2.default.propTypes).isRequired,
videoEmbed: _propTypes2.default.shape(_videoEmbed2.default.propTypes).isRequired,
backgroundImageUrl: _propTypes2.default.string.isRequired,
adSlot: _propTypes2.default.element,
style: _propTypes4.default.style
};
SpotlightZone.defaultProps = {
zone: "",
title: "",
paragraph: "",
videoPopout: {},
videoEmbed: {},
backgroundImageUrl: ""
};
exports.default = (0, _radium2.default)(SpotlightZone);