@kiwicom/orbit-components/lib/Illustration/index.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

"use strict";

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

var _react = require("react");

var React = _interopRequireWildcard(_react);

var _styledComponents = require("styled-components");

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _defaultTokens = require("../defaultTokens");

var _defaultTokens2 = _interopRequireDefault(_defaultTokens);

var _consts = require("./consts");

var _getSpacingToken = require("../common/getSpacingToken");

var _getSpacingToken2 = _interopRequireDefault(_getSpacingToken);

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var getHeightToken = function getHeightToken(_ref) {
  var _tokens;

  var theme = _ref.theme,
      size = _ref.size;

  var tokens = (_tokens = {}, _defineProperty(_tokens, _consts.SIZE_OPTIONS.SMALL, theme.orbit.heightIllustrationSmall), _defineProperty(_tokens, _consts.SIZE_OPTIONS.MEDIUM, theme.orbit.heightIllustrationMedium), _tokens);
  return tokens[size];
};

var getURL = function getURL() {
  var retina = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  return function (_ref2) {
    var theme = _ref2.theme,
        size = _ref2.size,
        illustrationName = _ref2.illustrationName;

    var height = parseInt(getHeightToken({ theme: theme, size: size }), 10);
    return retina ? _consts.baseURL + "/illustrations/0x" + height * 2 + "/" + illustrationName + ".png 2x" : _consts.baseURL + "/illustrations/0x" + height + "/" + illustrationName + ".png";
  };
};

var StyledImage = exports.StyledImage = _styledComponents2.default.img.attrs({
  src: getURL(),
  srcSet: getURL(true)
}).withConfig({
  displayName: "Illustration__StyledImage"
})(["height:", ";width:auto;background-color:", ";margin-bottom:", ";"], getHeightToken, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.backgroundIllustration;
}, _getSpacingToken2.default);

StyledImage.defaultProps = {
  theme: _defaultTokens2.default
};

var Illustration = function Illustration(_ref4) {
  var name = _ref4.name,
      _ref4$size = _ref4.size,
      size = _ref4$size === undefined ? _consts.SIZE_OPTIONS.MEDIUM : _ref4$size,
      dataTest = _ref4.dataTest,
      spaceAfter = _ref4.spaceAfter;
  return React.createElement(StyledImage, {
    illustrationName: name,
    alt: name,
    size: size,
    "data-test": dataTest,
    spaceAfter: spaceAfter
  });
};

exports.default = Illustration;