@atlaskit/navigation-system 0.182.0 → 1.0.0

package/src/__tests__/vr-tests/a11y-scaling.vr.tsx

@@ -1,12 +0,0 @@
-import { snapshot } from '@af/visual-regression';
-
-import App from '../../../examples/drag-and-drop-jira-scaling-vr';
-
-snapshot(App, {
-	variants: [
-		{
-			environment: { colorScheme: 'light' },
-			name: 'desktop',
-		},
-	],
-});

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

@@ -1,82 +0,0 @@
-import { Device, type Hooks, snapshot } from '@af/visual-regression';
-import type { SnapshotTestOptions } from '@atlassian/gemini';
-
-import {
-	ScrollableNoPanelVR,
-	ScrollableScrolledVR,
-	ScrollableVR,
-	UnscrollableNoPanelVR,
-	UnscrollableVR,
-} from '../../../examples/composition';
-
-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',
-		},
-		{
-			device: Device.DESKTOP_CHROME_1920_1080,
-			environment: { colorScheme: 'light' },
-			name: 'desktop-large',
-		},
-	],
-};
-
-const panelSplitterHovered: SnapshotTestOptions<Hooks> = {
-	// Panel spitter should be above all side nav elements but below any popups.
-	drawsOutsideBounds: true,
-	variants: [
-		{
-			device: Device.DESKTOP_CHROME_1920_1080,
-			environment: { colorScheme: 'light' },
-			name: 'desktop-large-splitter',
-		},
-	],
-	states: [
-		{
-			state: 'hovered',
-			selector: {
-				byTestId: 'side-nav-panel-splitter',
-			},
-		},
-	],
-};
-
-/**
- * Note on layered components such as dialogs.
- *
- * Layered components that are rendered inline (such as popup with shouldRenderToParent)
- * can be cut off if they bleed out of the container into the side nav. From my exploration
- * this isn't possible to resolve outside of:
- *
- * 1. Use portalled components
- * 2. Move to top layer when it becomes available in all the browsers we support
- *
- * Good luck out there!
- */
-snapshot(ScrollableVR, {
-	...panelSplitterHovered,
-});
-snapshot(ScrollableVR, {
-	...defaultOptions,
-});
-snapshot(UnscrollableVR, {
-	...defaultOptions,
-});
-snapshot(ScrollableNoPanelVR, {
-	...defaultOptions,
-});
-snapshot(ScrollableScrolledVR, {
-	...defaultOptions,
-});
-snapshot(UnscrollableNoPanelVR, {
-	...defaultOptions,
-});

package/src/__tests__/vr-tests/skip-links.vr.tsx

@@ -1,14 +0,0 @@
-import { snapshot } from '@af/visual-regression';
-
-import { CompositionVR } from '../../../examples/composition';
-
-snapshot(CompositionVR, {
-	description: 'skip links',
-	variants: [
-		{
-			name: 'Light mode',
-			environment: { colorScheme: 'light' },
-		},
-	],
-	states: [{ state: 'focused', selector: { byRole: 'link', options: { name: 'Banner' } } }],
-});

package/src/components/__tests__/unit/badge-container.test.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '@testing-library/react';
-
-import { axe } from '@af/accessibility-testing';
-
-import { BadgeContainer } from '../../badge-container';
-import { List } from '../../list';
-
-describe('BadgeContainer', () => {
-	it('should be accessible', async () => {
-		const { container } = render(
-			<List>
-				<BadgeContainer id="test-badge-id" badge={() => <div>100</div>}>
-					Badge children
-				</BadgeContainer>
-			</List>,
-		);
-
-		await axe(container);
-	});
-
-	it('should display children', () => {
-		render(
-			<BadgeContainer id="test-badge-id" badge={() => <div>100</div>}>
-				Badge children
-			</BadgeContainer>,
-		);
-
-		expect(screen.getByText('Badge children')).toBeVisible();
-	});
-
-	it('should display badge', () => {
-		render(
-			<BadgeContainer id="test-badge-id" badge={() => <div>100</div>}>
-				Badge children
-			</BadgeContainer>,
-		);
-
-		expect(screen.getByText('100')).toBeVisible();
-	});
-
-	it('should use listitem role by default', () => {
-		render(
-			<BadgeContainer id="test-badge-id" badge={() => <div>100</div>}>
-				Badge children
-			</BadgeContainer>,
-		);
-
-		expect(screen.getByRole('listitem')).toBeVisible();
-	});
-
-	it('should not use listitem role when set to false', () => {
-		render(
-			<BadgeContainer id="test-badge-id" badge={() => <div>100</div>} isListItem={false}>
-				Badge children
-			</BadgeContainer>,
-		);
-
-		expect(screen.queryByRole('listitem')).not.toBeInTheDocument();
-	});
-});

package/src/components/__tests__/unit/list.test.tsx

@@ -1,74 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '@testing-library/react';
-
-import { List } from '../../list';
-import { ListItem } from '../../list-item';
-
-describe('List', () => {
-	describe('renders for correct semantic components', () => {
-		const originalNodeEnv = process.env.NODE_ENV;
-
-		beforeEach(() => {
-			process.env.NODE_ENV = originalNodeEnv;
-		});
-
-		it('should render for list items', () => {
-			render(
-				<List>
-					<ListItem>Hello world</ListItem>
-				</List>,
-			);
-
-			expect(screen.getByText('Hello world')).toBeInTheDocument();
-		});
-
-		it('should render for non list item children', () => {
-			render(
-				<List>
-					<button type="button">Hello world</button>
-				</List>,
-			);
-
-			expect(screen.getByText('Hello world')).toBeInTheDocument();
-		});
-
-		it('should render in production', () => {
-			process.env.NODE_ENV = 'production';
-
-			render(
-				<List>
-					<button type="button">Hello world</button>
-				</List>,
-			);
-
-			expect(screen.getByText('Hello world')).toBeInTheDocument();
-		});
-
-		it('should render for non list item children wrapped in non-semantic divs', () => {
-			render(
-				<List>
-					<div>
-						<button type="button">Hello world</button>
-					</div>
-				</List>,
-			);
-
-			expect(screen.getByText('Hello world')).toBeInTheDocument();
-		});
-
-		it('should render for each violating child', () => {
-			render(
-				<List>
-					<ListItem>Apple</ListItem>
-					<button type="button">Banana</button>
-					<button type="button">Cherry</button>
-				</List>,
-			);
-
-			expect(screen.getByText('Apple')).toBeInTheDocument();
-			expect(screen.getByText('Banana')).toBeInTheDocument();
-			expect(screen.getByText('Cherry')).toBeInTheDocument();
-		});
-	});
-});

package/src/components/badge-container.tsx

@@ -1,72 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import type { ComponentType, ReactNode } from 'react';
-
-import { jsx } from '@compiled/react';
-
-import { cssMap } from '@atlaskit/css';
-import { token } from '@atlaskit/tokens';
-
-const styles = cssMap({
-	root: {
-		position: 'relative',
-		display: 'flex',
-	},
-	badgeContainer: {
-		position: 'absolute',
-		whiteSpace: 'nowrap',
-		insetBlockStart: token('space.negative.050'),
-		insetInlineStart: token('space.150'),
-		// Since the badge has a chance to overlap with the button next to it we disable
-		// it from having pointer events so if the button next to it is hovered it gets the event
-		// and not the badge.
-		pointerEvents: 'none',
-	},
-});
-
-type BadgeContainerProps = {
-	/* The id of the badge */
-	id: string;
-
-	/* The component to render as the badge */
-	badge: ComponentType;
-
-	/**
-	 * The children to render inside the container that the badge overlays.
-	 */
-	children: ReactNode;
-
-	/**
-	 * Can be used to disable the default `listitem` role.
-	 *
-	 * As `BadgeContainer` is used internally to wrap `EndItem`, this prop is used to respect
-	 * the `isListItem` prop value set in `EndItem`.
-	 *
-	 * See the prop description in `EndItem` for more information.
-	 *
-	 * @default true
-	 */
-	isListItem?: boolean;
-};
-
-/**
- * __Badge container__
- *
- * Adds a badge to the top right corner of the child element.
- * Example of usage is showing the number of notifications in the top navigation bar.
- */
-export const BadgeContainer = ({
-	children,
-	id: badgeId,
-	badge: Badge,
-	isListItem = true,
-}: BadgeContainerProps) => (
-	<div css={styles.root} role={isListItem ? 'listitem' : undefined}>
-		{children}
-		<div css={styles.badgeContainer} id={badgeId} aria-hidden>
-			<Badge />
-		</div>
-	</div>
-);

package/src/components/forward-ref-with-generic.tsx

@@ -1,8 +0,0 @@
-import { forwardRef } from 'react';
-
-/**
- * An alias for `forwardRef` with enhanced typing to preserve generic prop types.
- */
-export const forwardRefWithGeneric = forwardRef as <ElementType, Props = {}>(
-	render: (props: Props, ref: React.Ref<ElementType>) => React.ReactElement | null,
-) => (props: Props & React.RefAttributes<ElementType>) => React.ReactElement | null;

package/src/components/list-item.tsx

@@ -1,39 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { forwardRef, type ReactNode, type Ref } from 'react';
-
-import { jsx } from '@compiled/react';
-
-import type { StrictXCSSProp } from '@atlaskit/css';
-
-type ListItemProps = {
-	/**
-	 * The contents of the list item.
-	 */
-	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;
-	/**
-	 * Bounded style overrides.
-	 */
-	xcss?: StrictXCSSProp<'display' | 'scrollMarginInline', never>;
-};
-
-function _ListItem({ children, testId, xcss }: ListItemProps, ref: Ref<HTMLDivElement>) {
-	return (
-		<div role="listitem" ref={ref} className={xcss} data-testid={testId}>
-			{children}
-		</div>
-	);
-}
-
-/**
- * __List item__
- *
- * A [list item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) with visual styles removed.
- */
-export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(_ListItem);

package/src/components/list.tsx

@@ -1,44 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { forwardRef, type ReactNode, type Ref } from 'react';
-
-import { jsx, type XCSSProp } from '@compiled/react';
-
-export type ListProps = {
-	/**
-	 * The contents of the list. Should contain list items.
-	 */
-	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;
-	/**
-	 * Bounded style overrides.
-	 */
-	xcss?: XCSSProp<'alignItems' | 'display' | 'gap' | 'paddingInlineStart' | 'padding', never>;
-};
-
-function _List({ children, testId, xcss }: ListProps, forwardedRef: Ref<HTMLDivElement>) {
-	return (
-		/**
-		 * We are using `role="list"` instead of a `ul` element to enable more flexible
-		 * composition. By using ARIA roles we can validly have elements between a list
-		 * and list items, as long as those in-between elements have no semantics.
-		 */
-		<div role="list" ref={forwardedRef} className={xcss} data-testid={testId}>
-			{children}
-		</div>
-	);
-}
-
-/**
- * __List__
- *
- * A an element with the role of `list` for semantically grouping list items.
- *
- * This is the internal primitive used by other external components in the navigation system.
- */
-export const List = forwardRef<HTMLDivElement, ListProps>(_List);