@frontify/fondue
Version:
Design system of Frontify
85 lines (84 loc) • 3.11 kB
JavaScript
import { jsxs as p, jsx as a } from "react/jsx-runtime";
import { cloneElement as B } from "react";
import C from "../../foundation/Icon/Generated/IconCross.es.js";
import { IconSize as c } from "../../foundation/Icon/IconSize.es.js";
import { FOCUS_VISIBLE_STYLE as d } from "../../utilities/focusStyle.es.js";
import { merge as m } from "../../utilities/merge.es.js";
import { BadgeStatusIcon as j } from "./BadgeStatusIcon.es.js";
import { getCircularSizeClasses as v, getSizeClasses as z, getStyleClasses as h } from "./helpers.es.js";
import { BadgeEmphasis as g, BadgeStyle as E } from "./types.es.js";
const $ = ({
children: e,
status: r,
icon: i,
style: x = E.Primary,
size: w = "medium",
emphasis: b = g.None,
disabled: s = !1,
onClick: n,
onDismiss: l,
"data-test-id": o = "badge",
withTitleAttribute: S = !0
}) => {
if (!e && !i && !r)
return null;
const y = n ? "button" : "span", f = (t) => ["string", "number"].includes(typeof t) ? t : Array.isArray(t) ? t.map(f).join("") : t && typeof t == "object" && "props" in t ? f(t.props.children) : "", u = f(e), N = !e && !l && !!(r || i);
return /* @__PURE__ */ p(
"div",
{
className: m([
"tw-relative tw-rounded-full tw-inline-flex tw-items-center tw-align-top tw-min-w-0 tw-flex-initial tw-transition-color",
s ? "tw-bg-box-disabled tw-text-box-disabled-inverse" : h(x, !!n, b === g.Strong)
]),
"data-test-id": o,
children: [
/* @__PURE__ */ p(
y,
{
onClick: () => n && n(),
className: m([
"tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-select-none tw-flex-initial tw-min-w-0",
n && !s ? "hover:tw-cursor-pointer" : "tw-cursor-default",
N ? v(w) : z(e, r, i, w, !!l),
d
]),
"data-test-id": `${o}-button`,
title: S ? u : void 0,
children: [
r && /* @__PURE__ */ a(j, { status: r, disabled: s, "data-test-id": o }),
i && /* @__PURE__ */ a(
"span",
{
"data-test-id": `${o}-icon`,
className: m(["tw-flex-none tw-leading-none", s && "tw-opacity-30"]),
children: B(i, { size: c.Size16 })
}
),
e && /* @__PURE__ */ a("span", { className: "tw-text-center tw-text-xxs tw-font-sans tw-font-normal tw-truncate", children: e })
]
}
),
l && /* @__PURE__ */ a(
"button",
{
type: "button",
"data-test-id": `${o}-dismiss`,
className: m([
"tw-absolute tw-rounded tw-leading-4",
d,
w === "medium" ? "tw-right-1.5" : "tw-right-1"
]),
onClick: () => l(),
"aria-label": `Dismiss ${u}`,
children: /* @__PURE__ */ a(C, { size: c.Size16 })
}
)
]
}
);
};
$.displayName = "FondueBadge";
export {
$ as Badge
};
//# sourceMappingURL=Badge.es.js.map