@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian products.
155 lines (153 loc) • 7.25 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _constants = require("../../common/constants");
var _theme = require("../../theme");
var _utils = require("./utils");
var _excluded = ["iconAlt", "iconUrl", "logoAlt", "logoUrl", "href", "onClick", "siteTitle", "onMouseDown", "testId", "logoMaxWidth"];
var _css3;
var VAR_PRODUCT_HOME_COLOR_ACTIVE = '--product-home-color-active';
var VAR_PRODUCT_HOME_BACKGROUND_COLOR_ACTIVE = '--product-home-bg-color-active';
var VAR_PRODUCT_HOME_BOX_SHADOW_ACTIVE = '--product-home-box-shadow-active';
var VAR_PRODUCT_HOME_COLOR_FOCUS = '--product-home-color-focus';
var VAR_PRODUCT_HOME_BACKGROUND_COLOR_FOCUS = '--product-home-bg-color-focus';
var VAR_PRODUCT_HOME_BOX_SHADOW_FOCUS = '--product-home-box-shadow-focus';
var VAR_PRODUCT_HOME_COLOR_HOVER = '--product-home-color-hover';
var VAR_PRODUCT_HOME_BACKGROUND_COLOR_HOVER = '--product-home-bg-color-hover';
var VAR_PRODUCT_HOME_BOX_SHADOW_HOVER = '--product-home-box-shadow-hover';
var productLogoStyles = (0, _react2.css)((0, _defineProperty2.default)({
// Ensure anything passed into
// productHome is aligned correctly
display: 'flex'
}, "@media (max-width: ".concat(_constants.PRODUCT_HOME_BREAKPOINT - 0.1, "px)"), {
display: 'none'
}));
var customMaxHeightStyles = (0, _react2.css)({
maxHeight: 28
});
var productIconStyles = (0, _react2.css)((0, _defineProperty2.default)({
// Ensure anything passed into
// productHome is aligned correctly
display: 'flex'
}, "@media (min-width: ".concat(_constants.PRODUCT_HOME_BREAKPOINT, "px)"), {
display: 'none'
}));
var productHomeButtonStyles = (0, _react2.css)((_css3 = {
display: 'flex',
padding: _constants.gridSize / 2,
alignItems: 'center',
background: 'none',
border: 0,
borderRadius: 3,
color: 'inherit',
cursor: 'pointer',
'&::-moz-focus-inner': {
border: 0
},
'&:first-of-type': {
marginLeft: 0
},
'&:hover': {
backgroundColor: "var(".concat(VAR_PRODUCT_HOME_BACKGROUND_COLOR_HOVER, ")"),
boxShadow: "var(".concat(VAR_PRODUCT_HOME_BOX_SHADOW_HOVER, ")"),
color: "var(".concat(VAR_PRODUCT_HOME_COLOR_HOVER, ")")
},
'&:active': {
backgroundColor: "var(".concat(VAR_PRODUCT_HOME_BACKGROUND_COLOR_ACTIVE, ")"),
boxShadow: "var(".concat(VAR_PRODUCT_HOME_BOX_SHADOW_ACTIVE, ")"),
color: "var(".concat(VAR_PRODUCT_HOME_COLOR_ACTIVE, ")")
},
'&:focus': {
backgroundColor: "var(".concat(VAR_PRODUCT_HOME_BACKGROUND_COLOR_FOCUS, ")"),
boxShadow: "var(".concat(VAR_PRODUCT_HOME_BOX_SHADOW_FOCUS, ")"),
color: "var(".concat(VAR_PRODUCT_HOME_COLOR_FOCUS, ")"),
outline: 0
},
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
'div&': {
pointerEvents: 'none'
}
}, (0, _defineProperty2.default)(_css3, "@media (max-width: ".concat(_constants.PRODUCT_HOME_BREAKPOINT - 0.1, "px)"), {
margin: "0 ".concat(_constants.gridSize, "px")
}), (0, _defineProperty2.default)(_css3, "@media (min-width: ".concat(_constants.PRODUCT_HOME_BREAKPOINT, "px)"), {
margin: "0 ".concat(_constants.gridSize * 2, "px")
}), _css3));
var siteTitleStyles = (0, _react2.css)({
display: 'flex',
marginRight: _constants.gridSize / 2,
marginLeft: _constants.gridSize * 0.5,
paddingRight: _constants.gridSize * 2,
alignItems: 'center'
});
/**
* __Custom product home__
*
* Use `CustomProductHome` to provide a custom logo and icon with URLs.
*
* - [Examples](https://atlassian.design/components/atlassian-navigation/examples#custom-product-home)
* - [Code](https://atlassian.design/components/atlassian-navigation/code)
*/
var CustomProductHome = function CustomProductHome(props) {
var _productHomeButtonDyn;
var iconAlt = props.iconAlt,
iconUrl = props.iconUrl,
logoAlt = props.logoAlt,
logoUrl = props.logoUrl,
href = props.href,
onClick = props.onClick,
siteTitle = props.siteTitle,
onMouseDown = props.onMouseDown,
testId = props.testId,
_props$logoMaxWidth = props.logoMaxWidth,
logoMaxWidth = _props$logoMaxWidth === void 0 ? 260 : _props$logoMaxWidth,
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
var theme = (0, _theme.useTheme)();
var primaryButton = theme.mode.primaryButton;
var Tag = (0, _utils.getTag)(onClick, href);
var preventFocusRing = function preventFocusRing(event) {
event.preventDefault();
onMouseDown && onMouseDown(event);
};
var productHomeButtonDynamicStyles = (_productHomeButtonDyn = {}, (0, _defineProperty2.default)(_productHomeButtonDyn, VAR_PRODUCT_HOME_COLOR_ACTIVE, primaryButton.active.color), (0, _defineProperty2.default)(_productHomeButtonDyn, VAR_PRODUCT_HOME_BACKGROUND_COLOR_ACTIVE, primaryButton.active.backgroundColor), (0, _defineProperty2.default)(_productHomeButtonDyn, VAR_PRODUCT_HOME_BOX_SHADOW_ACTIVE, primaryButton.active.boxShadow), (0, _defineProperty2.default)(_productHomeButtonDyn, VAR_PRODUCT_HOME_COLOR_FOCUS, primaryButton.focus.color), (0, _defineProperty2.default)(_productHomeButtonDyn, VAR_PRODUCT_HOME_BACKGROUND_COLOR_FOCUS, primaryButton.focus.backgroundColor), (0, _defineProperty2.default)(_productHomeButtonDyn, VAR_PRODUCT_HOME_BOX_SHADOW_FOCUS, primaryButton.focus.boxShadow), (0, _defineProperty2.default)(_productHomeButtonDyn, VAR_PRODUCT_HOME_COLOR_HOVER, primaryButton.hover.color), (0, _defineProperty2.default)(_productHomeButtonDyn, VAR_PRODUCT_HOME_BACKGROUND_COLOR_HOVER, primaryButton.hover.backgroundColor), (0, _defineProperty2.default)(_productHomeButtonDyn, VAR_PRODUCT_HOME_BOX_SHADOW_HOVER, primaryButton.hover.boxShadow), _productHomeButtonDyn);
return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(Tag, (0, _extends2.default)({
href: href,
style: productHomeButtonDynamicStyles,
css: productHomeButtonStyles,
onClick: onClick,
onMouseDown: preventFocusRing,
"data-testid": testId && "".concat(testId, "-container")
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
}, rest), logoUrl && (0, _react2.jsx)("img", {
style: {
maxWidth: logoMaxWidth
},
css: [customMaxHeightStyles, productLogoStyles],
src: logoUrl,
alt: logoAlt,
"data-testid": testId && "".concat(testId, "-logo")
}), iconUrl && (0, _react2.jsx)("img", {
style: {
maxWidth: logoMaxWidth
},
css: [customMaxHeightStyles, productIconStyles],
src: iconUrl,
alt: iconAlt,
"data-testid": testId && "".concat(testId, "-icon")
})), siteTitle && (0, _react2.jsx)("div", {
style: {
borderRight: theme.mode.productHome.borderRight
},
css: siteTitleStyles,
"data-testid": testId && "".concat(testId, "-site-title")
}, siteTitle));
};
var _default = CustomProductHome;
exports.default = _default;