@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian products.
120 lines (119 loc) • 4.37 kB
JavaScript
/** @jsx jsx */
import { css, jsx } from '@emotion/react';
import { N30A, N40A, N900 } from '@atlaskit/theme/colors';
import { gridSize, HORIZONTAL_GLOBAL_NAV_HEIGHT } from '../../common/constants';
import { defaultTheme, hexToRGBA, ThemeProvider } from '../../theme';
import { IconButtonSkeleton } from '../IconButton/skeleton';
import { PrimaryItemsContainerSkeleton } from '../PrimaryItemsContainer/skeleton';
import { ProductHomeSkeleton } from '../ProductHome/skeleton';
import { ProfileSkeleton } from '../Profile/skeleton';
import { SearchSkeleton } from '../Search/skeleton';
var containerStyles = css({
display: 'flex',
boxSizing: 'border-box',
height: HORIZONTAL_GLOBAL_NAV_HEIGHT,
paddingRight: gridSize * 1.5,
paddingLeft: 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: 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(N40A, " 0, ").concat(N40A, " 1px, ").concat(N30A, " 1px, ").concat(hexToRGBA(
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
N900, 0), " 4px)"),
content: '""'
}
});
var leftStyles = 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 = css({
display: 'flex',
alignItems: 'center',
flexShrink: 0,
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
'& > *': {
marginRight: 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)
*/
export 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 ? 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 jsx(ThemeProvider, {
value: theme
}, jsx("div", {
style: theme.mode.navigation,
css: containerStyles,
"data-testid": testId
}, jsx("div", {
css: leftStyles
}, jsx(IconButtonSkeleton, {
marginLeft: 0,
marginRight: 5,
size: gridSize * 3.25
}), jsx(ProductHomeSkeleton, {
showSiteName: showSiteName
}), jsx(PrimaryItemsContainerSkeleton, {
count: primaryItemsCount
})), jsx("div", {
css: rightStyles
}, shouldShowSearch && jsx(SearchSkeleton, null), Array.from({
length: secondaryItemsCount
}, function (_, index) {
return jsx(IconButtonSkeleton, {
key: index,
marginLeft: 0,
marginRight: gridSize / 2,
size: gridSize * 3.25
});
}), jsx(ProfileSkeleton, null))));
};
export default NavigationSkeleton;