@atlaskit/navigation-system 0.182.0 → 1.0.0

package/examples/utils/mock-search.tsx

@@ -1,67 +0,0 @@
-import React, { useCallback, useState } from 'react';
-
-import { useLegacySearchTheme } from '@atlaskit/navigation-system/experimental/use-legacy-search-theme';
-import {
-	EnlargedSearchInput,
-	SearchAnchor,
-	SearchInput,
-	type SearchTheme,
-	ThemeProvider as SearchThemeProvider,
-} from '@atlassian/search-dialog';
-
-export const MockSearch = ({
-	theme,
-	isEnlarged = false,
-}: {
-	/**
-	 * Optional theme, otherwise will call `useLegacySearchTheme` internally.
-	 *
-	 * Allowing this for our example that explicitly shows how to theme the search.
-	 * Other examples can just rely on the auto-theming.
-	 */
-	theme?: SearchTheme;
-
-	/**
-	 * Optional boolean to determine if an enlarged search input should be rendered.
-	 */
-	isEnlarged?: boolean;
-}) => {
-	const [isExpanded, setIsExpanded] = useState(false);
-
-	const expand = useCallback(() => {
-		setIsExpanded(true);
-	}, []);
-
-	const collapse = useCallback(() => {
-		setIsExpanded(false);
-	}, []);
-
-	const legacySearchTheme = useLegacySearchTheme();
-
-	return (
-		<SearchThemeProvider
-			value={
-				// Not ideal we still call `useLegacySearchTheme` even if a theme is provided, but also not a big deal.
-				theme ?? legacySearchTheme
-			}
-		>
-			<SearchAnchor shouldFillContainer onBlur={collapse} onFocus={expand} isExpanded={isExpanded}>
-				{isEnlarged ? (
-					<EnlargedSearchInput
-						isExpanded={isExpanded}
-						shouldFillContainer
-						tooltipContent={<span>Search</span>}
-						placeholder="Search"
-					/>
-				) : (
-					<SearchInput
-						isExpanded={isExpanded}
-						shouldFillContainer
-						tooltipContent={<span>Search</span>}
-						placeholder="Search"
-					/>
-				)}
-			</SearchAnchor>
-		</SearchThemeProvider>
-	);
-};

package/src/__tests__/informational-vr-tests/layering.vr.tsx

@@ -1,76 +0,0 @@
-import { Device, type Hooks, type SnapshotTestOptions } from '@af/visual-regression';
-import { snapshotInformational } from '@atlassian/gemini';
-
-import { ScrollableNoPanelVR, ScrollableVR } from '../../../examples/composition';
-import { LayersInMainShouldForceOpenLayers } from '../../../examples/layers-in-main';
-
-const mobileOnlyOptions: SnapshotTestOptions<Hooks> = {
-	drawsOutsideBounds: true,
-	variants: [
-		{
-			device: Device.MOBILE_CHROME,
-			environment: { colorScheme: 'light' },
-			name: 'mobile',
-		},
-	],
-};
-
-const desktopOnlyOptions: SnapshotTestOptions<Hooks> = {
-	drawsOutsideBounds: true,
-	variants: [
-		{
-			device: Device.DESKTOP_CHROME,
-			environment: { colorScheme: 'light' },
-			name: 'desktop',
-		},
-	],
-};
-
-/**
- * As the side nav is always collapsed by default on small screens (the `defaultCollapsed` prop is only for large screens),
- * we need to click the side nav toggle button in the top bar to expand the side nav in VR tests for mobile viewports.
- */
-snapshotInformational(ScrollableVR, {
-	...mobileOnlyOptions,
-	description: 'Side nav expanded on mobile',
-	prepare: async (page) => {
-		await page.getByTestId('side-nav-toggle-button').click();
-
-		// Wait for the tooltip to be displayed, to reduce flakiness
-		await page.getByRole('tooltip').waitFor();
-	},
-});
-
-snapshotInformational(ScrollableNoPanelVR, {
-	...mobileOnlyOptions,
-	description: 'Side nav expanded on mobile without panel',
-	prepare: async (page) => {
-		await page.getByTestId('side-nav-toggle-button').click();
-
-		// Wait for the tooltip to be displayed, to reduce flakiness
-		await page.getByRole('tooltip').waitFor();
-	},
-});
-
-snapshotInformational(LayersInMainShouldForceOpenLayers, {
-	...desktopOnlyOptions,
-	description: 'layers in main slot',
-	featureFlags: {
-		platform_dst_nav4_layering_in_main_slot_fixes: [true, false],
-		'platform-component-visual-refresh': true,
-		platform_design_system_nav4_panel_default_border: true,
-	},
-});
-
-snapshotInformational(LayersInMainShouldForceOpenLayers, {
-	...desktopOnlyOptions,
-	description: 'layers in main slot short viewport',
-	featureFlags: {
-		platform_dst_nav4_layering_in_main_slot_fixes: [true, false],
-		'platform-component-visual-refresh': true,
-		platform_design_system_nav4_panel_default_border: true,
-	},
-	prepare: async (page) => {
-		await page.setViewportSize({ width: 1280, height: 400 });
-	},
-});

package/src/__tests__/informational-vr-tests/menu-items-deeply-nested.vr.tsx

@@ -1,33 +0,0 @@
-import type { Hooks, SnapshotTestOptions } from '@af/visual-regression';
-import { snapshotInformational } from '@atlassian/gemini';
-
-import {
-	MenuItemsDeeplyNestedSelectedVR,
-	MenuItemsDeeplyNestedVR,
-} from '../../../examples/menu-items-deeply-nested';
-
-const lightModeVariant: SnapshotTestOptions<Hooks>['variants'] = [
-	{
-		environment: { colorScheme: 'light' },
-		name: 'default',
-	},
-];
-
-snapshotInformational(MenuItemsDeeplyNestedVR, {
-	description: 'Side nav with deeply nested menu items',
-	variants: lightModeVariant,
-});
-
-snapshotInformational(MenuItemsDeeplyNestedVR, {
-	description: 'Side nav with deeply nested menu items - scrolled to the end',
-	variants: lightModeVariant,
-	prepare: async (page) => {
-		await page.getByTestId('side-nav-content').hover();
-		await page.mouse.wheel(500, 0);
-	},
-});
-
-snapshotInformational(MenuItemsDeeplyNestedSelectedVR, {
-	description: 'Side nav with deeply nested menu items - nested menu item selected',
-	variants: lightModeVariant,
-});

package/src/__tests__/informational-vr-tests/sidebar-drag-and-drop.vr.tsx

@@ -1,100 +0,0 @@
-import type { Locator, Page } from '@playwright/test';
-import invariant from 'tiny-invariant';
-
-import type { Hooks, SnapshotTestOptions } from '@af/visual-regression';
-import { Device, snapshotInformational } from '@atlassian/gemini';
-
-import { App } from '../../../examples/drag-and-drop/jira/entry';
-
-const variants: SnapshotTestOptions<Hooks>['variants'] = [
-	{
-		environment: { colorScheme: 'light' },
-		name: 'desktop-chrome',
-		device: Device.DESKTOP_CHROME,
-	},
-	{
-		environment: { colorScheme: 'light' },
-		name: 'desktop-webkit',
-		device: Device.DESKTOP_WEBKIT,
-	},
-	{
-		environment: { colorScheme: 'light' },
-		name: 'desktop-firefox',
-		device: Device.DESKTOP_FIREFOX,
-	},
-];
-
-async function reorderAfter({
-	page,
-	draggable,
-	dropTarget,
-}: {
-	page: Page;
-	draggable: Locator;
-	dropTarget: Locator;
-}) {
-	const draggableBox = await draggable.boundingBox();
-	invariant(draggableBox, 'unable to get bounding box for draggable');
-
-	const dropTargetBox = await dropTarget.boundingBox();
-	invariant(dropTargetBox, 'unable to get bounding box for dropTarget');
-
-	// Start a drag
-	await page.mouse.move(draggableBox.x + 1, draggableBox.y + 1);
-	await page.mouse.down();
-	await page.mouse.move(draggableBox.y + 10, draggableBox.y + 1);
-
-	// Move over drop target
-	await page.mouse.move(dropTargetBox.x, dropTargetBox.y + dropTargetBox.height - 2);
-
-	// Second movement needed for Firefox
-	await page.mouse.move(dropTargetBox.x, dropTargetBox.y + dropTargetBox.height - 1);
-
-	// Not dropping for VR snapshot
-}
-
-snapshotInformational(App, {
-	description: 'Sidebar drag and drop',
-	variants: variants,
-	prepare: async (page) => {
-		const group = page.locator('[data-testid="project-group-starred"]');
-
-		const linkMenuItems = group.locator('a');
-
-		/**
-		 * Previously used `.all()` which was causing flake, because it was sometimes empty.
-		 *
-		 * According to the docs: "locator.all() does not wait for elements to match the locator,
-		 * and instead immediately returns whatever is present in the page."
-		 *
-		 * Whereas `.first()` and `.last()` should preserve the auto-waiting that locators usually have.
-		 */
-		const first = linkMenuItems.first();
-		const last = linkMenuItems.last();
-
-		await reorderAfter({ page, draggable: first, dropTarget: last });
-	},
-});
-
-/**
- * This could have been done with standard VR testing "states".
- *
- * Why it's here:
- * - It's colocated with the other relevant test
- * - I think we might need more than just `.hover()` to trigger it
- *
- * Note: the Safari bug being tested, does not currently appear in the
- * WebKit browser that our version of Playwright is using.
- *
- * - Bug is present in Webkit 18.4 (used by playwright@1.52.0)
- * - Bug is not present in Webkit 17.4 (used by playwright@1.44.1)
- */
-snapshotInformational(App, {
-	description: 'Sidebar drag and drop - hover bug',
-	variants: variants,
-	prepare: async (page) => {
-		const item = page.locator('[data-testid="recent-menu-item"]');
-
-		await item.hover();
-	},
-});

package/src/__tests__/playwright/drag-and-drop-in-the-sidebar-flyout.spec.tsx

@@ -1,235 +0,0 @@
-/**
- * We have chosen to test this behaviour in browser in order to increase our
- * confidence that our handling of browser events and their timings is correct.
- *
- * Note: an erroneous "mouseleave" event is fired after the drag starts (browser bug).
- * After that point the honey pot fix absorbs all the incorrect mouse events.
- */
-
-import invariant from 'tiny-invariant';
-
-import { expect, type Page, test } from '@af/integration-testing';
-
-import { sideNavFlyoutCloseDelayMs } from '../../ui/page-layout/side-nav/flyout-close-delay-ms';
-
-/**
- * Drag to a `box` in a way that works for all browsers.
- * Assumes a drag has already started.
- */
-async function safeDragMoveToBox({
-	page,
-	box,
-}: {
-	page: Page;
-	box: { x: number; y: number; width: number; height: number };
-}) {
-	invariant(
-		box.width >= 2 && box.height >= 2,
-		'safeMoveToBox can only work with boxes 2x2 or bigger',
-	);
-
-	await page.mouse.move(box.x + 1, box.y + 1);
-
-	// Second movement needed for Firefox
-	await page.mouse.move(box.x + 2, box.y + 2);
-}
-
-test.describe('drag and drop in the sidebar flyout', () => {
-	test.beforeEach(async ({ page }) => {
-		await page.visitExample(
-			'design-system',
-			'navigation-system',
-			'drag-and-drop-in-the-sidebar-flyout',
-		);
-	});
-	test('the flyout should stay open if dropped inside it', async ({ page }) => {
-		const toggle = page.getByTestId('side-nav-toggle-button');
-
-		// Hover over the toggle to show the flyout
-		await toggle.hover();
-
-		// Expecting the flyout side nav is now shown
-		const sideNav = page.getByTestId('side-nav');
-		await expect(sideNav).toHaveAttribute('data-visible', 'flyout');
-
-		// Wait for the flyout "expand" animation to have finished.
-		// The `stable` element state means the element has maintained the
-		// same bounding box for at least two consecutive animation frames.
-		// https://playwright.dev/docs/actionability#stable
-		let sideNavHandle = await sideNav.elementHandle();
-		await sideNavHandle?.waitForElementState('stable');
-
-		// Get our draggable element
-		const draggable = page.getByTestId('draggable-menu-item-button');
-		const draggableBox = await draggable.boundingBox();
-		invariant(draggableBox);
-
-		// Get our drop target
-		const dropTarget = page.getByTestId('side-nav-drop-target');
-		await expect(dropTarget).toHaveAttribute('data-state', 'idle');
-		const dropTargetBox = await dropTarget.boundingBox();
-		invariant(dropTargetBox);
-
-		// Start a drag
-		await page.mouse.move(draggableBox.x + 1, draggableBox.y + 1);
-		await page.mouse.down();
-		await page.mouse.move(draggableBox.y + 10, draggableBox.y + 1);
-
-		// Drag over the drop target
-		await safeDragMoveToBox({ page, box: dropTargetBox });
-
-		await expect(dropTarget).toHaveAttribute('data-state', 'is-over');
-
-		// Wait for the flyout "collapse" timeout to have finished.
-		// Waiting for a period of time is appropriate in this case,
-		// as the logic we are testing is timeout based.
-		// eslint-disable-next-line playwright/no-wait-for-timeout
-		await page.waitForTimeout(sideNavFlyoutCloseDelayMs * 2);
-
-		// Assert the flyout is still visible
-		await expect(sideNav).toHaveAttribute('data-visible', 'flyout');
-		await expect(dropTarget).toHaveAttribute('data-state', 'is-over');
-
-		// Finish the drop
-		await page.mouse.up();
-		await expect(dropTarget).toHaveAttribute('data-state', 'idle');
-
-		// Wait for the flyout "collapse" timeout to have finished.
-		// Waiting for a period of time is appropriate in this case,
-		// as the logic we are testing is timeout based.
-		// eslint-disable-next-line playwright/no-wait-for-timeout
-		await page.waitForTimeout(sideNavFlyoutCloseDelayMs * 2);
-
-		// Assert the flyout is still visible
-		await expect(sideNav).toHaveAttribute('data-visible', 'flyout');
-	});
-
-	test('the flyout should close if dropped outside it', async ({ page }) => {
-		const toggle = page.getByTestId('side-nav-toggle-button');
-
-		// Hover over the toggle to show the flyout
-		await toggle.hover();
-
-		// Expecting the flyout side nav is now shown
-		const sideNav = page.getByTestId('side-nav');
-		await expect(sideNav).toHaveAttribute('data-visible', 'flyout');
-
-		// Wait for the flyout "expand" animation to have finished.
-		// The `stable` element state means the element has maintained the
-		// same bounding box for at least two consecutive animation frames.
-		// https://playwright.dev/docs/actionability#stable
-		let sideNavHandle = await sideNav.elementHandle();
-		await sideNavHandle?.waitForElementState('stable');
-
-		// Get our draggable element
-		const draggable = page.getByTestId('draggable-menu-item-button');
-		const draggableBox = await draggable.boundingBox();
-		invariant(draggableBox);
-
-		// Get our drop target
-		const dropTarget = page.getByTestId('panel-drop-target');
-		await expect(dropTarget).toHaveAttribute('data-state', 'idle');
-		const dropTargetBox = await dropTarget.boundingBox();
-		invariant(dropTargetBox);
-
-		// Start a drag
-		await page.mouse.move(draggableBox.x + 1, draggableBox.y + 1);
-		await page.mouse.down();
-		await page.mouse.move(draggableBox.y + 10, draggableBox.y + 1);
-
-		// Drag over the drop target
-		await safeDragMoveToBox({ page, box: dropTargetBox });
-		await expect(dropTarget).toHaveAttribute('data-state', 'is-over');
-
-		// Wait for the flyout "collapse" timeout to have finished.
-		// Waiting for a period of time is appropriate in this case,
-		// as the logic we are testing is timeout based.
-		// eslint-disable-next-line playwright/no-wait-for-timeout
-		await page.waitForTimeout(sideNavFlyoutCloseDelayMs * 2);
-
-		// Assert the flyout is still visible
-		await expect(sideNav).toHaveAttribute('data-visible', 'flyout');
-		await expect(dropTarget).toHaveAttribute('data-state', 'is-over');
-
-		// Finish the drop
-		await page.mouse.up();
-		await expect(dropTarget).toHaveAttribute('data-state', 'idle');
-
-		// Flyout should now close after a timeout
-		await expect(sideNav).toHaveAttribute('data-visible', 'false');
-	});
-
-	test('the flyout should stay open when outside the flyout if the drag started inside the flyout', async ({
-		page,
-	}) => {
-		const toggle = page.getByTestId('side-nav-toggle-button');
-
-		// Hover over the toggle to show the flyout
-		await toggle.hover();
-
-		// Expecting the flyout side nav is now shown
-		const sideNav = page.getByTestId('side-nav');
-		await expect(sideNav).toHaveAttribute('data-visible', 'flyout');
-
-		// Wait for the flyout "expand" animation to have finished.
-		// The `stable` element state means the element has maintained the
-		// same bounding box for at least two consecutive animation frames.
-		// https://playwright.dev/docs/actionability#stable
-		let sideNavHandle = await sideNav.elementHandle();
-		await sideNavHandle?.waitForElementState('stable');
-
-		// Get our draggable element
-		const draggable = page.getByTestId('draggable-menu-item-button');
-		const draggableBox = await draggable.boundingBox();
-		invariant(draggableBox);
-
-		// Get our side nav drop target
-		const sideNavDropTarget = page.getByTestId('side-nav-drop-target');
-		await expect(sideNavDropTarget).toHaveAttribute('data-state', 'idle');
-		const sideNavDropTargetBox = await sideNavDropTarget.boundingBox();
-		invariant(sideNavDropTargetBox);
-
-		const panelDropTarget = page.getByTestId('panel-drop-target');
-		await expect(panelDropTarget).toHaveAttribute('data-state', 'idle');
-		const panelDropTargetBox = await panelDropTarget.boundingBox();
-		invariant(panelDropTargetBox);
-
-		// Start a drag
-		await page.mouse.move(draggableBox.x + 1, draggableBox.y + 1);
-		await page.mouse.down();
-		await page.mouse.move(draggableBox.y + 10, draggableBox.y + 1);
-
-		// Drag over panel panel drop target
-		await safeDragMoveToBox({ page, box: panelDropTargetBox });
-		await expect(panelDropTarget).toHaveAttribute('data-state', 'is-over');
-		await expect(sideNavDropTarget).toHaveAttribute('data-state', 'idle');
-
-		// Wait for the flyout "collapse" timeout to have finished.
-		// Waiting for a period of time is appropriate in this case,
-		// as the logic we are testing is timeout based.
-		// eslint-disable-next-line playwright/no-wait-for-timeout
-		await page.waitForTimeout(sideNavFlyoutCloseDelayMs * 2);
-
-		// Assert the flyout is still visible
-		await expect(sideNav).toHaveAttribute('data-visible', 'flyout');
-
-		// Drag back over the sidebar
-		await safeDragMoveToBox({ page, box: sideNavDropTargetBox });
-		await expect(sideNavDropTarget).toHaveAttribute('data-state', 'is-over');
-		await expect(panelDropTarget).toHaveAttribute('data-state', 'idle');
-
-		// Finish the drop
-		await page.mouse.up();
-		await expect(sideNavDropTarget).toHaveAttribute('data-state', 'idle');
-		await expect(panelDropTarget).toHaveAttribute('data-state', 'idle');
-
-		// Wait for the flyout "collapse" timeout to have finished.
-		// Waiting for a period of time is appropriate in this case,
-		// as the logic we are testing is timeout based.
-		// eslint-disable-next-line playwright/no-wait-for-timeout
-		await page.waitForTimeout(sideNavFlyoutCloseDelayMs * 2);
-
-		// Assert the flyout is still visible
-		await expect(sideNav).toHaveAttribute('data-visible', 'flyout');
-	});
-});

package/src/__tests__/playwright/expandable-menu-item.spec.tsx

@@ -1,20 +0,0 @@
-import { expect, test } from '@af/integration-testing';
-
-test.describe('expandable menu item', () => {
-	test('should expand and collapse content when trigger is clicked', async ({ page }) => {
-		await page.visitExample('design-system', 'navigation-system', 'menu-item-integration');
-
-		const expandableMenuItemTrigger = page.getByRole('button', { name: /Projects/ });
-		const expandableMenuItemContent = page.getByRole('button', { name: /DST - Claret/ });
-
-		await expect(expandableMenuItemContent).toBeHidden();
-
-		await expandableMenuItemTrigger.click();
-
-		await expect(expandableMenuItemContent).toBeVisible();
-
-		await expandableMenuItemTrigger.click();
-
-		await expect(expandableMenuItemContent).toBeHidden();
-	});
-});

package/src/__tests__/playwright/flyout-menu-item.spec.tsx

@@ -1,22 +0,0 @@
-import { expect, test } from '@af/integration-testing';
-
-test.describe('flyout menu item', () => {
-	test('should open and close flyout content when trigger is clicked', async ({ page }) => {
-		await page.visitExample('design-system', 'navigation-system', 'menu-item-integration', {
-			'react-18-mode': 'legacy',
-		});
-
-		const flyoutMenuItemTrigger = page.getByRole('button', { name: /Recent/ });
-		const flyoutMenuItemContent = page.getByRole('button', { name: /View all recent items/ });
-
-		await expect(flyoutMenuItemContent).toBeHidden();
-
-		await flyoutMenuItemTrigger.click();
-
-		await expect(flyoutMenuItemContent).toBeVisible();
-
-		await flyoutMenuItemTrigger.click();
-
-		await expect(flyoutMenuItemContent).toBeHidden();
-	});
-});