@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.
80 lines • 2.99 kB
JavaScript
import * as React from "react";
import styled, { css } from "styled-components";
import Text, { StyledText } from "../../Text";
import { TYPE_OPTIONS, SIZE_OPTIONS } from "../consts";
import defaultTheme from "../../defaultTheme";
import { ICON_COLORS } from "../../Icon/consts";
import { StyledTooltipChildren } from "../../primitives/TooltipPrimitive";
import { right } from "../../utils/rtl";
const getBackground = ({
theme,
$type
}) => {
const tokens = {
[TYPE_OPTIONS.NEUTRAL]: theme.orbit.paletteCloudLight,
[TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueLight,
[TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenLight,
[TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeLight,
[TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedLight
};
if (!$type) return null;
return tokens[$type];
};
export const getIconColor = type => {
if (type === TYPE_OPTIONS.NEUTRAL) return ICON_COLORS.SECONDARY;
return type;
};
export const StyledBadgeListItem = styled.li.withConfig({
displayName: "BadgeListItem__StyledBadgeListItem",
componentId: "sc-18311xc-0"
})(["", ";"], ({
theme
}) => css(["display:flex;flex-direction:row;width:100%;& + &{margin-top:", ";}"], theme.orbit.spaceXXSmall));
StyledBadgeListItem.defaultProps = {
theme: defaultTheme
};
export const StyledVerticalBadge = styled.div.withConfig({
displayName: "BadgeListItem__StyledVerticalBadge",
componentId: "sc-18311xc-1"
})(["", ";"], ({
theme,
$type
}) => css(["background:", ";display:flex;align-items:center;justify-content:center;margin-", ":", ";flex-shrink:0;height:", ";width:", ";border-radius:", ";svg{height:", ";width:", ";}"], getBackground({
theme,
$type
}), right, theme.orbit.spaceXSmall, theme.orbit.heightIconLarge, theme.orbit.widthIconLarge, theme.orbit.borderRadiusCircle, theme.orbit.heightIconSmall, theme.orbit.widthIconSmall));
StyledVerticalBadge.defaultProps = {
theme: defaultTheme
};
export const StyledBadgeContent = styled.div.withConfig({
displayName: "BadgeListItem__StyledBadgeContent",
componentId: "sc-18311xc-2"
})(["", ";"], ({
theme
}) => css(["display:inline-flex;align-items:center;", " ", "{font-weight:", ";}"], StyledTooltipChildren, StyledText, theme.orbit.fontWeightMedium));
StyledBadgeContent.defaultProps = {
theme: defaultTheme
};
const BadgeListItem = ({
icon,
strikeThrough,
type = TYPE_OPTIONS.NEUTRAL,
size = SIZE_OPTIONS.SMALL,
dataTest,
children
}) => {
return /*#__PURE__*/React.createElement(StyledBadgeListItem, {
"data-test": dataTest
}, /*#__PURE__*/React.createElement(StyledVerticalBadge, {
$type: type,
"aria-hidden": true
}, /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/React.cloneElement(icon, {
color: getIconColor(type)
})), /*#__PURE__*/React.createElement(StyledBadgeContent, null, /*#__PURE__*/React.createElement(Text, {
type: "secondary",
size: size,
as: "span",
strikeThrough: strikeThrough
}, children)));
};
export default BadgeListItem;