@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian products.
129 lines (126 loc) • 4.72 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.AtlassianNavigation = void 0;
var _react = require("@emotion/react");
var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
var _colors = require("@atlaskit/theme/colors");
var _constants = require("../../common/constants");
var _theme = require("../../theme");
var _PrimaryItemsContainer = require("../PrimaryItemsContainer");
/** @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
}
});
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)
*/
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 ? _theme.defaultTheme : _props$theme,
testId = props.testId;
return (0, _react.jsx)(_theme.ThemeProvider, {
value: theme
}, (0, _react.jsx)(_analyticsNamespacedContext.NavigationAnalyticsContext, {
data: analyticsData
}, (0, _react.jsx)("header", {
style: theme.mode.navigation,
css: containerStyles,
"data-testid": testId && "".concat(testId, "-header"),
role: "banner"
}, (0, _react.jsx)("nav", {
css: leftStyles,
"aria-label": label
}, AppSwitcher && (0, _react.jsx)(AppSwitcher, null), ProductHome && (0, _react.jsx)(ProductHome, null), (0, _react.jsx)(_PrimaryItemsContainer.PrimaryItemsContainer, {
testId: testId,
moreLabel: moreLabel,
items: primaryItems,
create: create
// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
,
theme: theme
})), (0, _react.jsx)("div", {
css: rightStyles,
"data-testid": testId && "".concat(testId, "-secondary-actions")
}, Search && (0, _react.jsx)(Search, null), Notifications && (0, _react.jsx)(Notifications, null), Help && (0, _react.jsx)(Help, null), Settings && (0, _react.jsx)(Settings, null), SignIn && (0, _react.jsx)(SignIn, null), Profile && (0, _react.jsx)(Profile, null)))));
};
exports.AtlassianNavigation = AtlassianNavigation;
var _default = AtlassianNavigation;
exports.default = _default;