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

Lonely Planet's Components

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _objectAssign2 = _interopRequireDefault(_objectAssign);

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

var _colors2 = _interopRequireDefault(_colors);

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

var styles = {
  image: {
    backgroundColor: _colors2.default.textPrimary,
    backgroundPosition: "50%",
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover",
    bottom: 0,
    left: 0,
    overflow: "hidden",
    position: "absolute",
    right: 0,
    top: 0
  }
};

var HeroImageContainer = function HeroImageContainer(_ref) {
  var children = _ref.children,
      imagePath = _ref.imagePath,
      style = _ref.style;
  return _react2.default.createElement(
    "div",
    {
      className: "HeroImageContainer",
      style: (0, _objectAssign2.default)({}, styles.image, { backgroundImage: "url(" + imagePath + ")" }, style)
    },
    children
  );
};

HeroImageContainer.propTypes = {
  children: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.arrayOf(_propTypes2.default.element)]),
  imagePath: _propTypes2.default.string.isRequired,
  style: _propTypes2.default.objectOf(_propTypes2.default.object)
};

exports.default = HeroImageContainer;