@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
56 lines • 2.44 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { css, cx } from "@emotion/css";
import { useInView } from "react-intersection-observer";
import { backgroundColorByName, colorByName, iconSizeDefault, iconSizeExtraSmall, iconSizeSmall, } from "../../Foundations";
import { useReferencedSvgIcon } from "./useSvgIcon";
const extraSmallIcon = css({
fontSize: iconSizeExtraSmall,
});
const smallIcon = css({
fontSize: iconSizeSmall,
});
const defaultIcon = css({
fontSize: iconSizeDefault,
});
const svgStyles = 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.
},
});
export 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 } = useInView();
const svgIcon = useReferencedSvgIcon(iconName, ignoreIconOverride, inView);
if (!iconName) {
return null;
}
return (_jsx("i", { ref: (node) => {
if (typeof ref === "function") {
ref(node);
}
inViewRef(node);
}, className: cx("m-icon", classes, icon, iconColor ? colorByName(iconColor, iconColorShade) : null, iconBackgroundColor
? 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 } : {}) }));
};
//# sourceMappingURL=BlokIcon.js.map