@atlaskit/navigation-system 0.182.0 → 1.0.0

package/src/ui/page-layout/__tests__/vr-tests/page-layout.vr.tsx

@@ -1,266 +0,0 @@
-import { Device, type Hooks, snapshot, type SnapshotTestOptions } from '@af/visual-regression';
-
-import CompanyHubMockExample from '../../../../../examples/company-hub-mock';
-import {
-	AllSlots,
-	AllSlotsBannerHeightZero,
-	AllSlotsCustomSizes,
-	AllSlotsRTL,
-	AllSlotsScrollable,
-	EdgeCaseSiblingAbsolutePositioned,
-	EdgeCaseSiblingAbsolutePositionedCollapsed,
-	EdgeCaseSiblingAbsolutePositionedCustomSizes,
-	EdgeCaseSiblingAbsolutePositionedPanelVisible,
-	EdgeCaseSiblingAbsolutePositionedResizable,
-	EdgeCaseUsingLegacyVars,
-	MainAside,
-	MainAsideScrollable,
-	Resizable,
-	SideNavCustomWidthGreaterThanMaxWidth,
-	SideNavCustomWidthSmallerThanMinWidth,
-	SideNavMainAside,
-	SideNavMainAsideScrollable,
-	SideNavOverflowingChildren,
-	SideNavWithMenuItems,
-	TopBarSideNavMain,
-	TopBarSideNavMainAside,
-	TopBarSideNavMainAsideScrollable,
-	TopBarSideNavMainScrollable,
-} from '../../../../../examples/page-layout';
-import AsideBorderExample from '../../../../../examples/page-layout-aside-border';
-import PageLayoutImplicitRows from '../../../../../examples/page-layout-implicit-rows';
-import {
-	PanelAsideDefaultWidthsVR,
-	PanelAsideZeroWidthsVR,
-} from '../../../../../examples/page-layout-panel-aside-default-widths';
-import { SideNavContentScrollWithStickyVR } from '../../../../../examples/page-layout-side-nav-content-scroll-with-sticky';
-import SideNavSlotsExample from '../../../../../examples/page-layout-side-nav-slots';
-
-const defaultOptions: SnapshotTestOptions<Hooks> = {
-	drawsOutsideBounds: true,
-	variants: [
-		{
-			device: Device.DESKTOP_CHROME,
-			environment: { colorScheme: 'light' },
-			name: 'desktop',
-		},
-		{
-			device: Device.MOBILE_CHROME,
-			environment: { colorScheme: 'light' },
-			name: 'mobile',
-		},
-	],
-};
-
-// For scenarios that don't explicitly require mobile snapshots
-const desktopOnly: SnapshotTestOptions<Hooks> = {
-	drawsOutsideBounds: true,
-	variants: [
-		{
-			device: Device.DESKTOP_CHROME,
-			environment: { colorScheme: 'light' },
-			name: 'desktop',
-		},
-	],
-};
-
-snapshot(AllSlots, {
-	...defaultOptions,
-	a11y: {
-		/**
-		 * This test applies opacity for debugging purposes, which fails color contrast checks.
-		 * Because it's intentionally hacking things, and not representative of real usage, the a11y checking isn't valuable.
-		 *
-		 * I tried adding semi-transparent background colors instead of making the elements semi-transparent,
-		 * but then we run into type errors with the colors not being tokens. We can ignore them but it adds noise for no real gain.
-		 */
-		skip: true,
-	},
-});
-
-snapshot(AllSlotsRTL, defaultOptions);
-
-snapshot(AllSlotsScrollable, defaultOptions);
-
-snapshot(AllSlotsCustomSizes, defaultOptions);
-
-snapshot(AllSlotsBannerHeightZero, defaultOptions);
-
-snapshot(EdgeCaseSiblingAbsolutePositioned, {
-	...defaultOptions,
-	a11y: {
-		/**
-		 * This test applies opacity for debugging purposes, which fails color contrast checks.
-		 * Because it's intentionally hacking things, and not representative of real usage, the a11y checking isn't valuable.
-		 *
-		 * I tried adding semi-transparent background colors instead of making the elements semi-transparent,
-		 * but then we run into type errors with the colors not being tokens. We can ignore them but it adds noise for no real gain.
-		 */
-		skip: true,
-	},
-});
-
-snapshot(EdgeCaseSiblingAbsolutePositionedCollapsed, {
-	...defaultOptions,
-	a11y: {
-		/**
-		 * This test applies opacity for debugging purposes, which fails color contrast checks.
-		 * Because it's intentionally hacking things, and not representative of real usage, the a11y checking isn't valuable.
-		 *
-		 * I tried adding semi-transparent background colors instead of making the elements semi-transparent,
-		 * but then we run into type errors with the colors not being tokens. We can ignore them but it adds noise for no real gain.
-		 */
-		skip: true,
-	},
-});
-
-snapshot(EdgeCaseSiblingAbsolutePositionedPanelVisible, {
-	...defaultOptions,
-	a11y: {
-		/**
-		 * This test applies opacity for debugging purposes, which fails color contrast checks.
-		 * Because it's intentionally hacking things, and not representative of real usage, the a11y checking isn't valuable.
-		 *
-		 * I tried adding semi-transparent background colors instead of making the elements semi-transparent,
-		 * but then we run into type errors with the colors not being tokens. We can ignore them but it adds noise for no real gain.
-		 */
-		skip: true,
-	},
-});
-
-snapshot(EdgeCaseSiblingAbsolutePositionedCustomSizes, {
-	...defaultOptions,
-	a11y: {
-		/**
-		 * This test applies opacity for debugging purposes, which fails color contrast checks.
-		 * Because it's intentionally hacking things, and not representative of real usage, the a11y checking isn't valuable.
-		 *
-		 * I tried adding semi-transparent background colors instead of making the elements semi-transparent,
-		 * but then we run into type errors with the colors not being tokens. We can ignore them but it adds noise for no real gain.
-		 */
-		skip: true,
-	},
-});
-
-snapshot(EdgeCaseUsingLegacyVars, {
-	...defaultOptions,
-	a11y: {
-		/**
-		 * This test applies opacity for debugging purposes, which fails color contrast checks.
-		 * Because it's intentionally hacking things, and not representative of real usage, the a11y checking isn't valuable.
-		 *
-		 * I tried adding semi-transparent background colors instead of making the elements semi-transparent,
-		 * but then we run into type errors with the colors not being tokens. We can ignore them but it adds noise for no real gain.
-		 */
-		skip: true,
-	},
-});
-
-snapshot(MainAside, defaultOptions);
-
-snapshot(MainAsideScrollable, defaultOptions);
-
-snapshot(SideNavMainAside, defaultOptions);
-
-snapshot(SideNavMainAsideScrollable, defaultOptions);
-
-snapshot(TopBarSideNavMain, defaultOptions);
-
-snapshot(TopBarSideNavMainAside, defaultOptions);
-
-snapshot(TopBarSideNavMainAsideScrollable, defaultOptions);
-
-snapshot(TopBarSideNavMainScrollable, defaultOptions);
-
-snapshot(Resizable, desktopOnly);
-
-snapshot(SideNavCustomWidthGreaterThanMaxWidth, desktopOnly);
-
-snapshot(SideNavCustomWidthSmallerThanMinWidth, desktopOnly);
-
-snapshot(SideNavOverflowingChildren, desktopOnly);
-
-snapshot(EdgeCaseSiblingAbsolutePositionedResizable, {
-	...defaultOptions,
-	a11y: {
-		/**
-		 * This test applies opacity for debugging purposes, which fails color contrast checks.
-		 * Because it's intentionally hacking things, and not representative of real usage, the a11y checking isn't valuable.
-		 *
-		 * I tried adding semi-transparent background colors instead of making the elements semi-transparent,
-		 * but then we run into type errors with the colors not being tokens. We can ignore them but it adds noise for no real gain.
-		 */
-		skip: true,
-	},
-});
-
-snapshot(PageLayoutImplicitRows, {
-	...defaultOptions,
-	ignoredErrors: [
-		{
-			pattern: /Page Layout Error/,
-			ignoredBecause: 'This is an expected dev time error',
-			jiraIssueId: 'BLU-3024',
-		},
-	],
-});
-
-snapshot(SideNavWithMenuItems, defaultOptions);
-
-snapshot(SideNavSlotsExample, {
-	...desktopOnly,
-	description: 'Side nav slots',
-});
-
-snapshot(SideNavContentScrollWithStickyVR, {
-	...desktopOnly,
-	description: 'Side nav content slot - scroll with sticky child',
-});
-
-snapshot(PanelAsideDefaultWidthsVR, {
-	...defaultOptions,
-	description: 'Panel and Aside - default widths',
-});
-
-snapshot(PanelAsideZeroWidthsVR, {
-	...defaultOptions,
-	description: 'Panel and Aside - zero widths',
-});
-
-snapshot(AsideBorderExample, {
-	...defaultOptions,
-	description: 'Aside composed with border',
-});
-
-snapshot(CompanyHubMockExample, {
-	// On desktop the Panel max width is influenced by the SideNav width.
-	// On mobile the Panel sizing is completely independent of the SideNav.
-	...desktopOnly,
-	description: 'Panel should have correct width when there is no SideNav mounted',
-});
-
-snapshot(CompanyHubMockExample, {
-	variants: [
-		/**
-		 * Using dark mode because only dark mode has a difference between the elevation appearances.
-		 *
-		 * Not redundant because we're not taking any light mode snapshots.
-		 */
-		/* eslint-disable @atlaskit/design-system/no-dark-theme-vr-tests */
-		{
-			device: Device.DESKTOP_CHROME,
-			environment: { colorScheme: 'dark' },
-			name: 'desktop',
-		},
-		{
-			device: Device.MOBILE_CHROME,
-			environment: { colorScheme: 'dark' },
-			name: 'mobile',
-		},
-		/* eslint-enable @atlaskit/design-system/no-dark-theme-vr-tests */
-	],
-	featureFlags: {
-		platform_design_system_nav4_panel_default_border: true,
-	},
-	description: 'Panel default background color',
-});

package/src/ui/page-layout/__tests__/vr-tests/panel-splitter.vr.tsx

@@ -1,72 +0,0 @@
-import { snapshot } from '@af/visual-regression';
-
-import {
-	PanelSplitterPositionEnd,
-	PanelSplitterPositionStart,
-} from '../../../../../examples/panel-splitter';
-
-snapshot(PanelSplitterPositionStart, {
-	description: 'Hovered panel splitter with position: start',
-	featureFlags: {
-		platform_nav4_panel_splitter_keyboard_a11y: [true, false],
-	},
-	states: [
-		{
-			state: 'hovered',
-			selector: {
-				byTestId: 'panel-splitter',
-			},
-		},
-	],
-});
-
-snapshot(PanelSplitterPositionEnd, {
-	description: 'Hovered panel splitter with position: end',
-	featureFlags: {
-		platform_nav4_panel_splitter_keyboard_a11y: [true, false],
-	},
-	states: [
-		{
-			state: 'hovered',
-			selector: {
-				byTestId: 'panel-splitter',
-			},
-		},
-	],
-});
-
-snapshot(PanelSplitterPositionStart, {
-	description: 'Focused panel splitter with position: start',
-	featureFlags: {
-		platform_nav4_panel_splitter_keyboard_a11y: true,
-	},
-	states: [
-		{
-			state: 'focused',
-			selector: {
-				byRole: 'slider',
-				options: {
-					name: 'Resize panel',
-				},
-			},
-		},
-	],
-});
-
-snapshot(PanelSplitterPositionEnd, {
-	description: 'Focused panel splitter with position: end',
-	featureFlags: {
-		platform_nav4_panel_splitter_keyboard_a11y: true,
-	},
-	states: [
-		{
-			state: 'focused',
-			selector: {
-				byRole: 'slider',
-				options: {
-					name: 'Resize panel',
-				},
-			},
-		},
-	],
-});

package/src/ui/page-layout/__tests__/vr-tests/side-nav-flyout.vr.tsx

@@ -1,170 +0,0 @@
-import { Device, type Hooks, snapshot } from '@af/visual-regression';
-import type { SnapshotTestOptions } from '@atlassian/gemini';
-
-import {
-	CollapsedVR,
-	CollapsedWithOpenLayerVR,
-	ExpandedVR,
-	ExpandedWithOpenLayerVR,
-} from '../../../../../examples/side-nav-flyout';
-
-const defaultOptions: SnapshotTestOptions<Hooks> = {
-	drawsOutsideBounds: true,
-	variants: [
-		{
-			device: Device.MOBILE_CHROME,
-			environment: { colorScheme: 'light' },
-			name: 'mobile',
-		},
-		{
-			device: Device.DESKTOP_CHROME,
-			environment: { colorScheme: 'light' },
-			name: 'desktop',
-		},
-	],
-};
-
-snapshot(CollapsedVR, {
-	...defaultOptions,
-	description: 'Side nav default collapsed',
-});
-
-snapshot(CollapsedVR, {
-	...defaultOptions,
-	description: 'Side nav default collapsed, toggle button hovered',
-	states: [
-		{
-			state: 'hovered',
-			selector: {
-				byRole: 'button',
-				options: {
-					name: 'Expand sidebar',
-				},
-			},
-		},
-	],
-});
-
-snapshot(CollapsedWithOpenLayerVR, {
-	...defaultOptions,
-	description: 'Side nav default collapsed, with open child layer',
-});
-
-snapshot(CollapsedWithOpenLayerVR, {
-	...defaultOptions,
-	description: 'Side nav default collapsed, with open child layer, toggle button hovered',
-	states: [
-		{
-			state: 'hovered',
-			selector: {
-				byRole: 'button',
-				options: {
-					name: 'Expand sidebar',
-				},
-			},
-		},
-	],
-});
-
-snapshot(ExpandedVR, {
-	...defaultOptions,
-	description: 'Side nav default expanded',
-});
-
-// We have separate snapshot configs for desktop and mobile because the toggle button tooltip is different
-snapshot(ExpandedVR, {
-	...defaultOptions,
-	description: 'Side nav default expanded, toggle button hovered',
-	variants: [
-		{
-			device: Device.DESKTOP_CHROME,
-			environment: { colorScheme: 'light' },
-			name: 'desktop',
-		},
-	],
-	states: [
-		{
-			state: 'hovered',
-			selector: {
-				byRole: 'button',
-				options: {
-					name: 'Collapse sidebar',
-				},
-			},
-		},
-	],
-});
-
-snapshot(ExpandedVR, {
-	...defaultOptions,
-	description: 'Side nav default expanded, toggle button hovered',
-	variants: [
-		{
-			device: Device.MOBILE_CHROME,
-			environment: { colorScheme: 'light' },
-			name: 'mobile',
-		},
-	],
-	states: [
-		{
-			state: 'hovered',
-			selector: {
-				byRole: 'button',
-				options: {
-					name: 'Expand sidebar',
-				},
-			},
-		},
-	],
-});
-
-snapshot(ExpandedWithOpenLayerVR, {
-	...defaultOptions,
-	description: 'Side nav default expanded, with open child layer',
-});
-
-// We have separate snapshot configs for desktop and mobile because the toggle button tooltip is different
-snapshot(ExpandedWithOpenLayerVR, {
-	...defaultOptions,
-	description: 'Side nav default expanded, with open child layer, toggle button hovered',
-	variants: [
-		{
-			device: Device.DESKTOP_CHROME,
-			environment: { colorScheme: 'light' },
-			name: 'desktop',
-		},
-	],
-	states: [
-		{
-			state: 'hovered',
-			selector: {
-				byRole: 'button',
-				options: {
-					name: 'Collapse sidebar',
-				},
-			},
-		},
-	],
-});
-snapshot(ExpandedWithOpenLayerVR, {
-	...defaultOptions,
-	description: 'Side nav default expanded, with open child layer, toggle button hovered',
-	variants: [
-		{
-			device: Device.MOBILE_CHROME,
-			environment: { colorScheme: 'light' },
-			name: 'mobile',
-		},
-	],
-	states: [
-		{
-			state: 'hovered',
-			selector: {
-				byRole: 'button',
-				options: {
-					name: 'Expand sidebar',
-				},
-			},
-		},
-	],
-});