@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
56 lines • 2.19 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { css, cx } from "@emotion/css";
import { useMemo } from "react";
import { borderRadiusBase, borderRadiusFull, colorMap, fontSizeSmall, fontWeightBold, neutral, } from "../../Foundations";
import { BlokIcon } from "../BlokIcon/BlokIcon";
const classes = {
labeledIcon: css({
display: "flex",
alignItems: "center",
gap: 4,
maxWidth: "100%",
overflow: "hidden",
textOverflow: "ellipsis",
fontSize: fontSizeSmall,
fontWeight: fontWeightBold,
borderRadius: borderRadiusBase,
".m-icon": {
fontSize: "1.5em",
},
}),
labeledIconBackground: css({
padding: "0.25rem",
justifyContent: "center",
}),
round: css({
borderRadius: borderRadiusFull,
minWidth: "32px",
minHeight: "32px",
".m-icon": {
fontSize: "1.2rem",
},
}),
};
export const BlokLabeledIcon = ({ iconName, children, colorTarget = "foreground", colorScheme = "neutral", fontSize = fontSizeSmall, isRound = false, className, ...extraProps }) => {
const styles = useMemo(() => {
if (colorTarget === "background") {
return {
backgroundColor: colorMap[colorScheme]?.[100] ?? neutral[100],
color: isRound
? (colorMap[colorScheme]?.[500] ?? neutral[500])
: (colorMap[colorScheme]?.[300] ?? neutral[300]),
fontSize,
};
}
return {
color: children
? (colorMap[colorScheme]?.[500] ?? neutral[500])
: (colorMap[colorScheme]?.[400] ?? neutral[400]),
fontSize,
};
}, [children, colorScheme, colorTarget, fontSize, isRound]);
return (_jsxs("span", { style: styles, className: cx(classes.labeledIcon, colorTarget === "background"
? classes.labeledIconBackground
: undefined, isRound ? classes.round : undefined, className), ...extraProps, children: [iconName && _jsx(BlokIcon, { icon: iconName }), children] }));
};
//# sourceMappingURL=BlokLabeledIcon.js.map