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 _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

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

var _numberMarker2 = _interopRequireDefault(_numberMarker);

var _settings = require("../../../settings.json");

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

var styles = {
  linkContainer: {
    display: "flex",
    color: _settings.color.titleGray,
    alignItems: "stretch",
    textDecoration: "none",
    transition: "color " + _settings.timing.fast + " ease",
    ":hover": {
      color: _settings.color.lpBlue
    }
  },
  imageContainer: {
    display: "flex",
    alignItems: "center",
    marginRight: "8px"
  },
  image: {
    width: "80px",
    height: "50px",
    backgroundSize: "cover",
    backgroundColor: _settings.color.subtitleGray,
    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: _settings.typography.fontWeightBold
  },
  subtitle: {
    marginTop: "8px",
    fontWeight: _settings.typography.fontWeightBold,
    color: _settings.color.subtitleGray,
    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;
  var imgPath = _ref.imgPath;
  var title = _ref.title;
  var subtitle = _ref.subtitle;
  var markerNumber = _ref.markerNumber;

  return _react2.default.createElement(
    "a",
    { style: styles.linkContainer, href: "/" + slug },
    _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: _react2.default.PropTypes.string.isRequired,

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

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

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

  /**
   * Number to be displayed in the NumberMarker Component
   */
  markerNumber: _react2.default.PropTypes.number
};

SightsListItem.defaultProps = {
  title: "",

  subtitle: "",

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

  style: null
};

SightsListItem.styles = styles;

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