@kiwicom/orbit-components/lib/Badge/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

var _BadgePrimitive = _interopRequireDefault(require("../primitives/BadgePrimitive"));

var _consts = require("./consts");

var _useTheme = _interopRequireDefault(require("../hooks/useTheme"));

const getTypeToken = ({
  name,
  theme,
  type
}) => {
  const tokens = {
    [_consts.TOKENS.background]: {
      [_consts.TYPE_OPTIONS.NEUTRAL]: theme.orbit.paletteCloudLight,
      [_consts.TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueLight,
      [_consts.TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenLight,
      [_consts.TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeLight,
      [_consts.TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedLight,
      [_consts.TYPE_OPTIONS.DARK]: theme.orbit.paletteInkNormal,
      [_consts.TYPE_OPTIONS.WHITE]: theme.orbit.paletteWhite,
      [_consts.TYPE_OPTIONS.INFO_INVERTED]: theme.orbit.paletteBlueNormal,
      [_consts.TYPE_OPTIONS.CRITICAL_INVERTED]: theme.orbit.paletteRedNormal,
      [_consts.TYPE_OPTIONS.SUCCESS_INVERTED]: theme.orbit.paletteGreenNormal,
      [_consts.TYPE_OPTIONS.WARNING_INVERTED]: theme.orbit.paletteOrangeNormal,
      [_consts.TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.backgroundBadgeBundleBasic,
      [_consts.TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.backgroundBadgeBundleMedium,
      [_consts.TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.backgroundBadgeBundleTop
    },
    [_consts.TOKENS.color]: {
      [_consts.TYPE_OPTIONS.NEUTRAL]: theme.orbit.paletteInkNormal,
      [_consts.TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueDark,
      [_consts.TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenDark,
      [_consts.TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeDark,
      [_consts.TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedDark,
      [_consts.TYPE_OPTIONS.DARK]: theme.orbit.paletteWhite,
      [_consts.TYPE_OPTIONS.WHITE]: theme.orbit.paletteInkNormal,
      [_consts.TYPE_OPTIONS.INFO_INVERTED]: theme.orbit.paletteWhite,
      [_consts.TYPE_OPTIONS.CRITICAL_INVERTED]: theme.orbit.paletteWhite,
      [_consts.TYPE_OPTIONS.SUCCESS_INVERTED]: theme.orbit.paletteWhite,
      [_consts.TYPE_OPTIONS.WARNING_INVERTED]: theme.orbit.paletteWhite,
      [_consts.TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.paletteWhite,
      [_consts.TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.paletteWhite,
      [_consts.TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.paletteWhite
    },
    [_consts.TOKENS.border]: {
      [_consts.TYPE_OPTIONS.NEUTRAL]: theme.orbit.paletteCloudDark,
      [_consts.TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueLightHover,
      [_consts.TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenLightHover,
      [_consts.TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeLightHover,
      [_consts.TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedLightHover,
      [_consts.TYPE_OPTIONS.DARK]: null,
      [_consts.TYPE_OPTIONS.WHITE]: theme.orbit.paletteCloudDark,
      [_consts.TYPE_OPTIONS.INFO_INVERTED]: null,
      [_consts.TYPE_OPTIONS.CRITICAL_INVERTED]: null,
      [_consts.TYPE_OPTIONS.SUCCESS_INVERTED]: null,
      [_consts.TYPE_OPTIONS.WARNING_INVERTED]: null,
      [_consts.TYPE_OPTIONS.BUNDLE_BASIC]: null,
      [_consts.TYPE_OPTIONS.BUNDLE_MEDIUM]: null,
      [_consts.TYPE_OPTIONS.BUNDLE_TOP]: null
    }
  };
  return tokens[name][type];
};

const Badge = ({
  type = _consts.TYPE_OPTIONS.NEUTRAL,
  border = true,
  icon,
  children,
  ariaLabel,
  dataTest,
  carriers
}) => {
  const theme = (0, _useTheme.default)();
  return /*#__PURE__*/React.createElement(_BadgePrimitive.default, {
    carriers: carriers,
    background: getTypeToken({
      name: _consts.TOKENS.background,
      theme,
      type
    }),
    foregroundColor: getTypeToken({
      name: _consts.TOKENS.color,
      theme,
      type
    }),
    borderColor: border ? getTypeToken({
      name: _consts.TOKENS.border,
      theme,
      type
    }) : "transparent",
    icon: icon,
    ariaLabel: ariaLabel,
    dataTest: dataTest
  }, children);
};

var _default = Badge;
exports.default = _default;