@atlaskit/atlassian-navigation/dist/cjs/components/AtlassianNavigation/skeleton.js

A horizontal navigation component for Atlassian products.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.NavigationSkeleton = void 0;
var _react = require("@emotion/react");
var _colors = require("@atlaskit/theme/colors");
var _constants = require("../../common/constants");
var _theme = require("../../theme");
var _skeleton = require("../IconButton/skeleton");
var _skeleton2 = require("../PrimaryItemsContainer/skeleton");
var _skeleton3 = require("../ProductHome/skeleton");
var _skeleton4 = require("../Profile/skeleton");
var _skeleton5 = require("../Search/skeleton");
/** @jsx jsx */

var containerStyles = (0, _react.css)({
  display: 'flex',
  boxSizing: 'border-box',
  height: _constants.HORIZONTAL_GLOBAL_NAV_HEIGHT,
  paddingRight: _constants.gridSize * 1.5,
  paddingLeft: _constants.gridSize * 1.5,
  position: 'relative',
  alignItems: 'center',
  justifyContent: 'space-between',
  flexShrink: 0,
  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
  '[data-color-mode="light"] &, [data-color-mode="dark"] &': {
    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
    borderBottom: "1px solid ".concat("var(--ds-border, #091E4224)"),
    // TODO: (DSP-2087) Remove the below once tokens have launched
    '&::after': {
      content: 'none'
    }
  },
  // TODO: (DSP-2087) Remove the below once tokens have launched
  '&::after': {
    height: _constants.gridSize / 2,
    position: 'absolute',
    top: '100%',
    right: 0,
    left: 0,
    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
    background: "linear-gradient(180deg, ".concat(_colors.N40A, " 0, ").concat(_colors.N40A, " 1px, ").concat(_colors.N30A, " 1px, ").concat((0, _theme.hexToRGBA)(
    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
    _colors.N900, 0), " 4px)"),
    content: '""'
  }
});
var leftStyles = (0, _react.css)({
  display: 'flex',
  minWidth: 0,
  height: 'inherit',
  alignItems: 'center',
  flexGrow: 1,
  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
  '& > *': {
    flexShrink: 0
  }
});
var rightStyles = (0, _react.css)({
  display: 'flex',
  alignItems: 'center',
  flexShrink: 0,
  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
  '& > *': {
    marginRight: _constants.gridSize / 2,
    flexShrink: 0
  }
});

/**
 * __Navigation skeleton__
 *
 * Use loading skeletons to reduce the perceived loading time of heavier
 * full-page experiences. This should only be used when the whole navigation is
 * delayed; if there are only certain dynamically loaded navigation items that
 * slow down the page, you should look into using
 * [skeleton buttons](https://atlassian.design/components/atlassian-navigation/examples#skeleton-button)
 * instead.
 *
 * - [Examples](https://atlassian.design/components/atlassian-navigation/examples#skeleton-loader)
 * - [Code](https://atlassian.design/components/{packageName}/code)
 */
var NavigationSkeleton = function NavigationSkeleton(_ref) {
  var _ref$primaryItemsCoun = _ref.primaryItemsCount,
    primaryItemsCount = _ref$primaryItemsCoun === void 0 ? 4 : _ref$primaryItemsCoun,
    _ref$secondaryItemsCo = _ref.secondaryItemsCount,
    secondaryItemsCount = _ref$secondaryItemsCo === void 0 ? 4 : _ref$secondaryItemsCo,
    _ref$theme = _ref.theme,
    theme = _ref$theme === void 0 ? _theme.defaultTheme : _ref$theme,
    _ref$showSiteName = _ref.showSiteName,
    showSiteName = _ref$showSiteName === void 0 ? false : _ref$showSiteName,
    _ref$shouldShowSearch = _ref.shouldShowSearch,
    shouldShowSearch = _ref$shouldShowSearch === void 0 ? true : _ref$shouldShowSearch,
    testId = _ref.testId;
  return (0, _react.jsx)(_theme.ThemeProvider, {
    value: theme
  }, (0, _react.jsx)("div", {
    style: theme.mode.navigation,
    css: containerStyles,
    "data-testid": testId
  }, (0, _react.jsx)("div", {
    css: leftStyles
  }, (0, _react.jsx)(_skeleton.IconButtonSkeleton, {
    marginLeft: 0,
    marginRight: 5,
    size: _constants.gridSize * 3.25
  }), (0, _react.jsx)(_skeleton3.ProductHomeSkeleton, {
    showSiteName: showSiteName
  }), (0, _react.jsx)(_skeleton2.PrimaryItemsContainerSkeleton, {
    count: primaryItemsCount
  })), (0, _react.jsx)("div", {
    css: rightStyles
  }, shouldShowSearch && (0, _react.jsx)(_skeleton5.SearchSkeleton, null), Array.from({
    length: secondaryItemsCount
  }, function (_, index) {
    return (0, _react.jsx)(_skeleton.IconButtonSkeleton, {
      key: index,
      marginLeft: 0,
      marginRight: _constants.gridSize / 2,
      size: _constants.gridSize * 3.25
    });
  }), (0, _react.jsx)(_skeleton4.ProfileSkeleton, null))));
};
exports.NavigationSkeleton = NavigationSkeleton;
var _default = NavigationSkeleton;
exports.default = _default;