@atlaskit/navigation-system 0.166.0

package/examples/page-layout-side-nav-content-scroll-with-sticky.tsx

@@ -0,0 +1,135 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { useLayoutEffect, useRef } from 'react';
+
+import { cssMap, jsx } from '@compiled/react';
+
+import Heading from '@atlaskit/heading';
+import MegaphoneIcon from '@atlaskit/icon/core/megaphone';
+import { MenuList } from '@atlaskit/navigation-system';
+import { Main } from '@atlaskit/navigation-system/layout/main';
+import { Root } from '@atlaskit/navigation-system/layout/root';
+import {
+	SideNav,
+	SideNavContent,
+	SideNavFooter,
+	SideNavHeader,
+	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 { CreateButton, Settings } from '@atlaskit/navigation-system/top-nav-items';
+import { token } from '@atlaskit/tokens';
+
+import { WithResponsiveViewport } from './utils/example-utils';
+
+const headingStyles = cssMap({
+	root: {
+		paddingInline: token('space.300'),
+		paddingBlockStart: token('space.300'),
+	},
+});
+
+const stickyContentStyles = cssMap({
+	root: {
+		position: 'sticky',
+		insetBlockStart: token('space.0'),
+		backgroundColor: token('color.background.accent.blue.subtle'),
+		// A z-index is required to ensure the sticky content is rendered above the rest of the side nav content, as they are added to the DOM after the sticky content.
+		zIndex: 1,
+	},
+});
+
+const normalContentStyles = cssMap({
+	root: {
+		backgroundColor: token('color.background.accent.red.subtle'),
+		// Large height is added to simulate a lot of content within the side nav content slot, to ensure we can scroll this element past the sticky content.
+		height: '200vh',
+	},
+});
+
+export function SideNavContentScrollWithStickyVR() {
+	return <SideNavContentScrollWithSticky shouldTestScroll />;
+}
+
+function SideNavContentScrollWithSticky({
+	shouldTestScroll = false,
+}: {
+	shouldTestScroll?: boolean;
+}) {
+	const scrollContainerRef = useRef<HTMLDivElement>(null);
+	useLayoutEffect(() => {
+		if (!shouldTestScroll) {
+			return;
+		}
+
+		scrollContainerRef.current?.scrollTo({ top: 10000 });
+	}, [shouldTestScroll]);
+
+	return (
+		<WithResponsiveViewport>
+			<Root>
+				<TopNav>
+					<TopNavStart>
+						<SideNavToggleButton
+							testId="side-nav-toggle-button"
+							collapseLabel="Collapse sidebar"
+							expandLabel="Expand sidebar"
+						/>
+					</TopNavStart>
+					<TopNavMiddle>
+						<CreateButton>Create</CreateButton>
+					</TopNavMiddle>
+					<TopNavEnd>
+						<Settings label="Settings" />
+					</TopNavEnd>
+				</TopNav>
+				<SideNav>
+					<SideNavHeader>
+						<Heading size="xsmall">Settings</Heading>
+					</SideNavHeader>
+
+					<SideNavContent ref={scrollContainerRef}>
+						<div css={stickyContentStyles.root}>Sticky content</div>
+						<div
+							css={normalContentStyles.root}
+							/**
+							 * Resolves a11y scanner warnings about scrollable region not being focusable.
+							 * Realistic usage would have real focusable content, such as in the composition examples.
+							 * Taking a shortcut here because these examples are for VRs and not meant to be realistic content.
+							 */
+							// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+							tabIndex={0}
+						>
+							Normal content
+						</div>
+					</SideNavContent>
+
+					<SideNavFooter>
+						<MenuList>
+							<ButtonMenuItem elemBefore={<MegaphoneIcon label="" color="currentColor" />}>
+								Give feedback on the new navigation
+							</ButtonMenuItem>
+						</MenuList>
+					</SideNavFooter>
+				</SideNav>
+
+				<Main>
+					<div css={headingStyles.root}>
+						<Heading size="small">Board settings</Heading>
+					</div>
+				</Main>
+			</Root>
+		</WithResponsiveViewport>
+	);
+}
+
+export default SideNavContentScrollWithSticky;

package/examples/page-layout-side-nav-custom-width-greater-than-max.tsx

@@ -0,0 +1,3 @@
+import { SideNavCustomWidthGreaterThanMaxWidth } from './page-layout';
+
+export default SideNavCustomWidthGreaterThanMaxWidth;

package/examples/page-layout-side-nav-custom-width-smaller-than-min.tsx

@@ -0,0 +1,3 @@
+import { SideNavCustomWidthSmallerThanMinWidth } from './page-layout';
+
+export default SideNavCustomWidthSmallerThanMinWidth;

package/examples/page-layout-side-nav-main-aside-scrollable-fixed.tsx

@@ -0,0 +1,3 @@
+import { SideNavMainAsideScrollableFixed } from './page-layout';
+
+export default SideNavMainAsideScrollableFixed;

package/examples/page-layout-side-nav-main-aside-scrollable.tsx

@@ -0,0 +1,3 @@
+import { SideNavMainAsideScrollable } from './page-layout';
+
+export default SideNavMainAsideScrollable;

package/examples/page-layout-side-nav-main-aside.tsx

@@ -0,0 +1,3 @@
+import { SideNavMainAside } from './page-layout';
+
+export default SideNavMainAside;

package/examples/page-layout-side-nav-onboarding.tsx

@@ -0,0 +1,154 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { useCallback, useState } from 'react';
+
+import { cssMap, jsx } from '@compiled/react';
+
+import Button from '@atlaskit/button/new';
+import Heading from '@atlaskit/heading';
+import AppsIcon from '@atlaskit/icon/core/apps';
+import InboxIcon from '@atlaskit/icon/core/inbox';
+import ProjectIcon from '@atlaskit/icon/core/project';
+import { Banner } from '@atlaskit/navigation-system/layout/banner';
+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,
+	useExpandSideNav,
+} from '@atlaskit/navigation-system/layout/side-nav';
+import {
+	TopNav,
+	TopNavEnd,
+	TopNavMiddle,
+	TopNavStart,
+} from '@atlaskit/navigation-system/layout/top-nav';
+import { LinkMenuItem } from '@atlaskit/navigation-system/side-nav-items/link-menu-item';
+import { MenuList } from '@atlaskit/navigation-system/side-nav-items/menu-list';
+import {
+	AppSwitcher,
+	CreateButton,
+	Help,
+	Search,
+	Settings,
+} from '@atlaskit/navigation-system/top-nav-items';
+import {
+	Spotlight,
+	SpotlightManager,
+	SpotlightTarget,
+	SpotlightTransition,
+} from '@atlaskit/onboarding';
+import { Inline, Stack } from '@atlaskit/primitives';
+import { token } from '@atlaskit/tokens';
+
+import { WithResponsiveViewport } from './utils/example-utils';
+
+const headingStyles = cssMap({
+	root: {
+		paddingInline: token('space.300'),
+		paddingBlockStart: token('space.300'),
+	},
+});
+
+const bannerStyles = cssMap({
+	root: {
+		backgroundColor: token('elevation.surface.sunken'),
+	},
+});
+
+// This is a separate component so it can access the side nav visibility context through `useExpandSideNav`
+function LaunchSpotlightButton({ onClick }: { onClick: () => void }) {
+	const expandSideNav = useExpandSideNav();
+
+	const handleLaunchSpotlight = useCallback(() => {
+		expandSideNav();
+		onClick();
+	}, [onClick, expandSideNav]);
+
+	return <Button onClick={handleLaunchSpotlight}>Launch spotlight</Button>;
+}
+
+export default function SideNavOnboardingExample() {
+	const [isSpotlightActive, setIsSpotlightActive] = useState(false);
+
+	return (
+		<WithResponsiveViewport>
+			<SpotlightManager>
+				<Root>
+					<Banner xcss={bannerStyles.root}> </Banner>
+					<TopNav>
+						<TopNavStart>
+							<SideNavToggleButton
+								testId="side-nav-toggle-button"
+								collapseLabel="Collapse sidebar"
+								expandLabel="Expand sidebar"
+							/>
+							<AppSwitcher label="Switch apps" />
+						</TopNavStart>
+						<TopNavMiddle>
+							<Search label="Search" />
+							<CreateButton>Create</CreateButton>
+						</TopNavMiddle>
+						<TopNavEnd>
+							<Help label="Help" />
+							<Settings label="Settings" />
+						</TopNavEnd>
+					</TopNav>
+					<SideNav
+						onExpand={() => console.log('onExpand')}
+						onCollapse={() => console.log('onCollapse')}
+					>
+						<SideNavContent>
+							<MenuList>
+								<SpotlightTarget name="your-work">
+									<LinkMenuItem href="#" elemBefore={<InboxIcon label="" color="currentColor" />}>
+										Your work
+									</LinkMenuItem>
+								</SpotlightTarget>
+								<LinkMenuItem href="#" elemBefore={<AppsIcon label="" color="currentColor" />}>
+									Apps
+								</LinkMenuItem>
+								<LinkMenuItem href="#" elemBefore={<ProjectIcon label="" color="currentColor" />}>
+									Projects
+								</LinkMenuItem>
+							</MenuList>
+						</SideNavContent>
+						<PanelSplitter label="Resize side nav" />
+					</SideNav>
+					<Main id="main-container">
+						<Stack space="space.100" xcss={headingStyles.root}>
+							<Heading size="small">Project Blueshift</Heading>
+							<Inline space="space.100">
+								<LaunchSpotlightButton onClick={() => setIsSpotlightActive(true)} />
+							</Inline>
+						</Stack>
+					</Main>
+				</Root>
+
+				<SpotlightTransition>
+					{isSpotlightActive && (
+						<Spotlight
+							actions={[
+								{
+									onClick: () => setIsSpotlightActive(false),
+									text: 'OK',
+								},
+							]}
+							heading="Welcome to your work"
+							target="your-work"
+							key="your-work"
+						>
+							This is where you can browse items you've recently been assigned, worked on, viewed,
+							or starred.
+						</Spotlight>
+					)}
+				</SpotlightTransition>
+			</SpotlightManager>
+		</WithResponsiveViewport>
+	);
+}

package/examples/page-layout-side-nav-overflowing-children.tsx

@@ -0,0 +1,3 @@
+import { SideNavOverflowingChildren } from './page-layout';
+
+export default SideNavOverflowingChildren;

package/examples/page-layout-side-nav-slots.tsx

@@ -0,0 +1,173 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { jsx } from '@compiled/react';
+
+import { cssMap } from '@atlaskit/css';
+import Heading from '@atlaskit/heading';
+import AssetsGraph from '@atlaskit/icon-lab/core/assets-graph';
+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 DashboardIcon from '@atlaskit/icon/core/dashboard';
+import FilterIcon from '@atlaskit/icon/core/filter';
+import InboxIcon from '@atlaskit/icon/core/inbox';
+import MegaphoneIcon from '@atlaskit/icon/core/megaphone';
+import ProjectIcon from '@atlaskit/icon/core/project';
+import ShieldIcon from '@atlaskit/icon/core/shield';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import StarUnstarredIcon from '@atlaskit/icon/core/star-unstarred';
+import TeamsIcon from '@atlaskit/icon/core/teams';
+import { MenuList } from '@atlaskit/navigation-system';
+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,
+	SideNavFooter,
+	SideNavHeader,
+	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 { Divider } from '@atlaskit/navigation-system/side-nav-items/menu-section';
+import { CreateButton, Settings } from '@atlaskit/navigation-system/top-nav-items';
+import { token } from '@atlaskit/tokens';
+
+import { WithResponsiveViewport } from './utils/example-utils';
+
+const headingStyles = cssMap({
+	root: {
+		paddingInline: token('space.300'),
+		paddingBlockStart: token('space.300'),
+	},
+});
+
+export function SideNavSlotsExample() {
+	return (
+		<WithResponsiveViewport>
+			<Root>
+				<TopNav>
+					<TopNavStart>
+						<SideNavToggleButton
+							testId="side-nav-toggle-button"
+							collapseLabel="Collapse sidebar"
+							expandLabel="Expand sidebar"
+						/>
+					</TopNavStart>
+					<TopNavMiddle>
+						<CreateButton>Create</CreateButton>
+					</TopNavMiddle>
+					<TopNavEnd>
+						<Settings label="Settings" />
+					</TopNavEnd>
+				</TopNav>
+				<SideNav>
+					<SideNavHeader>
+						<Heading size="xsmall">Settings</Heading>
+					</SideNavHeader>
+
+					<SideNavContent>
+						<MenuList>
+							<LinkMenuItem href="#" elemBefore={<InboxIcon label="" color="currentColor" />}>
+								Your work
+							</LinkMenuItem>
+							<LinkMenuItem href="#" elemBefore={<AppsIcon label="" color="currentColor" />}>
+								Apps
+							</LinkMenuItem>
+							<ExpandableMenuItem isDefaultExpanded>
+								<ExpandableMenuItemTrigger
+									elemBefore={<ProjectIcon label="" color="currentColor" />}
+								>
+									Projects
+								</ExpandableMenuItemTrigger>
+								<ExpandableMenuItemContent>
+									{Array.from({ length: 10 }).map((_, index) => (
+										<ButtonMenuItem
+											key={index}
+											elemBefore={<BoardIcon label="" color="currentColor" />}
+										>
+											Project {index + 1}
+										</ButtonMenuItem>
+									))}
+								</ExpandableMenuItemContent>
+							</ExpandableMenuItem>
+							<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 elemBefore={<StarUnstarredIcon color="currentColor" label="" />}>
+								Starred
+							</ButtonMenuItem>
+							<ButtonMenuItem elemBefore={<FilterIcon color="currentColor" label="" />}>
+								Filters
+							</ButtonMenuItem>
+							<ButtonMenuItem elemBefore={<DashboardIcon color="currentColor" label="" />}>
+								Dashboards
+							</ButtonMenuItem>
+							<ButtonMenuItem elemBefore={<ShieldIcon color="currentColor" label="" />}>
+								Operations
+							</ButtonMenuItem>
+							<ButtonMenuItem elemBefore={<AssetsGraph color="currentColor" label="" />}>
+								Assets
+							</ButtonMenuItem>
+							<ButtonMenuItem elemBefore={<TeamsIcon color="currentColor" label="" />}>
+								Teams
+							</ButtonMenuItem>
+							<ButtonMenuItem elemBefore={<ShowMoreHorizontalIcon label="" color="currentColor" />}>
+								More
+							</ButtonMenuItem>
+						</MenuList>
+					</SideNavContent>
+
+					<SideNavFooter>
+						<MenuList>
+							<ButtonMenuItem elemBefore={<MegaphoneIcon label="" color="currentColor" />}>
+								Give feedback on the new navigation
+							</ButtonMenuItem>
+						</MenuList>
+					</SideNavFooter>
+					<PanelSplitter label="Resize side nav" />
+				</SideNav>
+
+				<Main id="main-container">
+					<div css={headingStyles.root}>
+						<Heading size="small">Board settings</Heading>
+					</div>
+				</Main>
+			</Root>
+		</WithResponsiveViewport>
+	);
+}
+
+export default SideNavSlotsExample;

package/examples/page-layout-side-nav-with-menu-items.tsx

@@ -0,0 +1,3 @@
+import { SideNavWithMenuItems } from './page-layout';
+
+export default SideNavWithMenuItems;

package/examples/page-layout-top-bar-side-nav-main-aside-scrollable-fixed.tsx

@@ -0,0 +1,3 @@
+import { TopBarSideNavMainAsideScrollableFixed } from './page-layout';
+
+export default TopBarSideNavMainAsideScrollableFixed;

package/examples/page-layout-top-bar-side-nav-main-aside-scrollable.tsx

@@ -0,0 +1,3 @@
+import { TopBarSideNavMainAsideScrollable } from './page-layout';
+
+export default TopBarSideNavMainAsideScrollable;

package/examples/page-layout-top-bar-side-nav-main-aside.tsx

@@ -0,0 +1,3 @@
+import { TopBarSideNavMainAside } from './page-layout';
+
+export default TopBarSideNavMainAside;

package/examples/page-layout-top-bar-side-nav-main-scrollable-fixed.tsx

@@ -0,0 +1,3 @@
+import { TopBarSideNavMainScrollableFixed } from './page-layout';
+
+export default TopBarSideNavMainScrollableFixed;

package/examples/page-layout-top-bar-side-nav-main-scrollable.tsx

@@ -0,0 +1,3 @@
+import { TopBarSideNavMainScrollable } from './page-layout';
+
+export default TopBarSideNavMainScrollable;

package/examples/page-layout-top-bar-side-nav-main.tsx

@@ -0,0 +1,3 @@
+import { TopBarSideNavMain } from './page-layout';
+
+export default TopBarSideNavMain;