@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.
75 lines (74 loc) • 2.46 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";
import { iconColorClasses } from "../../Icon";
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"
};
const ICON_COLOR = {
[TYPE_OPTIONS.NEUTRAL]: iconColorClasses[ICON_COLORS.SECONDARY],
[TYPE_OPTIONS.INFO]: iconColorClasses[ICON_COLORS.INFO],
[TYPE_OPTIONS.SUCCESS]: iconColorClasses[ICON_COLORS.SUCCESS],
[TYPE_OPTIONS.WARNING]: iconColorClasses[ICON_COLORS.WARNING],
[TYPE_OPTIONS.CRITICAL]: iconColorClasses[ICON_COLORS.CRITICAL]
};
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: "orbit-badge-list-item flex w-full flex-row",
"data-test": dataTest
}, children);
export const VerticalBadge = ({
icon,
type,
iconLabel
}) => {
return /*#__PURE__*/React.createElement("div", {
className: cx("me-200 size-icon-large flex shrink-0 items-center justify-center rounded-full", "[&_svg]:size-icon-small", type && [BACKGROUND[type], ICON_COLOR[type]]),
"aria-hidden": !iconLabel,
"aria-label": iconLabel,
role: iconLabel ? "img" : undefined
}, icon);
};
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,
iconLabel
}) => {
return /*#__PURE__*/React.createElement(ItemWrapper, {
dataTest: dataTest
}, /*#__PURE__*/React.createElement(VerticalBadge, {
type: type,
icon: icon,
iconLabel: iconLabel
}), /*#__PURE__*/React.createElement(BadgeContent, null, /*#__PURE__*/React.createElement(Text, {
type: "secondary",
size: size,
as: "span",
strikeThrough: strikeThrough
}, children)));
};
export default BadgeListItem;