backpack-ui/dist/components/relatedTour/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 _base;

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

var _bullet2 = require("../bullet");

var _bullet3 = _interopRequireDefault(_bullet2);

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

var _heading2 = _interopRequireDefault(_heading);

var _price = require("../price");

var _price2 = _interopRequireDefault(_price);

var _createQAHook = require("../../utils/createQAHook");

var _createQAHook2 = _interopRequireDefault(_createQAHook);

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

var styles = {
  base: {},

  elements: {
    image: {
      base: {
        display: "block",
        marginBottom: "32px",
        width: "100%"
      }
    },

    heading: {
      fontSize: "28px",
      lineHeight: 1
    },

    content: {
      base: {
        position: "relative"
      }
    },

    details: {
      base: (_base = {
        color: _colors2.default.textPrimary,
        fontSize: "1.1rem",
        lineHeight: 1,
        textTransform: "uppercase"

      }, (0, _defineProperty3.default)(_base, "@media (max-width: " + _mq2.default.max[480] + ")", {
        display: "inline-block",
        color: _colors2.default.accentGray,
        marginTop: "14px",
        fontWeight: 600
      }), (0, _defineProperty3.default)(_base, "@media (min-width: " + _mq2.default.min[480] + ")", {
        marginTop: "1.4rem"
      }), _base),

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

      item: {
        display: "inline-block"
      },

      bullet: (0, _defineProperty3.default)({
        display: "inline-block"

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

function RelatedTour(_ref) {
  var _mediaQueries;

  var title = _ref.title,
      slug = _ref.slug,
      image = _ref.image,
      price = _ref.price,
      tripLength = _ref.tripLength,
      destination = _ref.destination,
      reviews = _ref.reviews,
      clickHandler = _ref.clickHandler,
      qaHook = _ref.qaHook;

  var Details = tripLength || destination || reviews ? _react2.default.createElement(
    "div",
    {
      className: "RelatedTour-details",
      style: styles.elements.details.base
    },
    _react2.default.createElement(
      "span",
      {
        style: styles.elements.details.bullet
      },
      _react2.default.createElement(_bullet3.default, { space: "both" })
    ),
    _react2.default.createElement(
      "ul",
      { style: styles.elements.details.list },
      tripLength && _react2.default.createElement(
        "li",
        { style: styles.elements.details.item },
        tripLength,
        (destination || reviews) && _react2.default.createElement(_bullet3.default, { space: "both" })
      ),
      destination && _react2.default.createElement(
        "li",
        { style: styles.elements.details.item },
        destination,
        reviews && _react2.default.createElement(_bullet3.default, { space: "both" })
      ),
      reviews && _react2.default.createElement(
        "li",
        { style: styles.elements.details.item },
        reviews,
        " reviews"
      )
    )
  ) : null;

  return _react2.default.createElement(
    "div",
    { className: "RelatedTour" },
    _react2.default.createElement(_radium.Style, {
      scopeSelector: ".RelatedTour",
      rules: {
        ".Heading a": {
          color: "currentColor"
        },

        ".Price-amount": {
          color: _colors2.default.textPrimary,
          fontSize: "2.4rem !important"
        },

        mediaQueries: (_mediaQueries = {}, (0, _defineProperty3.default)(_mediaQueries, "(max-width: " + _mq2.default.max[480] + ")", {
          ".Price": {
            display: "block",
            marginTop: "20px"

          },

          ".Price-amount": {
            fontWeight: "300 !important",
            color: _colors2.default.accentRed
          }
        }), (0, _defineProperty3.default)(_mediaQueries, "(min-width: " + _mq2.default.min[480] + ")", {
          ".Heading": {
            maxWidth: "50rem",
            width: "80%"
          },

          ".Price": {
            position: "absolute !important",
            right: 0,
            top: 0
          },

          ".Price-amount": {
            color: _colors2.default.textPrimary,
            fontSize: "2.4rem"
          }
        }), _mediaQueries)
      }
    }),
    _react2.default.createElement(
      "a",
      {
        className: "RelatedTour-image",
        style: styles.elements.image.base,
        href: slug,
        onClick: clickHandler,
        "data-testid": qaHook ? "related-tour-image-link" : null
      },
      _react2.default.createElement("img", {
        src: image,
        alt: ""
      })
    ),
    _react2.default.createElement(
      "div",
      {
        className: "RelatedTour-content clearfix",
        style: styles.elements.content.base
      },
      _react2.default.createElement(
        _heading2.default,
        {
          level: 3,
          size: "medium",
          importance: "high",
          weight: "thick",
          truncate: true,
          tracking: "tight",
          override: styles.elements.heading
        },
        _react2.default.createElement(
          "a",
          { href: slug, onClick: clickHandler, "data-testid": qaHook ? (0, _createQAHook2.default)(title, "related-tour", "link") : null },
          title
        )
      ),
      Details,
      _react2.default.createElement(_price2.default, {
        amount: price.amount,
        currency: price.currency
      })
    )
  );
}

RelatedTour.propTypes = {
  /**
   * The name of the tour
   */
  title: _propTypes2.default.string.isRequired,

  /**
   * The URL of the tour
   */
  slug: _propTypes2.default.string.isRequired,

  /**
   * The image of the tour
   */
  image: _propTypes2.default.string.isRequired,

  /**
   * The price of the tour, containing currency and amount
   */
  price: _propTypes2.default.shape({
    currency: _propTypes2.default.string,
    amount: _propTypes2.default.number
  }).isRequired,

  /**
   * The length of the trip, usually in days i.e., "14 days"
   */
  tripLength: _propTypes2.default.string,

  /**
   * The main destination of the tour; can be something like "London to Ireland"
   */
  destination: _propTypes2.default.string,

  /**
   * The number of reviews for the tour
   */
  reviews: _propTypes2.default.number,

  /**
   * Callback for clicking on the tour
   */
  clickHandler: _propTypes2.default.func,

  /**
   * QA Hook
   */
  qaHook: _propTypes2.default.bool
};

RelatedTour.defaultProps = {
  title: "",
  slug: "",
  image: "",
  price: {},
  tripLength: "",
  destination: "",
  reviews: 0,
  qaHook: false
};

RelatedTour.styles = styles;

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