@atlaskit/navigation-system 0.166.0

package/examples/side-nav-flyout.tsx

@@ -0,0 +1,255 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { jsx } from '@compiled/react';
+
+import Button, { IconButton } from '@atlaskit/button/new';
+import { cssMap } from '@atlaskit/css';
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import noop from '@atlaskit/ds-lib/noop';
+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 ClockIcon from '@atlaskit/icon/core/clock';
+import FilterIcon from '@atlaskit/icon/core/filter';
+import InboxIcon from '@atlaskit/icon/core/inbox';
+import ProjectIcon from '@atlaskit/icon/core/project';
+import SettingsIcon from '@atlaskit/icon/core/settings';
+import ShowMoreHorizontal from '@atlaskit/icon/core/show-more-horizontal';
+import StarUnstarredIcon from '@atlaskit/icon/core/star-unstarred';
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { AtlassianIcon, AtlassianLogo } 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 {
+	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 {
+	AppSwitcher,
+	CreateButton,
+	Help,
+	NavLogo,
+	Search,
+	Settings,
+} from '@atlaskit/navigation-system/top-nav-items';
+import { Inline, Stack } from '@atlaskit/primitives';
+import { token } from '@atlaskit/tokens';
+
+import { WithResponsiveViewport } from './utils/example-utils';
+const contentStyles = cssMap({
+	root: {
+		backgroundColor: token('color.background.brand.subtlest'),
+		paddingInline: token('space.300'),
+		paddingBlock: token('space.100'),
+	},
+});
+
+const headingStyles = cssMap({
+	root: {
+		paddingInline: token('space.300'),
+		paddingBlockStart: token('space.300'),
+	},
+});
+
+// Using a basic element for VR tests to simulate a layered component that adds a flyout lock.
+// There are React 18 issues with using popups or dropdown menus in VR tests.
+// See: https://atlassian.slack.com/archives/C07G96YU6NQ/p1725320894009059
+const MockLayeredComponent = () => {
+	useNotifyOpenLayerObserver({
+		isOpen: true,
+		onClose: noop,
+	});
+	return <div>Mock layered component</div>;
+};
+
+export default function SideNavFlyout({
+	isChildLayerOpen = false,
+	defaultSideNavCollapsed = false,
+}: {
+	/**
+	 * Whether there is a layered component open within the side nav, which will lock the flyout.
+	 */
+	isChildLayerOpen?: boolean;
+	defaultSideNavCollapsed?: boolean;
+}) {
+	return (
+		<WithResponsiveViewport>
+			<Root>
+				<TopNav>
+					<TopNavStart>
+						<SideNavToggleButton
+							testId="side-nav-toggle-button"
+							collapseLabel="Collapse sidebar"
+							expandLabel="Expand sidebar"
+						/>
+						<AppSwitcher label="Switch apps" />
+						<NavLogo href="" logo={AtlassianLogo} icon={AtlassianIcon} label="Home page" />
+					</TopNavStart>
+					<TopNavMiddle>
+						<Search label="Search" />
+						<CreateButton>Create</CreateButton>
+					</TopNavMiddle>
+					<TopNavEnd>
+						<Help label="Help" />
+						<Settings label="Settings" />
+					</TopNavEnd>
+				</TopNav>
+				<SideNav defaultCollapsed={defaultSideNavCollapsed}>
+					<SideNavContent>
+						<MenuList>
+							<LinkMenuItem href="#" elemBefore={<InboxIcon label="" color="currentColor" />}>
+								Your work
+							</LinkMenuItem>
+							<LinkMenuItem href="#" elemBefore={<AppsIcon label="" color="currentColor" />}>
+								Apps
+							</LinkMenuItem>
+							<LinkMenuItem href="#" elemBefore={<ProjectIcon label="" color="currentColor" />}>
+								Projects
+							</LinkMenuItem>
+							<FlyoutMenuItem>
+								<FlyoutMenuItemTrigger elemBefore={<ClockIcon label="" color="currentColor" />}>
+									Recent
+								</FlyoutMenuItemTrigger>
+								<FlyoutMenuItemContent>
+									<ButtonMenuItem elemBefore={<BoardIcon label="" color="currentColor" />}>
+										YNG board
+									</ButtonMenuItem>
+									<Divider />
+									<ButtonMenuItem elemBefore={<AlignTextLeftIcon label="" color="currentColor" />}>
+										View all starred items
+									</ButtonMenuItem>
+								</FlyoutMenuItemContent>
+							</FlyoutMenuItem>
+							<ButtonMenuItem
+								elemAfter={
+									<DropdownMenu
+										shouldRenderToParent
+										trigger={({ triggerRef: ref, ...props }) => (
+											<IconButton
+												ref={ref}
+												{...props}
+												spacing="compact"
+												appearance="subtle"
+												label="Starred more menu"
+												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>
+
+						{isChildLayerOpen && <MockLayeredComponent />}
+					</SideNavContent>
+					<PanelSplitter label="Resize side nav" />
+				</SideNav>
+				<Main id="main-container">
+					<Stack space="space.100" xcss={headingStyles.root}>
+						<Heading size="small">Settings</Heading>
+					</Stack>
+					<Inline space="space.100" xcss={contentStyles.root}>
+						<DropdownMenu
+							shouldRenderToParent
+							placement="bottom-end"
+							trigger={({ triggerRef: ref, ...props }) => (
+								<IconButton ref={ref} {...props} label="Settings" icon={SettingsIcon} />
+							)}
+						>
+							<DropdownItemGroup>
+								<DropdownItem>Automatic</DropdownItem>
+							</DropdownItemGroup>
+						</DropdownMenu>
+						<Button>Filters</Button>
+						<Button>Projects</Button>
+						<Inline alignInline="end" grow="fill">
+							<DropdownMenu
+								shouldRenderToParent
+								placement="top-start"
+								trigger={({ triggerRef: ref, ...props }) => (
+									<IconButton
+										ref={ref}
+										{...props}
+										label="More settings"
+										icon={(iconProps) => <ShowMoreHorizontal {...iconProps} size="small" />}
+									/>
+								)}
+							>
+								<DropdownItemGroup>
+									<DropdownItem>Automatic</DropdownItem>
+								</DropdownItemGroup>
+							</DropdownMenu>
+						</Inline>
+					</Inline>
+				</Main>
+			</Root>
+		</WithResponsiveViewport>
+	);
+}
+
+export function ExpandedVR() {
+	return <SideNavFlyout defaultSideNavCollapsed={false} isChildLayerOpen={false} />;
+}
+
+export function ExpandedWithOpenLayerVR() {
+	return <SideNavFlyout defaultSideNavCollapsed={false} isChildLayerOpen />;
+}
+
+export function CollapsedVR() {
+	return <SideNavFlyout defaultSideNavCollapsed isChildLayerOpen={false} />;
+}
+
+export function CollapsedWithOpenLayerVR() {
+	return <SideNavFlyout defaultSideNavCollapsed isChildLayerOpen />;
+}

package/examples/stand-alone-iframe.tsx

@@ -0,0 +1,22 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { cssMap, jsx } from '@compiled/react';
+
+import { Box } from '@atlaskit/primitives';
+import { token } from '@atlaskit/tokens';
+
+const isInIframe = typeof window !== undefined && window.self !== window.top;
+
+const styles = cssMap({
+	root: {
+		backgroundColor: token('color.background.accent.blue.subtle'),
+		height: '100%',
+	},
+});
+
+export default function App() {
+	return <Box xcss={styles.root}>I am in an iframe: {isInIframe ? 'true' : 'false'}</Box>;
+}

package/examples/temp-icons/app-switcher-legacy.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const AppSwitcherLegacy = () => (
+	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M4 4.75C4 4.33579 4.33579 4 4.75 4H7.5C7.91421 4 8.25 4.33579 8.25 4.75V7.5C8.25 7.91421 7.91421 8.25 7.5 8.25H4.75C4.33579 8.25 4 7.91421 4 7.5V4.75ZM10 4.75C10 4.33579 10.3358 4 10.75 4H13.5C13.9142 4 14.25 4.33579 14.25 4.75V7.5C14.25 7.91421 13.9142 8.25 13.5 8.25H10.75C10.3358 8.25 10 7.91421 10 7.5V4.75ZM15.75 4.75C15.75 4.33579 16.0858 4 16.5 4H19.25C19.6642 4 20 4.33579 20 4.75V7.5C20 7.91421 19.6642 8.25 19.25 8.25H16.5C16.0858 8.25 15.75 7.91421 15.75 7.5V4.75ZM4 10.75C4 10.3358 4.33579 10 4.75 10H7.5C7.91421 10 8.25 10.3358 8.25 10.75V13.5C8.25 13.9142 7.91421 14.25 7.5 14.25H4.75C4.33579 14.25 4 13.9142 4 13.5V10.75ZM10 10.75C10 10.3358 10.3358 10 10.75 10H13.5C13.9142 10 14.25 10.3358 14.25 10.75V13.5C14.25 13.9142 13.9142 14.25 13.5 14.25H10.75C10.3358 14.25 10 13.9142 10 13.5V10.75ZM15.75 10.75C15.75 10.3358 16.0858 10 16.5 10H19.25C19.6642 10 20 10.3358 20 10.75V13.5C20 13.9142 19.6642 14.25 19.25 14.25H16.5C16.0858 14.25 15.75 13.9142 15.75 13.5V10.75ZM4 16.5C4 16.0858 4.33579 15.75 4.75 15.75H7.5C7.91421 15.75 8.25 16.0858 8.25 16.5V19.25C8.25 19.6642 7.91421 20 7.5 20H4.75C4.33579 20 4 19.6642 4 19.25V16.5ZM10 16.5C10 16.0858 10.3358 15.75 10.75 15.75H13.5C13.9142 15.75 14.25 16.0858 14.25 16.5V19.25C14.25 19.6642 13.9142 20 13.5 20H10.75C10.3358 20 10 19.6642 10 19.25V16.5ZM15.75 16.5C15.75 16.0858 16.0858 15.75 16.5 15.75H19.25C19.6642 15.75 20 16.0858 20 16.5V19.25C20 19.6642 19.6642 20 19.25 20H16.5C16.0858 20 15.75 19.6642 15.75 19.25V16.5Z"
+			fill="#44546F"
+		/>
+	</svg>
+);
+
+export default AppSwitcherLegacy;

package/examples/temp-icons/atlassian-intelligence.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const AtlassianIntelligence = () => (
+	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M11.25 7.5V4H12.75V7.5H11.25ZM9.21967 10.2803L4.59467 5.65533L5.65533 4.59467L10.2803 9.21967L9.21967 10.2803ZM13.7197 9.21967L18.3447 4.59467L19.4053 5.65533L14.7803 10.2803L13.7197 9.21967ZM4 11.25H7.5V12.75H4V11.25ZM16.5 11.25H20V12.75H16.5V11.25ZM4.59467 18.3447L9.21967 13.7197L10.2803 14.7803L5.65533 19.4053L4.59467 18.3447ZM18.3447 19.4053L13.7197 14.7803L14.7803 13.7197L19.4053 18.3447L18.3447 19.4053ZM11.25 20V16.5H12.75V20H11.25Z"
+			fill="#44546F"
+		/>
+	</svg>
+);
+
+export default AtlassianIntelligence;

package/examples/temp-icons/help.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const Help = () => (
+	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M12 4.5C7.85786 4.5 4.5 7.85786 4.5 12C4.5 16.1421 7.85786 19.5 12 19.5C16.1421 19.5 19.5 16.1421 19.5 12C19.5 7.85786 16.1421 4.5 12 4.5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12ZM12 8.75C11.2763 8.75 10.75 9.27628 10.75 10H9.25C9.25 8.44786 10.4479 7.25 12 7.25C13.5521 7.25 14.75 8.44786 14.75 10C14.75 10.6416 14.5844 11.1325 14.2987 11.5343C14.075 11.8488 13.7823 12.0912 13.572 12.2653C13.5405 12.2913 13.5109 12.3158 13.4837 12.3388C13.2495 12.5364 13.0884 12.6939 12.9701 12.9095C12.855 13.1192 12.75 13.4427 12.75 14H11.25C11.25 13.2448 11.395 12.662 11.6549 12.1881C11.9116 11.7202 12.2505 11.4167 12.5163 11.1924C12.5556 11.1593 12.5922 11.1286 12.6267 11.0997C12.8471 10.915 12.9743 10.8083 13.0763 10.665C13.1656 10.5393 13.25 10.3584 13.25 10C13.25 9.27628 12.7237 8.75 12 8.75Z"
+			fill="#44546F"
+		/>
+		<path
+			d="M13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z"
+			fill="#44546F"
+		/>
+	</svg>
+);
+
+export default Help;

package/examples/temp-icons/menu.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Menu = () => (
+	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M20 7.5H4V6H20V7.5ZM20 12.75H4V11.25H20V12.75ZM20 18H4V16.5H20V18Z"
+			fill="#44546F"
+		/>
+	</svg>
+);
+
+export default Menu;

package/examples/temp-icons/settings.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Settings20px = () => (
+	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M9.88207 3.46094C9.99868 3.18177 10.2716 3 10.5741 3H13.4259C13.7284 3 14.0013 3.18177 14.1179 3.46094L15.3197 6.33825L18.3417 5.90091C18.6451 5.85701 18.9447 6.00217 19.0983 6.2675L20.5241 8.73119C20.6748 8.99148 20.6554 9.31658 20.4748 9.5571L18.6412 12L20.4748 14.443C20.6554 14.6835 20.6748 15.0086 20.5241 15.2689L19.0983 17.7326C18.9447 17.9979 18.6451 18.1431 18.3417 18.0991L15.3197 17.6618L14.1179 20.5391C14.0013 20.8182 13.7284 21 13.4259 21H10.5741C10.2716 21 9.99868 20.8182 9.88207 20.5391L8.68029 17.6618L5.65831 18.0991C5.3549 18.1431 5.05531 17.9979 4.90175 17.7326L3.47588 15.2689C3.32524 15.0086 3.34464 14.6835 3.52517 14.443L5.35877 12L3.52517 9.5571C3.34464 9.31658 3.32524 8.99148 3.47588 8.73119L4.90175 6.2675C5.05531 6.00217 5.35489 5.857 5.65829 5.90091L8.68028 6.33825L9.88207 3.46094ZM11.0737 4.5L10.0271 7.00578C9.78526 7.5847 9.18226 7.92653 8.56134 7.83667L5.94576 7.45814L5.02256 9.05331L6.61476 11.1746C6.98183 11.6636 6.98183 12.3363 6.61476 12.8254L5.02256 14.9467L5.94576 16.5419L8.56132 16.1633C9.18224 16.0735 9.78525 16.4153 10.0271 16.9942L11.0737 19.5H12.9263L13.9729 16.9942C14.2148 16.4153 14.8178 16.0735 15.4387 16.1633L18.0542 16.5419L18.9774 14.9467L17.3852 12.8254C17.0182 12.3363 17.0182 11.6636 17.3853 11.1746L18.9774 9.05331L18.0542 7.45814L15.4387 7.83667C14.8178 7.92653 14.2148 7.5847 13.973 7.00578L12.9263 4.5H11.0737ZM12 10.25C11.0335 10.25 10.25 11.0335 10.25 12C10.25 12.9665 11.0335 13.75 12 13.75C12.9665 13.75 13.75 12.9665 13.75 12C13.75 11.0335 12.9665 10.25 12 10.25ZM8.75 12C8.75 10.2051 10.2051 8.75 12 8.75C13.7949 8.75 15.25 10.2051 15.25 12C15.25 13.7949 13.7949 15.25 12 15.25C10.2051 15.25 8.75 13.7949 8.75 12Z"
+			fill="#44546F"
+		/>
+	</svg>
+);
+
+export default Settings20px;

package/examples/top-nav-custom-profile-image.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import AKBadge from '@atlaskit/badge';
+import AtlassianIntelligenceIcon from '@atlaskit/icon/core/atlassian-intelligence';
+import { AtlassianIcon, AtlassianLogo } from '@atlaskit/logo';
+import { Root } from '@atlaskit/navigation-system/layout/root';
+import { SideNavToggleButton } from '@atlaskit/navigation-system/layout/side-nav';
+import {
+	TopNav,
+	TopNavEnd,
+	TopNavMiddle,
+	TopNavStart,
+} from '@atlaskit/navigation-system/layout/top-nav';
+import {
+	AppSwitcher,
+	ChatButton,
+	CreateButton,
+	EndItem,
+	Help,
+	NavLogo,
+	Profile,
+	Search,
+	Settings,
+} from '@atlaskit/navigation-system/top-nav-items';
+import { Notifications } from '@atlaskit/navigation-system/top-nav-items/notifications';
+
+import KoalaImage from './images/koala.png';
+import { WithResponsiveViewport } from './utils/example-utils';
+
+const Badge = () => <AKBadge appearance="important">{5}</AKBadge>;
+
+export const TopNavCustomProfileImage = () => (
+	<WithResponsiveViewport>
+		<Root>
+			<TopNav>
+				<TopNavStart>
+					<SideNavToggleButton collapseLabel="Collapse sidebar" expandLabel="Expand sidebar" />
+					<AppSwitcher label="App switcher" onClick={() => alert('app switcher')} />
+					<NavLogo
+						href="http://www.atlassian.design"
+						logo={AtlassianLogo}
+						icon={AtlassianIcon}
+						label="Home page"
+					/>
+				</TopNavStart>
+				<TopNavMiddle>
+					<Search onClick={() => alert('mobile search')} label="Search" />
+					<CreateButton onClick={() => alert('create')}>Create</CreateButton>
+				</TopNavMiddle>
+				<TopNavEnd>
+					<ChatButton onClick={() => alert('chat')}>Chat</ChatButton>
+					<EndItem
+						icon={AtlassianIntelligenceIcon}
+						onClick={() => alert('inshelligence')}
+						label="Atlassian Intelligence"
+					/>
+					<Help onClick={() => alert('help')} label="Help" />
+					<Notifications
+						badge={Badge}
+						onClick={() => alert('notifications')}
+						label="Notifications"
+					/>
+					<Settings label="Settings" />
+					<Profile src={KoalaImage} onClick={() => alert('User settings')} label="Your profile" />
+				</TopNavEnd>
+			</TopNav>
+		</Root>
+	</WithResponsiveViewport>
+);
+
+export default TopNavCustomProfileImage;

package/examples/top-nav-side-nav-collapsed.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import AKBadge from '@atlaskit/badge';
+import AtlassianIntelligenceIcon from '@atlaskit/icon/core/atlassian-intelligence';
+import { AtlassianIcon, AtlassianLogo } from '@atlaskit/logo';
+import { Root } from '@atlaskit/navigation-system/layout/root';
+import { SideNavToggleButton } from '@atlaskit/navigation-system/layout/side-nav';
+import {
+	TopNav,
+	TopNavEnd,
+	TopNavMiddle,
+	TopNavStart,
+} from '@atlaskit/navigation-system/layout/top-nav';
+import {
+	AppSwitcher,
+	ChatButton,
+	CreateButton,
+	EndItem,
+	Help,
+	NavLogo,
+	Profile,
+	Search,
+	Settings,
+} from '@atlaskit/navigation-system/top-nav-items';
+import { Notifications } from '@atlaskit/navigation-system/top-nav-items/notifications';
+
+import { WithResponsiveViewport } from './utils/example-utils';
+
+const Badge = () => <AKBadge appearance="important">{5}</AKBadge>;
+
+const TopNavSideNavCollapsed = () => (
+	<WithResponsiveViewport>
+		<Root>
+			<TopNav>
+				<TopNavStart>
+					<SideNavToggleButton
+						defaultCollapsed
+						collapseLabel="Collapse sidebar"
+						expandLabel="Expand sidebar"
+					/>
+					<AppSwitcher label="App switcher" onClick={() => alert('app switcher')} />
+					<NavLogo
+						href="http://www.atlassian.design"
+						logo={AtlassianLogo}
+						icon={AtlassianIcon}
+						label="Home page"
+					/>
+				</TopNavStart>
+				<TopNavMiddle>
+					<Search onClick={() => alert('mobile search')} label="Search" />
+					<CreateButton onClick={() => alert('create')}>Create</CreateButton>
+				</TopNavMiddle>
+				<TopNavEnd>
+					<ChatButton onClick={() => alert('chat')}>Chat</ChatButton>
+					<EndItem
+						icon={AtlassianIntelligenceIcon}
+						onClick={() => alert('inshelligence')}
+						label="Atlassian Intelligence"
+					/>
+					<Help onClick={() => alert('help')} label="Help" />
+					<Notifications
+						badge={Badge}
+						onClick={() => alert('notifications')}
+						label="Notifications"
+					/>
+					<Settings label="Settings" />
+					<Profile onClick={() => alert('User settings')} label="Your profile" />
+				</TopNavEnd>
+			</TopNav>
+		</Root>
+	</WithResponsiveViewport>
+);
+
+export default TopNavSideNavCollapsed;

package/examples/top-nav-with-temp-nav-app-icon.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import AKBadge from '@atlaskit/badge';
+import { Root } from '@atlaskit/navigation-system/layout/root';
+import { SideNavToggleButton } from '@atlaskit/navigation-system/layout/side-nav';
+import {
+	TopNav,
+	TopNavEnd,
+	TopNavMiddle,
+	TopNavStart,
+} from '@atlaskit/navigation-system/layout/top-nav';
+import {
+	AppSwitcher,
+	ChatButton,
+	CreateButton,
+	Help,
+	NavLogo,
+	Notifications,
+	Profile,
+	Search,
+	Settings,
+} from '@atlaskit/navigation-system/top-nav-items';
+import { FocusIcon, FocusLogo } from '@atlaskit/temp-nav-app-icons/focus';
+
+import { WithResponsiveViewport } from './utils/example-utils';
+
+const Badge = () => <AKBadge appearance="important">{5}</AKBadge>;
+
+export default function TopNavWithTempNavAppIcon() {
+	return (
+		<WithResponsiveViewport>
+			{/**
+			 * Wrapping in `Root to ensure the TopNav height is set correctly, as it would in a proper composed usage.
+			 * Root sets the top bar height CSS variable that TopNav uses to set its height
+			 */}
+			<Root>
+				<TopNav>
+					<TopNavStart>
+						<SideNavToggleButton collapseLabel="Collapse sidebar" expandLabel="Expand sidebar" />
+						<AppSwitcher label="App switcher" />
+						<NavLogo
+							href="http://www.atlassian.design"
+							logo={() => <FocusLogo />}
+							icon={() => <FocusIcon size="24" />}
+							label="Home page"
+						/>
+					</TopNavStart>
+					<TopNavMiddle>
+						<Search label="Search" />
+						<CreateButton>Create</CreateButton>
+					</TopNavMiddle>
+					<TopNavEnd>
+						<ChatButton>Chat</ChatButton>
+						<Notifications label="Notifications" badge={Badge} />
+						<Help label="Help" />
+						<Settings label="Settings" />
+						<Profile label="Your profile" />
+					</TopNavEnd>
+				</TopNav>
+			</Root>
+		</WithResponsiveViewport>
+	);
+}

package/examples/top-navigation-custom-logo.tsx

@@ -0,0 +1,74 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@compiled/react';
+
+import { Root } from '@atlaskit/navigation-system/layout/root';
+import { SideNavToggleButton } from '@atlaskit/navigation-system/layout/side-nav';
+import { TopNav, TopNavMiddle, TopNavStart } from '@atlaskit/navigation-system/layout/top-nav';
+import {
+	AppSwitcher,
+	CreateButton,
+	NavLogo,
+	Search,
+} from '@atlaskit/navigation-system/top-nav-items';
+
+import placeholder200x20 from './images/200x20.png';
+import placeholder200x200 from './images/200x200.png';
+import placeholder20x20 from './images/20x20.png';
+import placeholder20x200 from './images/20x200.png';
+import { WithResponsiveViewport } from './utils/example-utils';
+
+const TopNavigationCustomLogoInstance = ({
+	logoUrl,
+	iconUrl,
+}: {
+	logoUrl: string;
+	iconUrl: string;
+}) => (
+	<WithResponsiveViewport>
+		{/**
+		 * Wrapping in `Root to ensure the TopNav height is set correctly, as it would in a proper composed usage.
+		 * Root sets the top bar height CSS variable that TopNav uses to set its height
+		 */}
+		<Root>
+			<TopNav>
+				<TopNavStart>
+					<SideNavToggleButton collapseLabel="Collapse sidebar" expandLabel="Expand sidebar" />
+					<AppSwitcher label="App switcher" onClick={() => alert('app switcher')} />
+					<NavLogo
+						href="http://www.atlassian.design"
+						logo={() => <img alt="" src={logoUrl} />}
+						icon={() => <img alt="" src={iconUrl} />}
+						label="Home page"
+					/>
+				</TopNavStart>
+				<TopNavMiddle>
+					<Search onClick={() => alert('mobile search')} label="Search" />
+					<CreateButton onClick={() => alert('create')}>Create</CreateButton>
+				</TopNavMiddle>
+			</TopNav>
+		</Root>
+	</WithResponsiveViewport>
+);
+
+export const TopNavigationCustomLogo200x20Example = () => (
+	<TopNavigationCustomLogoInstance logoUrl={placeholder200x20} iconUrl={placeholder200x20} />
+);
+
+export const TopNavigationCustomLogo200x200Example = () => (
+	<TopNavigationCustomLogoInstance logoUrl={placeholder200x200} iconUrl={placeholder200x200} />
+);
+
+export const TopNavigationCustomLogo20x20Example = () => (
+	<TopNavigationCustomLogoInstance logoUrl={placeholder20x20} iconUrl={placeholder20x20} />
+);
+
+export const TopNavigationCustomLogo20x200Example = () => (
+	<TopNavigationCustomLogoInstance logoUrl={placeholder20x200} iconUrl={placeholder20x200} />
+);
+
+export default function TopNavigationCustomLogoExample() {
+	return <TopNavigationCustomLogoInstance logoUrl={placeholder200x20} iconUrl={placeholder20x20} />;
+}