backpack-ui/dist/components/sightsListItem/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 _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

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

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

var _colors2 = _interopRequireDefault(_colors);

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

var _timing2 = _interopRequireDefault(_timing);

var _numberMarker = require("../numberMarker/");

var _numberMarker2 = _interopRequireDefault(_numberMarker);

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

var _createQAHook2 = _interopRequireDefault(_createQAHook);

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

var styles = {
  linkContainer: {
    display: "flex",
    color: _colors2.default.textPrimary,
    alignItems: "stretch",
    textDecoration: "none",
    transition: "color " + _timing2.default.fast + " ease",
    ":hover": {
      color: _colors2.default.linkPrimary
    }
  },
  imageContainer: {
    display: "flex",
    alignItems: "center",
    marginRight: "8px"
  },
  image: {
    width: "80px",
    height: "50px",
    backgroundSize: "cover",
    backgroundColor: _colors2.default.accentGray,
    backgroundRepeat: "no-repeat"
  },
  textContainer: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center"
  },
  markerContianer: {
    transform: "translateX(-50%)"
  },
  reset: {
    padding: 0,
    marginTop: 0,
    marginBottom: 0
  },
  title: {
    fontSize: "16px",
    fontWeight: _typography.fontWeightMedium
  },
  subtitle: {
    marginTop: "8px",
    fontWeight: _typography.fontWeightMedium,
    color: _colors2.default.accentGray,
    textTransform: "uppercase",
    fontSize: "11px"
  }
};

/**
 * SightsListItem component
 * @usage
 * <SightsListItem
 *   slug="/link"
 *   imgPath="/path"
 *   title="Text"
 *   subtitle="Text"
 *   markerNumber={1}
 *  />
 */
function SightsListItem(_ref) {
  var slug = _ref.slug,
      imgPath = _ref.imgPath,
      title = _ref.title,
      subtitle = _ref.subtitle,
      markerNumber = _ref.markerNumber,
      onMouseEnter = _ref.onMouseEnter,
      onMouseLeave = _ref.onMouseLeave,
      qaHook = _ref.qaHook;

  return _react2.default.createElement(
    "a",
    {
      style: styles.linkContainer,
      href: slug,
      onMouseEnter: onMouseEnter,
      onMouseLeave: onMouseLeave,
      "data-testid": qaHook ? (0, _createQAHook2.default)(title, "sight", "link") : null
    },
    _react2.default.createElement(
      "div",
      { style: styles.imageContainer },
      imgPath && _react2.default.createElement("div", { style: [styles.image, { backgroundImage: "url(" + imgPath + ")" }] }),
      _react2.default.createElement(
        "div",
        { style: styles.markerContianer },
        _react2.default.createElement(_numberMarker2.default, {
          size: "small",
          number: markerNumber
        })
      )
    ),
    _react2.default.createElement(
      "div",
      { style: styles.textContainer },
      _react2.default.createElement(
        "h5",
        { style: [styles.reset, styles.title] },
        title
      ),
      _react2.default.createElement(
        "p",
        { style: [styles.reset, styles.subtitle] },
        subtitle
      )
    )
  );
}

SightsListItem.propTypes = {
  /**
   * Text label which is the Sight name
   */
  title: _propTypes2.default.string.isRequired,

  /**
   * Text label which is the usually the Sights containing place
   */
  subtitle: _propTypes2.default.string.isRequired,

  /**
   * Slug URL of the tag
   */
  slug: _propTypes2.default.string.isRequired,

  /**
   *  URL of the image to display
   */
  imgPath: _propTypes2.default.string,

  /**
   * Number to be displayed in the NumberMarker Component
   */
  markerNumber: _propTypes2.default.number,
  /**
   * Function to fire on mouse enter
   */
  onMouseEnter: _propTypes2.default.func,
  /**
   * Function to fire on mouse leave
   */
  onMouseLeave: _propTypes2.default.func,
  /**
   * QA Hook
   */
  qaHook: _propTypes2.default.bool
};

SightsListItem.defaultProps = {
  title: "",

  subtitle: "",

  imgPath: "https://assets.staticlp.com/destinations-next/images/search-category-image-sights.jpg",

  style: null,

  qaHook: false
};

SightsListItem.styles = styles;

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