@atlaskit/atlassian-navigation/dist/cjs/components/PrimaryButton/index.js

A horizontal navigation component for Atlassian products.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.PrimaryButton = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _constants = require("../../common/constants");
var _theme = require("../../theme");
var _styles = require("./styles");
var _excluded = ["children", "testId", "tooltip", "isSelected", "isHighlighted"];
var VAR_BUTTON_SELECTED_COLOR = '--button-selected-color';
var VAR_BUTTON_SELECTED_BORDER_COLOR = '--button-selected-border-color';
var buttonBaseStyles = (0, _react2.css)({
  display: 'flex',
  height: '100%',
  position: 'relative',
  alignItems: 'center',
  justifyContent: 'center',
  flexDirection: 'column'
});
var buttonHighlightedStyles = (0, _react2.css)({
  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
  '&& > *': {
    color: "var(".concat(VAR_BUTTON_SELECTED_COLOR, ")")
  },
  '&:after': {
    height: 3,
    position: 'absolute',
    right: _constants.gridSize / 2,
    bottom: 0,
    left: _constants.gridSize / 2,
    backgroundColor: "var(".concat(VAR_BUTTON_SELECTED_BORDER_COLOR, ")"),
    borderTopLeftRadius: 1,
    borderTopRightRadius: 1,
    content: '""'
  }
});

/**
 * __Primary button__
 *
 * A primary button allows you to add top-level navigation items.
 * Should be passed into `AtlassianNavigation`'s `primaryItems` prop.
 *
 * - [Examples](https://atlassian.design/components/atlassian-navigation/examples#dropdown-menu)
 * - [Code](https://atlassian.design/components/atlassian-navigation/code)
 */
var PrimaryButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var _ref;
  var children = props.children,
    testId = props.testId,
    tooltip = props.tooltip,
    isSelected = props.isSelected,
    isHighlighted = props.isHighlighted,
    buttonProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  var theme = (0, _theme.useTheme)();
  var button = (0, _react2.jsx)("div", {
    style: (_ref = {}, (0, _defineProperty2.default)(_ref, VAR_BUTTON_SELECTED_COLOR, theme.mode.primaryButton.selected.color), (0, _defineProperty2.default)(_ref, VAR_BUTTON_SELECTED_BORDER_COLOR, theme.mode.primaryButton.selected.borderColor), _ref),
    css: [buttonBaseStyles, isHighlighted && buttonHighlightedStyles]
  }, (0, _react2.jsx)(_customThemeButton.default, (0, _extends2.default)({
    appearance: "primary",
    testId: testId,
    ref: ref,
    isSelected: isSelected
    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
    ,
    theme: (0, _styles.getPrimaryButtonTheme)(theme)
  }, buttonProps), children));
  if (tooltip) {
    return (0, _react2.jsx)(_tooltip.default, {
      content: tooltip,
      hideTooltipOnClick: true
    }, button);
  }
  return button;
});
exports.PrimaryButton = PrimaryButton;
var _default = PrimaryButton;
exports.default = _default;