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