@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
35 lines • 1.51 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { css, cx } from "@emotion/css";
import { semanticTokens } from "../../Foundations";
const classes = {
breadCrumbItem: css({
display: "inline-flex",
alignItems: "center",
}),
breadcrumbLink: css({
color: semanticTokens.subtleText.default,
textDecoration: "none",
outline: "transparent solid 2px",
outlineOffset: "2px",
"&:hover": {
textDecoration: "underline",
color: semanticTokens.subtleText.default,
},
"&:focus, &:active": {
color: semanticTokens.subtleText.default,
},
}),
currentValue: css({
color: semanticTokens.subtleText.default,
outline: "transparent solid 2px",
outlineOffset: "2px",
}),
separator: css({
marginInline: "0.5rem",
color: semanticTokens.subtleText.default,
}),
};
export const BlokBreadcrumbItem = ({ children, isCurrentItem, separator = "/", ...props }) => {
return (_jsx("li", { className: classes.breadCrumbItem, children: !isCurrentItem ? (_jsxs(_Fragment, { children: [_jsx("a", { ...props, className: cx(classes.breadcrumbLink, props.className), children: children }), _jsx("span", { role: "presentation", className: classes.separator, children: separator })] })) : (_jsx("span", { className: classes.currentValue, children: children })) }));
};
//# sourceMappingURL=BlokBreadcrumbItem.js.map