backpack-ui/dist/components/recommendedArticles/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 _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 _mq = require("../../styles/mq");

var _mq2 = _interopRequireDefault(_mq);

var _grid = require("../../utils/grid");

var _articlePreview = require("../articlePreview");

var _articlePreview2 = _interopRequireDefault(_articlePreview);

var _calloutLink = require("../calloutLink");

var _calloutLink2 = _interopRequireDefault(_calloutLink);

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

var _heading2 = _interopRequireDefault(_heading);

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

var styles = {
  header: {
    marginBottom: "43px"
  },

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

  articles: (0, _defineProperty3.default)({}, "@media (min-width: " + _mq2.default.min[600] + ")", {
    display: "flex"
  }),

  footer: {
    marginTop: "39px"
  }
};

var RecommendedArticles = function RecommendedArticles(_ref) {
  var _mediaQueries;

  var articles = _ref.articles,
      heading = _ref.heading,
      calloutHref = _ref.calloutHref,
      calloutLabel = _ref.calloutLabel,
      style = _ref.style;
  return _react2.default.createElement(
    "section",
    { className: "RecommendedArticles", style: style },
    _react2.default.createElement(_radium.Style, {
      scopeSelector: ".RecommendedArticles",
      rules: {
        mediaQueries: (_mediaQueries = {}, (0, _defineProperty3.default)(_mediaQueries, "(max-width: " + _mq2.default.max[600] + ")", {
          ".ArticlePreview + .ArticlePreview": {
            marginTop: (0, _grid.gutter)("static")
          }
        }), (0, _defineProperty3.default)(_mediaQueries, "(min-width: " + _mq2.default.min[600] + ")", {
          ".ArticlePreview + .ArticlePreview": {
            marginLeft: (0, _grid.gutter)("static")
          }
        }), _mediaQueries)
      }
    }),
    heading && _react2.default.createElement(
      "header",
      { style: styles.header },
      _react2.default.createElement(
        _heading2.default,
        {
          level: 2,
          weight: "thin",
          override: styles.heading
        },
        heading
      )
    ),
    _react2.default.createElement(
      "div",
      { style: styles.articles },
      articles.map(function (preview, index) {
        return _react2.default.createElement(_articlePreview2.default, {
          title: preview.title,
          paragraph: preview.paragraph,
          image: preview.image,
          href: preview.href,
          category: preview.category,
          categoryHref: preview.categoryHref,
          key: index
        });
      })
    ),
    calloutLabel && calloutHref && _react2.default.createElement(
      "footer",
      { style: styles.footer },
      _react2.default.createElement(
        _calloutLink2.default,
        { href: calloutHref },
        calloutLabel
      )
    )
  );
};

RecommendedArticles.propTypes = {
  articles: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    title: _propTypes2.default.string,
    paragraph: _propTypes2.default.string,
    image: _propTypes2.default.string,
    href: _propTypes2.default.string,
    category: _propTypes2.default.string,
    categoryHref: _propTypes2.default.string
  })).isRequired,
  heading: _propTypes2.default.string,
  calloutLabel: _propTypes2.default.string,
  calloutHref: _propTypes2.default.string,
  style: _propTypes2.default.objectOf(_propTypes2.default.object)
};

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