@atlaskit/navigation-system 0.182.0 → 1.0.0

package/examples/menu-item-avatar.tsx

@@ -1,41 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { cssMap, jsx } from '@compiled/react';
-
-import { SideNavContent } from '@atlaskit/navigation-system/layout/side-nav';
-import { ButtonMenuItem } from '@atlaskit/navigation-system/side-nav-items/button-menu-item';
-import { ContainerAvatar } from '@atlaskit/navigation-system/side-nav-items/container-avatar';
-import { MenuList } from '@atlaskit/navigation-system/side-nav-items/menu-list';
-import {
-	MenuSection,
-	MenuSectionHeading,
-} from '@atlaskit/navigation-system/side-nav-items/menu-section';
-
-import koalaProjectIcon from './images/koala.png';
-
-const styles = cssMap({
-	root: {
-		width: '300px',
-	},
-});
-
-export const MenuItemAvatarExample = () => (
-	<div css={styles.root}>
-		<SideNavContent>
-			<MenuList>
-				<MenuSection isMenuListItem>
-					<MenuSectionHeading>Projects</MenuSectionHeading>
-					<MenuList>
-						<ButtonMenuItem elemBefore={<ContainerAvatar src={koalaProjectIcon} />}>
-							With container avatar
-						</ButtonMenuItem>
-					</MenuList>
-				</MenuSection>
-			</MenuList>
-		</SideNavContent>
-	</div>
-);
-
-export default MenuItemAvatarExample;

package/examples/menu-item-conditional-tooltip.tsx

@@ -1,304 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { cssMap, jsx } from '@compiled/react';
-
-import { IconButton } from '@atlaskit/button/new';
-import Heading from '@atlaskit/heading';
-import AddIcon from '@atlaskit/icon/core/add';
-import { SideNavContent, SideNavHeader } from '@atlaskit/navigation-system/layout/side-nav';
-import { ButtonMenuItem } from '@atlaskit/navigation-system/side-nav-items/button-menu-item';
-import {
-	ExpandableMenuItem,
-	ExpandableMenuItemContent,
-	ExpandableMenuItemTrigger,
-} from '@atlaskit/navigation-system/side-nav-items/expandable-menu-item';
-import {
-	FlyoutMenuItem,
-	FlyoutMenuItemContent,
-	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 {
-	MenuSection,
-	MenuSectionHeading,
-} from '@atlaskit/navigation-system/side-nav-items/menu-section';
-import { token } from '@atlaskit/tokens';
-
-const containerStyles = cssMap({
-	root: {
-		width: '320px',
-		borderWidth: token('border.width'),
-		borderStyle: 'solid',
-		borderColor: token('color.border'),
-		borderRadius: token('border.radius'),
-	},
-});
-
-type TDescription = 'long' | 'short' | 'none';
-type TContent = 'long' | 'short';
-
-const description: { [Key in TDescription]: string | undefined } = {
-	long: 'Long description that has been designed to take up a lot of space and overflow in our examples',
-	short: 'Short description',
-	none: undefined,
-};
-const descriptionKeys: TDescription[] = ['short', 'long', 'none'];
-
-const content: { [Key in TContent]: string } = {
-	long: 'Long content that will cause its content to be truncated',
-	short: 'Short content',
-};
-const contentKeys: TContent[] = ['short', 'long'];
-
-export function ButtonMenuItemExample() {
-	return (
-		<div css={containerStyles.root}>
-			<SideNavHeader>
-				<Heading size="small">ButtonMenuItem</Heading>
-			</SideNavHeader>
-			<SideNavContent>
-				<MenuSection>
-					<MenuSectionHeading>Standard</MenuSectionHeading>
-					<MenuList>
-						{contentKeys.map((contentKey) =>
-							descriptionKeys.map((descriptionKey) => {
-								const testId = `button-menu-item-[content:${contentKey}]-[description:${descriptionKey}]`;
-								return (
-									<ButtonMenuItem
-										key={testId}
-										testId={testId}
-										description={description[descriptionKey]}
-									>
-										{content[contentKey]}
-									</ButtonMenuItem>
-								);
-							}),
-						)}
-					</MenuList>
-				</MenuSection>
-				<MenuSection>
-					<MenuSectionHeading>With tooltip disabled</MenuSectionHeading>
-					<MenuList>
-						<ButtonMenuItem
-							testId="button-menu-item-with-tooltip-disabled"
-							description={description.long}
-							isContentTooltipDisabled
-						>
-							{content.long}
-						</ButtonMenuItem>
-					</MenuList>
-				</MenuSection>
-				<MenuSection>
-					<MenuSectionHeading>With action button</MenuSectionHeading>
-					<MenuList>
-						<ButtonMenuItem
-							actions={
-								<IconButton
-									testId="button-menu-item-add-action-button"
-									key="add"
-									label="Add"
-									icon={(iconProps) => <AddIcon {...iconProps} size="small" />}
-									appearance="subtle"
-									spacing="compact"
-								/>
-							}
-						>
-							{content.long}
-						</ButtonMenuItem>
-					</MenuList>
-				</MenuSection>
-				<MenuSection>
-					<MenuSectionHeading>With actions on hover</MenuSectionHeading>
-					<MenuList>
-						<ButtonMenuItem
-							actionsOnHover={
-								<IconButton
-									testId="button-menu-item-on-hover-add-action-button"
-									key="add"
-									label="Add"
-									icon={(iconProps) => <AddIcon {...iconProps} size="small" />}
-									appearance="subtle"
-									spacing="compact"
-								/>
-							}
-						>
-							{content.long}
-						</ButtonMenuItem>
-					</MenuList>
-				</MenuSection>
-				<MenuSection>
-					<MenuSectionHeading>With nested children</MenuSectionHeading>
-					<MenuList>
-						<ButtonMenuItem testId="menu-item-button-with-nested-children">
-							<span>{content.long}</span>
-						</ButtonMenuItem>
-					</MenuList>
-				</MenuSection>
-			</SideNavContent>
-		</div>
-	);
-}
-
-export function LinkMenuItemExample() {
-	return (
-		<div css={containerStyles.root}>
-			<SideNavHeader>
-				<Heading size="small">LinkMenuItem</Heading>
-			</SideNavHeader>
-			<SideNavContent>
-				<MenuSection>
-					<MenuSectionHeading>Standard</MenuSectionHeading>
-					<MenuList>
-						{contentKeys.map((contentKey) =>
-							descriptionKeys.map((descriptionKey) => {
-								const testId = `link-menu-item-[content:${contentKey}]-[description:${descriptionKey}]`;
-								return (
-									<LinkMenuItem
-										key={testId}
-										href="#"
-										testId={testId}
-										description={description[descriptionKey]}
-									>
-										{content[contentKey]}
-									</LinkMenuItem>
-								);
-							}),
-						)}
-					</MenuList>
-				</MenuSection>
-				<MenuSection>
-					<MenuSectionHeading>With tooltip disabled</MenuSectionHeading>
-					<MenuList>
-						<LinkMenuItem
-							href="#"
-							testId={'link-menu-item-with-tooltip-disabled'}
-							description={description.long}
-							isContentTooltipDisabled
-						>
-							{content.long}
-						</LinkMenuItem>
-					</MenuList>
-				</MenuSection>
-			</SideNavContent>
-		</div>
-	);
-}
-
-export function ExpandableMenuItemExample() {
-	return (
-		<div css={containerStyles.root}>
-			<SideNavHeader>
-				<Heading size="small">ExpandableMenuItem</Heading>
-			</SideNavHeader>
-			<SideNavContent>
-				<MenuSection>
-					<MenuSectionHeading>Standard</MenuSectionHeading>
-					<MenuList>
-						{contentKeys.map((contentKey) => {
-							const testId = `expandable-menu-item-[content:${contentKey}]`;
-							return (
-								<ExpandableMenuItem key={testId}>
-									<ExpandableMenuItemTrigger testId={testId}>
-										{content[contentKey]}
-									</ExpandableMenuItemTrigger>
-									<ExpandableMenuItemContent>
-										<ButtonMenuItem>{content.short}</ButtonMenuItem>
-										<ButtonMenuItem>{content.long}</ButtonMenuItem>
-									</ExpandableMenuItemContent>
-								</ExpandableMenuItem>
-							);
-						})}
-					</MenuList>
-				</MenuSection>
-				<MenuSection>
-					<MenuSectionHeading>With tooltip disabled</MenuSectionHeading>
-					<MenuList>
-						<ExpandableMenuItem>
-							<ExpandableMenuItemTrigger
-								testId="expandable-menu-item-with-tooltip-disabled"
-								isContentTooltipDisabled
-							>
-								{content.long}
-							</ExpandableMenuItemTrigger>
-							<ExpandableMenuItemContent>
-								<ButtonMenuItem>{content.short}</ButtonMenuItem>
-								<ButtonMenuItem>{content.long}</ButtonMenuItem>
-							</ExpandableMenuItemContent>
-						</ExpandableMenuItem>
-					</MenuList>
-				</MenuSection>
-			</SideNavContent>
-		</div>
-	);
-}
-
-export function FlyoutMenuItemExample() {
-	return (
-		<div css={containerStyles.root}>
-			<SideNavHeader>
-				<Heading size="small">FlyoutMenuItem</Heading>
-			</SideNavHeader>
-			<SideNavContent>
-				<MenuSection>
-					<MenuSectionHeading>Standard</MenuSectionHeading>
-					<MenuList>
-						{contentKeys.map((contentKey) => {
-							const testId = `flyout-menu-item-[content:${contentKey}]`;
-							return (
-								<FlyoutMenuItem key={testId}>
-									<FlyoutMenuItemTrigger testId={testId}>
-										{content[contentKey]}
-									</FlyoutMenuItemTrigger>
-									<FlyoutMenuItemContent>
-										<ButtonMenuItem>{content.short}</ButtonMenuItem>
-										<ButtonMenuItem>{content.long}</ButtonMenuItem>
-									</FlyoutMenuItemContent>
-								</FlyoutMenuItem>
-							);
-						})}
-					</MenuList>
-				</MenuSection>
-				<MenuSection>
-					<MenuSectionHeading>With tooltip disabled</MenuSectionHeading>
-					<MenuList>
-						<FlyoutMenuItem>
-							<FlyoutMenuItemTrigger
-								testId="flyout-menu-item-with-tooltip-disabled"
-								isContentTooltipDisabled
-							>
-								{content.long}
-							</FlyoutMenuItemTrigger>
-							<FlyoutMenuItemContent>
-								<ButtonMenuItem>{content.short}</ButtonMenuItem>
-								<ButtonMenuItem>{content.long}</ButtonMenuItem>
-							</FlyoutMenuItemContent>
-						</FlyoutMenuItem>
-					</MenuList>
-				</MenuSection>
-			</SideNavContent>
-		</div>
-	);
-}
-
-const standaloneStyles = cssMap({
-	root: {
-		display: 'flex',
-		flexDirection: 'column',
-		gap: token('space.200'),
-	},
-});
-
-export default function Standalone() {
-	return (
-		<div css={standaloneStyles.root}>
-			<ButtonMenuItemExample />
-			<LinkMenuItemExample />
-			<ExpandableMenuItemExample />
-			<FlyoutMenuItemExample />
-		</div>
-	);
-}

package/examples/menu-item-focus-ring-bleed.tsx

@@ -1,50 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { useLayoutEffect, useRef } from 'react';
-
-import { cssMap, jsx } from '@compiled/react';
-
-import HomeIcon from '@atlaskit/icon/core/home';
-import { MenuList } from '@atlaskit/navigation-system';
-import { SideNavContent } from '@atlaskit/navigation-system/layout/side-nav';
-import { LinkMenuItem } from '@atlaskit/navigation-system/side-nav-items/link-menu-item';
-
-const styles = cssMap({
-	root: {
-		width: '300px',
-	},
-});
-
-const homeIcon = <HomeIcon label="" color="currentColor" spacing="spacious" />;
-
-export function LinkMenuItemBleed() {
-	const ref = useRef<HTMLAnchorElement | null>(null);
-
-	// Focus on initial render for snapshots
-	useLayoutEffect(() => {
-		ref.current?.focus();
-	}, []);
-
-	return (
-		<div css={styles.root}>
-			<SideNavContent>
-				<MenuList>
-					<LinkMenuItem href="#" elemBefore={homeIcon} isSelected>
-						1.1 (selected)
-					</LinkMenuItem>
-					<LinkMenuItem href="#" elemBefore={homeIcon} ref={ref}>
-						1.2 (focused)
-					</LinkMenuItem>
-					<LinkMenuItem href="#" elemBefore="🤩" isSelected>
-						1.3 (selected)
-					</LinkMenuItem>
-				</MenuList>
-			</SideNavContent>
-		</div>
-	);
-}
-
-export default LinkMenuItemBleed;

package/examples/menu-item-integration.tsx

@@ -1,207 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { jsx } from '@compiled/react';
-
-import { IconButton } from '@atlaskit/button/new';
-import { cssMap } from '@atlaskit/css';
-import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
-import Heading from '@atlaskit/heading';
-import AlignTextLeftIcon from '@atlaskit/icon/core/align-text-left';
-import AppsIcon from '@atlaskit/icon/core/apps';
-import BoardIcon from '@atlaskit/icon/core/board';
-import BoardsIcon from '@atlaskit/icon/core/boards';
-import ClockIcon from '@atlaskit/icon/core/clock';
-import FilterIcon from '@atlaskit/icon/core/filter';
-import InboxIcon from '@atlaskit/icon/core/inbox';
-import MagicWandIcon from '@atlaskit/icon/core/magic-wand';
-import ProjectIcon from '@atlaskit/icon/core/project';
-import ScalesIcon from '@atlaskit/icon/core/scales';
-import ShowMoreHorizontal from '@atlaskit/icon/core/show-more-horizontal';
-import StarUnstarredIcon from '@atlaskit/icon/core/star-unstarred';
-import { ConfluenceIcon } from '@atlaskit/logo';
-import { Main } from '@atlaskit/navigation-system/layout/main';
-import { PanelSplitter } from '@atlaskit/navigation-system/layout/panel-splitter';
-import { Root } from '@atlaskit/navigation-system/layout/root';
-import {
-	SideNav,
-	SideNavContent,
-	SideNavToggleButton,
-} from '@atlaskit/navigation-system/layout/side-nav';
-import {
-	TopNav,
-	TopNavEnd,
-	TopNavMiddle,
-	TopNavStart,
-} from '@atlaskit/navigation-system/layout/top-nav';
-import { ButtonMenuItem } from '@atlaskit/navigation-system/side-nav-items/button-menu-item';
-import {
-	ExpandableMenuItem,
-	ExpandableMenuItemContent,
-	ExpandableMenuItemTrigger,
-} from '@atlaskit/navigation-system/side-nav-items/expandable-menu-item';
-import {
-	FlyoutMenuItem,
-	FlyoutMenuItemContent,
-	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 { Divider } from '@atlaskit/navigation-system/side-nav-items/menu-section';
-import {
-	AppLogo,
-	AppSwitcher,
-	CreateButton,
-	Help,
-	Search,
-	Settings,
-} from '@atlaskit/navigation-system/top-nav-items';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Stack } from '@atlaskit/primitives';
-import { token } from '@atlaskit/tokens';
-
-const headingStyles = cssMap({
-	root: {
-		paddingInline: token('space.300'),
-		paddingBlockStart: token('space.300'),
-	},
-});
-
-export default function MenuItemIntegrationExample() {
-	return (
-		<Root>
-			<TopNav>
-				<TopNavStart>
-					<SideNavToggleButton
-						testId="side-nav-toggle-button"
-						collapseLabel="Collapse sidebar"
-						expandLabel="Expand sidebar"
-					/>
-					<AppSwitcher label="Switch apps" />
-					<AppLogo href="" icon={ConfluenceIcon} name="Confluence" label="Home page" />
-				</TopNavStart>
-				<TopNavMiddle>
-					<Search label="Search" />
-					<CreateButton>Create</CreateButton>
-				</TopNavMiddle>
-				<TopNavEnd>
-					<Help label="Help" />
-					<Settings label="Settings" />
-				</TopNavEnd>
-			</TopNav>
-
-			<SideNav label="Side navigation">
-				<SideNavContent>
-					<MenuList>
-						<LinkMenuItem href="#" elemBefore={<InboxIcon label="" color="currentColor" />}>
-							Your work
-						</LinkMenuItem>
-						<LinkMenuItem href="#" elemBefore={<AppsIcon label="" color="currentColor" />}>
-							Apps
-						</LinkMenuItem>
-
-						<ExpandableMenuItem>
-							<ExpandableMenuItemTrigger elemBefore={<ProjectIcon label="" color="currentColor" />}>
-								Projects
-							</ExpandableMenuItemTrigger>
-							<ExpandableMenuItemContent>
-								<ButtonMenuItem elemBefore={<ScalesIcon label="" color="currentColor" />}>
-									Blueshift
-								</ButtonMenuItem>
-								<ExpandableMenuItem>
-									<ExpandableMenuItemTrigger
-										elemBefore={<MagicWandIcon label="" color="currentColor" />}
-									>
-										DST - Claret
-									</ExpandableMenuItemTrigger>
-									<ExpandableMenuItemContent>
-										<ButtonMenuItem elemBefore={<BoardIcon label="" color="currentColor" />}>
-											Navigation
-										</ButtonMenuItem>
-										<ButtonMenuItem elemBefore={<BoardsIcon label="" color="currentColor" />}>
-											View all boards
-										</ButtonMenuItem>
-									</ExpandableMenuItemContent>
-								</ExpandableMenuItem>
-							</ExpandableMenuItemContent>
-						</ExpandableMenuItem>
-
-						<FlyoutMenuItem>
-							<FlyoutMenuItemTrigger elemBefore={<ClockIcon label="" color="currentColor" />}>
-								Recent
-							</FlyoutMenuItemTrigger>
-							<FlyoutMenuItemContent>
-								<MenuList>
-									<ButtonMenuItem elemBefore={<BoardIcon label="" color="currentColor" />}>
-										YNG board
-									</ButtonMenuItem>
-									<Divider />
-									<ButtonMenuItem elemBefore={<AlignTextLeftIcon label="" color="currentColor" />}>
-										View all recent items
-									</ButtonMenuItem>
-								</MenuList>
-							</FlyoutMenuItemContent>
-						</FlyoutMenuItem>
-						<ButtonMenuItem
-							elemAfter={
-								<DropdownMenu
-									shouldRenderToParent
-									trigger={({ triggerRef: ref, ...props }) => (
-										<IconButton
-											ref={ref}
-											{...props}
-											spacing="compact"
-											appearance="subtle"
-											label="Open"
-											icon={(iconProps) => <ShowMoreHorizontal {...iconProps} size="small" />}
-										/>
-									)}
-								>
-									<DropdownItemGroup>
-										<DropdownItem>Manage starred</DropdownItem>
-									</DropdownItemGroup>
-								</DropdownMenu>
-							}
-							elemBefore={<StarUnstarredIcon color="currentColor" label="" />}
-						>
-							Starred
-						</ButtonMenuItem>
-						<ButtonMenuItem
-							elemAfter={
-								<DropdownMenu
-									shouldRenderToParent
-									trigger={({ triggerRef: ref, ...props }) => (
-										<IconButton
-											ref={ref}
-											{...props}
-											spacing="compact"
-											appearance="subtle"
-											label="Open"
-											icon={(iconProps) => <ShowMoreHorizontal {...iconProps} size="small" />}
-										/>
-									)}
-								>
-									<DropdownItemGroup>
-										<DropdownItem>Manage filters</DropdownItem>
-									</DropdownItemGroup>
-								</DropdownMenu>
-							}
-							elemBefore={<FilterIcon color="currentColor" label="" />}
-						>
-							Filters
-						</ButtonMenuItem>
-					</MenuList>
-				</SideNavContent>
-				<PanelSplitter label="Resize sidebar" />
-			</SideNav>
-
-			<Main id="main-container">
-				<Stack space="space.100" xcss={headingStyles.root}>
-					<Heading size="small">Settings</Heading>
-				</Stack>
-			</Main>
-		</Root>
-	);
-}