UNPKG

@kiwicom/orbit-components

Version:

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

47 lines (43 loc) 4.33 kB
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty"; import * as React from "react"; import BadgePrimitive from "../primitives/BadgePrimitive"; import { TYPE_OPTIONS, TOKENS } from "./consts"; import useTheme from "../hooks/useTheme"; var getTypeToken = function getTypeToken(_ref) { var _TOKENS$background, _TOKENS$color, _TOKENS$border, _tokens; var name = _ref.name, theme = _ref.theme, type = _ref.type; var tokens = (_tokens = {}, _defineProperty(_tokens, TOKENS.background, (_TOKENS$background = {}, _defineProperty(_TOKENS$background, TYPE_OPTIONS.NEUTRAL, theme.orbit.paletteCloudLight), _defineProperty(_TOKENS$background, TYPE_OPTIONS.INFO, theme.orbit.paletteBlueLight), _defineProperty(_TOKENS$background, TYPE_OPTIONS.SUCCESS, theme.orbit.paletteGreenLight), _defineProperty(_TOKENS$background, TYPE_OPTIONS.WARNING, theme.orbit.paletteOrangeLight), _defineProperty(_TOKENS$background, TYPE_OPTIONS.CRITICAL, theme.orbit.paletteRedLight), _defineProperty(_TOKENS$background, TYPE_OPTIONS.DARK, theme.orbit.paletteInkNormal), _defineProperty(_TOKENS$background, TYPE_OPTIONS.WHITE, theme.orbit.paletteWhite), _defineProperty(_TOKENS$background, TYPE_OPTIONS.INFO_INVERTED, theme.orbit.paletteBlueNormal), _defineProperty(_TOKENS$background, TYPE_OPTIONS.CRITICAL_INVERTED, theme.orbit.paletteRedNormal), _defineProperty(_TOKENS$background, TYPE_OPTIONS.SUCCESS_INVERTED, theme.orbit.paletteGreenNormal), _defineProperty(_TOKENS$background, TYPE_OPTIONS.WARNING_INVERTED, theme.orbit.paletteOrangeNormal), _TOKENS$background)), _defineProperty(_tokens, TOKENS.color, (_TOKENS$color = {}, _defineProperty(_TOKENS$color, TYPE_OPTIONS.NEUTRAL, theme.orbit.paletteInkNormal), _defineProperty(_TOKENS$color, TYPE_OPTIONS.INFO, theme.orbit.paletteBlueDark), _defineProperty(_TOKENS$color, TYPE_OPTIONS.SUCCESS, theme.orbit.paletteGreenDark), _defineProperty(_TOKENS$color, TYPE_OPTIONS.WARNING, theme.orbit.paletteOrangeDark), _defineProperty(_TOKENS$color, TYPE_OPTIONS.CRITICAL, theme.orbit.paletteRedDark), _defineProperty(_TOKENS$color, TYPE_OPTIONS.DARK, theme.orbit.paletteWhite), _defineProperty(_TOKENS$color, TYPE_OPTIONS.WHITE, theme.orbit.paletteInkNormal), _defineProperty(_TOKENS$color, TYPE_OPTIONS.INFO_INVERTED, theme.orbit.paletteWhite), _defineProperty(_TOKENS$color, TYPE_OPTIONS.CRITICAL_INVERTED, theme.orbit.paletteWhite), _defineProperty(_TOKENS$color, TYPE_OPTIONS.SUCCESS_INVERTED, theme.orbit.paletteWhite), _defineProperty(_TOKENS$color, TYPE_OPTIONS.WARNING_INVERTED, theme.orbit.paletteWhite), _TOKENS$color)), _defineProperty(_tokens, TOKENS.border, (_TOKENS$border = {}, _defineProperty(_TOKENS$border, TYPE_OPTIONS.NEUTRAL, theme.orbit.paletteCloudDark), _defineProperty(_TOKENS$border, TYPE_OPTIONS.INFO, theme.orbit.paletteBlueLightHover), _defineProperty(_TOKENS$border, TYPE_OPTIONS.SUCCESS, theme.orbit.paletteGreenLightHover), _defineProperty(_TOKENS$border, TYPE_OPTIONS.WARNING, theme.orbit.paletteOrangeLightHover), _defineProperty(_TOKENS$border, TYPE_OPTIONS.CRITICAL, theme.orbit.paletteRedLightHover), _defineProperty(_TOKENS$border, TYPE_OPTIONS.DARK, null), _defineProperty(_TOKENS$border, TYPE_OPTIONS.WHITE, null), _defineProperty(_TOKENS$border, TYPE_OPTIONS.INFO_INVERTED, null), _defineProperty(_TOKENS$border, TYPE_OPTIONS.CRITICAL_INVERTED, null), _defineProperty(_TOKENS$border, TYPE_OPTIONS.SUCCESS_INVERTED, null), _defineProperty(_TOKENS$border, TYPE_OPTIONS.WARNING_INVERTED, null), _TOKENS$border)), _tokens); return tokens[name][type]; }; var Badge = function Badge(props) { var theme = useTheme(); var _props$type = props.type, type = _props$type === void 0 ? TYPE_OPTIONS.NEUTRAL : _props$type, icon = props.icon, children = props.children, ariaLabel = props.ariaLabel, dataTest = props.dataTest; return /*#__PURE__*/React.createElement(BadgePrimitive, { background: getTypeToken({ name: TOKENS.background, theme: theme, type: type }), foregroundColor: getTypeToken({ name: TOKENS.color, theme: theme, type: type }), borderColor: getTypeToken({ name: TOKENS.border, theme: theme, type: type }), icon: icon, ariaLabel: ariaLabel, dataTest: dataTest }, children); }; export default Badge;