@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
104 lines (103 loc) • 2.47 kB
JavaScript
import { c as _c } from "react-compiler-runtime";
import { forwardRef } from "react";
import classnames from "classnames";
import { jsx as _jsx } from "react/jsx-runtime";
const stateClass = {
default: "bfc-theme-fade-bg",
neutral: "bfc-neutral-fade-bg",
brand: "bfc-brand-fade-bg",
chill: "bfc-chill-fade-bg",
attn: "bfc-attn-fade-bg",
success: "bfc-success-fade-bg",
warning: "bfc-warning-fade-bg",
alert: "bfc-alert-fade-bg"
};
const invertedStateClass = {
default: "bfc-theme-bg",
neutral: "bfc-neutral-bg",
brand: "bfc-brand-bg",
chill: "bfc-chill-bg",
attn: "bfc-attn-bg",
success: "bfc-success-bg",
warning: "bfc-warning-bg",
alert: "bfc-alert-bg"
};
/**
* Non-clickable badge for very short messages (i.e. server status) - also see
* `<Tag>`
*
* @see https://bifrost.intility.com/react/badge
*
* @example
* <Badge>Badger</Badge>
* <Badge state='chill'>Chill</Badge>
* <Badge pill>Pill</Badge>
*/
const Badge = /*#__PURE__*/forwardRef((t0, ref) => {
const $ = _c(16);
let children;
let className;
let props;
let t1;
let t2;
let t3;
if ($[0] !== t0) {
({
children,
className,
state: t1,
inverted: t2,
pill: t3,
...props
} = t0);
$[0] = t0;
$[1] = children;
$[2] = className;
$[3] = props;
$[4] = t1;
$[5] = t2;
$[6] = t3;
} else {
children = $[1];
className = $[2];
props = $[3];
t1 = $[4];
t2 = $[5];
t3 = $[6];
}
const state = t1 === undefined ? "default" : t1;
const inverted = t2 === undefined ? false : t2;
const pill = t3 === undefined ? false : t3;
const colorClassName = inverted ? invertedStateClass[state] ?? invertedStateClass.default : stateClass[state] ?? stateClass.default;
let t4;
if ($[7] !== className || $[8] !== colorClassName || $[9] !== pill) {
t4 = classnames("bf-badge", "bf-open-sans", className, colorClassName, {
"bf-badge-pill": pill
});
$[7] = className;
$[8] = colorClassName;
$[9] = pill;
$[10] = t4;
} else {
t4 = $[10];
}
let t5;
if ($[11] !== children || $[12] !== props || $[13] !== ref || $[14] !== t4) {
t5 = /*#__PURE__*/_jsx("span", {
className: t4,
ref: ref,
...props,
children: children
});
$[11] = children;
$[12] = props;
$[13] = ref;
$[14] = t4;
$[15] = t5;
} else {
t5 = $[15];
}
return t5;
});
Badge.displayName = "Badge";
export default Badge;