@octopusdeploy/design-system-components
Version:
The design systems component library.
43 lines (42 loc) • 2.34 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Breadcrumbs = Breadcrumbs;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = require("react");
const OctopusRoutingContext_1 = require("../../routing/OctopusRoutingContext");
function Breadcrumbs({ items, showBackIcon }) {
const lastItemIndex = items.length - 1;
return ((0, jsx_runtime_1.jsx)("nav", { children: (0, jsx_runtime_1.jsx)("ol", { className: breadcrumbsStyles, children: items.map((item, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(Breadcrumb, { showBackIcon: !!showBackIcon && index === 0, label: item.label, pageUrl: item.pageUrl }) }), index !== lastItemIndex && ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("span", { role: "separator", className: separatorStyles, children: "/" }) }))] }, index))) }) }));
}
function Breadcrumb({ label, pageUrl, showBackIcon }) {
const Link = (0, OctopusRoutingContext_1.useOctopusLinkComponent)();
const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showBackIcon && (0, jsx_runtime_1.jsx)(design_system_icons_1.ArrowLeftIcon, { size: 20, ariaLabel: "go back" }), (0, jsx_runtime_1.jsx)("span", { children: label })] }));
if (pageUrl === null) {
return content;
}
return ((0, jsx_runtime_1.jsx)(Link, { className: breadcrumbItemStyles, href: pageUrl, children: content }));
}
const breadcrumbsStyles = (0, css_1.css)({
listStyle: "none",
font: design_system_tokens_1.text.body.regular.small,
display: "flex",
flexWrap: "wrap",
alignItems: "center",
margin: 0,
padding: 0,
gap: design_system_tokens_1.space[8],
});
const separatorStyles = (0, css_1.css)({
userSelect: "none",
color: design_system_tokens_1.themeTokens.color.text.tertiary,
});
const breadcrumbItemStyles = (0, css_1.css)({
display: "flex",
alignItems: "center",
gap: design_system_tokens_1.space[4],
textDecoration: "none",
color: design_system_tokens_1.themeTokens.color.text.link.default,
});