@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
60 lines • 2.58 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.BlokLabeledIcon = 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 = {
labeledIcon: (0, css_1.css)({
display: "flex",
alignItems: "center",
gap: 4,
maxWidth: "100%",
overflow: "hidden",
textOverflow: "ellipsis",
fontSize: Foundations_1.fontSizeSmall,
fontWeight: Foundations_1.fontWeightBold,
borderRadius: Foundations_1.borderRadiusBase,
".m-icon": {
fontSize: "1.5em",
},
}),
labeledIconBackground: (0, css_1.css)({
padding: "0.25rem",
justifyContent: "center",
}),
round: (0, css_1.css)({
borderRadius: Foundations_1.borderRadiusFull,
minWidth: "32px",
minHeight: "32px",
".m-icon": {
fontSize: "1.2rem",
},
}),
};
const BlokLabeledIcon = ({ iconName, children, colorTarget = "foreground", colorScheme = "neutral", fontSize = Foundations_1.fontSizeSmall, isRound = false, className, ...extraProps }) => {
const styles = (0, react_1.useMemo)(() => {
if (colorTarget === "background") {
return {
backgroundColor: Foundations_1.colorMap[colorScheme]?.[100] ?? Foundations_1.neutral[100],
color: isRound
? (Foundations_1.colorMap[colorScheme]?.[500] ?? Foundations_1.neutral[500])
: (Foundations_1.colorMap[colorScheme]?.[300] ?? Foundations_1.neutral[300]),
fontSize,
};
}
return {
color: children
? (Foundations_1.colorMap[colorScheme]?.[500] ?? Foundations_1.neutral[500])
: (Foundations_1.colorMap[colorScheme]?.[400] ?? Foundations_1.neutral[400]),
fontSize,
};
}, [children, colorScheme, colorTarget, fontSize, isRound]);
return ((0, jsx_runtime_1.jsxs)("span", { style: styles, className: (0, css_1.cx)(classes.labeledIcon, colorTarget === "background"
? classes.labeledIconBackground
: undefined, isRound ? classes.round : undefined, className), ...extraProps, children: [iconName && (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: iconName }), children] }));
};
exports.BlokLabeledIcon = BlokLabeledIcon;
//# sourceMappingURL=BlokLabeledIcon.js.map