@kiwicom/orbit-components/src/CountryFlag/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 { baseURL, CODES } from "./consts";

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

const StyledCountryFlag = styled.img`
  height: ${({ theme }) => theme.orbit.heightCountryFlag};
  width: ${({ theme }) => theme.orbit.widthCountryFlag};
  border-radius: ${({ theme }) => theme.orbit.borderRadiusSmall};
  background-color: ${({ theme }) => theme.orbit.backgroundCountryFlag};
`;

StyledCountryFlag.defaultProps = {
  theme: defaultTokens,
};

const CountryFlag = (props: Props) => {
  const { code = CODES.ANYWHERE, name = "Anywhere", dataTest } = props;
  return (
    <StyledCountryFlag
      key={code}
      src={`${baseURL}/flags/24x0/flag-${code}.jpg`}
      srcSet={`${baseURL}/flags/48x0/flag-${code}.jpg 2x`}
      alt={name}
      title={name}
      data-test={dataTest}
    />
  );
};

export default CountryFlag;