@kiwicom/orbit-components/es/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.

import * as React from "react";
import styled from "styled-components";
import defaultTheme from "../../defaultTheme";
import { SIZE_OPTIONS, baseURL } from "./consts";
import getSpacingToken from "../../common/getSpacingToken";

const getHeightToken = ({
  theme,
  size
}) => {
  const tokens = {
    [SIZE_OPTIONS.EXTRASMALL]: theme.orbit.heightIllustrationSmall,
    [SIZE_OPTIONS.SMALL]: "120px",
    // TODO: add token
    [SIZE_OPTIONS.MEDIUM]: theme.orbit.heightIllustrationMedium,
    [SIZE_OPTIONS.LARGE]: "280px",
    // TODO: create token heightIllustrationLarge
    [SIZE_OPTIONS.DISPLAY]: "460px" // TODO: create token heightIllustrationDisplay

  };
  return tokens[size];
};

export const StyledImage = styled.img.attrs(({
  theme,
  size,
  illustrationName
}) => {
  const height = parseInt(getHeightToken({
    theme,
    size
  }), 10);
  const illustrationPath = `${illustrationName}-Q85.png`;
  return {
    src: `${baseURL}/illustrations/0x${height}/${illustrationPath}`,
    srcSet: `${baseURL}/illustrations/0x${height * 2}/${illustrationPath} 2x, ${baseURL}/illustrations/0x${height * 3}/${illustrationPath} 3x`
  };
}).withConfig({
  displayName: "IllustrationPrimitive__StyledImage",
  componentId: "sc-2hh260-0"
})(["display:inline-block;margin:auto 0;max-height:", ";max-width:100%;background-color:", ";margin-bottom:", ";flex-shrink:0;"], getHeightToken, ({
  theme
}) => theme.orbit.backgroundIllustration, getSpacingToken);
StyledImage.defaultProps = {
  theme: defaultTheme
};

const IllustrationPrimitive = ({
  name,
  alt,
  size = SIZE_OPTIONS.MEDIUM,
  dataTest,
  spaceAfter
}) => {
  return /*#__PURE__*/React.createElement(StyledImage, {
    illustrationName: name,
    alt: typeof alt === "string" ? alt : name,
    size: size,
    "data-test": dataTest,
    spaceAfter: spaceAfter
  });
};

export default IllustrationPrimitive;