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

Lonely Planet's Components

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _settings = require("../../../settings.json");

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

var _font2 = _interopRequireDefault(_font);

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

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

var _icon2 = _interopRequireDefault(_icon);

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

var _heading2 = _interopRequireDefault(_heading);

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: _settings.color.blue,
    fontSize: "96px",
    transition: "transform " + _settings.timing.default + " ease-in-out"
  },

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

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

function IconCallout(_ref) {
  var iconName = _ref.iconName;
  var title = _ref.title;
  var copy = _ref.copy;
  var link = _ref.link;

  var IconElement = _react2.default.createElement(_icon2.default[iconName], {
    style: styles.icon,
    ariaHidden: true,
    className: "IconCallout-icon"
  });

  return _react2.default.createElement(
    "div",
    { className: "IconCallout", style: styles.container },
    _react2.default.createElement(
      "a",
      { href: link.href, style: styles.anchor },
      IconElement,
      _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: _react.PropTypes.oneOf(Object.keys(_icon2.default)).isRequired,
  title: _react.PropTypes.string.isRequired,
  copy: _react.PropTypes.string.isRequired,
  link: _react.PropTypes.shape({
    href: _react.PropTypes.string
  }).isRequired
};

exports.default = IconCallout;