backpack-ui/dist/components/articlePreview/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 _objectAssign = require("object-assign");

var _objectAssign2 = _interopRequireDefault(_objectAssign);

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

var _colors2 = _interopRequireDefault(_colors);

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

var _font2 = _interopRequireDefault(_font);

var _categoryLabelLink = require("../categoryLabelLink");

var _categoryLabelLink2 = _interopRequireDefault(_categoryLabelLink);

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

var _heading2 = _interopRequireDefault(_heading);

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

var _createQAHook2 = _interopRequireDefault(_createQAHook);

var _analytics = require("../../utils/analytics");

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

var markup = function markup(html) {
  return { __html: html };
};

function ArticlePreview(_ref) {
  var title = _ref.title,
      paragraph = _ref.paragraph,
      image = _ref.image,
      imageAlt = _ref.imageAlt,
      href = _ref.href,
      category = _ref.category,
      categoryHref = _ref.categoryHref,
      trackEventId = _ref.trackEventId,
      trackEventName = _ref.trackEventName,
      trackEventPosition = _ref.trackEventPosition,
      qaHook = _ref.qaHook;

  var styles = {
    container: {
      fontFamily: (0, _font2.default)("benton"),
      color: _colors2.default.textPrimary,
      maxWidth: "410px"
    },

    imageContainer: {
      margin: 0
    },

    textContainer: {
      marginTop: "22px"
    },

    anchor: {
      color: "inherit",
      display: "block",
      textDecoration: "none"
    },

    heading: {
      fontSize: "24px",
      lineHeight: 32 / 24
    },

    paragraph: {
      color: "#576576",
      fontSize: "16px",
      fontWeight: 300,
      lineHeight: 28 / 16,
      marginBottom: 0,
      marginTop: "13px"
    },

    image: {
      display: "block",
      maxWidth: "100%"
    }
  };

  return _react2.default.createElement(
    "article",
    { className: "ArticlePreview", style: styles.container },
    _react2.default.createElement(
      "figure",
      { className: "ArticlePreview-image", style: styles.imageContainer },
      _react2.default.createElement(
        "a",
        {
          href: href,
          style: styles.anchor,
          "data-testid": qaHook ? "article-preview-image-link" : null,
          onClick: function onClick() {
            (0, _analytics.dataLayerPush)((0, _analytics.createPromotionClickEvent)({
              id: trackEventId,
              name: trackEventName,
              creative: "article preview image",
              position: trackEventPosition
            }));
          }
        },
        _react2.default.createElement("img", { src: image, alt: imageAlt, style: styles.image })
      )
    ),
    _react2.default.createElement(
      "div",
      { className: "ArticlePreview-text", style: styles.textContainer },
      _react2.default.createElement(
        _categoryLabelLink2.default,
        { href: categoryHref },
        category
      ),
      _react2.default.createElement(
        "a",
        {
          href: href,
          style: (0, _objectAssign2.default)({}, styles.anchor, { marginTop: "12px" }),
          "data-testid": qaHook ? (0, _createQAHook2.default)(title, "article-preview-text", "link") : null,
          onClick: function onClick() {
            (0, _analytics.dataLayerPush)((0, _analytics.createPromotionClickEvent)({
              id: trackEventId,
              name: trackEventName,
              creative: "article preview text",
              position: trackEventPosition
            }));
          }
        },
        _react2.default.createElement(
          _heading2.default,
          {
            weight: "thick",
            override: styles.heading
          },
          title
        ),
        _react2.default.createElement("p", {
          style: styles.paragraph,
          dangerouslySetInnerHTML: markup(paragraph)
        })
      )
    )
  );
}

ArticlePreview.propTypes = {
  title: _propTypes2.default.string.isRequired,
  paragraph: _propTypes2.default.string.isRequired,
  image: _propTypes2.default.string.isRequired,
  imageAlt: _propTypes2.default.string,
  href: _propTypes2.default.string.isRequired,
  category: _propTypes2.default.string.isRequired,
  categoryHref: _propTypes2.default.string.isRequired,
  trackEventId: _propTypes2.default.string,
  trackEventName: _propTypes2.default.string,
  trackEventPosition: _propTypes2.default.string,
  qaHook: _propTypes2.default.bool
};

ArticlePreview.defaultProps = {
  imageAlt: "",
  trackEventId: "article preview",
  trackEventName: "article preview click",
  trackEventPosition: "article preview",
  qaHook: false
};

exports.default = ArticlePreview;