@atlaskit/atlassian-navigation/dist/cjs/skeleton-switcher-button.js

A horizontal navigation component for Atlassian apps.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "Nav4SkeletonSwitcherButton", {
  enumerable: true,
  get: function get() {
    return _nav4SkeletonSwitcherButton.Nav4SkeletonSwitcherButton;
  }
});
exports.SkeletonSwitcherButton = void 0;
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _appSwitcher = _interopRequireDefault(require("@atlaskit/icon/core/app-switcher"));
var _theme = require("./theme");
var _nav4SkeletonSwitcherButton = require("./nav4-skeleton-switcher-button");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

/**
 * @deprecated `@atlaskit/atlassian-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
 */

var skeletonSwitcherButtonStyles = (0, _react2.css)({
  margin: 0,
  // eslint-disable-next-line @atlaskit/design-system/no-physical-properties
  marginRight: "var(--ds-space-050, 4px)",
  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)"),
  border: 0,
  borderRadius: "var(--ds-radius-full, 100%)",
  pointerEvents: 'none',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
  ':focus, :active, :hover': {
    appearance: 'none',
    border: 0,
    outline: 0
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
  '&:only-of-type': {
    // eslint-disable-next-line @atlaskit/design-system/no-physical-properties
    marginRight: 0
  },
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '& > span': {
    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
    lineHeight: 'normal'
  },
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '& > img': {
    width: 24,
    height: 24,
    borderRadius: "var(--ds-radius-full, 100%)",
    verticalAlign: 'middle'
  }
});

/**
 * __Skeleton switcher button__
 *
 * Skeleton buttons are lightweight HTML button elements with CSS that represent
 * their heavier interactive counterparts, for use when elements of the
 * navigation are loaded dynamically. This one represents the AppSwitcher button.
 *
 * - [Examples](https://atlassian.design/components/atlassian-navigation/examples#skeleton-button)
 * - [Code](https://atlassian.design/components/atlassian-navigation/code)
 *
 * @deprecated `@atlaskit/atlassian-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
 */
var SkeletonSwitcherButton = exports.SkeletonSwitcherButton = function SkeletonSwitcherButton(_ref) {
  var _ref$label = _ref.label,
    label = _ref$label === void 0 ? '' : _ref$label,
    testId = _ref.testId;
  var theme = (0, _theme.useTheme)();
  return (0, _react2.jsx)("button", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    style: theme.mode.iconButton.default,
    "data-testid": testId,
    css: skeletonSwitcherButtonStyles,
    type: "button"
  }, (0, _react2.jsx)(_appSwitcher.default, {
    color: "currentColor",
    spacing: "spacious",
    label: label
  }));
};