@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
108 lines (107 loc) • 4 kB
JavaScript
/* app-logo.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./app-logo.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback, useRef } from 'react';
import { cx } from '@compiled/react';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { Anchor } from '@atlaskit/primitives/compiled/anchor';
import { Inline } from '@atlaskit/primitives/compiled/inline';
import { Text } from '@atlaskit/primitives/compiled/text';
import Tooltip from '@atlaskit/tooltip/Tooltip';
import { useHasCustomTheme } from '../themed/has-custom-theme-context';
import { LogoRenderer } from './logo-renderer';
const anchorStyles = {
root: "_2rko1mok _1e0c1txw _4cvr1h6o _4t3izwfg _1o9zidpf _ahbq1b66 _1toh1r31 _5jyqglyw _mrqmnqa1 _1w901kw7",
interactionStates: "_irr31dpa _1di69yc7",
interactionStatesCustomTheming: "_irr31rps _1di6yhlj"
};
const logoWrapperStyles = {
root: "_18zr1b66"
};
const iconContainerStyles = {
root: "_1reo15vq _18m915vq _1e0c1txw _p12f1tcg _c71l1tcg"
};
const logoTextStyles = {
root: "_1bsb1ris _p12fnklw _uiztglyw _y4tiv77o _1e0cglyw _2lx21bp4 _1bah1h6o",
container: "_1e0c1u4u _dm251vcx",
viewport: "_10y41txw"
};
const secondaryNameStyles = {
root: "_1pfh1i6y"
};
function isTextClamped(element) {
// Checking for vertical height rather than horizontal height.
// When text is "clamped", it's technically being clamped vertically! 🤯
return element.scrollHeight > element.clientHeight;
}
/**
* __App logo__
*
* The app logo for the top navigation.
*
* To provide a responsive experience, label text will render next to an icon at larger viewports.
*/
export const AppLogo = ({
name,
label,
secondaryName,
href,
icon,
onClick
}) => {
const ref = useRef(null);
const nameRef = useRef(null);
const hasCustomTheme = useHasCustomTheme();
const showSecondaryName = Boolean(secondaryName) && fg('platform_dst_ads_appswitcher_improvements');
/**
* Show the tooltip if the name is truncated
*/
const canTooltipAppear = useCallback(() => {
const text = nameRef.current;
return Boolean(text && isTextClamped(text));
}, []);
return /*#__PURE__*/React.createElement(Anchor, {
ref: ref,
"aria-label": label,
href: href
// @ts-expect-error - non-standard values for `borderRadius` and the custom theming interaction states
// eslint-disable-next-line @compiled/no-suppress-xcss
,
xcss: cx(anchorStyles.root, hasCustomTheme ? anchorStyles.interactionStatesCustomTheming : anchorStyles.interactionStates),
onClick: onClick
}, /*#__PURE__*/React.createElement(Inline, {
space: "space.075",
alignBlock: "center",
xcss: logoWrapperStyles.root
}, /*#__PURE__*/React.createElement("div", {
className: ax([iconContainerStyles.root])
}, /*#__PURE__*/React.createElement(LogoRenderer, {
logoOrIcon: icon
})), /*#__PURE__*/React.createElement("span", {
className: ax([logoTextStyles.root, fg('platform-dst-chat-panel-layout') ? logoTextStyles.container : logoTextStyles.viewport])
}, /*#__PURE__*/React.createElement(Tooltip, {
content: name,
position: "bottom",
ignoreTooltipPointerEvents: true,
hideTooltipOnMouseDown: true
// We don't need a duplicate hidden element containing tooltip content
// as the content of the tooltip matches what is rendered in the nav item.
,
isScreenReaderAnnouncementDisabled: true,
canAppear: canTooltipAppear
}, tooltipProps => /*#__PURE__*/React.createElement("span", tooltipProps, /*#__PURE__*/React.createElement(Text, {
"aria-hidden": true,
color: "inherit",
weight: "semibold",
maxLines: 1,
ref: nameRef
}, name))), showSecondaryName && /*#__PURE__*/React.createElement("span", {
className: ax([secondaryNameStyles.root])
}, /*#__PURE__*/React.createElement(Text, {
"aria-hidden": true,
color: "color.text.subtlest",
weight: "regular",
maxLines: 1,
size: "small"
}, secondaryName)))));
};