backpack-ui/dist/components/socialIconButton/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 _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 _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

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

var _colors2 = _interopRequireDefault(_colors);

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

var _timing2 = _interopRequireDefault(_timing);

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

var _icon2 = _interopRequireDefault(_icon);

var _mixins = require("../../utils/mixins");

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

var _createQAHook2 = _interopRequireDefault(_createQAHook);

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

var backgroundColors = {
  email: _colors2.default.textPrimary,
  facebook: _colors2.default.socialFacebook,
  facebookMessenger: _colors2.default.socialFacebookMessenger,
  pinterest: _colors2.default.socialPinterest,
  reddit: _colors2.default.socialReddit,
  twitter: _colors2.default.socialTwitter,
  whatsapp: _colors2.default.socialWhatsapp,
  weChat: _colors2.default.socialWeChat
};

var iconNames = {
  email: "Email",
  facebook: "Facebook",
  facebookMessenger: "FacebookMessenger",
  pinterest: "Pinterest",
  reddit: "Reddit",
  twitter: "Twitter",
  whatsapp: "Whatsapp",
  weChat: "WeChat"
};

var sizeMultiplier = 2.5;

function SocialIconButton(_ref) {
  var network = _ref.network,
      href = _ref.href,
      onClick = _ref.onClick,
      iconSize = _ref.iconSize,
      id = _ref.id,
      className = _ref.className,
      style = _ref.style,
      qaHook = _ref.qaHook;

  var size = iconSize * sizeMultiplier;

  var hoverStyles = {
    opacity: 0.7
  };

  var styles = {
    backgroundColor: backgroundColors[network],
    borderRadius: "100%",
    color: _colors2.default.textOverlay,
    cursor: "pointer",
    display: "inline-block",
    fontSize: iconSize + "px",
    height: size + "px",
    lineHeight: size + "px",
    textAlign: "center",
    textDecoration: "none",
    transition: "opacity " + _timing2.default.fast + " ease-in-out",
    width: size + "px",

    ":hover": hoverStyles,
    ":active": hoverStyles,
    ":focus": (0, _extends3.default)({}, hoverStyles, (0, _mixins.outline)())
  };

  return _react2.default.createElement(
    "a",
    {
      className: (0, _classnames2.default)("SocialIconButton", className),
      id: id,
      href: href,
      onClick: onClick,
      style: [styles, style],
      "data-network": network,
      "data-testid": qaHook ? (0, _createQAHook2.default)(network, "social-icon", "link") : null
    },
    (0, _icon2.default)(iconNames[network])
  );
}

SocialIconButton.propTypes = {
  network: _propTypes2.default.oneOf(["email", "facebook", "facebookMessenger", "pinterest", "reddit", "twitter", "whatsapp", "weChat"]).isRequired,
  href: _propTypes2.default.string,
  onClick: _propTypes2.default.func,
  iconSize: _propTypes2.default.number,
  id: _propTypes2.default.string,
  className: _propTypes2.default.string,
  style: _propTypes2.default.objectOf(_propTypes2.default.object),
  qaHook: _propTypes2.default.bool
};

SocialIconButton.defaultProps = {
  network: "email",
  href: null,
  onClick: null,
  iconSize: 16,
  qaHook: false
};

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