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