@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
112 lines • 4.35 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { css, cx } from "@emotion/css";
import { useCallback, useMemo, useState, } from "react";
import { blackAlpha, borderRadiusBase, borderRadiusFull, colorMap, fontWeightBold, neutral, } from "../../Foundations";
import { BlokIcon } from "../BlokIcon/BlokIcon";
const classes = {
badge: css({
paddingInlineStart: "0.25rem",
paddingInlineEnd: "0.25rem",
fontWeight: fontWeightBold,
borderRadius: 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: 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: css({
borderRadius: borderRadiusFull,
padding: "0.25rem",
}),
badgeMultiline: css({
whiteSpace: "normal",
"> span": {
whiteSpace: "normal",
},
}),
pointerCursor: css({
cursor: "pointer",
}),
absoluteCount: css({
position: "absolute",
right: "-8px",
top: 0,
borderRadius: borderRadiusFull,
padding: "2px",
fontSize: 10,
fontWeight: fontWeightBold,
lineHeight: 1,
zIndex: 10,
minWidth: 14,
textAlign: "center",
fontStyle: "normal",
backgroundColor: "inherit",
}),
count: css({
borderRadius: borderRadiusFull,
padding: "2px",
fontSize: 10,
fontWeight: fontWeightBold,
lineHeight: 1,
zIndex: 10,
minWidth: 14,
textAlign: "center",
fontStyle: "normal",
backgroundColor: blackAlpha[200],
}),
iconOnlyBadge: css({ overflow: "visible" }),
};
export const BlokBadge = ({ colorScheme = "neutral", children, expandedContent, expandLabel = "Expand", collapseLabel = "Collapse", iconName, className, allowMultiline = false, count, slots, onIconClick, iconRef, ref, ...extraProps }) => {
const [isExpanded, setIsExpanded] = useState(false);
const toggleExpanded = useCallback((event) => {
event.preventDefault();
event.stopPropagation();
setIsExpanded((prev) => !prev);
}, []);
const styles = useMemo(() => {
if (["gen-ai", "ai"].includes(colorScheme)) {
return {
backgroundImage: colorMap[colorScheme]?.[100],
};
}
return {
backgroundColor: colorMap[colorScheme]?.[100] ?? neutral[100],
color: colorMap[colorScheme]?.[800] ?? neutral[800],
};
}, [colorScheme]);
return (_jsxs("span", { ref: ref, className: 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 && (_jsx(BlokIcon, { icon: iconName, onClick: onIconClick, ref: iconRef })), expandedContent && (_jsx("button", { type: "button", onClick: toggleExpanded, "aria-label": isExpanded ? collapseLabel : expandLabel, className: classes.badgeButton, children: _jsx(BlokIcon, { icon: isExpanded ? "unfold-less-vertical" : "unfold-more-vertical" }) })), children && _jsx("span", { children: isExpanded ? expandedContent : children }), count && (_jsx("span", { className: children ? classes.count : classes.absoluteCount, children: count })), slots?.end] }));
};
//# sourceMappingURL=BlokBadge.js.map