@octopusdeploy/design-system-components
Version:
The design systems component library.
90 lines (89 loc) • 4.56 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.badgeStatuses = void 0;
exports.StatusBadge = StatusBadge;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const type_utils_1 = require("@octopusdeploy/type-utils");
exports.badgeStatuses = ["healthy", "healthy-with-warnings", "unavailable", "unhealthy", "unknown", "disabled"];
function StatusBadge({ status, size = "medium", showLabel = false }) {
const { icon: StatusIcon, label } = getIconAndLabel(status);
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(badgeStyles(size), statusStyles[status]), children: [(0, jsx_runtime_1.jsx)(StatusIcon, { size: size === "small" ? 16 : 20, title: !showLabel ? label : undefined }), showLabel && size === "medium" && (0, jsx_runtime_1.jsx)("span", { className: labelStyles, children: label })] }));
}
function getIconAndLabel(status) {
switch (status) {
case "healthy":
return { icon: design_system_icons_1.CheckIcon, label: "Healthy" };
case "healthy-with-warnings":
return { icon: design_system_icons_1.ExclamationCircleIcon, label: "Healthy with warnings" };
case "unavailable":
return { icon: design_system_icons_1.BanIcon, label: "Unavailable" };
case "unhealthy":
return { icon: design_system_icons_1.XmarkIcon, label: "Unhealthy" };
case "unknown":
return { icon: design_system_icons_1.QuestionMarkIcon, label: "Unknown" };
case "disabled":
return { icon: design_system_icons_1.DashedCircleIcon, label: "Disabled" };
default:
return (0, type_utils_1.exhaustiveCheck)(status, `Unexpected status ${status} for StatusBadge`);
}
}
const badgeStyles = (size) => (0, css_1.css)({
boxSizing: "border-box",
display: "inline-flex",
borderRadius: design_system_tokens_1.borderRadius.circle,
alignItems: "center",
justifyContent: "center",
padding: size === "small" ? `${design_system_tokens_1.space[1]} ${design_system_tokens_1.space[1]}` : `${design_system_tokens_1.space[2]} ${design_system_tokens_1.space[2]}`,
gap: design_system_tokens_1.space[4],
font: design_system_tokens_1.text.body.regular.medium,
});
const labelStyles = (0, css_1.css)({
paddingRight: design_system_tokens_1.space[4],
});
const statusStyles = {
healthy: (0, css_1.css)({
backgroundColor: design_system_tokens_1.themeTokens.color.statusBadge.background.healthy,
color: design_system_tokens_1.themeTokens.color.statusBadge.text.primary,
svg: {
color: design_system_tokens_1.themeTokens.color.statusBadge.icon.default,
},
}),
"healthy-with-warnings": (0, css_1.css)({
backgroundColor: design_system_tokens_1.themeTokens.color.statusBadge.background.healthy,
color: design_system_tokens_1.themeTokens.color.statusBadge.text.primary,
svg: {
color: design_system_tokens_1.themeTokens.color.statusBadge.icon.default,
},
}),
unavailable: (0, css_1.css)({
backgroundColor: design_system_tokens_1.themeTokens.color.statusBadge.background.warning,
color: design_system_tokens_1.themeTokens.color.statusBadge.text.primary,
svg: {
color: design_system_tokens_1.themeTokens.color.statusBadge.icon.default,
},
}),
unhealthy: (0, css_1.css)({
backgroundColor: design_system_tokens_1.themeTokens.color.statusBadge.background.unhealthy,
color: design_system_tokens_1.themeTokens.color.statusBadge.text.primary,
svg: {
color: design_system_tokens_1.themeTokens.color.statusBadge.icon.default,
},
}),
unknown: (0, css_1.css)({
backgroundColor: design_system_tokens_1.themeTokens.color.statusBadge.background.neutral,
color: design_system_tokens_1.themeTokens.color.statusBadge.text.inverse,
svg: {
color: design_system_tokens_1.themeTokens.color.statusBadge.icon.inverse,
},
}),
disabled: (0, css_1.css)({
backgroundColor: design_system_tokens_1.themeTokens.color.statusBadge.background.neutral,
color: design_system_tokens_1.themeTokens.color.statusBadge.text.inverse,
svg: {
color: design_system_tokens_1.themeTokens.color.statusBadge.icon.inverse,
},
}),
};