@atlaskit/navigation-system 0.166.0

package/examples/top-navigation-stress.tsx

@@ -0,0 +1,242 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { Fragment, type ReactNode } from 'react';
+
+import { jsx } from '@compiled/react';
+
+import Badge from '@atlaskit/badge';
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import Heading from '@atlaskit/heading';
+import AiChatIcon from '@atlaskit/icon/core/ai-chat';
+import PremiumIcon from '@atlaskit/icon/core/premium';
+import { AtlassianAdministrationIcon, AtlassianAdministrationLogo } from '@atlaskit/logo';
+import { TopNavButton } from '@atlaskit/navigation-system/experimental/top-nav-button';
+import { SideNavToggleButton } from '@atlaskit/navigation-system/layout/side-nav';
+import {
+	TopNav,
+	TopNavEnd,
+	TopNavMiddle,
+	TopNavStart,
+} from '@atlaskit/navigation-system/layout/top-nav';
+import { MenuListItem } from '@atlaskit/navigation-system/side-nav-items/menu-list-item';
+import {
+	AppSwitcher,
+	CreateButton,
+	CustomTitle,
+	Help,
+	NavLogo,
+	Notifications,
+	Profile,
+	Settings,
+} from '@atlaskit/navigation-system/top-nav-items';
+import { Stack } from '@atlaskit/primitives/compiled';
+import { ConfluenceIcon, ConfluenceLogo } from '@atlaskit/temp-nav-app-icons/confluence';
+import { EditionAwarenessButton } from '@atlassian/growth-pattern-library-edition-awareness-button';
+
+import { WithResponsiveViewport } from './utils/example-utils';
+import { MockRoot } from './utils/mock-root';
+import { MockSearch } from './utils/mock-search';
+
+const connieNavLogo = (
+	<NavLogo href="" logo={ConfluenceLogo} icon={ConfluenceIcon} label="Home page" />
+);
+const administrationNavLogo = (
+	<NavLogo
+		href=""
+		logo={AtlassianAdministrationLogo}
+		icon={AtlassianAdministrationIcon}
+		label="Home page"
+	/>
+);
+
+const defaultTopNavEnd = (
+	<Fragment>
+		<MenuListItem>
+			<TopNavButton iconBefore={AiChatIcon}>Chat</TopNavButton>
+		</MenuListItem>
+		<Help label="Help" />
+		<Notifications
+			badge={() => (
+				<Badge max={9} appearance="important">
+					{99999}
+				</Badge>
+			)}
+			label="Notifications"
+		/>
+		<Settings label="Settings" />
+
+		<DropdownMenu
+			shouldRenderToParent
+			trigger={({ triggerRef: ref, ...props }) => <Profile ref={ref} label="Profile" {...props} />}
+		>
+			<DropdownItemGroup>
+				<DropdownItem>Account</DropdownItem>
+			</DropdownItemGroup>
+		</DropdownMenu>
+	</Fragment>
+);
+
+const upgradeButton = (
+	<MenuListItem>
+		<EditionAwarenessButton status="default" icon="missing-payment-details">
+			Add payment details
+		</EditionAwarenessButton>
+	</MenuListItem>
+);
+
+const extendedTopNavEnd = (
+	<Fragment>
+		{upgradeButton}
+		{defaultTopNavEnd}
+	</Fragment>
+);
+
+const defaultTopNavMiddle = (
+	<Fragment>
+		<MockSearch />
+		<CreateButton>Create</CreateButton>
+	</Fragment>
+);
+
+function TopNavigationInstance({
+	navLogo,
+	topNavEnd = defaultTopNavEnd,
+	topNavMiddle = defaultTopNavMiddle,
+}: {
+	navLogo: ReactNode;
+	topNavEnd?: ReactNode;
+	topNavMiddle?: ReactNode;
+}) {
+	return (
+		<MockRoot>
+			<TopNav>
+				<TopNavStart>
+					<SideNavToggleButton
+						testId="side-nav-toggle-button"
+						collapseLabel="Collapse sidebar"
+						expandLabel="Expand sidebar"
+					/>
+					<AppSwitcher label="Switch apps" />
+					{navLogo}
+					<CustomTitle>Custom app title</CustomTitle>
+				</TopNavStart>
+				<TopNavMiddle>{topNavMiddle}</TopNavMiddle>
+				<TopNavEnd>{topNavEnd}</TopNavEnd>
+			</TopNav>
+		</MockRoot>
+	);
+}
+
+export default function TopNavigationStressExample() {
+	return (
+		<WithResponsiveViewport>
+			<Stack space="space.400">
+				<Stack space="space.100">
+					<Heading as="h2" size="small">
+						Wide left column
+					</Heading>
+					<TopNavigationInstance navLogo={administrationNavLogo} />
+				</Stack>
+
+				<Stack space="space.100">
+					<Heading as="h2" size="small">
+						Wide right column
+					</Heading>
+					<TopNavigationInstance navLogo={connieNavLogo} topNavEnd={extendedTopNavEnd} />
+				</Stack>
+
+				<Stack space="space.100">
+					<Heading as="h2" size="small">
+						Small left and right column
+					</Heading>
+					<TopNavigationInstance navLogo={connieNavLogo} />
+				</Stack>
+
+				<Stack space="space.100">
+					<Heading as="h2" size="small">
+						Wide left and right column
+					</Heading>
+					<TopNavigationInstance navLogo={administrationNavLogo} topNavEnd={extendedTopNavEnd} />
+				</Stack>
+
+				<Stack space="space.100">
+					<Heading as="h2" size="small">
+						No create button
+					</Heading>
+					<TopNavigationInstance
+						navLogo={administrationNavLogo}
+						topNavEnd={extendedTopNavEnd}
+						topNavMiddle={<MockSearch />}
+					/>
+				</Stack>
+
+				<Stack space="space.100">
+					<Heading as="h2" size="small">
+						No common actions
+					</Heading>
+					<TopNavigationInstance
+						navLogo={administrationNavLogo}
+						topNavEnd={extendedTopNavEnd}
+						topNavMiddle={null}
+					/>
+				</Stack>
+
+				<Stack space="space.100">
+					<Heading as="h2" size="small">
+						Extra common actions
+					</Heading>
+					<TopNavigationInstance
+						navLogo={administrationNavLogo}
+						topNavEnd={extendedTopNavEnd}
+						topNavMiddle={
+							<Fragment>
+								{defaultTopNavMiddle}
+								<TopNavButton iconBefore={PremiumIcon}>Artisanal addition</TopNavButton>
+							</Fragment>
+						}
+					/>
+				</Stack>
+
+				<Stack space="space.100">
+					{/**
+					 * A super wide right column like this is not 'supported',
+					 * but we want to make sure the extreme edge case breaks down in a reasonable way.
+					 */}
+					<Heading as="h2" size="small">
+						Super wide right column
+					</Heading>
+					<TopNavigationInstance
+						navLogo={connieNavLogo}
+						topNavEnd={
+							<Fragment>
+								{upgradeButton}
+								{upgradeButton}
+								{extendedTopNavEnd}
+							</Fragment>
+						}
+					/>
+				</Stack>
+
+				<Stack space="space.100">
+					<Heading as="h2" size="small">
+						Trial upgrade button
+					</Heading>
+					<TopNavigationInstance
+						navLogo={connieNavLogo}
+						topNavEnd={
+							<Fragment>
+								<EditionAwarenessButton status="default" icon="upgrade" upgradeIconType="gem">
+									Standard trial
+								</EditionAwarenessButton>
+								{defaultTopNavEnd}
+							</Fragment>
+						}
+					/>
+				</Stack>
+			</Stack>
+		</WithResponsiveViewport>
+	);
+}

package/examples/top-navigation-themed-buttons.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import PremiumIcon from '@atlaskit/icon/core/premium';
+import StarUnstarredIcon from '@atlaskit/icon/core/star-unstarred';
+import { AtlassianIcon, AtlassianLogo } from '@atlaskit/logo';
+import { MenuListItem } from '@atlaskit/navigation-system';
+import {
+	TopNavButton,
+	TopNavLinkButton,
+} from '@atlaskit/navigation-system/experimental/top-nav-button';
+import { SideNavToggleButton } from '@atlaskit/navigation-system/layout/side-nav';
+import { TopNav, TopNavEnd, TopNavStart } from '@atlaskit/navigation-system/layout/top-nav';
+import { AppSwitcher, NavLogo } from '@atlaskit/navigation-system/top-nav-items';
+
+import { MockRoot } from './utils/mock-root';
+
+export default function TopNavigationThemedButtonsExample() {
+	return (
+		/**
+		 * 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
+		 */
+		<MockRoot>
+			<TopNav
+				UNSAFE_theme={{
+					backgroundColor: { r: 50, g: 100, b: 200 },
+					highlightColor: { r: 50, g: 50, b: 50 },
+				}}
+			>
+				{/**
+				 * These styles are representative of what products have in their global stylesheets.
+				 */}
+				{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles */}
+				<style>{`
+					a, a:hover, a:focus, a:active {
+						color: red;
+						text-decoration: underline;
+					}
+				`}</style>
+				<TopNavStart>
+					<SideNavToggleButton collapseLabel="Collapse sidebar" expandLabel="Expand sidebar" />
+					<AppSwitcher label="App switcher" />
+					<NavLogo
+						href="http://www.atlassian.design"
+						logo={AtlassianLogo}
+						icon={AtlassianIcon}
+						label="Home page"
+					/>
+				</TopNavStart>
+				<TopNavEnd>
+					<MenuListItem>
+						<TopNavButton iconBefore={StarUnstarredIcon}>Button</TopNavButton>
+					</MenuListItem>
+					<MenuListItem>
+						<TopNavLinkButton href="https://atlassian.design" iconBefore={PremiumIcon}>
+							LinkButton
+						</TopNavLinkButton>
+					</MenuListItem>
+				</TopNavEnd>
+			</TopNav>
+		</MockRoot>
+	);
+}

package/examples/top-navigation-theming-logged-out.tsx

@@ -0,0 +1,75 @@
+import React, { useReducer } from 'react';
+
+import { AtlassianIcon, AtlassianLogo } from '@atlaskit/logo';
+import {
+	AppSwitcher,
+	CreateButton,
+	Help,
+	LogIn,
+	NavLogo,
+	SideNavToggleButton,
+	TopNav,
+	TopNavEnd,
+	TopNavMiddle,
+	TopNavStart,
+} from '@atlaskit/navigation-system';
+
+// TODO: consider exposing this type properly, but it isn't needed for normal usage
+// eslint-disable-next-line @atlaskit/platform/use-entrypoints-in-examples
+import { type CustomTheme } from '../src/ui/top-nav-items/themed/get-custom-theme-styles';
+
+import { WithResponsiveViewport } from './utils/example-utils';
+import { MockRoot } from './utils/mock-root';
+import { MockSearch } from './utils/mock-search';
+
+const TopNavigationThemingInstance = ({ customTheme }: { customTheme?: CustomTheme }) => {
+	const [isAppSwitcherSelected, toggleIsAppSwitcherSelected] = useReducer(
+		(isSelected) => !isSelected,
+		false,
+	);
+
+	const [isHelpSelected, toggleIsHelpSelected] = useReducer((isSelected) => !isSelected, false);
+
+	return (
+		/**
+		 * 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
+		 */
+		<MockRoot>
+			<TopNav UNSAFE_theme={customTheme}>
+				<TopNavStart>
+					<SideNavToggleButton collapseLabel="Collapse sidebar" expandLabel="Expand sidebar" />
+					<AppSwitcher
+						label="App switcher"
+						onClick={toggleIsAppSwitcherSelected}
+						isSelected={isAppSwitcherSelected}
+					/>
+					<NavLogo
+						href="http://www.atlassian.design"
+						logo={AtlassianLogo}
+						icon={AtlassianIcon}
+						label="Home page"
+					/>
+				</TopNavStart>
+				<TopNavMiddle>
+					<MockSearch />
+					<CreateButton>Create</CreateButton>
+				</TopNavMiddle>
+				<TopNavEnd>
+					<Help label="Help" onClick={toggleIsHelpSelected} isSelected={isHelpSelected} />
+					<LogIn label="Log in" href="" />
+				</TopNavEnd>
+			</TopNav>
+		</MockRoot>
+	);
+};
+
+export const TopNavigationThemingLoggedOutExample = () => (
+	<WithResponsiveViewport>
+		<TopNavigationThemingInstance
+			customTheme={{ backgroundColor: '#e8cbd2', highlightColor: '#333' }}
+		/>
+	</WithResponsiveViewport>
+);
+
+export default TopNavigationThemingLoggedOutExample;

package/examples/top-navigation-theming-with-picker.tsx

@@ -0,0 +1,130 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useReducer, useState } from 'react';
+
+import { jsx } from '@compiled/react';
+
+import AKBadge from '@atlaskit/badge';
+import { Label } from '@atlaskit/form';
+import { AtlassianIcon, AtlassianLogo } from '@atlaskit/logo';
+import { Main, Root, SideNav } from '@atlaskit/navigation-system';
+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,
+	Profile,
+	Settings,
+} from '@atlaskit/navigation-system/top-nav-items';
+import { Notifications } from '@atlaskit/navigation-system/top-nav-items/notifications';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { JiraIcon, JiraLogo } from '@atlaskit/temp-nav-app-icons/jira';
+
+// TODO: consider exposing this type properly, but it isn't needed for normal usage
+// eslint-disable-next-line @atlaskit/platform/use-entrypoints-in-examples
+import { type CustomTheme } from '../src/ui/top-nav-items/themed/get-custom-theme-styles';
+
+import { WithResponsiveViewport } from './utils/example-utils';
+import { MockSearch } from './utils/mock-search';
+
+const Badge = () => <AKBadge appearance="important">{5}</AKBadge>;
+
+const TopNavigation = ({ customTheme }: { customTheme?: CustomTheme }) => {
+	const [isAppSwitcherSelected, toggleIsAppSwitcherSelected] = useReducer(
+		(isSelected) => !isSelected,
+		false,
+	);
+	const [isChatSelected, toggleIsChatSelected] = useReducer((isSelected) => !isSelected, true);
+	const [isNotificationsSelected, toggleIsNotificationsSelected] = useReducer(
+		(isSelected) => !isSelected,
+		false,
+	);
+	const [isHelpSelected, toggleIsHelpSelected] = useReducer((isSelected) => !isSelected, false);
+	const [isSettingsSelected, toggleIsSettingsSelected] = useReducer(
+		(isSelected) => !isSelected,
+		false,
+	);
+	const [isProfileSelected, toggleIsProfileSelected] = useReducer(
+		(isSelected) => !isSelected,
+		false,
+	);
+
+	return (
+		<TopNav UNSAFE_theme={customTheme}>
+			<TopNavStart>
+				<SideNavToggleButton collapseLabel="Collapse sidebar" expandLabel="Expand sidebar" />
+				<AppSwitcher
+					label="App switcher"
+					onClick={toggleIsAppSwitcherSelected}
+					isSelected={isAppSwitcherSelected}
+				/>
+				<NavLogo
+					href="http://www.atlassian.design"
+					logo={fg('platform-team25-app-icon-tiles') ? JiraLogo : AtlassianLogo}
+					icon={fg('platform-team25-app-icon-tiles') ? JiraIcon : AtlassianIcon}
+					label="Home page"
+				/>
+			</TopNavStart>
+			<TopNavMiddle>
+				<MockSearch />
+				<CreateButton>Create</CreateButton>
+			</TopNavMiddle>
+			<TopNavEnd>
+				<ChatButton onClick={toggleIsChatSelected} isSelected={isChatSelected}>
+					Chat
+				</ChatButton>
+				<Notifications
+					badge={Badge}
+					isSelected={isNotificationsSelected}
+					onClick={toggleIsNotificationsSelected}
+					label="Notifications"
+				/>
+				<Help label="Help" onClick={toggleIsHelpSelected} isSelected={isHelpSelected} />
+				<Settings
+					isSelected={isSettingsSelected}
+					onClick={toggleIsSettingsSelected}
+					label="Settings"
+				/>
+				<Profile
+					isSelected={isProfileSelected}
+					onClick={toggleIsProfileSelected}
+					label="Your profile"
+				/>
+			</TopNavEnd>
+		</TopNav>
+	);
+};
+
+export const TopNavigationThemingWithPickerExample = () => {
+	const [backgroundColor, setColor] = useState('#FFFFFF');
+
+	return (
+		<WithResponsiveViewport>
+			<Root>
+				<TopNavigation customTheme={{ backgroundColor, highlightColor: '#d8388a' }} />
+				<SideNav>Hello world</SideNav>
+				<Main>
+					<Label htmlFor="background-color">Background color</Label>
+					<input
+						type="color"
+						id="background-color"
+						value={backgroundColor}
+						onChange={(e) => setColor(e.currentTarget.value)}
+					/>
+				</Main>
+			</Root>
+		</WithResponsiveViewport>
+	);
+};
+
+export default TopNavigationThemingWithPickerExample;

package/examples/top-navigation-theming.tsx

@@ -0,0 +1,173 @@
+import React, { useReducer } from 'react';
+
+import AKBadge from '@atlaskit/badge';
+import { JiraIcon as JiraIconOld, JiraLogo as JiraLogoOld } from '@atlaskit/logo';
+import { parseHex } from '@atlaskit/navigation-system/experimental/color-utils/parse-hex';
+import { parseHsl } from '@atlaskit/navigation-system/experimental/color-utils/parse-hsl';
+import { parseRgb } from '@atlaskit/navigation-system/experimental/color-utils/parse-rgb';
+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,
+	CustomTitle,
+	Help,
+	NavLogo,
+	Profile,
+	Settings,
+} from '@atlaskit/navigation-system/top-nav-items';
+import { Notifications } from '@atlaskit/navigation-system/top-nav-items/notifications';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Stack } from '@atlaskit/primitives';
+import { JiraIcon, JiraLogo } from '@atlaskit/temp-nav-app-icons/jira';
+
+// TODO: consider exposing this type properly, but it isn't needed for normal usage
+// eslint-disable-next-line @atlaskit/platform/use-entrypoints-in-examples
+import { type CustomTheme } from '../src/ui/top-nav-items/themed/get-custom-theme-styles';
+
+import { WithResponsiveViewport } from './utils/example-utils';
+import { MockRoot } from './utils/mock-root';
+import { MockSearch } from './utils/mock-search';
+
+const Badge = () => <AKBadge appearance="important">{5}</AKBadge>;
+
+const TopNavigationThemingInstance = ({ customTheme }: { customTheme?: CustomTheme }) => {
+	const [isAppSwitcherSelected, toggleIsAppSwitcherSelected] = useReducer(
+		(isSelected) => !isSelected,
+		false,
+	);
+	const [isChatSelected, toggleIsChatSelected] = useReducer((isSelected) => !isSelected, false);
+	const [isNotificationsSelected, toggleIsNotificationsSelected] = useReducer(
+		(isSelected) => !isSelected,
+		false,
+	);
+	const [isHelpSelected, toggleIsHelpSelected] = useReducer((isSelected) => !isSelected, false);
+	const [isSettingsSelected, toggleIsSettingsSelected] = useReducer(
+		(isSelected) => !isSelected,
+		true,
+	);
+	const [isProfileSelected, toggleIsProfileSelected] = useReducer(
+		(isSelected) => !isSelected,
+		false,
+	);
+
+	return (
+		/**
+		 * 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
+		 */
+		<MockRoot>
+			<TopNav UNSAFE_theme={customTheme}>
+				<TopNavStart>
+					<SideNavToggleButton collapseLabel="Collapse sidebar" expandLabel="Expand sidebar" />
+					<AppSwitcher
+						label="App switcher"
+						onClick={toggleIsAppSwitcherSelected}
+						isSelected={isAppSwitcherSelected}
+					/>
+					<NavLogo
+						href="http://www.atlassian.design"
+						logo={fg('platform-team25-app-icon-tiles') ? JiraLogo : JiraLogoOld}
+						icon={fg('platform-team25-app-icon-tiles') ? JiraIcon : JiraIconOld}
+						label="Home page"
+					/>
+					<CustomTitle>Optional custom title</CustomTitle>
+				</TopNavStart>
+				<TopNavMiddle>
+					<MockSearch />
+					<CreateButton>Create</CreateButton>
+				</TopNavMiddle>
+				<TopNavEnd>
+					<ChatButton onClick={toggleIsChatSelected} isSelected={isChatSelected}>
+						Chat
+					</ChatButton>
+					<Notifications
+						badge={Badge}
+						isSelected={isNotificationsSelected}
+						onClick={toggleIsNotificationsSelected}
+						label="Notifications"
+					/>
+					<Help label="Help" onClick={toggleIsHelpSelected} isSelected={isHelpSelected} />
+					<Settings
+						isSelected={isSettingsSelected}
+						onClick={toggleIsSettingsSelected}
+						label="Settings"
+					/>
+					<Profile
+						isSelected={isProfileSelected}
+						onClick={toggleIsProfileSelected}
+						label="Your profile"
+					/>
+				</TopNavEnd>
+			</TopNav>
+		</MockRoot>
+	);
+};
+
+export const TopNavigationThemingExample = () => (
+	<WithResponsiveViewport>
+		<Stack space="space.200">
+			<TopNavigationThemingInstance
+				customTheme={{ backgroundColor: parseHex('#FFF'), highlightColor: parseHex('#d8388a') }}
+			/>
+			<TopNavigationThemingInstance
+				// Hex notation is still supported for backwards compatibility
+				// Keeping at least some VR coverage for it
+				customTheme={{ backgroundColor: '#e8cbd2', highlightColor: '#333' }}
+			/>
+			<TopNavigationThemingInstance
+				customTheme={{ backgroundColor: parseHex('#ef816b'), highlightColor: parseHex('#FDEE80') }}
+			/>
+			<TopNavigationThemingInstance
+				customTheme={{ backgroundColor: parseHex('#997A82'), highlightColor: parseHex('#333') }}
+			/>
+			<TopNavigationThemingInstance
+				customTheme={{ backgroundColor: parseHex('#5B5FAE'), highlightColor: parseHex('#6FF2B4') }}
+			/>
+			<TopNavigationThemingInstance
+				customTheme={{ backgroundColor: parseHex('#000448'), highlightColor: parseHex('#6FF2B4') }}
+			/>
+			<TopNavigationThemingInstance
+				customTheme={{ backgroundColor: parseHex('#272727'), highlightColor: parseHex('#E94E34') }}
+			/>
+		</Stack>
+	</WithResponsiveViewport>
+);
+
+export const TopNavigationThemingSingleExample = () => (
+	<WithResponsiveViewport>
+		<TopNavigationThemingInstance
+			customTheme={{ backgroundColor: parseHex('#000448'), highlightColor: parseHex('#6FF2B4') }}
+		/>
+	</WithResponsiveViewport>
+);
+
+export const TopNavigationThemingRGBExample = () => (
+	<WithResponsiveViewport>
+		<TopNavigationThemingInstance
+			customTheme={{
+				backgroundColor: parseRgb('rgb(200, 100, 0)'),
+				highlightColor: parseRgb('rgb(0, 33, 66)'),
+			}}
+		/>
+	</WithResponsiveViewport>
+);
+
+export const TopNavigationThemingHSLExample = () => (
+	<WithResponsiveViewport>
+		<TopNavigationThemingInstance
+			customTheme={{
+				backgroundColor: parseHsl('hsl(90deg, 75%, 25%)'),
+				highlightColor: parseHsl('hsl(270deg, 66%, 33%)'),
+			}}
+		/>
+	</WithResponsiveViewport>
+);
+
+export default TopNavigationThemingExample;