@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian products.
120 lines (119 loc) • 4.22 kB
JavaScript
/** @jsx jsx */
import { css, jsx } from '@emotion/react';
import { NavigationAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
import { N30A, N40A, N900 } from '@atlaskit/theme/colors';
import { gridSize, HORIZONTAL_GLOBAL_NAV_HEIGHT } from '../../common/constants';
import { defaultTheme, hexToRGBA, ThemeProvider } from '../../theme';
import { PrimaryItemsContainer } from '../PrimaryItemsContainer';
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
}
});
var 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)
*/
export var AtlassianNavigation = function AtlassianNavigation(props) {
var label = props.label,
_props$primaryItems = props.primaryItems,
primaryItems = _props$primaryItems === void 0 ? [] : _props$primaryItems,
AppSwitcher = props.renderAppSwitcher,
create = props.renderCreate,
Help = props.renderHelp,
Notifications = props.renderNotifications,
ProductHome = props.renderProductHome,
Profile = props.renderProfile,
Search = props.renderSearch,
SignIn = props.renderSignIn,
Settings = props.renderSettings,
_props$moreLabel = props.moreLabel,
moreLabel = _props$moreLabel === void 0 ? '…' : _props$moreLabel,
_props$theme = props.theme,
theme = _props$theme === void 0 ? defaultTheme : _props$theme,
testId = props.testId;
return jsx(ThemeProvider, {
value: theme
}, jsx(NavigationAnalyticsContext, {
data: analyticsData
}, jsx("header", {
style: theme.mode.navigation,
css: containerStyles,
"data-testid": testId && "".concat(testId, "-header"),
role: "banner"
}, 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 && "".concat(testId, "-secondary-actions")
}, Search && jsx(Search, null), Notifications && jsx(Notifications, null), Help && jsx(Help, null), Settings && jsx(Settings, null), SignIn && jsx(SignIn, null), Profile && jsx(Profile, null)))));
};
export default AtlassianNavigation;