@octopusdeploy/design-system-components/dist/src/components/GlobalLayout/SideNavBarLinkTab.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SideNavBarLinkTab = SideNavBarLinkTab;
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 react_1 = require("react");
const hooks_1 = require("../../hooks");
const OctopusRoutingContext_1 = require("../../routing/OctopusRoutingContext");
const resetStyles_1 = require("../../utils/resetStyles");
const Tooltip_1 = require("../Tooltip/Tooltip");
const sideNavBarTabStyles_1 = require("./sideNavBarTabStyles");
function SideNavBarLinkTab({ icon, showLinkAsActive, href, accessibleName, onClick, onIsHoveredChanged, ...props }) {
    const Link = (0, OctopusRoutingContext_1.useOctopusLinkComponent)();
    const linkRef = (0, react_1.useRef)(null);
    const isUrlActive = (0, OctopusRoutingContext_1.useIsUrlActive)();
    const isActive = isUrlActive(href, showLinkAsActive ?? "if path partially matches");
    (0, hooks_1.useOnIsHoveredChanged)(linkRef, onIsHoveredChanged);
    const label = "label" in props ? props.label : undefined;
    const tab = ((0, jsx_runtime_1.jsxs)(Link, { ref: linkRef, className: sideNavBarLinkTabStyles, "aria-current": isActive ? "page" : undefined, href: href, "aria-label": accessibleName, onClick: onClick, disableImplicitEventTracking: true, children: [icon, label] }));
    // There's no label. Show a tooltip based on the accessibility label if possible.
    if (!label && accessibleName) {
        return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { content: accessibleName, className: tooltipStyles, children: tab }));
    }
    return tab;
}
const sideNavBarLinkTabStyles = (0, css_1.cx)((0, css_1.css)(resetStyles_1.resetStyles.anchor, {
    display: "flex",
    flexDirection: "column",
    width: "100%",
    gap: design_system_tokens_1.space[2],
    "&[aria-current=page]": {
        color: design_system_tokens_1.themeTokens.color.text.selected,
        transition: "background 0.1s ease-in-out",
        ":hover": {
            background: design_system_tokens_1.themeTokens.color.background.secondary.hover,
        },
        "&::after": {
            content: '""',
            position: "absolute",
            right: "0",
            height: "100%",
            borderTopLeftRadius: "4px",
            borderBottomLeftRadius: "4px",
            width: "4px",
            background: design_system_tokens_1.colorScales.blue["400"],
        },
    },
}), sideNavBarTabStyles_1.sideNavBarTabStyles);
const tooltipStyles = (0, css_1.css)({
    width: "100%",
});