@atlaskit/navigation-system 0.182.0 → 1.0.0

package/examples/constellation/side-nav-items/truncation.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-
-import HomeIcon from '@atlaskit/icon/core/home';
-import { SideNavContent } from '@atlaskit/navigation-system/layout/side-nav';
-import {
-	ExpandableMenuItem,
-	ExpandableMenuItemTrigger,
-} from '@atlaskit/navigation-system/side-nav-items/expandable-menu-item';
-import {
-	FlyoutMenuItem,
-	FlyoutMenuItemTrigger,
-} from '@atlaskit/navigation-system/side-nav-items/flyout-menu-item';
-import { LinkMenuItem } from '@atlaskit/navigation-system/side-nav-items/link-menu-item';
-import { MenuList } from '@atlaskit/navigation-system/side-nav-items/menu-list';
-
-import { MockSideNav } from './common/mock-side-nav';
-
-const exampleHref = '#example-href';
-
-export function TruncationExample() {
-	return (
-		<MockSideNav>
-			<SideNavContent>
-				<MenuList>
-					<LinkMenuItem
-						href={exampleHref}
-						elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
-					>
-						Link menu item (very long label to trigger truncation)
-					</LinkMenuItem>
-					<LinkMenuItem
-						href={exampleHref}
-						elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
-						description="This is a very long description to trigger truncation"
-					>
-						Link menu item (very long label to trigger truncation)
-					</LinkMenuItem>
-
-					<ExpandableMenuItem>
-						<ExpandableMenuItemTrigger>
-							Exp default menu item (very long label to trigger truncation)
-						</ExpandableMenuItemTrigger>
-					</ExpandableMenuItem>
-
-					<FlyoutMenuItem>
-						<FlyoutMenuItemTrigger
-							elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
-						>
-							Flyout menu item (very long label to trigger truncation)
-						</FlyoutMenuItemTrigger>
-					</FlyoutMenuItem>
-				</MenuList>
-			</SideNavContent>
-		</MockSideNav>
-	);
-}
-
-export default TruncationExample;

package/examples/constellation/top-nav-items/app-logo.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import { JiraIcon } from '@atlaskit/logo';
-import { TopNavStart } from '@atlaskit/navigation-system/layout/top-nav';
-import { AppLogo } from '@atlaskit/navigation-system/top-nav-items';
-
-import { MockTopBar } from '../common/mock-top-bar';
-
-export const AppLogoExample = () => {
-	return (
-		<MockTopBar>
-			<TopNavStart>
-				<AppLogo href="https://jira.atlassian.com" icon={JiraIcon} name="Jira" label="Home page" />
-			</TopNavStart>
-		</MockTopBar>
-	);
-};
-
-export default AppLogoExample;

package/examples/constellation/top-nav-items/custom-logo.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { TopNavStart } from '@atlaskit/navigation-system/layout/top-nav';
-import { CustomLogo } from '@atlaskit/navigation-system/top-nav-items';
-
-import customLogoSrc from '../../images/200x20.png';
-import customIconSrc from '../../images/20x20.png';
-import { MockTopBar } from '../common/mock-top-bar';
-
-const CustomLogoImage = () => <img src={customLogoSrc} alt="" />;
-const CustomIconImage = () => <img src={customIconSrc} alt="" />;
-
-export const CustomLogoExample = () => {
-	return (
-		<MockTopBar>
-			<TopNavStart>
-				<CustomLogo
-					href="https://jira.atlassian.com"
-					logo={CustomLogoImage}
-					icon={CustomIconImage}
-					label="Home page"
-				/>
-			</TopNavStart>
-		</MockTopBar>
-	);
-};
-
-export default CustomLogoExample;

package/examples/constellation/top-nav-items/custom-theming--buttons.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-import AngleBracketsIcon from '@atlaskit/icon/core/angle-brackets';
-import { RovoIcon } from '@atlaskit/logo';
-import { EndItem, TopNavEnd } from '@atlaskit/navigation-system';
-import { parseHex } from '@atlaskit/navigation-system/experimental/color-utils/parse-hex';
-import { TopNavButton } from '@atlaskit/navigation-system/experimental/top-nav-button';
-import { TopNav } from '@atlaskit/navigation-system/layout/top-nav';
-
-import { MockRoot } from '../../utils/mock-root';
-
-export const CustomThemingButtonsExample = () => (
-	<MockRoot>
-		<TopNav
-			UNSAFE_theme={{ backgroundColor: parseHex('#964AC0'), highlightColor: parseHex('#F8EEFE') }}
-		>
-			<TopNavEnd>
-				<TopNavButton iconBefore={(props) => <RovoIcon {...props} size="xxsmall" label="" />}>
-					Chat
-				</TopNavButton>
-				<EndItem icon={AngleBracketsIcon} label="Dev tools" />
-			</TopNavEnd>
-		</TopNav>
-	</MockRoot>
-);
-
-export default CustomThemingButtonsExample;

package/examples/constellation/top-nav-items/custom-theming--logo.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { ConfluenceIcon } from '@atlaskit/logo';
-import { AppLogo, TopNavStart } from '@atlaskit/navigation-system';
-import { parseHex } from '@atlaskit/navigation-system/experimental/color-utils/parse-hex';
-import { TopNav } from '@atlaskit/navigation-system/layout/top-nav';
-
-import { MockRoot } from '../../utils/mock-root';
-
-export const CustomThemingLogoExample = () => (
-	<MockRoot>
-		<TopNav
-			UNSAFE_theme={{ backgroundColor: parseHex('#964AC0'), highlightColor: parseHex('#F8EEFE') }}
-		>
-			<TopNavStart>
-				<AppLogo
-					icon={ConfluenceIcon}
-					name="Confluence"
-					label="Home page"
-					href="https://atlassian.design"
-				/>
-			</TopNavStart>
-		</TopNav>
-	</MockRoot>
-);
-
-export default CustomThemingLogoExample;

package/examples/constellation/top-nav-items/custom-theming--search.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { TopNavMiddle } from '@atlaskit/navigation-system';
-import { parseHex } from '@atlaskit/navigation-system/experimental/color-utils/parse-hex';
-import { useLegacySearchTheme } from '@atlaskit/navigation-system/experimental/use-legacy-search-theme';
-import { TopNav } from '@atlaskit/navigation-system/layout/top-nav';
-
-import { MockRoot } from '../../utils/mock-root';
-import { MockSearch } from '../../utils/mock-search';
-
-const ThemedSearch = () => {
-	const searchTheme = useLegacySearchTheme();
-	return <MockSearch theme={searchTheme} />;
-};
-
-export const CustomThemingSearchExample = () => (
-	<MockRoot>
-		<TopNav
-			UNSAFE_theme={{ backgroundColor: parseHex('#964AC0'), highlightColor: parseHex('#F8EEFE') }}
-		>
-			<TopNavMiddle>
-				<ThemedSearch />
-			</TopNavMiddle>
-		</TopNav>
-	</MockRoot>
-);
-
-export default CustomThemingSearchExample;

package/examples/constellation/top-nav-items/custom-title.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-import { JiraIcon } from '@atlaskit/logo';
-import { TopNavStart } from '@atlaskit/navigation-system/layout/top-nav';
-import { AppLogo, CustomTitle } from '@atlaskit/navigation-system/top-nav-items';
-
-import { MockTopBar } from '../common/mock-top-bar';
-
-export const CustomTitleExample = () => {
-	return (
-		<MockTopBar>
-			<TopNavStart>
-				<AppLogo href="http://www.atlassian.design" icon={JiraIcon} name="Jira" label="Home page" />
-				<CustomTitle>Custom title</CustomTitle>
-			</TopNavStart>
-		</MockTopBar>
-	);
-};
-
-export default CustomTitleExample;

package/examples/constellation/top-nav-items/end-item.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-import AtlassianIntelligenceIcon from '@atlaskit/icon/core/atlassian-intelligence';
-import { EndItem } from '@atlaskit/navigation-system';
-import { TopNavEnd } from '@atlaskit/navigation-system/layout/top-nav';
-
-import { MockTopBar } from '../common/mock-top-bar';
-
-export function EndItemExample() {
-	return (
-		<MockTopBar>
-			<TopNavEnd>
-				<EndItem
-					icon={AtlassianIntelligenceIcon}
-					onClick={() => alert('Atlassian Intelligence')}
-					label="Atlassian Intelligence"
-				/>
-			</TopNavEnd>
-		</MockTopBar>
-	);
-}
-
-export default EndItemExample;

package/examples/constellation/top-nav-items/top-nav-button.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-
-import AiChatIcon from '@atlaskit/icon/core/ai-chat';
-import TeamsIcon from '@atlaskit/icon/core/teams';
-import {
-	TopNavButton,
-	TopNavIconButton,
-	TopNavLinkButton,
-	TopNavLinkIconButton,
-} from '@atlaskit/navigation-system/experimental/top-nav-button';
-import { TopNav, TopNavEnd } from '@atlaskit/navigation-system/layout/top-nav';
-
-import { MockRoot } from '../../utils/mock-root';
-
-export const TopNavButtonExample = () => (
-	<MockRoot>
-		<TopNav>
-			<TopNavEnd>
-				<TopNavIconButton icon={TeamsIcon} label="Top nav icon button" />
-				<TopNavLinkIconButton
-					icon={AiChatIcon}
-					href="#example-href"
-					label="Top nav link icon button"
-				/>
-				<TopNavLinkButton iconBefore={TeamsIcon} href="#example-href">
-					Top nav link button
-				</TopNavLinkButton>
-				<TopNavButton iconBefore={AiChatIcon}>Top nav button</TopNavButton>
-			</TopNavEnd>
-		</TopNav>
-	</MockRoot>
-);
-
-export default TopNavButtonExample;

package/examples/constellation/top-nav-items/top-nav-end.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import Badge from '@atlaskit/badge';
-import { Help } from '@atlaskit/navigation-system';
-import { TopNavEnd } from '@atlaskit/navigation-system/layout/top-nav';
-import { Notifications, Settings } from '@atlaskit/navigation-system/top-nav-items';
-
-import { MockTopBar } from '../common/mock-top-bar';
-
-export function TopNavEndLayoutExample() {
-	return (
-		<MockTopBar>
-			<TopNavEnd>
-				<Notifications
-					label="Notifications"
-					badge={() => <Badge appearance="important">{3}</Badge>}
-				/>
-				<Help label="Help" />
-				<Settings label="Settings" />
-			</TopNavEnd>
-		</MockTopBar>
-	);
-}
-
-export default TopNavEndLayoutExample;

package/examples/constellation/top-nav-items/top-nav-middle.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import { TopNavMiddle } from '@atlaskit/navigation-system/layout/top-nav';
-import { CreateButton, Search } from '@atlaskit/navigation-system/top-nav-items';
-
-import { MockTopBar } from '../common/mock-top-bar';
-
-export function TopNavMiddleLayoutExample() {
-	return (
-		<MockTopBar>
-			<TopNavMiddle>
-				<Search label="Search" />
-				<CreateButton>Create</CreateButton>
-			</TopNavMiddle>
-		</MockTopBar>
-	);
-}
-
-export default TopNavMiddleLayoutExample;

package/examples/constellation/top-nav-items/top-nav-start.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import { ConfluenceIcon } from '@atlaskit/logo';
-import { SideNavToggleButton } from '@atlaskit/navigation-system/layout/side-nav';
-import { TopNavStart } from '@atlaskit/navigation-system/layout/top-nav';
-import { AppLogo, AppSwitcher } from '@atlaskit/navigation-system/top-nav-items';
-
-import { MockTopBar } from '../common/mock-top-bar';
-
-export function TopNavStartLayoutExample() {
-	return (
-		<MockTopBar>
-			<TopNavStart>
-				<SideNavToggleButton
-					defaultCollapsed
-					collapseLabel="Collapse sidebar"
-					expandLabel="Expand sidebar"
-				/>
-				<AppSwitcher label="App switcher" />
-				<AppLogo
-					href="https://jira.atlassian.com"
-					icon={ConfluenceIcon}
-					name="Confluence"
-					label="Home page"
-				/>
-			</TopNavStart>
-		</MockTopBar>
-	);
-}
-
-export default TopNavStartLayoutExample;

package/examples/drag-and-drop/jira/data.tsx

@@ -1,320 +0,0 @@
-import React, { type ReactNode } from 'react';
-
-import BasketballIcon from '@atlaskit/icon/core/basketball';
-import ChartBarIcon from '@atlaskit/icon/core/chart-bar';
-import DeviceMobileIcon from '@atlaskit/icon/core/device-mobile';
-import FilterIcon from '@atlaskit/icon/core/filter';
-import ImageIcon from '@atlaskit/icon/core/image';
-import ScorecardIcon from '@atlaskit/icon/core/scorecard';
-import TextIcon from '@atlaskit/icon/core/text';
-import ThemeIcon from '@atlaskit/icon/core/theme';
-import VehicleCarIcon from '@atlaskit/icon/core/vehicle-car';
-import type { Operation } from '@atlaskit/navigation-system/side-nav-items/drag-and-drop/hitbox';
-import { token } from '@atlaskit/tokens';
-
-import { ProjectTile } from './projects/project-tile';
-
-export type TFilter = {
-	id: string;
-	icon: ReactNode;
-	name: string;
-	href: string;
-	children: TFilter[];
-};
-
-const filterKey = Symbol('filter');
-
-export type TFilterData = {
-	[filterKey]: true;
-	id: string;
-};
-
-export function getFilterData(filter: TFilter): TFilterData {
-	return {
-		id: filter.id,
-		[filterKey]: true,
-	};
-}
-
-export function isFilterData(data: Record<string | symbol, unknown>): data is TFilterData {
-	return data[filterKey] === true;
-}
-
-export type TProject = {
-	id: string;
-	href: string;
-	icon: ReactNode;
-	name: string;
-};
-
-const projectKey = Symbol('project');
-
-export type TProjectData = {
-	[projectKey]: true;
-	groupName: 'recent' | 'starred';
-	id: string;
-};
-
-export function getProjectData({
-	project,
-	groupName,
-}: {
-	project: TProject;
-	groupName: 'recent' | 'starred';
-}): TProjectData {
-	return {
-		id: project.id,
-		groupName,
-		[projectKey]: true,
-	};
-}
-
-export function isProjectData(data: Record<string | symbol, unknown>): data is TProjectData {
-	return data[projectKey] === true;
-}
-
-const topLevelItems = ['for-you', 'recent', 'starred', 'projects', 'filters'] as const;
-
-export type TTopLevelItem = (typeof topLevelItems)[number];
-
-export type TActionTrigger = 'pointer' | 'keyboard';
-
-export type TAction =
-	| {
-			type: 'top-level-menu-reorder';
-			trigger: TActionTrigger;
-			value: TTopLevelItem;
-			startIndex: number;
-			finishIndex: number;
-	  }
-	| {
-			type: 'reorder-project';
-			trigger: TActionTrigger;
-			groupName: 'starred' | 'recent';
-			draggingId: string;
-			startIndex: number;
-			finishIndex: number;
-	  }
-	| {
-			type: 'filter-move';
-			trigger: TActionTrigger;
-			draggingId: string;
-			targetId: string;
-			operation: Operation;
-	  };
-
-export type TData = {
-	topLevelItems: TTopLevelItem[];
-	projects: { starred: TProject[]; recent: TProject[] };
-	filters: TFilter[];
-	lastAction: TAction | null;
-};
-
-const getId = (() => {
-	let count: number = 0;
-	return function getId(): string {
-		return `id:${count++}`;
-	};
-})();
-
-export function getInitialData(): TData {
-	return {
-		lastAction: null,
-		topLevelItems: Array.from(topLevelItems),
-		projects: {
-			starred: [
-				{
-					id: getId(),
-					href: '#',
-					name: 'Modernize typography',
-					icon: (
-						<ProjectTile backgroundColor={token('color.background.accent.purple.bolder')}>
-							<TextIcon label="" color="currentColor" />
-						</ProjectTile>
-					),
-				},
-				{
-					id: getId(),
-					href: '#',
-					name: 'F1 sponsorship',
-					icon: (
-						<ProjectTile backgroundColor={token('color.background.accent.yellow.bolder')}>
-							<VehicleCarIcon label="" color="currentColor" />
-						</ProjectTile>
-					),
-				},
-				{
-					id: getId(),
-					href: '#',
-					name: 'Mobile application',
-					icon: (
-						<ProjectTile backgroundColor={token('color.background.accent.green.bolder')}>
-							<DeviceMobileIcon label="" color="currentColor" />
-						</ProjectTile>
-					),
-				},
-			],
-			recent: [
-				{
-					id: getId(),
-					href: '#',
-					name: 'Attachments',
-					icon: (
-						<ProjectTile backgroundColor={token('color.background.accent.lime.bolder')}>
-							<ImageIcon label="" color="currentColor" />
-						</ProjectTile>
-					),
-				},
-				{
-					id: getId(),
-					href: '#',
-					name: 'Audit',
-					icon: (
-						<ProjectTile backgroundColor={token('color.background.accent.magenta.bolder')}>
-							<ScorecardIcon label="" color="currentColor" />
-						</ProjectTile>
-					),
-				},
-				{
-					id: getId(),
-					href: '#',
-					name: 'Dark mode',
-					icon: (
-						<ProjectTile backgroundColor={token('color.background.accent.gray.bolder')}>
-							<ThemeIcon label="" color="currentColor" />
-						</ProjectTile>
-					),
-				},
-				{
-					id: getId(),
-					href: '#',
-					name: 'Visualization',
-					icon: (
-						<ProjectTile backgroundColor={token('color.background.accent.blue.bolder')}>
-							<ChartBarIcon label="" />
-						</ProjectTile>
-					),
-				},
-				{
-					id: getId(),
-					href: '#',
-					name: 'Basketball tournament',
-					icon: (
-						<ProjectTile backgroundColor={token('color.background.accent.orange.bolder')}>
-							<BasketballIcon label="" />
-						</ProjectTile>
-					),
-				},
-			],
-		},
-		filters: [
-			{
-				id: getId(),
-				name: 'Filter 1',
-				href: '#',
-				icon: <FilterIcon label="" />,
-				children: [
-					{
-						id: getId(),
-						name: 'Filter 1.1',
-						href: '#',
-						icon: <FilterIcon label="" />,
-						children: [],
-					},
-					{
-						id: getId(),
-						name: 'Filter 1.2',
-						href: '#',
-						icon: <FilterIcon label="" />,
-						children: [],
-					},
-					{
-						id: getId(),
-						name: 'Filter 1.3',
-						href: '#',
-						icon: <FilterIcon label="" />,
-						children: [],
-					},
-				],
-			},
-			{
-				id: getId(),
-				name: 'Filter 2',
-				href: '#',
-				icon: <FilterIcon label="" />,
-				children: [
-					{
-						id: getId(),
-						name: 'Filter 2.1',
-						href: '#',
-						icon: <FilterIcon label="" />,
-						children: [
-							{
-								id: getId(),
-								name: 'Filter 2.1.1',
-								href: '#',
-								icon: <FilterIcon label="" />,
-								children: [],
-							},
-							{
-								id: getId(),
-								name: 'Filter 2.1.2',
-								href: '#',
-								icon: <FilterIcon label="" />,
-								children: [],
-							},
-							{
-								id: getId(),
-								name: 'Filter 2.1.3',
-								href: '#',
-								icon: <FilterIcon label="" />,
-								children: [],
-							},
-						],
-					},
-					{
-						id: getId(),
-						name: 'Filter 2.2',
-						href: '#',
-						icon: <FilterIcon label="" />,
-						children: [],
-					},
-				],
-			},
-			{
-				id: getId(),
-				name: 'Filter 3',
-				href: '#',
-				icon: <FilterIcon label="" />,
-				children: [],
-			},
-			{
-				id: getId(),
-				name: 'Filter 4',
-				href: '#',
-				icon: <FilterIcon label="" />,
-				children: [],
-			},
-		],
-	};
-}
-
-const topLevelItemKey = Symbol('top-level');
-
-type TTopLevelItemData = {
-	value: TTopLevelItem;
-	[topLevelItemKey]: true;
-};
-
-export function getTopLevelItemData(value: TTopLevelItem): TTopLevelItemData {
-	return {
-		value,
-		[topLevelItemKey]: true,
-	};
-}
-
-export function isTopLevelItemData(
-	data: Record<string | symbol, unknown>,
-): data is TTopLevelItemData {
-	return data[topLevelItemKey] === true;
-}