@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian apps.
160 lines (158 loc) • 7.22 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["href", "iconAlt", "iconUrl", "logoAlt", "logoMaxWidth", "logoUrl", "onClick", "onMouseDown", "siteTitle", "testId"];
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React, { Fragment } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { PRODUCT_HOME_BREAKPOINT } from '../../common/constants';
import { useTheme } from '../../theme';
import { getTag } from './utils';
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 = css(_defineProperty({
// Ensure anything passed into
// productHome is aligned correctly
display: 'flex'
}, "@media (max-width: ".concat(PRODUCT_HOME_BREAKPOINT - 0.1, "px)"), {
display: 'none'
}));
var customMaxHeightStyles = css({
maxHeight: 28
});
var productIconStyles = css(_defineProperty({
// Ensure anything passed into
// productHome is aligned correctly
display: 'flex'
}, "@media (min-width: ".concat(PRODUCT_HOME_BREAKPOINT, "px)"), {
display: 'none'
}));
var productHomeButtonStyles = css(_defineProperty(_defineProperty({
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(PRODUCT_HOME_BREAKPOINT - 0.1, "px)"), {
margin: "0 ".concat("var(--ds-space-100, 8px)")
}), "@media (min-width: ".concat(PRODUCT_HOME_BREAKPOINT, "px)"), {
margin: "0 ".concat("var(--ds-space-200, 16px)")
}));
var siteTitleStyles = css({
display: 'flex',
alignItems: 'center',
marginInlineEnd: "var(--ds-space-050, 4px)",
marginInlineStart: "var(--ds-space-050, 4px)",
paddingInlineEnd: "var(--ds-space-200, 16px)"
});
/**
* __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)
*
* @deprecated `@atlaskit/atlassian-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
*/
var CustomProductHome = function CustomProductHome(props) {
var href = props.href,
iconAlt = props.iconAlt,
iconUrl = props.iconUrl,
logoAlt = props.logoAlt,
_props$logoMaxWidth = props.logoMaxWidth,
logoMaxWidth = _props$logoMaxWidth === void 0 ? 260 : _props$logoMaxWidth,
logoUrl = props.logoUrl,
onClick = props.onClick,
onMouseDown = props.onMouseDown,
siteTitle = props.siteTitle,
testId = props.testId,
rest = _objectWithoutProperties(props, _excluded);
var theme = useTheme();
var primaryButton = theme.mode.primaryButton;
var Tag = getTag(onClick, href);
var preventFocusRing = function preventFocusRing(event) {
event.preventDefault();
onMouseDown && onMouseDown(event);
};
var productHomeButtonDynamicStyles = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, 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 jsx(Fragment, null, jsx(Tag, _extends({
href: href
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: productHomeButtonDynamicStyles,
css: productHomeButtonStyles,
onClick: onClick,
onMouseDown: preventFocusRing,
"data-testid": testId && "".concat(testId, "-container")
// Currently all props are mapped, but leaving in case people are
// passing non-explicit props
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
}, rest), logoUrl && jsx("img", {
style: {
maxWidth: logoMaxWidth
},
css: [customMaxHeightStyles, productLogoStyles],
src: logoUrl,
alt: logoAlt,
"data-testid": testId && "".concat(testId, "-logo"),
"data-vc": "custom-product-home-logo"
}), iconUrl && jsx("img", {
style: {
maxWidth: logoMaxWidth
},
css: [customMaxHeightStyles, productIconStyles],
src: iconUrl,
alt: iconAlt,
"data-testid": testId && "".concat(testId, "-icon"),
"data-vc": "custom-product-home-icon"
})), siteTitle && jsx("div", {
style: {
borderRight: theme.mode.productHome.borderRight
},
css: siteTitleStyles,
"data-testid": testId && "".concat(testId, "-site-title")
}, siteTitle));
};
export default CustomProductHome;