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

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

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";

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)
}).withConfig({
  displayName: "Illustration__StyledImage",
  componentId: "uskdow-0"
})(["height:", ";width:auto;background-color:", ";margin-bottom:", ";"], getHeightToken, ({
  theme
}) => theme.orbit.backgroundIllustration, getSpacingToken);
StyledImage.defaultProps = {
  theme: defaultTokens
};

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

export default Illustration;