@atlaskit/navigation-system 0.182.0 → 1.0.0

package/src/ui/top-nav-items/nav-logo/app-logo.tsx

@@ -1,203 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { useCallback, useRef } from 'react';
-
-import { cssMap, cx, jsx } from '@compiled/react';
-
-import type { LogoProps } from '@atlaskit/logo';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Anchor, Inline, Text } from '@atlaskit/primitives';
-import { token } from '@atlaskit/tokens';
-import Tooltip from '@atlaskit/tooltip';
-
-import { useHasCustomTheme } from '../themed/has-custom-theme-context';
-
-import { LogoRenderer } from './logo-renderer';
-
-const anchorStyles = cssMap({
-	root: {
-		display: 'flex',
-		alignItems: 'center',
-		height: '32px',
-		borderRadius: '10px',
-		flexShrink: 0,
-		// '&&' is required to add more CSS specificity to ensure styles take precedence over the default Anchor styles
-		// @ts-ignore
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-		'&&': {
-			textDecoration: 'none',
-			color: 'inherit',
-		},
-		// Additional margin is added to the left of the interactive element, to create visual alignment
-		// with the app tile icon and the other icon buttons that use normal (non-tile) icons.
-		marginInlineStart: token('space.050'),
-	},
-	// This is the same between app-logo and nav-logo
-	interactionStates: {
-		'&:hover': {
-			backgroundColor: token('color.background.neutral.subtle.hovered'),
-		},
-		'&:active': {
-			// Compiled bug is causing the `&:hover` state to take precedence in Jira
-			// Reported to #help-compiled but may not be fixed soon
-			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-			backgroundColor: `${token('color.background.neutral.subtle.pressed')}!important`,
-		},
-	},
-	interactionStatesCustomTheming: {
-		'&:hover': {
-			backgroundColor: 'var(--ds-top-bar-button-background-hovered)',
-		},
-		'&:active': {
-			// Compiled bug is causing the `&:hover` state to take precedence in Jira
-			// Reported to #help-compiled but may not be fixed soon
-			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-			backgroundColor: 'var(--ds-top-bar-button-background-pressed)!important',
-		},
-	},
-});
-
-const logoWrapperStyles = cssMap({
-	root: {
-		paddingInline: token('space.050'),
-	},
-});
-
-const iconContainerStyles = cssMap({
-	root: {
-		// Overflow should never occur, but hiding it just in case
-		overflow: 'hidden',
-		display: 'flex',
-		maxWidth: 24,
-	},
-});
-
-const logoTextStyles = cssMap({
-	root: {
-		// Logo text should never wrap or overflow
-		width: 'max-content',
-		maxWidth: 320,
-		userSelect: 'none',
-		paddingInlineEnd: token('space.025'),
-		display: 'none',
-		'@media (min-width: 64rem)': {
-			// @ts-ignore
-			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-			'&&': {
-				display: 'initial',
-			},
-		},
-	},
-});
-
-function isTextClamped(element: HTMLElement): boolean {
-	// 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,
-	href,
-	icon,
-	onClick,
-}: {
-	/**
-	 * The name of the app. Will be displayed next to the logo in wider viewports, and is used as an accessible label at smaller viewports.
-	 */
-	name: string;
-	/**
-	 * Provide an accessible label, often used by screen readers.
-	 * This label should include the name of the app, and if applicable,
-	 * the location the user will navigate to on click.
-	 */
-	label: string;
-	/**
-	 * The URL to navigate to when the element is clicked.
-	 */
-	href: string;
-	/**
-	 * The icon to render.
-	 */
-	icon: (props: LogoProps) => JSX.Element;
-	/**
-	 * Handler called on click.
-	 */
-	onClick?: React.MouseEventHandler<HTMLAnchorElement>;
-}) => {
-	const ref = useRef<HTMLAnchorElement>(null);
-	const nameRef = useRef<HTMLSpanElement | null>(null);
-
-	const hasCustomTheme = useHasCustomTheme();
-
-	/**
-	 * Show the tooltip if the name is truncated
-	 */
-	const canTooltipAppear = useCallback((): boolean => {
-		const text = nameRef.current;
-		return Boolean(text && isTextClamped(text));
-	}, []);
-
-	return (
-		<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}
-		>
-			<Inline space="space.075" alignBlock="center" xcss={logoWrapperStyles.root}>
-				<div css={[iconContainerStyles.root]}>
-					<LogoRenderer
-						// Top nav always uses the new logo design
-						shouldUseNewLogoDesign={true}
-						logoOrIcon={icon}
-					/>
-				</div>
-				<span css={logoTextStyles.root}>
-					<Tooltip
-						content={name}
-						position="bottom"
-						ignoreTooltipPointerEvents
-						hideTooltipOnMouseDown
-						// 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
-						canAppear={canTooltipAppear}
-					>
-						{(tooltipProps) => (
-							<span {...tooltipProps}>
-								<Text
-									aria-hidden={true}
-									color="inherit"
-									weight="semibold"
-									maxLines={1}
-									ref={nameRef}
-								>
-									{name}
-								</Text>
-							</span>
-						)}
-					</Tooltip>
-				</span>
-			</Inline>
-		</Anchor>
-	);
-};

package/src/ui/top-nav-items/nav-logo/custom-logo.tsx

@@ -1,252 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { useEffect, useRef } from 'react';
-
-import { cssMap, cx, jsx } from '@compiled/react';
-
-import type { LogoProps } from '@atlaskit/logo';
-import { fg } from '@atlaskit/platform-feature-flags';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Anchor } from '@atlaskit/primitives';
-import type {
-	IconProps as TempIconProps,
-	LogoProps as TempLogoProps,
-} from '@atlaskit/temp-nav-app-icons/types';
-import { token } from '@atlaskit/tokens';
-
-import { useHasCustomTheme } from '../themed/has-custom-theme-context';
-
-import { LogoRenderer } from './logo-renderer';
-
-const anchorStyles = cssMap({
-	root: {
-		display: 'flex',
-		alignItems: 'center',
-		height: '32px',
-		borderRadius: token('border.radius.100', '3px'),
-	},
-	customLogoBorderRadius: {
-		borderRadius: token('border.radius.100', '3px'),
-	},
-	newMargin: {
-		// Additional margin is added to the left of the interactive element, to create visual alignment
-		// with the app tile icon and the other icon buttons that use normal (non-tile) icons.
-		marginInlineStart: token('space.050'),
-	},
-	// This is the same between app-logo and nav-logo
-	newInteractionStates: {
-		'&:hover': {
-			backgroundColor: token('color.background.neutral.subtle.hovered'),
-		},
-		'&:active': {
-			// Compiled bug is causing the `&:hover` state to take precedence in Jira
-			// Reported to #help-compiled but may not be fixed soon
-			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-			backgroundColor: `${token('color.background.neutral.subtle.pressed')}!important`,
-		},
-	},
-	newInteractionStatesCustomTheming: {
-		'&:hover': {
-			backgroundColor: 'var(--ds-top-bar-button-background-hovered)',
-		},
-		'&:active': {
-			// Compiled bug is causing the `&:hover` state to take precedence in Jira
-			// Reported to #help-compiled but may not be fixed soon
-			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-			backgroundColor: 'var(--ds-top-bar-button-background-pressed)!important',
-		},
-	},
-});
-
-const sharedIconOrLogoContainerStyles = cssMap({
-	root: {
-		// Overflow should never occur, but hiding it just in case
-		overflow: 'hidden',
-		/**
-		 * Using a nested selector because we cannot resize the image correctly by only styling the container.
-		 *
-		 * We could have changed the API to accept a string, and we would render the image ourselves.
-		 * But there is no way to prevent makers from rendering the image themselves (even if by accident).
-		 *
-		 * This seemed like the more robust option.
-		 */
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-		img: {
-			// Using a fixed height and letting the width auto-adjust.
-			height: 24,
-			maxWidth: 'inherit',
-			// The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box.
-			// So if the replaced content is too wide, it can display at a smaller height than the element's fixed height.
-			objectFit: 'contain',
-		},
-	},
-	appIconTilePaddingFlagged: {
-		paddingInline: token('space.050'),
-	},
-});
-
-const iconContainerStyles = cssMap({
-	root: {
-		display: 'flex',
-		// Max width the icon can display at (a square)
-		maxWidth: 24,
-		// Using `content-box` sizing because the padding is irrelevant for the maxWidth
-		boxSizing: 'content-box',
-		paddingInline: token('space.050'),
-		'@media (min-width: 64rem)': {
-			// '&&' is required to add more CSS specificity to resolve non-deterministic ordering, which can result in
-			// both the `icon` and `logo` elements to be displayed at the same time
-			// Clean up task: https://jplat.atlassian.net/browse/BLU-4788
-			// @ts-ignore
-			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-			'&&': {
-				display: 'none',
-			},
-		},
-	},
-});
-
-const logoContainerStyles = cssMap({
-	root: {
-		display: 'none',
-		// Max width the logo can display at
-		maxWidth: 320,
-		// Using `content-box` sizing because the padding is irrelevant for the maxWidth
-		boxSizing: 'content-box',
-		paddingInline: token('space.100'),
-		'@media (min-width: 64rem)': {
-			// '&&' is required to add more CSS specificity to resolve non-deterministic ordering, which can result in
-			// both the `icon` and `logo` elements to be displayed at the same time
-			// Clean up task: https://jplat.atlassian.net/browse/BLU-4788
-			// @ts-ignore
-			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-			'&&': {
-				display: 'flex',
-			},
-		},
-	},
-});
-
-/**
- * __Custom logo__
- *
- * Custom logo for the top navigation.
- *
- * To provide a responsive experience, it requires both a logo and an icon component.
- * The logo component will be used for large viewports, and the icon component will be used for small viewports.
- */
-export const CustomLogo = ({
-	href,
-	logo,
-	icon,
-	onClick,
-	label,
-}: {
-	/**
-	 * Provide an accessible label, often used by screen readers.
-	 */
-	label: string;
-	/**
-	 * The URL to navigate to when the element is clicked.
-	 */
-	href: string;
-	/**
-	 * The logo component to render. It will be used for large viewports.
-	 */
-	logo: ((props: LogoProps) => JSX.Element) | ((props: TempLogoProps) => JSX.Element);
-	/**
-	 * The icon component to render. It will be used for small viewports.
-	 */
-	icon: ((props: LogoProps) => JSX.Element) | ((props: TempIconProps) => JSX.Element);
-	/**
-	 * Handler called on click.
-	 */
-	onClick?: React.MouseEventHandler<HTMLAnchorElement>;
-}) => {
-	const ref = useRef<HTMLAnchorElement>(null);
-
-	useEffect(() => {
-		if (process.env.NODE_ENV === 'production') {
-			return;
-		}
-
-		if (!ref.current) {
-			return;
-		}
-
-		const img = ref.current.querySelector('img');
-		if (!img) {
-			return;
-		}
-
-		/**
-		 * We want custom logo components to render the image as the immediate child
-		 */
-		const hasExpectedStructure = img.parentElement?.parentElement === ref.current;
-		/**
-		 * We want custom logo components to render only one image
-		 */
-		const isOnlyChild = img.parentElement?.childElementCount === 1;
-
-		if (!hasExpectedStructure || !isOnlyChild) {
-			// eslint-disable-next-line no-console
-			console.error('Custom logos should render only a single image tag with no wrappers.');
-		}
-
-		if (
-			img.getAttribute('width') !== null ||
-			img.getAttribute('height') !== null ||
-			img.style.width !== '' ||
-			img.style.height !== ''
-		) {
-			// eslint-disable-next-line no-console
-			console.error(
-				'Do not set explicit dimensions on custom logo images. The container will resize the image to fit.',
-			);
-		}
-	}, []);
-
-	const hasCustomTheme = useHasCustomTheme();
-
-	return (
-		<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,
-				anchorStyles.customLogoBorderRadius,
-				anchorStyles.newMargin,
-				hasCustomTheme
-					? anchorStyles.newInteractionStatesCustomTheming
-					: anchorStyles.newInteractionStates,
-			)}
-			onClick={onClick}
-		>
-			<div
-				css={[
-					sharedIconOrLogoContainerStyles.root,
-					iconContainerStyles.root,
-					fg('platform-team25-app-icon-tiles') &&
-						sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged,
-				]}
-			>
-				<LogoRenderer logoOrIcon={icon} />
-			</div>
-			<div
-				css={[
-					sharedIconOrLogoContainerStyles.root,
-					logoContainerStyles.root,
-					fg('platform-team25-app-icon-tiles') &&
-						sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged,
-				]}
-			>
-				<LogoRenderer logoOrIcon={logo} />
-			</div>
-		</Anchor>
-	);
-};

package/src/ui/top-nav-items/nav-logo/logo-renderer.tsx

@@ -1,66 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { memo } from 'react';
-
-import { jsx } from '@compiled/react';
-
-import type { LogoProps } from '@atlaskit/logo';
-import { fg } from '@atlaskit/platform-feature-flags';
-import type {
-	IconProps as TempIconProps,
-	LogoProps as TempLogoProps,
-} from '@atlaskit/temp-nav-app-icons/types';
-
-import { useHasCustomTheme } from '../themed/has-custom-theme-context';
-
-export const themedLogoIcon = '--ds-top-bar-logo-icon';
-export const themedLogoText = '--ds-top-bar-logo-text';
-
-export function LogoRenderer({
-	logoOrIcon,
-	shouldUseNewLogoDesign,
-}: React.ComponentProps<typeof LogoRendererNoMemo>) {
-	return fg('jiv-20710-fix-nav-rerender') ? (
-		<LogoRendererMemo logoOrIcon={logoOrIcon} shouldUseNewLogoDesign={shouldUseNewLogoDesign} />
-	) : (
-		<LogoRendererNoMemo logoOrIcon={logoOrIcon} shouldUseNewLogoDesign={shouldUseNewLogoDesign} />
-	);
-}
-
-const LogoRendererMemo = memo(LogoRendererNoMemo);
-
-function LogoRendererNoMemo({
-	logoOrIcon: LogoOrIcon,
-	shouldUseNewLogoDesign,
-}: {
-	logoOrIcon:
-		| ((props: LogoProps) => JSX.Element)
-		| ((props: TempLogoProps) => JSX.Element)
-		| ((props: TempIconProps) => JSX.Element);
-	shouldUseNewLogoDesign?: boolean;
-}) {
-	const hasCustomTheme = useHasCustomTheme();
-
-	if (hasCustomTheme) {
-		return (
-			<LogoOrIcon
-				label=""
-				size="small"
-				shouldUseNewLogoDesign={shouldUseNewLogoDesign}
-				iconColor={`var(${themedLogoIcon})`}
-				textColor={`var(${themedLogoText})`}
-			/>
-		);
-	}
-
-	return (
-		<LogoOrIcon
-			size="small"
-			shouldUseNewLogoDesign={shouldUseNewLogoDesign}
-			label=""
-			appearance="brand"
-		/>
-	);
-}

package/src/ui/top-nav-items/notifications.tsx

@@ -1,67 +0,0 @@
-import React, { type ComponentType, forwardRef } from 'react';
-
-import NotificationsIcon from '@atlaskit/icon/core/notification';
-
-import { BadgeContainer } from '../../components/badge-container';
-
-import { EndItem, type EndItemProps } from './end-item';
-
-const NOTIFICATIONS_BADGE_ID = 'atlassian-navigation-notification-count';
-
-interface NotificationsProps extends Omit<EndItemProps, 'icon'> {
-	/**
-	 * The component to render as the badge.
-	 * You are recommended to use the Badge component from `@atlaskit/badge`.
-	 */
-	badge: ComponentType;
-}
-
-/**
- * __Notifications__
- *
- * The trigger button for the notifications menu in the top navigation bar.
- */
-export const Notifications = forwardRef<HTMLButtonElement, NotificationsProps>(
-	function Notifications(
-		{
-			label,
-			onClick,
-			onMouseEnter,
-			isSelected,
-			testId,
-			interactionName,
-			'aria-controls': ariaControls,
-			'aria-expanded': ariaExpanded,
-			'aria-haspopup': ariaHasPopup,
-			isListItem,
-			badge,
-		},
-		ref,
-	) {
-		return (
-			<BadgeContainer
-				id={NOTIFICATIONS_BADGE_ID}
-				badge={badge}
-				// We only need to set the list item role on the top level element (BadgeContainer)
-				isListItem={isListItem}
-			>
-				<EndItem
-					label={label}
-					onClick={onClick}
-					onMouseEnter={onMouseEnter}
-					isSelected={isSelected}
-					testId={testId}
-					interactionName={interactionName}
-					aria-controls={ariaControls}
-					aria-expanded={ariaExpanded}
-					aria-haspopup={ariaHasPopup}
-					ref={ref}
-					icon={NotificationsIcon}
-					// We explicitly set the EndItem to not be a list item,
-					// because the BadgeContainer already has a list item role (if `isListItem` is true)
-					isListItem={false}
-				/>
-			</BadgeContainer>
-		);
-	},
-);

package/src/ui/top-nav-items/profile.tsx

@@ -1,26 +0,0 @@
-import React, { forwardRef, useCallback } from 'react';
-
-import Avatar from '@atlaskit/avatar';
-
-import { EndItem, type EndItemProps } from './end-item';
-
-interface ProfileProps extends Omit<EndItemProps, 'icon'> {
-	/**
-	 * The URL of the image to display in the avatar.
-	 */
-	src?: string;
-}
-
-/**
- * __Profile__
- *
- * The Profile button for the top navigation.
- */
-export const Profile = forwardRef<HTMLButtonElement, ProfileProps>(({ src, ...props }, ref) => {
-	const ProfileAvatar = useCallback(
-		() => <Avatar appearance="circle" src={src} size="small" />,
-		[src],
-	);
-
-	return <EndItem {...props} ref={ref} icon={ProfileAvatar} />;
-});