@octopusdeploy/design-system-components
Version:
The design systems component library.
51 lines (50 loc) • 2.76 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.AreaNavListLink = AreaNavListLink;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const Badge_1 = require("../../components/Badge");
const index_1 = require("../../routing/index");
function AreaNavListLink({ href, showLinkAsActive, label, accessibleName, onClick, icon, featureBadgeLabel }) {
const Link = (0, index_1.useOctopusLinkComponent)();
const isUrlActive = (0, index_1.useIsUrlActive)();
const isActive = isUrlActive(href, showLinkAsActive ?? "if path partially matches");
return ((0, jsx_runtime_1.jsxs)(Link, { className: areaNavListLinkStyles, "aria-current": isActive ? "page" : undefined, href: href, "aria-label": accessibleName, onClick: onClick, title: label, disableImplicitEventTracking: true, children: [icon && (0, jsx_runtime_1.jsx)("div", { children: icon }), (0, jsx_runtime_1.jsx)("span", { className: areaNavListLinkTextStyles, children: label }), featureBadgeLabel && (0, jsx_runtime_1.jsx)(Badge_1.Badge, { label: featureBadgeLabel, size: "small", variant: "feature" })] }));
}
const areaNavListLinkStyles = (0, css_1.css)({
display: "flex",
width: "100%",
height: "2rem",
alignItems: "center",
gap: design_system_tokens_1.space[8],
textDecoration: "none",
font: design_system_tokens_1.text.body.regular.medium,
color: design_system_tokens_1.themeTokens.color.navList.text.default,
backgroundColor: design_system_tokens_1.themeTokens.color.navList.background.default,
padding: `${design_system_tokens_1.space[4]} ${design_system_tokens_1.space[8]}`,
borderRadius: design_system_tokens_1.borderRadius.small,
":hover": {
color: design_system_tokens_1.themeTokens.color.navList.text.hover,
backgroundColor: design_system_tokens_1.themeTokens.color.navList.background.hover,
},
":active": {
color: design_system_tokens_1.themeTokens.color.navList.text.active,
background: design_system_tokens_1.themeTokens.color.navList.background.active,
},
":focus-visible": {
boxShadow: design_system_tokens_1.themeTokens.shadow.focused,
outline: "none",
},
"&[aria-current=page]": {
backgroundColor: design_system_tokens_1.themeTokens.color.navList.background.active,
color: design_system_tokens_1.themeTokens.color.navList.text.active,
},
});
const areaNavListLinkTextStyles = (0, css_1.css)({
// Needs a minWidth set to allow for the ellipsis text truncation within a flexbox
minWidth: 0,
whiteSpace: "nowrap",
overflow: "clip",
textOverflow: "ellipsis",
});