@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
116 lines • 4.76 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.BlokBadge = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const react_1 = require("react");
const Foundations_1 = require("../../Foundations");
const BlokIcon_1 = require("../BlokIcon/BlokIcon");
const classes = {
badge: (0, css_1.css)({
paddingInlineStart: "0.25rem",
paddingInlineEnd: "0.25rem",
fontWeight: Foundations_1.fontWeightBold,
borderRadius: Foundations_1.borderRadiusBase,
display: "inline-flex",
textTransform: "uppercase",
fontSize: "0.75rem",
verticalAlign: "middle",
gap: "0.5rem",
alignItems: "center",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
maxWidth: "100%",
position: "relative",
"> span": {
maxWidth: "100%",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
overflow: "hidden",
},
".m-icon": {
fontSize: "1.25em",
},
}),
badgeButton: (0, css_1.css)({
background: "transparent",
border: "none",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "1em",
width: "auto",
height: "auto",
margin: 0,
padding: 0,
cursor: "pointer",
opacity: "0.5",
"&:hover": {
opacity: 0.8,
},
}),
badgeIconOnly: (0, css_1.css)({
borderRadius: Foundations_1.borderRadiusFull,
padding: "0.25rem",
}),
badgeMultiline: (0, css_1.css)({
whiteSpace: "normal",
"> span": {
whiteSpace: "normal",
},
}),
pointerCursor: (0, css_1.css)({
cursor: "pointer",
}),
absoluteCount: (0, css_1.css)({
position: "absolute",
right: "-8px",
top: 0,
borderRadius: Foundations_1.borderRadiusFull,
padding: "2px",
fontSize: 10,
fontWeight: Foundations_1.fontWeightBold,
lineHeight: 1,
zIndex: 10,
minWidth: 14,
textAlign: "center",
fontStyle: "normal",
backgroundColor: "inherit",
}),
count: (0, css_1.css)({
borderRadius: Foundations_1.borderRadiusFull,
padding: "2px",
fontSize: 10,
fontWeight: Foundations_1.fontWeightBold,
lineHeight: 1,
zIndex: 10,
minWidth: 14,
textAlign: "center",
fontStyle: "normal",
backgroundColor: Foundations_1.blackAlpha[200],
}),
iconOnlyBadge: (0, css_1.css)({ overflow: "visible" }),
};
const BlokBadge = ({ colorScheme = "neutral", children, expandedContent, expandLabel = "Expand", collapseLabel = "Collapse", iconName, className, allowMultiline = false, count, slots, ...extraProps }) => {
const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
const toggleExpanded = (0, react_1.useCallback)((event) => {
event.preventDefault();
event.stopPropagation();
setIsExpanded((prev) => !prev);
}, []);
const styles = (0, react_1.useMemo)(() => {
if (["gen-ai", "ai"].includes(colorScheme)) {
return {
backgroundImage: Foundations_1.colorMap[colorScheme]?.[100],
};
}
return {
backgroundColor: Foundations_1.colorMap[colorScheme]?.[100] ?? Foundations_1.neutral[100],
color: Foundations_1.colorMap[colorScheme]?.[800] ?? Foundations_1.neutral[800],
};
}, [colorScheme]);
return ((0, jsx_runtime_1.jsxs)("span", { className: (0, css_1.cx)(classes.badge, !children && classes.iconOnlyBadge, !children && iconName ? classes.badgeIconOnly : undefined, allowMultiline && classes.badgeMultiline, expandedContent ? classes.pointerCursor : undefined, className), style: styles, onClick: expandedContent ? toggleExpanded : undefined, ...extraProps, children: [slots?.start, iconName && (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: iconName }), expandedContent && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggleExpanded, "aria-label": isExpanded ? collapseLabel : expandLabel, className: classes.badgeButton, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: isExpanded ? "unfold-less-vertical" : "unfold-more-vertical" }) })), children && (0, jsx_runtime_1.jsx)("span", { children: isExpanded ? expandedContent : children }), count && ((0, jsx_runtime_1.jsx)("span", { className: children ? classes.count : classes.absoluteCount, children: count })), slots?.end] }));
};
exports.BlokBadge = BlokBadge;
//# sourceMappingURL=BlokBadge.js.map