@kiwicom/orbit-components/lib/primitives/IllustrationPrimitive/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = exports.StyledImage = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _defaultTheme = _interopRequireDefault(require("../../defaultTheme"));
var _consts = require("./consts");
var _getSpacingToken = _interopRequireDefault(require("../../common/getSpacingToken"));
var _common = require("../../utils/common");
var _useTheme = _interopRequireDefault(require("../../hooks/useTheme"));
const getHeightToken = ({
  theme,
  size
}) => {
  const tokens = {
    [_consts.SIZE_OPTIONS.EXTRASMALL]: theme.orbit.heightIllustrationSmall,
    [_consts.SIZE_OPTIONS.SMALL]: "120px",
    // TODO: add token
    [_consts.SIZE_OPTIONS.MEDIUM]: theme.orbit.heightIllustrationMedium,
    [_consts.SIZE_OPTIONS.LARGE]: "280px",
    // TODO: create token heightIllustrationLarge
    [_consts.SIZE_OPTIONS.DISPLAY]: "460px" // TODO: create token heightIllustrationDisplay
  };

  return tokens[size];
};
const StyledImage = _styledComponents.default.img.attrs(({
  theme,
  size,
  illustrationName
}) => {
  const height = parseInt(getHeightToken({
    theme,
    size
  }), 10);
  const illustrationPath = `${illustrationName}-Q85.png`;
  return {
    src: `${_consts.baseURL}/illustrations/0x${height}/${illustrationPath}`,
    srcSet: `${_consts.baseURL}/illustrations/0x${height * 2}/${illustrationPath} 2x, ${_consts.baseURL}/illustrations/0x${height * 3}/${illustrationPath} 3x`
  };
}).withConfig({
  displayName: "IllustrationPrimitive__StyledImage",
  componentId: "sc-1cvazaq-0"
})(["", ";"], ({
  theme,
  margin,
  size
}) => (0, _styledComponents.css)(["display:inline-block;margin:auto 0;max-height:", ";max-width:100%;background-color:", ";flex-shrink:0;", ";"], getHeightToken({
  theme,
  size
}), theme.orbit.backgroundIllustration, (0, _common.spacingUtility)(margin)));
exports.StyledImage = StyledImage;
StyledImage.defaultProps = {
  theme: _defaultTheme.default
};
const IllustrationPrimitive = ({
  name,
  alt,
  margin,
  size = _consts.SIZE_OPTIONS.MEDIUM,
  dataTest,
  id,
  // TODO: remove spaceAfter in the next major version
  spaceAfter
}) => {
  const theme = (0, _useTheme.default)();
  return /*#__PURE__*/_react.default.createElement(StyledImage, {
    illustrationName: name,
    alt: typeof alt === "string" ? alt : name,
    size: size,
    id: id,
    margin: spaceAfter ? {
      bottom: (0, _getSpacingToken.default)({
        spaceAfter,
        theme
      })
    } : margin,
    "data-test": dataTest
  });
};
var _default = IllustrationPrimitive;
exports.default = _default;