@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian apps.
125 lines (123 loc) • 4.55 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { NavigationAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
import warnOnce from '@atlaskit/ds-lib/warn-once';
import { HORIZONTAL_GLOBAL_NAV_HEIGHT } from '../../common/constants';
import { defaultTheme, ThemeProvider } from '../../theme';
import { PrimaryItemsContainer } from '../PrimaryItemsContainer';
const containerStyles = css({
display: 'flex',
boxSizing: 'border-box',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
height: HORIZONTAL_GLOBAL_NAV_HEIGHT,
position: 'relative',
alignItems: 'center',
justifyContent: 'space-between',
flexShrink: 0,
borderBlockEnd: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`,
paddingInlineEnd: "var(--ds-space-150, 12px)",
paddingInlineStart: "var(--ds-space-150, 12px)"
});
const leftStyles = css({
display: 'flex',
minWidth: 0,
height: 'inherit',
alignItems: 'center',
flexGrow: 1,
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& > *': {
flexShrink: 0
}
});
const rightStyles = css({
display: 'flex',
alignItems: 'center',
flexShrink: 0,
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& > *': {
flexShrink: 0,
marginInlineEnd: "var(--ds-space-050, 4px)"
}
});
const noRightMarginStyles = css({
marginInlineEnd: 0
});
const analyticsData = {
attributes: {
navigationLayer: 'global'
},
componentName: 'atlassianNavigation'
};
/**
* __Atlassian navigation__
*
* The horizontal navigation component for Atlassian products.
*
* - [Examples](https://atlassian.design/components/atlassian-navigation/examples)
* - [Code](https://atlassian.design/components/atlassian-navigation/examples)
*
* @deprecated `@atlaskit/atlassian-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
*/
export const AtlassianNavigation = props => {
if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'CI') {
warnOnce('@atlaskit/atlassian-navigation is deprecated. Use @atlaskit/navigation-system instead.');
}
const {
label: label,
primaryItems = [],
renderAppSwitcher: AppSwitcher,
renderCreate: create,
renderHelp: Help,
renderNotifications: Notifications,
renderProductHome: ProductHome,
renderProfile: Profile,
renderSearch: Search,
renderSignIn: SignIn,
renderSettings: Settings,
moreLabel = '…',
theme = defaultTheme,
testId,
isServer = false,
isSSRPlaceholderEnabled = false
} = props;
return jsx(ThemeProvider, {
value: theme
}, jsx(NavigationAnalyticsContext, {
data: analyticsData
}, jsx("header", _extends({
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
style: theme.mode.navigation,
css: containerStyles,
"data-testid": testId && `${testId}-header`,
role: "banner",
"data-vc": `atlassian-navigation${isServer ? '-ssr' : ''}`
}, isServer && isSSRPlaceholderEnabled && {
'data-ssr-placeholder': 'atlassian-navigation-placeholder'
}, !isServer && isSSRPlaceholderEnabled && {
'data-ssr-placeholder-replace': 'atlassian-navigation-placeholder'
}), jsx("nav", {
css: leftStyles,
"aria-label": label
}, AppSwitcher && jsx(AppSwitcher, null), ProductHome && jsx(ProductHome, null), jsx(PrimaryItemsContainer, {
testId: testId,
moreLabel: moreLabel,
items: primaryItems,
create: create
// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
,
theme: theme
})), jsx("div", {
css: rightStyles,
"data-testid": testId && `${testId}-secondary-actions`
}, Search && jsx(Search, null), jsx("div", {
role: "list",
css: [rightStyles, noRightMarginStyles],
"data-vc": "atlassian-navigation-secondary-actions"
}, Notifications && jsx(Notifications, null), Help && jsx(Help, null), Settings && jsx(Settings, null), SignIn && jsx(SignIn, null), Profile && jsx(Profile, null))))));
};