backpack-ui/dist/components/promotedGuidebook/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 _content;

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 _color = require("../../utils/color");

var _font = require("../../utils/font");

var _font2 = _interopRequireDefault(_font);

var _grid = require("../../utils/grid");

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

var _heading3 = _interopRequireDefault(_heading2);

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

var _moreLink3 = _interopRequireDefault(_moreLink2);

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

var styles = {
  container: (0, _defineProperty3.default)({
    color: _colors2.default.textPrimary,
    boxShadow: "0 3px 29px 0 rgba(" + (0, _color.rgb)(_colors2.default.shadowPrimary) + ", .08)",
    display: "flex",
    fontFamily: (0, _font2.default)("benton"),
    maxWidth: (0, _grid.span)(6, "static"),
    padding: (0, _grid.gutter)("static", 12, 0.5),
    textDecoration: "none"

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

  image: (0, _defineProperty3.default)({
    alignSelf: "flex-start",
    display: "block",
    width: "64px"

  }, "@media (min-width: " + _mq2.default.min[600] + ")", {
    width: "124px"
  }),

  content: (_content = {
    maxWidth: "220px",
    marginLeft: (0, _grid.gutter)("static", 12, 0.5),
    marginRight: (0, _grid.gutter)("static", 12, 0.5)

  }, (0, _defineProperty3.default)(_content, "@media (min-width: " + _mq2.default.min[480] + ")", {
    maxWidth: "360px"
  }), (0, _defineProperty3.default)(_content, "@media (min-width: " + _mq2.default.min[600] + ")", {
    marginLeft: (0, _grid.gutter)("static"),
    marginRight: (0, _grid.gutter)("static")
  }), (0, _defineProperty3.default)(_content, "@media (min-width: " + _mq2.default.min[720] + ")", {
    maxWidth: "none"
  }), _content),

  heading: (0, _defineProperty3.default)({
    fontSize: "18px",
    lineHeight: 22 / 18,
    marginTop: "2px"

  }, "@media (min-width: " + _mq2.default.min[600] + ")", {
    fontSize: "20px",
    lineHeight: 24 / 20,
    margintop: "15px"
  }),

  price: (0, _defineProperty3.default)({
    fontSize: "14px",
    lineHeight: 1,
    marginTop: "7px"

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

  description: (0, _defineProperty3.default)({
    fontSize: "12px",
    lineHeight: 20 / 12,
    marginBottom: "16px",
    marginTop: "12px"

  }, "@media (min-width: " + _mq2.default.min[600] + ")", {
    fontSize: "14px",
    lineHeight: 22 / 14,
    marginBottom: "21px",
    marginTop: "17px"
  }),

  moreLink: (0, _defineProperty3.default)({}, "@media (max-width: " + _mq2.default.max[600] + ")", {
    fontSize: "11px"
  })
};

var PromotedGuidebook = function PromotedGuidebook(_ref) {
  var title = _ref.title,
      url = _ref.url,
      imageUrl = _ref.imageUrl,
      price = _ref.price,
      description = _ref.description,
      qaHook = _ref.qaHook;
  return _react2.default.createElement(
    "a",
    {
      className: "PromotedGuidebook",
      href: url,
      style: styles.container,
      "data-testid": qaHook ? "promoted-guidebook-link" : null
    },
    _react2.default.createElement("img", {
      style: styles.image,
      src: imageUrl,
      alt: ""
    }),
    _react2.default.createElement(
      "div",
      { style: styles.content },
      _react2.default.createElement(
        _heading3.default,
        {
          level: 4,
          weight: "thick",
          tracking: "tight",
          override: styles.heading
        },
        title
      ),
      _react2.default.createElement(
        "div",
        { style: styles.price },
        "$",
        price.usd
      ),
      _react2.default.createElement(
        "p",
        { style: styles.description },
        description
      ),
      _react2.default.createElement(
        _moreLink3.default,
        { qaHook: qaHook ? "visit-shop-link" : null, isNested: true, caps: true, style: styles.moreLink },
        "Visit Shop"
      )
    )
  );
};

PromotedGuidebook.propTypes = {
  title: _propTypes2.default.string.isRequired,
  url: _propTypes2.default.string.isRequired,
  imageUrl: _propTypes2.default.string.isRequired,
  price: _propTypes2.default.objectOf(_propTypes2.default.string).isRequired,
  description: _propTypes2.default.string.isRequired,
  qaHook: _propTypes2.default.bool
};

PromotedGuidebook.defaultProps = {
  title: null,
  url: null,
  imageUrl: null,
  price: null,
  description: null,
  qaHook: false
};

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