@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian apps.
180 lines (177 loc) • 9.32 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.AppHome = 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 = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _compiled = require("@atlaskit/primitives/compiled");
var _constants = require("../../common/constants");
var _theme = require("../../theme");
var _utils = require("../../utils");
var _utils2 = require("./utils");
var _excluded = ["aria-label", "href", "name", "icon", "onClick", "onMouseDown", "siteTitle", "testId"];
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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 productHomeButtonStyles = (0, _react2.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({
display: 'flex',
padding: "var(--ds-space-050, 4px)",
alignItems: 'center',
background: 'none',
border: 0,
borderRadius: "var(--ds-radius-small, 3px)",
color: 'inherit',
cursor: 'pointer',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'&::-moz-focus-inner': {
border: 0
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'&:first-of-type': {
marginInlineStart: 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-visible': {
backgroundColor: "var(".concat(VAR_PRODUCT_HOME_BACKGROUND_COLOR_FOCUS, ")"),
color: "var(".concat(VAR_PRODUCT_HOME_COLOR_FOCUS, ")"),
outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)")
},
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'div&': {
pointerEvents: 'none'
}
}, "@media (max-width: ".concat(_constants.PRODUCT_HOME_BREAKPOINT - 0.1, "px)"), {
margin: "0 ".concat("var(--ds-space-100, 8px)")
}), "@media (min-width: ".concat(_constants.PRODUCT_HOME_BREAKPOINT, "px)"), {
margin: "0 ".concat("var(--ds-space-200, 16px)")
}));
var appHomeIconStyles = (0, _react2.css)({
borderRadius: '10px'
});
var appIconStyles = (0, _react2.css)({
display: 'flex',
maxWidth: 24
});
var appLogoTextStyles = (0, _react2.css)((0, _defineProperty2.default)({
// Logo text should never wrap or overflow
width: 'max-content',
paddingInlineEnd: "var(--ds-space-025, 2px)"
}, "@media (max-width: ".concat(_constants.PRODUCT_HOME_BREAKPOINT - 0.1, "px)"), {
display: 'none'
}));
var siteTitleStyles = (0, _react2.css)({
display: 'flex',
alignItems: 'center',
marginInlineEnd: "var(--ds-space-050, 4px)",
marginInlineStart: "var(--ds-space-050, 4px)",
paddingInlineEnd: "var(--ds-space-200, 16px)"
});
/**
* __App home__
*
* A variant of the ProductHome component designed for use with the updated app logos.
*
* Takes an icon, displayed at all viewport sizes, and a product name, which is
* displayed only at larger viewport sizes.
*
* - [Examples](https://atlassian.design/components/atlassian-navigation/examples#app-product-home)
* - [Code](https://atlassian.design/components/atlassian-navigation/code)
*
* @deprecated `@atlaskit/atlassian-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
*/
var AppHome = exports.AppHome = function AppHome(_ref) {
var ariaLabel = _ref['aria-label'],
href = _ref.href,
name = _ref.name,
Icon = _ref.icon,
onClick = _ref.onClick,
onMouseDown = _ref.onMouseDown,
siteTitle = _ref.siteTitle,
testId = _ref.testId,
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var theme = (0, _theme.useTheme)();
var primaryButton = theme.mode.primaryButton;
// After the brand refresh, iconColor and textColor should be set to 'undefined' to allow the original
// multi-color logo tile colors to be visible, rather than a hardcoded blue.
var _theme$mode$productHo = theme.mode.productHome,
_theme$mode$productHo2 = _theme$mode$productHo.iconColor,
iconColor = _theme$mode$productHo2 === void 0 ? undefined : _theme$mode$productHo2,
_theme$mode$productHo3 = _theme$mode$productHo.textColor,
textColor = _theme$mode$productHo3 === void 0 ? undefined : _theme$mode$productHo3;
// The default theme is set at module scope and immediately used in context.
// To allow the feature flag to switch the logo color at runtime, we also detect the original hardcoded
// values and override them to undefined.
if (iconColor === '#357DE8' && textColor === "var(--ds-text, #292A2E)") {
iconColor = undefined;
textColor = undefined;
}
var Tag = (0, _utils2.getTag)(onClick, href);
var preventFocusRing = function preventFocusRing(e) {
e.preventDefault();
onMouseDown && onMouseDown(e);
};
var productHomeButtonDynamicStyles = (0, _utils.stripEmptyProperties)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, VAR_PRODUCT_HOME_COLOR_ACTIVE, primaryButton.active.color), VAR_PRODUCT_HOME_BACKGROUND_COLOR_ACTIVE, primaryButton.active.backgroundColor), VAR_PRODUCT_HOME_BOX_SHADOW_ACTIVE, primaryButton.active.boxShadow), VAR_PRODUCT_HOME_COLOR_FOCUS, primaryButton.focus.color), VAR_PRODUCT_HOME_BACKGROUND_COLOR_FOCUS, primaryButton.focus.backgroundColor), VAR_PRODUCT_HOME_BOX_SHADOW_FOCUS, primaryButton.focus.boxShadow), VAR_PRODUCT_HOME_COLOR_HOVER, primaryButton.hover.color), VAR_PRODUCT_HOME_BACKGROUND_COLOR_HOVER, primaryButton.hover.backgroundColor), VAR_PRODUCT_HOME_BOX_SHADOW_HOVER, primaryButton.hover.boxShadow));
return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(Tag
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
, (0, _extends2.default)({
style: productHomeButtonDynamicStyles,
css: [productHomeButtonStyles, appHomeIconStyles],
href: href,
onClick: onClick,
onMouseDown: preventFocusRing,
"data-testid": testId && "".concat(testId, "-container"),
"aria-label": ariaLabel
// Made all props explicit, leaving just in case
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
}, rest), (0, _react2.jsx)(_compiled.Inline, {
space: "space.075",
alignBlock: "center"
}, (0, _react2.jsx)("div", {
css: [appIconStyles],
"data-testid": testId && "".concat(testId, "-icon")
}, (0, _react2.jsx)(Icon, {
iconColor: iconColor,
shouldUseNewLogoDesign: true,
size: "small",
appearance: "brand"
})), (0, _react2.jsx)("span", {
css: appLogoTextStyles
}, (0, _react2.jsx)(_compiled.Text, {
"aria-hidden": true,
color: "inherit",
weight: "semibold"
}, name)))), siteTitle && (0, _react2.jsx)("div", {
style: {
borderRight: theme.mode.productHome.borderRight
},
css: siteTitleStyles,
"data-testid": testId && "".concat(testId, "-site-title")
}, siteTitle));
};