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

import * as React from "react";
import styled from "styled-components";

import defaultTokens from "../defaultTokens";
import { SIZE_OPTIONS, BASE_URL } from "./consts";

const getRenderSize = ({ theme, size }) => {
  const renderSizes = {
    [SIZE_OPTIONS.SMALL]: parseInt(theme.orbit.heightIconSmall, 10),
    [SIZE_OPTIONS.MEDIUM]: parseInt(theme.orbit.heightIconMedium, 10),
    [SIZE_OPTIONS.LARGE]: parseInt(theme.orbit.heightIconLarge, 10)
  };
  return renderSizes[size];
};

const getCarrierLogoSize = ({ theme, carriersLength, size }) => {
  const defaultSizes = carriersLength > 1 ? getRenderSize({ theme, size: SIZE_OPTIONS.SMALL }) : getRenderSize({ theme, size });

  return `${defaultSizes - (carriersLength > 2 ? 1 : 0)}px`;
};

const getURLSizes = ({ size }) => {
  const urlSizes = {
    base: {
      [SIZE_OPTIONS.SMALL]: 16,
      [SIZE_OPTIONS.MEDIUM]: 32,
      [SIZE_OPTIONS.LARGE]: 32
    },
    retina: {
      [SIZE_OPTIONS.SMALL]: 32,
      [SIZE_OPTIONS.MEDIUM]: 64,
      [SIZE_OPTIONS.LARGE]: 64
    }
  };
  return {
    base: urlSizes.base[size],
    retina: urlSizes.retina[size]
  };
};

const getURL = (retina = false) => ({ code, carrierType, carriersLength, size }) => {
  const type = carrierType === undefined ? "airline" : carrierType;
  const urlSizes = carriersLength > 1 ? getURLSizes({ size: SIZE_OPTIONS.SMALL }) : getURLSizes({ size });
  return retina ? `${BASE_URL}/airlines/${urlSizes.retina}/${code}.png?default=${type}.png 2x` : `${BASE_URL}/airlines/${urlSizes.base}/${code}.png?default=${type}.png`;
};

const StyledImage = styled.img.attrs({
  src: getURL(),
  srcSet: getURL(true)
}).withConfig({
  displayName: "CarrierLogo__StyledImage"
})(["background-color:", ";border-radius:", ";height:", ";width:", ";&:last-child{align-self:flex-end;}"], ({ theme }) => theme.orbit.backgroundCarrierLogo, ({ theme }) => theme.orbit.borderRadiusNormal, getCarrierLogoSize, getCarrierLogoSize);

StyledImage.defaultProps = {
  theme: defaultTokens
};

export const StyledCarrierLogo = styled.div.withConfig({
  displayName: "CarrierLogo__StyledCarrierLogo"
})(["background-color:", ";height:", ";width:", ";display:flex;flex-direction:", ";flex-wrap:wrap;align-content:space-between;justify-content:space-between;"], ({ theme }) => theme.orbit.backgroundCarrierLogo, ({ theme, carriers }) => carriers.length > 1 ? `${theme.orbit.heightIconLarge}` : getRenderSize, ({ theme, carriers }) => carriers.length > 1 ? `${theme.orbit.widthIconLarge}` : getRenderSize, ({ carriers }) => carriers.length > 1 ? "column" : "row");

StyledCarrierLogo.defaultProps = {
  theme: defaultTokens
};

const CarrierLogo = ({ size = SIZE_OPTIONS.LARGE, carriers, dataTest }) => React.createElement(
  StyledCarrierLogo,
  { carriers: carriers, size: size, "data-test": dataTest },
  carriers.slice(0, 4).map(carrierImage => React.createElement(StyledImage, {
    key: carrierImage.code,
    carrierType: carrierImage.type,
    carriersLength: carriers.length,
    code: carrierImage.code,
    size: size,
    alt: carrierImage.name,
    title: carrierImage.name
  }))
);
export default CarrierLogo;