@kiwicom/orbit-components/es/primitives/BadgePrimitive/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, { css } from "styled-components";
import CarrierLogo, { StyledCarrierLogo } from "../../CarrierLogo";
import defaultTheme from "../../defaultTheme";
import { rtlSpacing, left } from "../../utils/rtl";
export const StyledBadge = styled(({
  className,
  children,
  dataTest,
  ariaLabel
}) => /*#__PURE__*/React.createElement("div", {
  className: className,
  "data-test": dataTest,
  "aria-label": ariaLabel
}, children)).withConfig({
  displayName: "BadgePrimitive__StyledBadge",
  componentId: "sc-1ibxlos-0"
})(["", ""], ({
  theme,
  borderColor,
  background,
  foregroundColor
}) => css(["position:relative;font-family:", ";display:inline-flex;flex:0 0 auto;box-sizing:border-box;justify-content:center;align-items:center;min-height:", ";line-height:14px;font-size:", ";font-weight:", ";background:", ";color:", ";border-radius:", ";padding:", ";border:", ";", "{position:absolute;", ":-2px;}"], theme.orbit.fontFamily, theme.orbit.heightBadge, theme.orbit.fontSizeTextSmall, theme.orbit.fontWeightMedium, background, foregroundColor, theme.orbit.borderRadiusBadge, theme.orbit.paddingBadge, borderColor && `1px solid ${borderColor}`, StyledCarrierLogo, left)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledBadge.defaultProps = {
  theme: defaultTheme
};
const IconContainer = styled(({
  className,
  children
}) => /*#__PURE__*/React.createElement("div", {
  className: className
}, children)).withConfig({
  displayName: "BadgePrimitive__IconContainer",
  componentId: "sc-1ibxlos-1"
})(["", ""], ({
  theme,
  hasContent
}) => css(["display:flex;flex-shrink:0;margin:", ";svg{height:", ";width:", ";}"], hasContent && rtlSpacing(theme.orbit.marginBadgeIcon), theme.orbit.widthIconSmall, theme.orbit.heightIconSmall)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

IconContainer.defaultProps = {
  theme: defaultTheme
};
const StyledBadgeContent = styled.div.withConfig({
  displayName: "BadgePrimitive__StyledBadgeContent",
  componentId: "sc-1ibxlos-2"
})(["", ""], ({
  theme,
  $isCarrier
}) => css(["padding:5px 0;line-height:1;margin-", ":", "px;"], left, $isCarrier && parseInt(theme.orbit.widthIconMedium, 10) - parseInt(theme.orbit.spaceXXSmall, 10))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledBadgeContent.defaultProps = {
  theme: defaultTheme
};

const BadgePrimitive = ({
  icon,
  children,
  ariaLabel,
  dataTest,
  background,
  foregroundColor,
  borderColor,
  carriers
}) => {
  return /*#__PURE__*/React.createElement(StyledBadge, {
    background: background,
    foregroundColor: foregroundColor,
    dataTest: dataTest,
    ariaLabel: ariaLabel,
    borderColor: borderColor
  }, carriers && /*#__PURE__*/React.createElement(CarrierLogo, {
    carriers: carriers,
    rounded: true,
    size: "medium"
  }), icon && /*#__PURE__*/React.createElement(IconContainer, {
    hasContent: !!children
  }, icon), /*#__PURE__*/React.createElement(StyledBadgeContent, {
    $isCarrier: carriers && carriers.length > 0
  }, children));
};

export default BadgePrimitive;