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

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NavIconButton = 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");
exports.NavIconButton = (0, react_1.forwardRef)(({ onClick, accessibleName, icon, ...props }, ref) => {
    const ariaAttributes = {
        ["aria-controls"]: props["aria-controls"],
        ["aria-haspopup"]: props["aria-haspopup"],
        ["aria-expanded"]: props["aria-expanded"],
    };
    return ((0, jsx_runtime_1.jsx)("button", { className: navIconButtonStyles, onClick: onClick, "aria-label": accessibleName, ref: ref, ...ariaAttributes, children: icon }));
});
exports.NavIconButton.displayName = "NavIconButton";
const navIconButtonStyles = (0, css_1.css)({
    ...resetStyles_1.resetStyles.button,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    height: "2.25rem",
    minWidth: "2.25rem",
    borderRadius: design_system_tokens_1.borderRadius.small,
    color: design_system_tokens_1.themeTokens.color.navButton.icon.default,
    background: "transparent",
    ":focus-visible": {
        color: design_system_tokens_1.themeTokens.color.navButton.icon.hover,
        background: design_system_tokens_1.themeTokens.color.navButton.background.hover,
        boxShadow: design_system_tokens_1.themeTokens.shadow.focused,
        zIndex: 1,
    },
    ":hover": {
        color: design_system_tokens_1.themeTokens.color.navButton.icon.hover,
        background: design_system_tokens_1.themeTokens.color.navButton.background.hover,
    },
    ":active": {
        color: design_system_tokens_1.themeTokens.color.navButton.icon.pressed,
        background: design_system_tokens_1.themeTokens.color.navButton.background.pressed,
    },
    "&[aria-expanded=true]": {
        color: design_system_tokens_1.themeTokens.color.navButton.icon.active,
        background: design_system_tokens_1.themeTokens.color.navButton.background.active,
    },
});