@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
60 lines • 2.71 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.BlokIcon = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const react_intersection_observer_1 = require("react-intersection-observer");
const Foundations_1 = require("../../Foundations");
const useSvgIcon_1 = require("./useSvgIcon");
const extraSmallIcon = (0, css_1.css)({
fontSize: Foundations_1.iconSizeExtraSmall,
});
const smallIcon = (0, css_1.css)({
fontSize: Foundations_1.iconSizeSmall,
});
const defaultIcon = (0, css_1.css)({
fontSize: Foundations_1.iconSizeDefault,
});
const svgStyles = (0, css_1.css)({
lineHeight: 1,
height: "1em",
display: "inline-block",
"& svg": {
width: "1em",
height: "1em",
position: "sticky",
zIndex: 1,
verticalAlign: "baseline",
userSelect: "none",
fill: "currentColor",
color: "currentColor",
lineHeight: 1,
flexShrink: 0,
},
"& path[stroke]": {
stroke: "currentColor",
fill: "transparent",
},
"&:before": {
display: "none", // We need to make sure that on hybrid pages the icons are not shown twice.
},
});
const BlokIcon = ({ ref, icon, classes, label, iconColor, iconColorShade = 500, iconBackgroundColor, iconBackgroundColorShade = 100, iconSize = "default", ignoreIconOverride = false, fontSize, ...props }) => {
const iconName = icon.replace("m-icon ", "").replace("m-icon-", "");
const fullIconName = `m-icon-${iconName}`;
const { inView, ref: inViewRef } = (0, react_intersection_observer_1.useInView)();
const svgIcon = (0, useSvgIcon_1.useReferencedSvgIcon)(iconName, ignoreIconOverride, inView);
if (!iconName) {
return null;
}
return ((0, jsx_runtime_1.jsx)("i", { ref: (node) => {
if (typeof ref === "function") {
ref(node);
}
inViewRef(node);
}, className: (0, css_1.cx)("m-icon", classes, icon, iconColor ? (0, Foundations_1.colorByName)(iconColor, iconColorShade) : null, iconBackgroundColor
? (0, Foundations_1.backgroundColorByName)(iconBackgroundColor, iconBackgroundColorShade)
: null, iconSize === "small" ? smallIcon : undefined, iconSize === "extraSmall" ? extraSmallIcon : undefined, iconSize === "default" ? defaultIcon : undefined, svgStyles), ...props, style: fontSize ? { fontSize } : undefined, "aria-label": label ?? fullIconName, "data-testid": fullIconName, dangerouslySetInnerHTML: { __html: svgIcon }, ...(iconColor ? { "data-icon-color": iconColor } : {}) }));
};
exports.BlokIcon = BlokIcon;
//# sourceMappingURL=BlokIcon.js.map