@kiwicom/orbit-components/es/Badge/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 { TYPE_OPTIONS, TOKENS } from "./consts";

const getTypeToken = name => ({ theme, type }) => {
  const tokens = {
    [TOKENS.background]: {
      [TYPE_OPTIONS.NEUTRAL]: theme.orbit.backgroundBadgeNeutral,
      [TYPE_OPTIONS.INFO]: theme.orbit.backgroundBadgeInfo,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundBadgeSuccess,
      [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundBadgeWarning,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundBadgeCritical,
      [TYPE_OPTIONS.DARK]: theme.orbit.backgroundBadgeDark,
      [TYPE_OPTIONS.WHITE]: theme.orbit.paletteWhite
    },
    [TOKENS.color]: {
      [TYPE_OPTIONS.NEUTRAL]: theme.orbit.colorTextBadgeNeutral,
      [TYPE_OPTIONS.INFO]: theme.orbit.colorTextBadgeInfo,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextBadgeSuccess,
      [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextBadgeWarning,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextBadgeCritical,
      [TYPE_OPTIONS.DARK]: theme.orbit.colorTextBadgeDark,
      [TYPE_OPTIONS.WHITE]: theme.orbit.colorInkDark
    }
  };

  return tokens[name][type];
};

const StyledBadge = styled(({ className, children, dataTest }) => React.createElement(
  "div",
  { className: className, "data-test": dataTest },
  children
)).withConfig({
  displayName: "Badge__StyledBadge"
})(["font-family:", ";display:inline-flex;box-sizing:border-box;justify-content:center;align-items:center;height:", ";line-height:", ";width:", ";font-size:", ";font-weight:", ";background-color:", ";color:", ";border-radius:", ";padding:0 8px;"], ({ theme }) => theme.orbit.fontFamily, ({ theme }) => theme.orbit.heightBadge, ({ theme }) => theme.orbit.heightBadge, ({ circled, theme }) => circled && theme.orbit.widthBadgeCircled, ({ theme }) => theme.orbit.fontSizeTextSmall, ({ theme }) => theme.orbit.fontWeightMedium, getTypeToken(TOKENS.background), getTypeToken(TOKENS.color), ({ theme }) => theme.orbit.borderRadiusBadge);

StyledBadge.defaultProps = {
  theme: defaultTokens
};

const IconContainer = styled(({ className, children }) => React.createElement(
  "div",
  { className: className },
  children
)).withConfig({
  displayName: "Badge__IconContainer"
})(["display:flex;margin-right:", ";svg{height:", ";width:", ";color:", ";}"], ({ theme }) => theme.orbit.marginRightBadgeIcon, ({ theme }) => theme.orbit.widthIconSmall, ({ theme }) => theme.orbit.heightIconSmall, getTypeToken(TOKENS.color));

IconContainer.defaultProps = {
  theme: defaultTokens
};

const Badge = props => {
  const { type = TYPE_OPTIONS.NEUTRAL, icon, children, circled, dataTest } = props;

  return React.createElement(
    StyledBadge,
    { type: type, circled: circled, dataTest: dataTest },
    icon && React.createElement(
      IconContainer,
      { type: type },
      icon
    ),
    children
  );
};

export default Badge;