@atlaskit/navigation-system 0.182.0 → 1.0.0

package/src/ui/top-nav-items/__tests__/vr-tests/top-navigation.vr.tsx

@@ -1,160 +0,0 @@
-import { Device, type Hooks, snapshot } from '@af/visual-regression';
-import type { SnapshotTestOptions } from '@atlassian/gemini';
-
-import TopNavCustomProfileImage from '../../../../../examples/top-nav-custom-profile-image';
-import TopNavSideNavCollapsed from '../../../../../examples/top-nav-side-nav-collapsed';
-import {
-	SearchRightElem,
-	TopNavigationEnlargedSearchInput,
-	TopNavigationExample,
-} from '../../../../../examples/top-navigation';
-import {
-	TopNavigationCustomLogoExample,
-	TopNavigationCustomLogoImage200x200Example,
-	TopNavigationCustomLogoImage200x20Example,
-	TopNavigationCustomLogoImage20x200Example,
-	TopNavigationCustomLogoImage20x20Example,
-} from '../../../../../examples/top-navigation-custom-logo';
-import TopNavigationThemedButtonsExample from '../../../../../examples/top-navigation-themed-buttons';
-import {
-	TopNavigationThemingExample,
-	TopNavigationThemingHSLExample,
-	TopNavigationThemingRGBExample,
-	TopNavigationThemingSingleExample,
-	TopNavigationThemingSingleExampleCustomLogo,
-} from '../../../../../examples/top-navigation-theming';
-import { TopNavigationThemingLoggedOutExample } from '../../../../../examples/top-navigation-theming-logged-out';
-
-const variants = {
-	desktop: {
-		device: Device.DESKTOP_CHROME,
-		environment: { colorScheme: 'light' },
-		name: 'desktop',
-	},
-	mobile: {
-		device: Device.MOBILE_CHROME,
-		environment: { colorScheme: 'light' },
-		name: 'mobile',
-	},
-};
-
-const defaultOptions: SnapshotTestOptions<Hooks> = {
-	variants: [variants.desktop, variants.mobile],
-};
-
-const lightModeVariant: SnapshotTestOptions<Hooks>['variants'] = [
-	{
-		environment: { colorScheme: 'light' },
-		name: 'default',
-	},
-];
-
-snapshot(TopNavigationExample, {
-	variants: [variants.desktop, variants.mobile],
-});
-
-snapshot(TopNavSideNavCollapsed, defaultOptions);
-
-snapshot(SearchRightElem, {
-	variants: lightModeVariant,
-});
-
-snapshot(TopNavCustomProfileImage, {
-	variants: lightModeVariant,
-});
-
-snapshot(TopNavigationThemingSingleExample, {
-	description: 'themed create button hover state',
-	variants: [variants.desktop],
-	states: [
-		{
-			selector: {
-				byRole: 'button',
-				options: { name: 'Create' },
-			},
-			state: 'hovered',
-		},
-	],
-});
-
-snapshot(TopNavigationThemingExample, {
-	description: 'theming is enabled',
-	variants: [variants.desktop],
-});
-
-snapshot(TopNavigationThemingHSLExample, {
-	description: 'theme is applied with an HSL color',
-	variants: [variants.desktop],
-});
-
-snapshot(TopNavigationThemingRGBExample, {
-	description: 'theme is applied with an RGB color',
-	variants: [variants.desktop],
-});
-
-snapshot(TopNavigationThemingSingleExampleCustomLogo, {
-	description: 'theme is applied with CustomLogo',
-	variants: [variants.desktop],
-});
-
-snapshot(TopNavigationThemingSingleExample, {
-	description: 'themed search focus state',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'focused',
-			selector: { byRole: 'textbox', options: { name: 'Search' } },
-		},
-	],
-});
-
-snapshot(TopNavigationEnlargedSearchInput, {
-	description: 'top navigation with a large search input in focus state',
-	states: [
-		{
-			state: 'focused',
-			selector: { byRole: 'textbox', options: { name: 'Search' } },
-		},
-	],
-});
-
-snapshot(TopNavigationCustomLogoExample, defaultOptions);
-snapshot(TopNavigationCustomLogoImage200x200Example, defaultOptions);
-snapshot(TopNavigationCustomLogoImage200x20Example, defaultOptions);
-snapshot(TopNavigationCustomLogoImage20x200Example, defaultOptions);
-snapshot(TopNavigationCustomLogoImage20x20Example, defaultOptions);
-
-snapshot(TopNavigationThemingLoggedOutExample, {
-	description: 'log in button',
-	/**
-	 * We only care about the log in button, so desktop and mobile snapshots aren't necessary.
-	 * Using desktop so we don't need to open the responsive TopNavEnd popup to capture the log in button.
-	 */
-	variants: [variants.desktop],
-	states: [{ selector: { byRole: 'link', options: { name: 'Log in' } }, state: 'focused' }],
-	drawsOutsideBounds: true,
-});
-
-snapshot(TopNavigationThemedButtonsExample, {
-	description: 'themed button hover state',
-	variants: lightModeVariant,
-	states: [{ selector: { byRole: 'button', options: { name: 'Button' } }, state: 'hovered' }],
-});
-
-snapshot(TopNavigationThemedButtonsExample, {
-	description: 'themed button focus state',
-	variants: lightModeVariant,
-	states: [{ selector: { byRole: 'button', options: { name: 'Button' } }, state: 'focused' }],
-});
-
-snapshot(TopNavigationThemedButtonsExample, {
-	description: 'themed link button hover state',
-	variants: lightModeVariant,
-	states: [{ selector: { byRole: 'link', options: { name: 'LinkButton' } }, state: 'hovered' }],
-});
-
-snapshot(TopNavigationThemedButtonsExample, {
-	description: 'themed link button focus state',
-	variants: lightModeVariant,
-	states: [{ selector: { byRole: 'link', options: { name: 'LinkButton' } }, state: 'focused' }],
-});

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

@@ -1,81 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import { type IconButtonProps } from '@atlaskit/button/new';
-import AppSwitcherIcon from '@atlaskit/icon/core/app-switcher';
-import type { TriggerProps } from '@atlaskit/popup/types';
-
-import { IconButton } from './themed/migration';
-
-interface AppSwitcherProps
-	extends Partial<
-		Omit<
-			TriggerProps,
-			| 'ref' // not necessary because we're using forwardRef
-			| 'data-ds--level' // this doesn't look like it should be exposed
-		>
-	> {
-	/**
-	 * Provide an accessible label, often used by screen readers.
-	 */
-	label: React.ReactNode;
-	/**
-	 * Handler called on click.
-	 */
-	onClick?: React.MouseEventHandler<HTMLButtonElement>;
-	/**
-	 * Called when the mouse enters the element container.
-	 * Allows preloading popup components
-	 */
-	onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
-	/**
-	 * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
-	 */
-	interactionName?: string;
-	/**
-	 * Indicates that the button is selected.
-	 */
-	isSelected?: boolean;
-}
-
-const toggleButtonTooltipOptions: IconButtonProps['tooltip'] = {
-	// We're disabling pointer events on the tooltip to prevent it from blocking mouse events, so that the side nav flyout stays open
-	// when moving the mouse from the top bar to the side nav.
-	ignoreTooltipPointerEvents: true,
-};
-
-/**
- * __App switcher__
- *
- * The trigger button for the app switcher. Allows users to switch between Atlassian products.
- */
-export const AppSwitcher = forwardRef<HTMLButtonElement, AppSwitcherProps>(
-	(
-		{
-			label,
-			onClick,
-			onMouseEnter,
-			interactionName,
-			isSelected,
-			'aria-controls': ariaControls,
-			'aria-expanded': ariaExpanded,
-			'aria-haspopup': ariaHasPopup,
-		},
-		ref,
-	) => (
-		<IconButton
-			ref={ref}
-			aria-controls={ariaControls}
-			aria-expanded={ariaExpanded}
-			aria-haspopup={ariaHasPopup}
-			icon={AppSwitcherIcon}
-			label={label}
-			appearance="subtle"
-			onClick={onClick}
-			onMouseEnter={onMouseEnter}
-			interactionName={interactionName}
-			isTooltipDisabled={false}
-			tooltip={toggleButtonTooltipOptions}
-			isSelected={isSelected}
-		/>
-	),
-);

package/src/ui/top-nav-items/chat-button.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-
-import ChatIcon from '@atlaskit/icon/core/ai-chat';
-
-import { ListItem } from '../../components/list-item';
-
-import { Button } from './themed/migration';
-
-/**
- * __Chat button__
- *
- * The chat button for the top navigation.
- * TODO: check if this is still needed and remove. Jira doesn't use it - there's a separate button for ConversationAssistant
- */
-export const ChatButton = ({
-	children,
-	onClick,
-	isSelected,
-	interactionName,
-}: {
-	/**
-	 * Text content to be rendered in the button.
-	 */
-	children: React.ReactNode;
-	/**
-	 * Handler called on click.
-	 */
-	onClick?: React.MouseEventHandler<HTMLButtonElement>;
-	/**
-	 * Indicates that the button is selected.
-	 */
-	isSelected?: boolean;
-	/**
-	 * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
-	 */
-	interactionName?: string;
-}) => (
-	<ListItem>
-		<Button
-			appearance="default"
-			iconBefore={ChatIcon}
-			onClick={onClick}
-			isSelected={isSelected}
-			interactionName={interactionName}
-		>
-			{children}
-		</Button>
-	</ListItem>
-);

package/src/ui/top-nav-items/create-button.tsx

@@ -1,51 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import AddIcon from '@atlaskit/icon/core/add';
-
-import { Button } from './themed/migration';
-
-type CreateButtonProps = {
-	/**
-	 * The content of the button.
-	 */
-	children: React.ReactNode;
-	/**
-	 * Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels.
-	 * They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for
-	 * information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics)
-	 * or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/pressable/examples#gasv3-analytics).
-	 */
-	onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
-	/**
-	 * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
-	 */
-	testId?: string;
-	/**
-	 * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
-	 */
-	interactionName?: string;
-};
-
-/**
- * __Create button__
- *
- * The create button for the top navigation.
- */
-export const CreateButton = forwardRef(
-	(
-		{ children, onClick, testId, interactionName }: CreateButtonProps,
-		ref: React.ForwardedRef<HTMLButtonElement>,
-	) => (
-		<Button
-			ref={ref}
-			appearance="primary"
-			iconBefore={AddIcon}
-			onClick={onClick}
-			testId={testId}
-			interactionName={interactionName}
-		>
-			{children}
-		</Button>
-	),
-);

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

@@ -1,83 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { forwardRef, type ReactNode } from 'react';
-
-import { jsx } from '@compiled/react';
-
-import { cssMap } from '@atlaskit/css';
-import { token } from '@atlaskit/tokens';
-
-import { useHasCustomTheme } from './themed/has-custom-theme-context';
-
-const styles = cssMap({
-	root: {
-		whiteSpace: 'nowrap',
-		maxWidth: '200px',
-		textOverflow: 'ellipsis',
-		overflow: 'hidden',
-		font: token('font.body'),
-		// There should be `12px` between the logo and the custom title.
-		// There is already `4px` of padding on the logo and a `4px` flex gap between the logo and the title.
-		paddingInlineStart: token('space.050'),
-		// The `TopNavStart` container has no padding, so the title needs padding at the end.
-		paddingInlineEnd: token('space.100'),
-		display: 'none',
-		// Hiding the CustomTitle on smaller viewports
-		'@media (min-width: 64rem)': {
-			// '&&' is required to add more CSS specificity to resolve non-deterministic ordering, which can result in broken UI.
-			// 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',
-			},
-		},
-	},
-	// Text color used in standard light/dark mode. Custom theming will use an inherited `color` value.
-	subtleText: {
-		color: token('color.text.subtle'),
-	},
-});
-
-type CustomTitleProps = {
-	/**
-	 * The custom title value to display.
-	 */
-	children: ReactNode;
-	/**
-	 * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
-	 */
-	testId?: string;
-};
-
-/**
- * __Custom title__
- *
- * A custom site title to be displayed in the top navigation, to the right of the logo.
- * It is hidden on smaller viewports.
- */
-export const CustomTitle = forwardRef(function CustomTitle(
-	{ children, testId }: CustomTitleProps,
-	ref: React.ForwardedRef<HTMLDivElement>,
-) {
-	const hasCustomTheme = useHasCustomTheme();
-
-	return (
-		<div
-			ref={ref}
-			css={[
-				styles.root,
-				// Only setting a text color when there is no custom theming.
-				// With custom theming, the text will inherit the `color` set on the `TopNav`.
-				// In the future we might want an explicit CSS var for this color, such as a subtle theme-aware color.
-				!hasCustomTheme && styles.subtleText,
-			]}
-			data-testid={testId}
-		>
-			{children}
-		</div>
-	);
-});

package/src/ui/top-nav-items/end-item.tsx

@@ -1,120 +0,0 @@
-import React, { forwardRef, Fragment } from 'react';
-
-import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { type IconButtonProps } from '@atlaskit/button/new';
-import type { TriggerProps } from '@atlaskit/popup/types';
-
-import { ListItem } from '../../components/list-item';
-
-import { IconButton } from './themed/migration';
-
-export interface EndItemProps
-	extends Partial<Pick<TriggerProps, 'aria-controls' | 'aria-expanded' | 'aria-haspopup'>> {
-	/**
-	 * Provide an accessible label, often used by screen readers.
-	 */
-	label: React.ReactNode;
-	/**
-	 * Places an icon within the button.
-	 */
-	icon: IconButtonProps['icon'];
-	/**
-	 * Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels.
-	 * They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for
-	 * information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics)
-	 * or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/pressable/examples#gasv3-analytics).
-	 */
-	onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
-	/**
-	 * Called when the mouse enters the element container.
-	 * Allows preloading popup components
-	 */
-	onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
-	/**
-	 * Indicates that the button is selected.
-	 */
-	isSelected?: boolean;
-	/**
-	 * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
-	 */
-	testId?: string;
-	/**
-	 * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
-	 */
-	interactionName?: string;
-
-	/**
-	 * Can be used to disable the default `listitem` role.
-	 *
-	 * This is intended for when the item is a popup trigger,
-	 * and requires you to render your own `<MenuListItem>` to wrap the action.
-	 *
-	 * @default true
-	 *
-	 * @example
-	 * ```tsx
-	 * <TopNavEnd>
-	 *		<MenuListItem>
-	 *			<DropdownMenu
-	 *				shouldRenderToParent
-	 *				trigger={({ triggerRef, ...props }) => (
-	 *					<Profile {...props} ref={triggerRef} label="Profile" isListItem={false}  />
-	 *				)}
-	 *			>
-	 *				<DropdownItemGroup>
-	 *					<DropdownItem>Account</DropdownItem>
-	 *				</DropdownItemGroup>
-	 *			</DropdownMenu>
-	 *		</MenuListItem>
-	 * </TopNavEnd>
-	 * ```
-	 */
-	isListItem?: boolean;
-}
-
-/**
- * __EndItem__
- *
- * An icon button for the `TopNavEnd` layout area of the top navigation. Used for adding custom actions that are not already provided.
- *
- * For common actions, like `Notifications`, `Help`, `Profile`, `Settings`, use the provided components as appropriate.
- */
-export const EndItem = forwardRef<HTMLButtonElement, EndItemProps>(
-	(
-		{
-			label,
-			icon,
-			onClick,
-			onMouseEnter,
-			isSelected,
-			testId,
-			interactionName,
-			'aria-controls': ariaControls,
-			'aria-expanded': ariaExpanded,
-			'aria-haspopup': ariaHasPopup,
-			isListItem = true,
-		}: EndItemProps,
-		forwardedRef,
-	) => {
-		const Wrapper = isListItem ? ListItem : Fragment;
-		return (
-			<Wrapper>
-				<IconButton
-					ref={forwardedRef}
-					icon={icon}
-					label={label}
-					onClick={onClick}
-					onMouseEnter={onMouseEnter}
-					appearance="subtle"
-					isSelected={isSelected}
-					isTooltipDisabled={false}
-					testId={testId}
-					interactionName={interactionName}
-					aria-controls={ariaControls}
-					aria-expanded={ariaExpanded}
-					aria-haspopup={ariaHasPopup}
-				/>
-			</Wrapper>
-		);
-	},
-);

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

@@ -1,69 +0,0 @@
-/**
- * @jsxRuntime classic
- */
-import React, { type ComponentType, forwardRef } from 'react';
-
-import HelpIcon from '@atlaskit/icon/core/question-circle';
-
-import { BadgeContainer } from '../../components/badge-container';
-
-import { EndItem, type EndItemProps } from './end-item';
-
-const HELP_NOTIFICATION_BADGE_ID = 'atlassian-navigation-help-notification-count';
-
-interface HelpProps
-	extends Omit<
-		EndItemProps,
-		| 'icon'
-		// Omitting popup trigger aria attributes as Help should not open a Popup - it should open a Panel.
-		| 'aria-controls'
-		| 'aria-expanded'
-		| 'aria-haspopup'
-	> {
-	/**
-	 * The component to render as the badge.
-	 * You are recommended to use the Badge component from `@atlaskit/badge`.
-	 */
-	badge?: ComponentType;
-}
-
-/**
- * __Help__
- *
- * The trigger button for the help menu in the top navigation bar.
- */
-export const Help = forwardRef<HTMLButtonElement, HelpProps>(function Help(
-	{ label, onClick, onMouseEnter, isSelected, testId, interactionName, isListItem, badge },
-	ref,
-) {
-	const sharedProps = {
-		icon: HelpIcon,
-		label,
-		onClick,
-		onMouseEnter,
-		isSelected,
-		testId,
-		interactionName,
-		ref,
-	};
-
-	if (!badge) {
-		return <EndItem {...sharedProps} isListItem={isListItem} />;
-	}
-
-	return (
-		<BadgeContainer
-			id={HELP_NOTIFICATION_BADGE_ID}
-			badge={badge}
-			// We only need to set the list item role on the top level element (BadgeContainer)
-			isListItem={isListItem}
-		>
-			<EndItem
-				{...sharedProps}
-				// 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/log-in.tsx

@@ -1,66 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import LogInIcon from '@atlaskit/icon/core/log-in';
-import type { AnchorProps } from '@atlaskit/primitives/anchor';
-
-import { ListItem } from '../../components/list-item';
-
-import { LinkIconButton } from './themed/migration';
-
-interface LogInProps extends Pick<AnchorProps, 'href'> {
-	/**
-	 * Provide an accessible label, often used by screen readers.
-	 */
-	label: React.ReactNode;
-	/**
-	 * Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels.
-	 * They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for
-	 * information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics)
-	 * or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/pressable/examples#gasv3-analytics).
-	 */
-	onClick?: (e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent: UIAnalyticsEvent) => void;
-	/**
-	 * Called when the mouse enters the element container.
-	 * Allows preloading popup components
-	 */
-	onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>;
-	/**
-	 * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
-	 */
-	testId?: string;
-	/**
-	 * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
-	 */
-	interactionName?: string;
-}
-/**
- * __Log in__
- *
- * The Log in button for the top navigation.
- */
-export const LogIn = forwardRef<HTMLAnchorElement, LogInProps>(
-	({ onClick, onMouseEnter, testId, interactionName, href, label }, ref) => (
-		/**
-		 * This component doesn't use `EndItem` internally because it renders a
-		 * `LinkIconButton` instead of an `IconButton`.
-		 *
-		 * We could make another abstraction, but this is the only top navigation item
-		 * that renders a link.
-		 */
-		<ListItem>
-			<LinkIconButton
-				ref={ref}
-				label={label}
-				href={href}
-				onClick={onClick}
-				onMouseEnter={onMouseEnter}
-				testId={testId}
-				interactionName={interactionName}
-				icon={LogInIcon}
-				appearance="subtle"
-				isTooltipDisabled={false}
-			/>
-		</ListItem>
-	),
-);