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

Lonely Planet's Components

"use strict";

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

var _defineProperty2 = require("babel-runtime/helpers/defineProperty");

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _heading, _center, _rightBottom;

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 _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _mq = require("../../styles/mq");

var _mq2 = _interopRequireDefault(_mq);

var _typography = require("../../styles/typography");

var _zIndex = require("../../styles/zIndex");

var _zIndex2 = _interopRequireDefault(_zIndex);

var _color = require("../../utils/color");

var _icon = require("../../utils/icon");

var _icon2 = _interopRequireDefault(_icon);

var _propTypes3 = require("../../utils/propTypes");

var _propTypes4 = _interopRequireDefault(_propTypes3);

var _bulletDescription = require("../bulletDescription");

var _bulletDescription2 = _interopRequireDefault(_bulletDescription);

var _button2 = require("../button");

var _button3 = _interopRequireDefault(_button2);

var _container = require("../container");

var _container2 = _interopRequireDefault(_container);

var _gradientOverlay = require("../gradientOverlay");

var _gradientOverlay2 = _interopRequireDefault(_gradientOverlay);

var _heading2 = require("../heading");

var _heading3 = _interopRequireDefault(_heading2);

var _heroImageContainer = require("../heroImageContainer");

var _heroImageContainer2 = _interopRequireDefault(_heroImageContainer);

var _link = require("../link");

var _link2 = _interopRequireDefault(_link);

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

var styles = {
  base: {
    width: "100%",
    height: "100%",
    transform: "translateZ(0)"
  },
  link: {
    color: _colors2.default.bgPrimary,
    cursor: "pointer"
  },
  bullets: (0, _defineProperty3.default)({
    color: _colors2.default.bgPrimary,
    fontSize: "14px",
    marginBottom: "24px",
    fontWeight: _typography.fontWeightMedium
  }, "@media (min-width: " + _mq2.default.min[720] + ")", {
    marginBottom: "32px"
  }),
  adContainer: {
    marginBottom: "20px"
  },
  heading: (_heading = {
    color: _colors2.default.bgPrimary,
    fontSize: "32px",
    letterSpacing: "0",
    marginBottom: "16px"
  }, (0, _defineProperty3.default)(_heading, "@media (min-width: " + _mq2.default.min[600] + ")", {
    letterSpacing: "-0.56px",
    fontSize: "calc(11px + 5vw)"
  }), (0, _defineProperty3.default)(_heading, "@media (min-width: " + _mq2.default.min[720] + ")", {
    fontSize: "60px",
    marginBottom: "20px"
  }), (0, _defineProperty3.default)(_heading, "@media (min-width: " + _mq2.default.min[840] + ")", {
    fontSize: "68px"
  }), _heading),
  graphic: {
    maxWidth: "100%",
    marginBottom: "14px"
  },
  button: (0, _defineProperty3.default)({
    paddingRight: "30px",
    paddingLeft: "30px",
    marginTop: "16px",
    icon: {
      fontSize: "18px",
      marginRight: "16px"
    }
  }, "@media (min-width: " + _mq2.default.min[720] + ")", {
    paddingRight: "46px",
    paddingLeft: "46px",
    marginTop: "20px"
  }),
  fullOverlay: {
    position: "absolute",
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    backgroundColor: "rgba(" + (0, _color.rgb)(_colors2.default.bgOverlay) + ", 0.3)"
  },
  position: {
    center: (_center = {
      display: "flex",
      width: "100%",
      position: "relative",
      zIndex: _zIndex2.default.slideshowSlide,
      textAlign: "center",
      margin: "0 auto",
      height: "100%",
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center"
    }, (0, _defineProperty3.default)(_center, "@media (min-width: " + _mq2.default.min[720] + ")", {
      width: "68%"
    }), (0, _defineProperty3.default)(_center, "@media (min-width: " + _mq2.default.min[1290] + ")", {
      width: "50%"
    }), _center),
    leftBottom: (0, _defineProperty3.default)({
      bottom: "5.5em",
      zIndex: _zIndex2.default.slideshowSlide
    }, "@media (min-width: " + _mq2.default.min[720] + ")", {
      bottom: "11em"
    }),
    rightBottom: (_rightBottom = {
      position: "absolute",
      bottom: "20px",
      padding: 10,
      right: 0,
      zIndex: _zIndex2.default.slideshowSlide

    }, (0, _defineProperty3.default)(_rightBottom, "@media (max-width: " + _mq2.default.max[480] + ")", {
      right: "-33px"
    }), (0, _defineProperty3.default)(_rightBottom, "@media (min-width: " + _mq2.default.min[480] + ") and (max-width: " + _mq2.default.max[768] + ")", {
      right: "-48px"
    }), (0, _defineProperty3.default)(_rightBottom, "@media (max-width: " + _mq2.default.max[768] + ")", {
      transform: "scale(.7)"
    }), (0, _defineProperty3.default)(_rightBottom, "@media (min-width: " + _mq2.default.min[720] + ")", {
      bottom: "8.2em"
    }), _rightBottom)
  }
};

var Slide = function Slide(_ref) {
  var image = _ref.image,
      description = _ref.description,
      fullOverlay = _ref.fullOverlay,
      fullOverlayStyles = _ref.fullOverlayStyles,
      headline = _ref.headline,
      graphic = _ref.graphic,
      adPosition = _ref.adPosition,
      gradientColor = _ref.gradientColor,
      position = _ref.position,
      callToAction = _ref.callToAction;
  return _react2.default.createElement(
    "div",
    { className: "Slide", style: styles.base },
    _react2.default.createElement(_heroImageContainer2.default, { imagePath: image }),
    _react2.default.createElement(_gradientOverlay2.default, { gradientType: "leftCorner", color: gradientColor }),
    fullOverlay && _react2.default.createElement("div", {
      className: "FullOverlay",
      style: [styles.fullOverlay, fullOverlayStyles && fullOverlayStyles]
    }),
    _react2.default.createElement(
      _container2.default,
      {
        style: {
          height: "100%"
        }
      },
      _react2.default.createElement(
        "div",
        { style: styles.position[position] },
        description && _react2.default.createElement(_bulletDescription2.default, {
          description: description,
          style: styles.bullets
        }),
        _react2.default.createElement(
          _heading3.default,
          {
            level: 1,
            size: "huge",
            weight: "thick",
            override: styles.heading
          },
          _react2.default.createElement(
            _link2.default,
            { to: callToAction.link, onClick: callToAction.onClick, style: styles.link },
            graphic && _react2.default.createElement("img", { src: graphic, style: styles.graphic, alt: headline }),
            !graphic && headline
          )
        ),
        adPosition && _react2.default.createElement("div", {
          id: adPosition,
          style: styles.adContainer
        }),
        _react2.default.createElement(
          _link2.default,
          { to: callToAction.link },
          _react2.default.createElement(
            _button3.default,
            {
              rounded: true,
              color: callToAction.theme,
              border: callToAction.border,
              size: "large",
              customStyles: styles.button,
              onClick: callToAction.onClick
            },
            callToAction.icon && (0, _icon2.default)(callToAction.icon, { style: styles.button.icon }),
            callToAction.text
          )
        )
      )
    )
  );
};

Slide.propTypes = {
  image: _propTypes2.default.string.isRequired,
  headline: _propTypes2.default.string.isRequired,
  graphic: _propTypes2.default.string,
  callToAction: _propTypes2.default.shape({
    text: _propTypes2.default.string,
    theme: _propTypes2.default.string,
    border: _propTypes2.default.bool,
    link: _propTypes2.default.string,
    icon: _propTypes2.default.string,
    onClick: _propTypes2.default.func
  }).isRequired,
  description: _propTypes2.default.arrayOf(_propTypes2.default.string),
  fullOverlay: _propTypes2.default.bool,
  fullOverlayStyles: _propTypes4.default.style,
  adPosition: _propTypes2.default.string,
  gradientColor: _propTypes2.default.string,
  position: _propTypes2.default.string
};

Slide.defaultProps = {
  description: [],
  gradientColor: _colors2.default.bgOverlay,
  position: "center"
};

exports.default = (0, _radium2.default)(Slide);