backpack-ui/dist/components/featuredCallout/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 _title, _title2;

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 _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

var _zIndex = require("../../styles/zIndex");

var _zIndex2 = _interopRequireDefault(_zIndex);

var _color = require("../../utils/color");

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

var _font2 = _interopRequireDefault(_font);

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

var _createQAHook2 = _interopRequireDefault(_createQAHook);

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

var _calloutLink2 = _interopRequireDefault(_calloutLink);

var _categoryLabel = require("../categoryLabel");

var _categoryLabel2 = _interopRequireDefault(_categoryLabel);

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

var _heading2 = _interopRequireDefault(_heading);

var _hideAtBreakpoint = require("../hideAtBreakpoint");

var _hideAtBreakpoint2 = _interopRequireDefault(_hideAtBreakpoint);

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

var styles = {
  container: (0, _defineProperty3.default)({
    color: _colors2.default.bgPrimary,
    fontFamily: (0, _font2.default)("benton"),
    position: "relative",
    width: "70%",
    zIndex: _zIndex2.default.slideshowSlide

  }, "@media (min-width: " + _mq2.default.min[720] + ")", {
    width: "65%"
  }),

  smallCaps: {
    fontSize: "11px",
    fontWeight: 600,
    letterSpacing: "-0.06px",
    textTransform: "uppercase"
  },

  category: (0, _defineProperty3.default)({
    paddingBottom: "8px",
    transition: "padding-bottom " + _timing2.default.fast + " ease-in-out"

  }, "@media (min-width: " + _mq2.default.min[480] + ")", {
    paddingBottom: "16px"
  }),

  title: (_title = {
    color: _colors2.default.bgPrimary,
    fontSize: "28px",
    fontWeight: 600,
    letterSpacing: "-0.75px",
    lineHeight: 34 / 28,
    marginTop: "5px",
    textShadow: "0 0 130px rgba(" + (0, _color.rgb)(_colors2.default.shadowPrimary) + ", 0.5)"

  }, (0, _defineProperty3.default)(_title, "@media (min-width: " + _mq2.default.min[720] + ")", {
    fontSize: "calc(11px + 3vw)",
    marginBottom: "42px"
  }), (0, _defineProperty3.default)(_title, "@media (min-width: " + _mq2.default.min[1200] + ")", {
    fontSize: "56px",
    lineHeight: 64 / 56
  }), _title),

  titleLink: {
    color: "inherit",
    textDecoration: "none"
  },

  smallFormat: {
    base: (0, _defineProperty3.default)({
      bottom: "56px",
      width: "90%"

    }, "@media (min-width: " + _mq2.default.min[720] + ")", {
      width: "70%"
    }),

    title: (_title2 = {
      fontSize: "24px",
      fontWeight: 400,
      lineHeight: 36 / 24,
      paddingBottom: 0

    }, (0, _defineProperty3.default)(_title2, "@media (min-width: " + _mq2.default.min[480] + ")", {
      fontSize: "calc(20px + 1vw)",
      lineHeight: 1.2
    }), (0, _defineProperty3.default)(_title2, "@media (min-width: " + _mq2.default.min[1200] + ")", {
      fontSize: "32px",
      lineHeight: 40 / 32
    }), _title2)
  }
};

var FeaturedCallout = function FeaturedCallout(_ref) {
  var category = _ref.category,
      title = _ref.title,
      titleWeight = _ref.titleWeight,
      showLink = _ref.showLink,
      link = _ref.link,
      smallFormat = _ref.smallFormat,
      hideLinkBreakpoint = _ref.hideLinkBreakpoint,
      style = _ref.style,
      qaHook = _ref.qaHook;
  return _react2.default.createElement(
    "div",
    {
      className: "FeaturedCallout",
      style: [styles.container, smallFormat && styles.smallFormat.base, style]
    },
    category && _react2.default.createElement(
      _categoryLabel2.default,
      { style: { color: _colors2.default.bgPrimary } },
      category
    ),
    _react2.default.createElement(
      _heading2.default,
      {
        level: 1,
        weight: "thick",
        override: (0, _extends3.default)({}, styles.title, smallFormat && styles.smallFormat.title, { fontWeight: titleWeight })
      },
      _react2.default.createElement(
        "a",
        { href: link.href, style: styles.titleLink, "data-testid": qaHook ? (0, _createQAHook2.default)(title, "feature-callout", "link") : null },
        title
      )
    ),
    showLink && (hideLinkBreakpoint ? _react2.default.createElement(
      _hideAtBreakpoint2.default,
      { breakpoint: hideLinkBreakpoint },
      _react2.default.createElement(
        _calloutLink2.default,
        { href: link.href, overlay: true },
        link.text
      )
    ) : _react2.default.createElement(
      _calloutLink2.default,
      { href: link.href, overlay: true },
      link.text
    ))
  );
};

FeaturedCallout.propTypes = {
  category: _propTypes2.default.string,
  title: _propTypes2.default.string,
  titleWeight: _propTypes2.default.number,
  showLink: _propTypes2.default.bool,
  link: _propTypes2.default.shape({
    text: _propTypes2.default.string,
    href: _propTypes2.default.string
  }),
  smallFormat: _propTypes2.default.bool,
  hideLinkBreakpoint: _propTypes2.default.number,
  style: _propTypes2.default.oneOfType([_propTypes2.default.object]),
  qaHook: _propTypes2.default.bool
};

FeaturedCallout.defaultProps = {
  showLink: true,
  titleWeight: 600,
  smallFormat: false,
  style: null,
  qaHook: false
};

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