backpack-ui/dist/components/listItemNews/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 _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 _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

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

var _mq2 = _interopRequireDefault(_mq);

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

var _font2 = _interopRequireDefault(_font);

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

var _heading2 = _interopRequireDefault(_heading);

var _listItemThumbnail = require("../listItemThumbnail");

var _listItemThumbnail2 = _interopRequireDefault(_listItemThumbnail);

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

var _createQAHook2 = _interopRequireDefault(_createQAHook);

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

var styles = {
  container: {
    display: "flex",
    fontFamily: (0, _font2.default)("benton"),
    width: "100%"
  },

  anchor: {
    color: _colors2.default.linkPrimary,
    textDecoration: "none"
  },

  textContainer: {
    flex: "3"
  },

  category: {
    color: _colors2.default.linkPrimary,
    fontSize: "11px",
    fontWeight: 600,
    letterSpacing: "-0.1px",
    marginBottom: "4px",
    textTransform: "uppercase"
  },

  sponsored: {
    color: _colors2.default.accentOrange
  },

  heading: {
    default: {
      paddingRight: "24px"
    },

    size: {
      small: {
        fontSize: "16px",
        lineHeight: 24 / 16
      },
      medium: (0, _defineProperty3.default)({
        fontSize: "16px",
        lineHeight: 24 / 16

      }, "@media (min-width: " + _mq2.default.min[560] + ")", {
        fontSize: "20px",
        lineHeight: 1.6
      })
    }
  },

  imageContainer: {
    default: {
      display: "flex",
      flex: "1.5",
      justifyContent: "flex-end"
    },

    size: {
      small: {
        maxWidth: "80px"
      },
      medium: {
        maxWidth: "110px"
      }
    }
  }
};

var ListItemNews = function ListItemNews(_ref) {
  var title = _ref.title,
      category = _ref.category,
      categoryLink = _ref.categoryLink,
      link = _ref.link,
      thumbnail = _ref.thumbnail,
      isSponsored = _ref.isSponsored,
      size = _ref.size,
      qaHook = _ref.qaHook;
  return _react2.default.createElement(
    "div",
    {
      className: "ListItemNews",
      style: styles.container
    },
    _react2.default.createElement(
      "div",
      { style: styles.textContainer },
      _react2.default.createElement(
        "div",
        { style: [styles.category, isSponsored && styles.sponsored] },
        isSponsored ? "Sponsored" : _react2.default.createElement(
          "a",
          {
            "data-testid": qaHook ? "sponsored-link" : null,
            style: styles.anchor,
            href: categoryLink
          },
          category
        )
      ),
      _react2.default.createElement(
        _heading2.default,
        {
          level: 3,
          weight: "thin",
          tracking: "tight",
          override: (0, _extends3.default)({}, styles.heading.default, size && styles.heading.size[size])
        },
        _react2.default.createElement(
          "a",
          {
            "data-testid": qaHook ? (0, _createQAHook2.default)(title, "heading", "link") : null,
            style: [styles.anchor, { color: "inherit" }],
            href: link
          },
          title
        )
      )
    ),
    _react2.default.createElement(
      "div",
      { style: [styles.imageContainer.default, size && styles.imageContainer.size[size]] },
      _react2.default.createElement(
        "a",
        { href: link, "data-testid": qaHook ? "list-item-thumbnail-link" : null, style: styles.imageAnchor },
        _react2.default.createElement(_listItemThumbnail2.default, {
          src: thumbnail,
          alt: title
        })
      )
    )
  );
};

ListItemNews.propTypes = {
  title: _propTypes2.default.string.isRequired,
  category: _propTypes2.default.string.isRequired,
  categoryLink: _propTypes2.default.string.isRequired,
  link: _propTypes2.default.string.isRequired,
  thumbnail: _propTypes2.default.string.isRequired,
  isSponsored: _propTypes2.default.bool,
  size: _propTypes2.default.oneOf(["small", "medium"]),
  qaHook: _propTypes2.default.bool
};

ListItemNews.defaultProps = {
  title: null,
  category: null,
  categoryLink: null,
  link: null,
  thumbnail: null,
  isSponsored: false,
  size: "medium",
  qaHook: false
};

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