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

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SideNavBarIconButtonTab = void 0;
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 resetStyles_1 = require("../../utils/resetStyles");
const sideNavBarTabStyles_1 = require("./sideNavBarTabStyles");
exports.SideNavBarIconButtonTab = (0, react_1.forwardRef)(({ onClick, accessibleName, icon, ...otherProps }, ref) => {
    const ariaAttributes = getSideNavBarButtonTabAriaAttributes(otherProps);
    return ((0, jsx_runtime_1.jsx)("button", { className: sideNavBarButtonTabStyles, onClick: onClick, "aria-label": accessibleName, ref: ref, ...ariaAttributes, children: icon }));
});
function getSideNavBarButtonTabAriaAttributes(props) {
    const ariaAttributes = {
        ["aria-controls"]: props["aria-controls"],
        ["aria-haspopup"]: props["aria-haspopup"],
        ["aria-expanded"]: props["aria-expanded"],
    };
    return ariaAttributes;
}
const sideNavBarButtonTabStyles = (0, css_1.cx)((0, css_1.css)(resetStyles_1.resetStyles.button, {
    "&[aria-expanded=true]": {
        background: design_system_tokens_1.themeTokens.color.navTab.background.active,
    },
}), sideNavBarTabStyles_1.sideNavBarTabStyles);
exports.SideNavBarIconButtonTab.displayName = "SideNavBarIconButtonTab";