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

Lonely Planet's Components

"use strict";

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

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

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

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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 _cardShelf = require("../cardShelf/cardShelf");

var _cardShelf2 = _interopRequireDefault(_cardShelf);

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

var _heading2 = _interopRequireDefault(_heading);

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

var _link2 = _interopRequireDefault(_link);

var _moreLink2 = require("../moreLink");

var _moreLink3 = _interopRequireDefault(_moreLink2);

var _sponsorLabel = require("../sponsorLabel");

var _sponsorLabel2 = _interopRequireDefault(_sponsorLabel);

var _video = require("../video");

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

var _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

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

var _colors2 = _interopRequireDefault(_colors);

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

var _mq2 = _interopRequireDefault(_mq);

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

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

var _propTypes4 = _interopRequireDefault(_propTypes3);

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

var arrowBackgroundColor = {
  light: _colors2.default.bgPrimary,
  dark: _colors2.default.textPrimary
};

var styles = {
  container: {
    maxWidth: "100%"
  },

  header: (0, _defineProperty3.default)({
    alignItems: "flex-end",
    display: "flex",
    flexDirection: "row",
    position: "relative",
    marginBottom: "8px"

  }, "@media (min-width: " + _mq2.default.min["360"] + ")", {
    marginBottom: "16px"
  }),

  sponsorLabel: {
    display: "block",
    marginBottom: "8px"
  },

  heading: {
    default: (0, _defineProperty3.default)({
      display: "inline-block",
      fontSize: _typography.fontSizeHeading6 + "px",
      fontWeight: _typography.fontWeightRegular,
      lineHeight: _typography.lineHeightHeading6

    }, "@media (max-width: " + _mq2.default.max["720"] + ")", {
      flexGrow: 1
    }),

    light: {
      color: _colors2.default.textPrimary
    },

    dark: {
      color: _colors2.default.textOverlay
    }
  },

  arrow: {
    default: (0, _defineProperty3.default)({}, "@media (max-width: " + _mq2.default.max["480"] + ")", {
      display: "none"
    }),

    light: {
      color: _colors2.default.textPrimary
    },

    dark: {
      color: _colors2.default.borderPrimary
    },

    normal: (0, _defineProperty3.default)({
      top: "-38px"

    }, "@media (min-width: " + _mq2.default.min["768"] + ")", {
      top: "-68px"
    }),

    compact: (0, _defineProperty3.default)({
      top: "-32px"

    }, "@media (min-width: " + _mq2.default.min["768"] + ")", {
      top: "-34px"
    })
  },

  moreLink: (0, _defineProperty3.default)({
    bottom: "8px",
    fontWeight: _typography.fontWeightRegular,
    position: "absolute",
    right: 0

  }, "@media (max-width: " + _mq2.default.max["720"] + ")", {
    display: "none"
  }),

  bottomMoreLink: (0, _defineProperty3.default)({
    backgroundColor: _colors2.default.linkPrimary,
    borderRadius: "100px",
    color: _colors2.default.textOverlay,
    display: "inline-block",
    fontWeight: _typography.fontWeightRegular,
    marginBottom: "8px",
    padding: "1.3em 2em 1.2em",
    transition: "background-color " + _timing2.default.default + " ease-in-out",

    ":hover": {
      backgroundColor: (0, _color.lighten)(_colors2.default.linkPrimary, 7),
      color: _colors2.default.textOverlay
    },

    ":active": {
      backgroundColor: (0, _color.lighten)(_colors2.default.linkPrimary, 7),
      color: _colors2.default.textOverlay
    },

    ":focus": {
      backgroundColor: (0, _color.lighten)(_colors2.default.linkPrimary, 7),
      color: _colors2.default.textOverlay
    }

  }, "@media (min-width: " + _mq2.default.min["720"] + ")", {
    display: "none"
  }),

  adSlot: (0, _defineProperty3.default)({
    paddingBottom: "8px",
    paddingLeft: "20px"

  }, "@media (max-width: " + _mq2.default.max["720"] + ")", {
    marginLeft: "auto"
  })
};

var CardShelfVideoSlider = function (_React$Component) {
  (0, _inherits3.default)(CardShelfVideoSlider, _React$Component);

  function CardShelfVideoSlider() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, CardShelfVideoSlider);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = CardShelfVideoSlider.__proto__ || (0, _getPrototypeOf2.default)(CardShelfVideoSlider)).call.apply(_ref, [this].concat(args))), _this), _this.getHeadingComponent = function () {
      var _this$props = _this.props,
          heading = _this$props.heading,
          sponsorLabel = _this$props.sponsorLabel,
          theme = _this$props.theme;


      return _react2.default.createElement(
        _react2.default.Fragment,
        null,
        sponsorLabel && _react2.default.createElement(_sponsorLabel2.default, {
          text: sponsorLabel,
          style: styles.sponsorLabel
        }),
        _react2.default.createElement(
          _heading2.default,
          {
            level: 2,
            override: (0, _extends3.default)({}, styles.heading.default, styles.heading[theme])
          },
          heading
        )
      );
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(CardShelfVideoSlider, [{
    key: "render",
    value: function render() {
      var _props = this.props,
          children = _props.children,
          mobile = _props.mobile,
          heading = _props.heading,
          href = _props.href,
          adSlot = _props.adSlot,
          theme = _props.theme,
          spacing = _props.spacing,
          style = _props.style;


      return _react2.default.createElement(
        _cardShelf2.default,
        {
          className: "CardShelfVideoSlider",
          style: [styles.container, style]
        },
        _react2.default.createElement(
          "header",
          { style: styles.header },
          heading && href && _react2.default.createElement(
            _link2.default,
            { to: href },
            this.getHeadingComponent()
          ),
          heading && !href && this.getHeadingComponent(),
          adSlot && _react2.default.createElement(
            "div",
            { style: styles.adSlot },
            adSlot
          ),
          href && _react2.default.createElement(
            _link2.default,
            { to: href },
            _react2.default.createElement(
              _moreLink3.default,
              {
                style: styles.moreLink,
                size: "small",
                caps: true
              },
              "View all"
            )
          )
        ),
        _react2.default.createElement(
          "div",
          { style: styles.slider },
          _react2.default.createElement(
            _video.VideoSlider,
            {
              infinite: false,
              arrows: !mobile,
              arrowProps: {
                backgroundColor: arrowBackgroundColor[theme],
                style: [styles.arrow.default, styles.arrow[theme], styles.arrow[spacing]]
              }
            },
            _react2.default.Children.map(children.slice(0, mobile ? 4 : children.length), function (child, i) {
              return _react2.default.createElement(
                "div",
                { key: i },
                child
              );
            })
          )
        ),
        href && _react2.default.createElement(
          _link2.default,
          { to: href },
          _react2.default.createElement(
            _moreLink3.default,
            {
              style: styles.bottomMoreLink,
              size: "small",
              caps: true
            },
            "View all"
          )
        )
      );
    }
  }]);
  return CardShelfVideoSlider;
}(_react2.default.Component);

CardShelfVideoSlider.propTypes = {
  children: _propTypes2.default.arrayOf(_propTypes2.default.element).isRequired,
  mobile: _propTypes2.default.bool,
  heading: _propTypes2.default.string,
  sponsorLabel: _propTypes2.default.string,
  href: _propTypes2.default.string,
  adSlot: _propTypes2.default.element,
  theme: _propTypes2.default.oneOf(["light", "dark"]),
  spacing: _propTypes2.default.oneOf(["normal", "compact"]),
  style: _propTypes4.default.style
};

CardShelfVideoSlider.defaultProps = {
  theme: "light",
  spacing: "normal"
};

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