@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.
63 lines (62 loc) • 2.06 kB
JavaScript
"use client";
import * as React from "react";
import cx from "clsx";
import Text from "../../Text";
import { TYPE_OPTIONS, SIZE_OPTIONS } from "../consts";
import { ICON_COLORS } from "../../Icon/consts";
const BACKGROUND = {
[TYPE_OPTIONS.NEUTRAL]: "bg-badge-neutral-background",
[TYPE_OPTIONS.INFO]: "bg-badge-info-subtle-background",
[TYPE_OPTIONS.SUCCESS]: "bg-badge-success-subtle-background",
[TYPE_OPTIONS.WARNING]: "bg-badge-warning-subtle-background",
[TYPE_OPTIONS.CRITICAL]: "bg-badge-critical-subtle-background"
};
export const getIconColor = type => {
if (type === TYPE_OPTIONS.NEUTRAL) return ICON_COLORS.SECONDARY;
return type;
};
export const ItemWrapper = ({
children,
dataTest
}) => /*#__PURE__*/React.createElement("li", {
className: "[&_+_&]:mt-xxs flex w-full flex-row",
"data-test": dataTest
}, children);
export const VerticalBadge = ({
children,
type
}) => {
return /*#__PURE__*/React.createElement("div", {
className: cx("me-xs h-icon-large w-icon-large rounded-circle flex flex-shrink-0 items-center justify-center", "[&_svg]:h-icon-small [&_svg]:w-icon-small", type && BACKGROUND[type]),
"aria-hidden": true
}, children);
};
export const BadgeContent = ({
children,
style
}) => /*#__PURE__*/React.createElement("div", {
className: "inline-flex items-center [&_.orbit-tooltip-wrapper_.orbit-text]:font-medium",
style: style
}, children);
const BadgeListItem = ({
icon,
strikeThrough,
type = TYPE_OPTIONS.NEUTRAL,
size = SIZE_OPTIONS.SMALL,
dataTest,
children
}) => {
return /*#__PURE__*/React.createElement(ItemWrapper, {
dataTest: dataTest
}, /*#__PURE__*/React.createElement(VerticalBadge, {
type: type
}, /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/React.cloneElement(icon, {
color: getIconColor(type)
})), /*#__PURE__*/React.createElement(BadgeContent, null, /*#__PURE__*/React.createElement(Text, {
type: "secondary",
size: size,
as: "span",
strikeThrough: strikeThrough
}, children)));
};
export default BadgeListItem;