@kiwicom/orbit-components/src/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"

// @flow
import * as React from "react";
import styled from "styled-components";

import defaultTokens from "../defaultTokens";
import { SIZE_OPTIONS, baseURL } from "./consts";
import getSpacingToken from "../common/getSpacingToken";

import type { Props } from "./index";

const getHeightToken = ({ theme, size }) => {
  const tokens = {
    [SIZE_OPTIONS.SMALL]: theme.orbit.heightIllustrationSmall,
    [SIZE_OPTIONS.MEDIUM]: theme.orbit.heightIllustrationMedium,
  };
  return tokens[size];
};

const getURL = (retina = false) => ({ theme, size, illustrationName }) => {
  const height = parseInt(getHeightToken({ theme, size }), 10);
  return retina
    ? `${baseURL}/illustrations/0x${height * 2}/${illustrationName}.png 2x`
    : `${baseURL}/illustrations/0x${height}/${illustrationName}.png`;
};

export const StyledImage = styled.img.attrs({
  src: getURL(),
  srcSet: getURL(true),
})`
  height: ${getHeightToken};
  width: auto;
  background-color: ${({ theme }) => theme.orbit.backgroundIllustration};
  margin-bottom: ${getSpacingToken};
`;

StyledImage.defaultProps = {
  theme: defaultTokens,
};

const Illustration = ({ name, size = SIZE_OPTIONS.MEDIUM, dataTest, spaceAfter }: Props) => (
  <StyledImage
    illustrationName={name}
    alt={name}
    size={size}
    data-test={dataTest}
    spaceAfter={spaceAfter}
  />
);

export default Illustration;