backpack-ui/dist/components/iconCallout/index.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _keys = require("babel-runtime/core-js/object/keys");

var _keys2 = _interopRequireDefault(_keys);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _colors2 = _interopRequireDefault(_colors);

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

var _font2 = _interopRequireDefault(_font);

var _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

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

var _icon = require("../../utils/icon");

var _icon2 = _interopRequireDefault(_icon);

var _icon3 = require("../icon");

var _icon4 = _interopRequireDefault(_icon3);

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

var _heading2 = _interopRequireDefault(_heading);

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

var _createQAHook2 = _interopRequireDefault(_createQAHook);

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

var containerMaxWidth = (0, _grid.add)([(0, _grid.span)(2, "static"), (0, _grid.gutter)("static")], "static");

var styles = {
  container: {
    display: "flex",
    flexGrow: 1,
    fontFamily: (0, _font2.default)("benton"),
    justifyContent: "center",
    maxWidth: containerMaxWidth,
    textAlign: "center"
  },

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

  icon: {
    color: _colors2.default.linkPrimary,
    fontSize: "96px",
    transition: "transform " + _timing2.default.default + " ease-in-out"
  },

  heading: {
    fontSize: "20px",
    marginTop: "33px",
    transition: "color " + _timing2.default.default + " ease-in-out"
  },

  copy: {
    color: _colors2.default.textSecondary,
    fontSize: "16px",
    lineHeight: 24 / 16,
    marginBottom: "23px",
    marginLeft: "auto",
    marginRight: "auto",
    marginTop: "11px"
  }
};

function IconCallout(_ref) {
  var iconName = _ref.iconName,
      title = _ref.title,
      copy = _ref.copy,
      url = _ref.url,
      qaHook = _ref.qaHook;

  return _react2.default.createElement(
    "div",
    { className: "IconCallout", style: styles.container },
    _react2.default.createElement(
      "a",
      { href: url, style: styles.anchor, "data-testid": qaHook ? (0, _createQAHook2.default)(title, "callout", "link") : null },
      (0, _icon2.default)(iconName, {
        style: styles.icon,
        ariaHidden: true,
        className: "IconCallout-icon"
      }),
      _react2.default.createElement(
        _heading2.default,
        {
          level: 3,
          weight: "thick",
          override: styles.heading
        },
        title
      ),
      _react2.default.createElement(
        "p",
        {
          className: "IconCallout-copy",
          style: styles.copy
        },
        copy
      )
    )
  );
}

IconCallout.propTypes = {
  iconName: _propTypes2.default.oneOf((0, _keys2.default)(_icon4.default)).isRequired,
  title: _propTypes2.default.string.isRequired,
  copy: _propTypes2.default.string.isRequired,
  url: _propTypes2.default.string.isRequired,
  qaHook: _propTypes2.default.bool
};

IconCallout.defaultProps = {
  qaHook: false
};

exports.default = IconCallout;