@atlaskit/navigation-system 0.167.3 → 0.168.0

package/dist/es2019/ui/top-nav-items/{nav-logo.js → nav-logo/nav-logo.js}

@@ -1,16 +1,17 @@
 /* nav-logo.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./nav-logo.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { memo, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Anchor } from '@atlaskit/primitives';
-import { useHasCustomTheme } from './themed/has-custom-theme-context';
+import { useHasCustomTheme } from '../themed/has-custom-theme-context';
+import { LogoRenderer } from './logo-renderer';
 export const themedLogoIcon = '--ds-top-bar-logo-icon';
 export const themedLogoText = '--ds-top-bar-logo-text';
 const anchorStyles = {
   root: "_2rkoiti9 _1e0c1txw _4cvr1h6o _4t3izwfg",
-  newBorderRadius: "_2rkoftgi",
+  customLogoBorderRadius: "_2rko1l7b",
   newMargin: "_ahbq1b66",
   newInteractionStates: "_irr3166n _1di61wwy",
   newInteractionStatesCustomTheming: "_irr31rps _1di6yhlj"
@@ -29,7 +30,7 @@ const logoContainerStyles = {
 /**
  * __Nav logo__
  *
- * The product logo for the top navigation.
+ * Custom image logo for the top navigation.
  *
  * To provide a responsive experience, it requires both a logo and an icon component.
  * The logo component will be used for large viewports, and the icon component will be used for small viewports.
@@ -80,43 +81,15 @@ export const NavLogo = ({
     // @ts-expect-error - non-standard values for `borderRadius` and the custom theming interaction states
     // eslint-disable-next-line @compiled/no-suppress-xcss
     ,
-    xcss: cx(anchorStyles.root, fg('platform_design_system_nav_logo_interaction_states') && anchorStyles.newMargin, fg('platform_design_system_nav_logo_interaction_states') && anchorStyles.newBorderRadius, fg('platform_design_system_nav_logo_interaction_states') && (hasCustomTheme ? anchorStyles.newInteractionStatesCustomTheming : anchorStyles.newInteractionStates)),
+    xcss: cx(anchorStyles.root, fg('platform_design_system_nav_logo_interaction_states') && anchorStyles.customLogoBorderRadius, fg('platform_design_system_nav_logo_interaction_states') && anchorStyles.newMargin, fg('platform_design_system_nav_logo_interaction_states') && (hasCustomTheme ? anchorStyles.newInteractionStatesCustomTheming : anchorStyles.newInteractionStates)),
     onClick: onClick
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([sharedIconOrLogoContainerStyles.root, iconContainerStyles.root, fg('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged])
-  }, /*#__PURE__*/React.createElement(NavLogoRenderer, {
+  }, /*#__PURE__*/React.createElement(LogoRenderer, {
     logoOrIcon: icon
   })), /*#__PURE__*/React.createElement("div", {
     className: ax([sharedIconOrLogoContainerStyles.root, logoContainerStyles.root, fg('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged])
-  }, /*#__PURE__*/React.createElement(NavLogoRenderer, {
+  }, /*#__PURE__*/React.createElement(LogoRenderer, {
     logoOrIcon: logo
   })));
-};
-function NavLogoRenderer({
-  logoOrIcon
-}) {
-  return fg('jiv-20710-fix-nav-rerender') ? /*#__PURE__*/React.createElement(NavLogoRendererMemo, {
-    logoOrIcon: logoOrIcon
-  }) : /*#__PURE__*/React.createElement(NavLogoRendererNoMemo, {
-    logoOrIcon: logoOrIcon
-  });
-}
-const NavLogoRendererMemo = /*#__PURE__*/memo(NavLogoRendererNoMemo);
-function NavLogoRendererNoMemo({
-  logoOrIcon: LogoOrIcon
-}) {
-  const hasCustomTheme = useHasCustomTheme();
-  if (hasCustomTheme) {
-    return /*#__PURE__*/React.createElement(LogoOrIcon, {
-      size: "small",
-      label: "",
-      iconColor: `var(${themedLogoIcon})`,
-      textColor: `var(${themedLogoText})`
-    });
-  }
-  return /*#__PURE__*/React.createElement(LogoOrIcon, {
-    size: "small",
-    label: "",
-    appearance: "brand"
-  });
-}
+};

package/dist/es2019/ui/top-nav-items/themed/get-custom-theme-styles.js

@@ -1,4 +1,4 @@
-import { themedLogoIcon, themedLogoText } from '../nav-logo';
+import { themedLogoIcon, themedLogoText } from '../nav-logo/nav-logo';
 import { themedButtonBackground, themedButtonBackgroundHovered, themedButtonBackgroundPressed, themedButtonBorder, themedButtonDisabledBackground, themedButtonDisabledText, themedButtonPrimaryBackground, themedButtonPrimaryBackgroundHovered, themedButtonPrimaryBackgroundPressed, themedButtonPrimaryText, themedButtonSelectedBackground, themedButtonSelectedBackgroundHovered, themedButtonSelectedBackgroundPressed, themedButtonSelectedBorder, themedButtonSelectedText } from './button';
 import { getColorMode, getTextColor, isLight, simpleAlphaComposite } from './color-utils';
 import { parseHex } from './color-utils/formats/hex';

package/dist/esm/entry-points/top-nav-items/index.js

@@ -1,5 +1,6 @@
 export { AppSwitcher } from '../../ui/top-nav-items/app-switcher';
-export { NavLogo } from '../../ui/top-nav-items/nav-logo';
+export { NavLogo } from '../../ui/top-nav-items/nav-logo/nav-logo';
+export { AppLogo } from '../../ui/top-nav-items/nav-logo/app-logo';
 export { Search } from '../../ui/top-nav-items/search';
 export { ChatButton } from '../../ui/top-nav-items/chat-button';
 export { EndItem } from '../../ui/top-nav-items/end-item';

package/dist/esm/index.js

@@ -32,7 +32,8 @@ export { PanelSplitter } from './ui/page-layout/panel-splitter/panel-splitter';
 export { PanelSplitterProvider } from './ui/page-layout/panel-splitter/provider';
 export { TopNavStart } from './ui/page-layout/top-nav/top-nav-start';
 export { AppSwitcher } from './ui/top-nav-items/app-switcher';
-export { NavLogo } from './ui/top-nav-items/nav-logo';
+export { NavLogo } from './ui/top-nav-items/nav-logo/nav-logo';
+export { AppLogo } from './ui/top-nav-items/nav-logo/app-logo';
 export { TopNavMiddle } from './ui/page-layout/top-nav/top-nav-middle';
 export { Search } from './ui/top-nav-items/search';
 export { ChatButton } from './ui/top-nav-items/chat-button';

package/dist/esm/ui/top-nav-items/nav-logo/app-logo.compiled.css

@@ -0,0 +1,24 @@
+
+._2rko19bv{border-radius:10px}
+._18zr1b66{padding-inline:var(--ds-space-050,4px)}._18m915vq{overflow-y:hidden}
+._1bsb1ris{width:max-content}
+._1e0c1txw{display:flex}
+._1e0cglyw{display:none}
+._1o9zidpf{flex-shrink:0}
+._1reo15vq{overflow-x:hidden}
+._1toh1r31._1toh1r31{text-decoration-color:currentColor}
+._1w901kw7._1w901kw7{color:inherit}
+._4cvr1h6o{align-items:center}
+._4t3izwfg{height:2pc}
+._5jyqglyw._5jyqglyw{text-decoration-line:none}
+._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
+._mrqmnqa1._mrqmnqa1{text-decoration-style:solid}
+._p12f1tcg{max-width:24px}
+._p12fnklw{max-width:20pc}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._irr31rps:hover{background-color:var(--ds-top-bar-button-background-hovered)}
+._1di61wwy:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)!important}
+._1di6yhlj:active{background-color:var(--ds-top-bar-button-background-pressed)!important}
+@media (min-width:64rem){._10y418uv._10y418uv{display:initial}}

package/dist/esm/ui/top-nav-items/nav-logo/app-logo.js

@@ -0,0 +1,95 @@
+/* app-logo.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./app-logo.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useRef } from 'react';
+import { cx } from '@compiled/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Anchor, Inline, Text } from '@atlaskit/primitives';
+import Tooltip from '@atlaskit/tooltip';
+import { useHasCustomTheme } from '../themed/has-custom-theme-context';
+import { LogoRenderer } from './logo-renderer';
+var anchorStyles = {
+  root: "_2rko19bv _1e0c1txw _4cvr1h6o _4t3izwfg _1o9zidpf _1toh1r31 _5jyqglyw _mrqmnqa1 _1w901kw7",
+  newMargin: "_ahbq1b66",
+  newInteractionStates: "_irr3166n _1di61wwy",
+  newInteractionStatesCustomTheming: "_irr31rps _1di6yhlj"
+};
+var logoWrapperStyles = {
+  root: "_18zr1b66"
+};
+var iconContainerStyles = {
+  root: "_1reo15vq _18m915vq _1e0c1txw _p12f1tcg"
+};
+var logoTextStyles = {
+  root: "_1bsb1ris _p12fnklw _uiztglyw _y4tiv77o _1e0cglyw _10y418uv"
+};
+function isTextClamped(element) {
+  // Checking for vertical height rather than horizontal height.
+  // When text is "clamped", it's technically being clamped vertically! 🤯
+  return element.scrollHeight > element.clientHeight;
+}
+
+/**
+ * __App logo__
+ *
+ * The app logo for the top navigation.
+ *
+ * To provide a responsive experience, label text will render next to an icon at larger viewports.
+ */
+export var AppLogo = function AppLogo(_ref) {
+  var name = _ref.name,
+    label = _ref.label,
+    href = _ref.href,
+    icon = _ref.icon,
+    onClick = _ref.onClick;
+  var ref = useRef(null);
+  var nameRef = useRef(null);
+  var hasCustomTheme = useHasCustomTheme();
+
+  /**
+      * Show the tooltip if the name is truncated
+   */
+  var canTooltipAppear = useCallback(function () {
+    var text = nameRef.current;
+    return Boolean(text && isTextClamped(text));
+  }, []);
+  return /*#__PURE__*/React.createElement(Anchor, {
+    ref: ref,
+    "aria-label": label,
+    href: href
+    // @ts-expect-error - non-standard values for `borderRadius` and the custom theming interaction states
+    // eslint-disable-next-line @compiled/no-suppress-xcss
+    ,
+    xcss: cx(anchorStyles.root, fg('platform_design_system_nav_logo_interaction_states') && anchorStyles.newMargin, fg('platform_design_system_nav_logo_interaction_states') && (hasCustomTheme ? anchorStyles.newInteractionStatesCustomTheming : anchorStyles.newInteractionStates)),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Inline, {
+    space: "space.075",
+    alignBlock: "center",
+    xcss: logoWrapperStyles.root,
+    "aria-label": label
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([iconContainerStyles.root])
+  }, /*#__PURE__*/React.createElement(LogoRenderer, {
+    logoOrIcon: icon
+  })), /*#__PURE__*/React.createElement("span", {
+    className: ax([logoTextStyles.root])
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: name,
+    position: "bottom",
+    ignoreTooltipPointerEvents: true,
+    hideTooltipOnMouseDown: true
+    // We don't need a duplicate hidden element containing tooltip content
+    // as the content of the tooltip matches what is rendered in the nav item.
+    ,
+    isScreenReaderAnnouncementDisabled: true,
+    canAppear: canTooltipAppear
+  }, function (tooltipProps) {
+    return /*#__PURE__*/React.createElement("span", tooltipProps, /*#__PURE__*/React.createElement(Text, {
+      "aria-hidden": true,
+      color: "inherit",
+      weight: "semibold",
+      maxLines: 1,
+      ref: nameRef
+    }, name));
+  }))));
+};

package/dist/esm/ui/top-nav-items/nav-logo/logo-renderer.js

@@ -0,0 +1,33 @@
+/* logo-renderer.tsx generated by @compiled/babel-plugin v0.36.1 */
+import { ax, ix } from "@compiled/react/runtime";
+import React, { memo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useHasCustomTheme } from '../themed/has-custom-theme-context';
+export var themedLogoIcon = '--ds-top-bar-logo-icon';
+export var themedLogoText = '--ds-top-bar-logo-text';
+export function LogoRenderer(_ref) {
+  var logoOrIcon = _ref.logoOrIcon;
+  return fg('jiv-20710-fix-nav-rerender') ? /*#__PURE__*/React.createElement(LogoRendererMemo, {
+    logoOrIcon: logoOrIcon
+  }) : /*#__PURE__*/React.createElement(LogoRendererNoMemo, {
+    logoOrIcon: logoOrIcon
+  });
+}
+var LogoRendererMemo = /*#__PURE__*/memo(LogoRendererNoMemo);
+function LogoRendererNoMemo(_ref2) {
+  var LogoOrIcon = _ref2.logoOrIcon;
+  var hasCustomTheme = useHasCustomTheme();
+  if (hasCustomTheme) {
+    return /*#__PURE__*/React.createElement(LogoOrIcon, {
+      size: "small",
+      label: "",
+      iconColor: "var(".concat(themedLogoIcon, ")"),
+      textColor: "var(".concat(themedLogoText, ")")
+    });
+  }
+  return /*#__PURE__*/React.createElement(LogoOrIcon, {
+    size: "small",
+    label: "",
+    appearance: "brand"
+  });
+}

package/dist/{es2019/ui/top-nav-items → esm/ui/top-nav-items/nav-logo}/nav-logo.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkoftgi{border-radius:8px}
+._2rko1l7b{border-radius:3px}
 ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
 ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
 ._18zru2gc{padding-inline:var(--ds-space-100,8px)}._18m915vq{overflow-y:hidden}

package/dist/esm/ui/top-nav-items/{nav-logo.js → nav-logo/nav-logo.js}

@@ -1,16 +1,17 @@
 /* nav-logo.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./nav-logo.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { memo, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Anchor } from '@atlaskit/primitives';
-import { useHasCustomTheme } from './themed/has-custom-theme-context';
+import { useHasCustomTheme } from '../themed/has-custom-theme-context';
+import { LogoRenderer } from './logo-renderer';
 export var themedLogoIcon = '--ds-top-bar-logo-icon';
 export var themedLogoText = '--ds-top-bar-logo-text';
 var anchorStyles = {
   root: "_2rkoiti9 _1e0c1txw _4cvr1h6o _4t3izwfg",
-  newBorderRadius: "_2rkoftgi",
+  customLogoBorderRadius: "_2rko1l7b",
   newMargin: "_ahbq1b66",
   newInteractionStates: "_irr3166n _1di61wwy",
   newInteractionStatesCustomTheming: "_irr31rps _1di6yhlj"
@@ -29,7 +30,7 @@ var logoContainerStyles = {
 /**
  * __Nav logo__
  *
- * The product logo for the top navigation.
+ * Custom image logo for the top navigation.
  *
  * To provide a responsive experience, it requires both a logo and an icon component.
  * The logo component will be used for large viewports, and the icon component will be used for small viewports.
@@ -79,41 +80,15 @@ export var NavLogo = function NavLogo(_ref) {
     // @ts-expect-error - non-standard values for `borderRadius` and the custom theming interaction states
     // eslint-disable-next-line @compiled/no-suppress-xcss
     ,
-    xcss: cx(anchorStyles.root, fg('platform_design_system_nav_logo_interaction_states') && anchorStyles.newMargin, fg('platform_design_system_nav_logo_interaction_states') && anchorStyles.newBorderRadius, fg('platform_design_system_nav_logo_interaction_states') && (hasCustomTheme ? anchorStyles.newInteractionStatesCustomTheming : anchorStyles.newInteractionStates)),
+    xcss: cx(anchorStyles.root, fg('platform_design_system_nav_logo_interaction_states') && anchorStyles.customLogoBorderRadius, fg('platform_design_system_nav_logo_interaction_states') && anchorStyles.newMargin, fg('platform_design_system_nav_logo_interaction_states') && (hasCustomTheme ? anchorStyles.newInteractionStatesCustomTheming : anchorStyles.newInteractionStates)),
     onClick: onClick
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([sharedIconOrLogoContainerStyles.root, iconContainerStyles.root, fg('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged])
-  }, /*#__PURE__*/React.createElement(NavLogoRenderer, {
+  }, /*#__PURE__*/React.createElement(LogoRenderer, {
     logoOrIcon: icon
   })), /*#__PURE__*/React.createElement("div", {
     className: ax([sharedIconOrLogoContainerStyles.root, logoContainerStyles.root, fg('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged])
-  }, /*#__PURE__*/React.createElement(NavLogoRenderer, {
+  }, /*#__PURE__*/React.createElement(LogoRenderer, {
     logoOrIcon: logo
   })));
-};
-function NavLogoRenderer(_ref2) {
-  var logoOrIcon = _ref2.logoOrIcon;
-  return fg('jiv-20710-fix-nav-rerender') ? /*#__PURE__*/React.createElement(NavLogoRendererMemo, {
-    logoOrIcon: logoOrIcon
-  }) : /*#__PURE__*/React.createElement(NavLogoRendererNoMemo, {
-    logoOrIcon: logoOrIcon
-  });
-}
-var NavLogoRendererMemo = /*#__PURE__*/memo(NavLogoRendererNoMemo);
-function NavLogoRendererNoMemo(_ref3) {
-  var LogoOrIcon = _ref3.logoOrIcon;
-  var hasCustomTheme = useHasCustomTheme();
-  if (hasCustomTheme) {
-    return /*#__PURE__*/React.createElement(LogoOrIcon, {
-      size: "small",
-      label: "",
-      iconColor: "var(".concat(themedLogoIcon, ")"),
-      textColor: "var(".concat(themedLogoText, ")")
-    });
-  }
-  return /*#__PURE__*/React.createElement(LogoOrIcon, {
-    size: "small",
-    label: "",
-    appearance: "brand"
-  });
-}
+};

package/dist/esm/ui/top-nav-items/themed/get-custom-theme-styles.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { themedLogoIcon, themedLogoText } from '../nav-logo';
+import { themedLogoIcon, themedLogoText } from '../nav-logo/nav-logo';
 import { themedButtonBackground, themedButtonBackgroundHovered, themedButtonBackgroundPressed, themedButtonBorder, themedButtonDisabledBackground, themedButtonDisabledText, themedButtonPrimaryBackground, themedButtonPrimaryBackgroundHovered, themedButtonPrimaryBackgroundPressed, themedButtonPrimaryText, themedButtonSelectedBackground, themedButtonSelectedBackgroundHovered, themedButtonSelectedBackgroundPressed, themedButtonSelectedBorder, themedButtonSelectedText } from './button';
 import { getColorMode, getTextColor, isLight, simpleAlphaComposite } from './color-utils';
 import { parseHex } from './color-utils/formats/hex';

package/dist/types/entry-points/top-nav-items/index.d.ts

@@ -1,5 +1,6 @@
 export { AppSwitcher } from '../../ui/top-nav-items/app-switcher';
-export { NavLogo } from '../../ui/top-nav-items/nav-logo';
+export { NavLogo } from '../../ui/top-nav-items/nav-logo/nav-logo';
+export { AppLogo } from '../../ui/top-nav-items/nav-logo/app-logo';
 export { Search } from '../../ui/top-nav-items/search';
 export { ChatButton } from '../../ui/top-nav-items/chat-button';
 export { EndItem } from '../../ui/top-nav-items/end-item';

package/dist/types/index.d.ts

@@ -33,7 +33,8 @@ export { PanelSplitterProvider } from './ui/page-layout/panel-splitter/provider'
 export type { ResizeBounds } from './ui/page-layout/panel-splitter/types';
 export { TopNavStart } from './ui/page-layout/top-nav/top-nav-start';
 export { AppSwitcher } from './ui/top-nav-items/app-switcher';
-export { NavLogo } from './ui/top-nav-items/nav-logo';
+export { NavLogo } from './ui/top-nav-items/nav-logo/nav-logo';
+export { AppLogo } from './ui/top-nav-items/nav-logo/app-logo';
 export { TopNavMiddle } from './ui/page-layout/top-nav/top-nav-middle';
 export { Search } from './ui/top-nav-items/search';
 export { ChatButton } from './ui/top-nav-items/chat-button';

package/dist/types/ui/top-nav-items/nav-logo/app-logo.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { LogoProps } from '@atlaskit/logo';
+import type { IconProps as TempIconProps } from '@atlaskit/temp-nav-app-icons/types';
+/**
+ * __App logo__
+ *
+ * The app logo for the top navigation.
+ *
+ * To provide a responsive experience, label text will render next to an icon at larger viewports.
+ */
+export declare const AppLogo: ({ name, label, href, icon, onClick, }: {
+    /**
+     * The name of the app. Will be displayed next to the logo in wider viewports, and is used as an accessible label at smaller viewports.
+     */
+    name: string;
+    /**
+     * Provide an accessible label, often used by screen readers.
+     * This label should include the name of the app, and if applicable,
+     * the location the user will navigate to on click.
+     */
+    label: string;
+    /**
+     * The URL to navigate to when the element is clicked.
+     */
+    href: string;
+    /**
+     * The icon to render.
+     */
+    icon: ((props: LogoProps) => JSX.Element) | ((props: TempIconProps) => JSX.Element);
+    /**
+     * Handler called on click.
+     */
+    onClick?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+}) => JSX.Element;

package/dist/types/ui/top-nav-items/nav-logo/logo-renderer.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { LogoProps } from '@atlaskit/logo';
+import type { IconProps as TempIconProps, LogoProps as TempLogoProps } from '@atlaskit/temp-nav-app-icons/types';
+export declare const themedLogoIcon = "--ds-top-bar-logo-icon";
+export declare const themedLogoText = "--ds-top-bar-logo-text";
+export declare function LogoRenderer({ logoOrIcon }: React.ComponentProps<typeof LogoRendererNoMemo>): JSX.Element;
+declare function LogoRendererNoMemo({ logoOrIcon: LogoOrIcon, }: {
+    logoOrIcon: ((props: LogoProps) => JSX.Element) | ((props: TempLogoProps) => JSX.Element) | ((props: TempIconProps) => JSX.Element);
+}): JSX.Element;
+export {};

package/dist/types/ui/top-nav-items/{nav-logo.d.ts → nav-logo/nav-logo.d.ts}

@@ -10,7 +10,7 @@ export declare const themedLogoText = "--ds-top-bar-logo-text";
 /**
  * __Nav logo__
  *
- * The product logo for the top navigation.
+ * Custom image logo for the top navigation.
  *
  * To provide a responsive experience, it requires both a logo and an icon component.
  * The logo component will be used for large viewports, and the icon component will be used for small viewports.

package/dist/types-ts4.5/entry-points/top-nav-items/index.d.ts

@@ -1,5 +1,6 @@
 export { AppSwitcher } from '../../ui/top-nav-items/app-switcher';
-export { NavLogo } from '../../ui/top-nav-items/nav-logo';
+export { NavLogo } from '../../ui/top-nav-items/nav-logo/nav-logo';
+export { AppLogo } from '../../ui/top-nav-items/nav-logo/app-logo';
 export { Search } from '../../ui/top-nav-items/search';
 export { ChatButton } from '../../ui/top-nav-items/chat-button';
 export { EndItem } from '../../ui/top-nav-items/end-item';

package/dist/types-ts4.5/index.d.ts

@@ -33,7 +33,8 @@ export { PanelSplitterProvider } from './ui/page-layout/panel-splitter/provider'
 export type { ResizeBounds } from './ui/page-layout/panel-splitter/types';
 export { TopNavStart } from './ui/page-layout/top-nav/top-nav-start';
 export { AppSwitcher } from './ui/top-nav-items/app-switcher';
-export { NavLogo } from './ui/top-nav-items/nav-logo';
+export { NavLogo } from './ui/top-nav-items/nav-logo/nav-logo';
+export { AppLogo } from './ui/top-nav-items/nav-logo/app-logo';
 export { TopNavMiddle } from './ui/page-layout/top-nav/top-nav-middle';
 export { Search } from './ui/top-nav-items/search';
 export { ChatButton } from './ui/top-nav-items/chat-button';

package/dist/types-ts4.5/ui/top-nav-items/nav-logo/app-logo.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { LogoProps } from '@atlaskit/logo';
+import type { IconProps as TempIconProps } from '@atlaskit/temp-nav-app-icons/types';
+/**
+ * __App logo__
+ *
+ * The app logo for the top navigation.
+ *
+ * To provide a responsive experience, label text will render next to an icon at larger viewports.
+ */
+export declare const AppLogo: ({ name, label, href, icon, onClick, }: {
+    /**
+     * The name of the app. Will be displayed next to the logo in wider viewports, and is used as an accessible label at smaller viewports.
+     */
+    name: string;
+    /**
+     * Provide an accessible label, often used by screen readers.
+     * This label should include the name of the app, and if applicable,
+     * the location the user will navigate to on click.
+     */
+    label: string;
+    /**
+     * The URL to navigate to when the element is clicked.
+     */
+    href: string;
+    /**
+     * The icon to render.
+     */
+    icon: ((props: LogoProps) => JSX.Element) | ((props: TempIconProps) => JSX.Element);
+    /**
+     * Handler called on click.
+     */
+    onClick?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+}) => JSX.Element;

package/dist/types-ts4.5/ui/top-nav-items/nav-logo/logo-renderer.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { LogoProps } from '@atlaskit/logo';
+import type { IconProps as TempIconProps, LogoProps as TempLogoProps } from '@atlaskit/temp-nav-app-icons/types';
+export declare const themedLogoIcon = "--ds-top-bar-logo-icon";
+export declare const themedLogoText = "--ds-top-bar-logo-text";
+export declare function LogoRenderer({ logoOrIcon }: React.ComponentProps<typeof LogoRendererNoMemo>): JSX.Element;
+declare function LogoRendererNoMemo({ logoOrIcon: LogoOrIcon, }: {
+    logoOrIcon: ((props: LogoProps) => JSX.Element) | ((props: TempLogoProps) => JSX.Element) | ((props: TempIconProps) => JSX.Element);
+}): JSX.Element;
+export {};

package/dist/types-ts4.5/ui/top-nav-items/{nav-logo.d.ts → nav-logo/nav-logo.d.ts}

@@ -10,7 +10,7 @@ export declare const themedLogoText = "--ds-top-bar-logo-text";
 /**
  * __Nav logo__
  *
- * The product logo for the top navigation.
+ * Custom image logo for the top navigation.
  *
  * To provide a responsive experience, it requires both a logo and an icon component.
  * The logo component will be used for large viewports, and the icon component will be used for small viewports.

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

@@ -41,8 +41,8 @@ const TopNavSideNavCollapsed = () => (
 					<AppSwitcher label="App switcher" onClick={() => alert('app switcher')} />
 					<NavLogo
 						href="http://www.atlassian.design"
-						logo={AtlassianLogo}
 						icon={AtlassianIcon}
+						logo={AtlassianLogo}
 						label="Home page"
 					/>
 				</TopNavStart>

package/examples/top-nav-with-long-name.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 {
+	AppLogo,
+	AppSwitcher,
+	ChatButton,
+	CreateButton,
+	Help,
+	Notifications,
+	Profile,
+	Search,
+	Settings,
+} from '@atlaskit/navigation-system/top-nav-items';
+import { FocusIcon } from '@atlaskit/temp-nav-app-icons/focus';
+
+import { WithResponsiveViewport } from './utils/example-utils';
+
+const Badge = () => <AKBadge appearance="important">{5}</AKBadge>;
+
+export default function TopNavWithLongProductName() {
+	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" />
+						<AppLogo
+							href="http://www.atlassian.design"
+							icon={() => <FocusIcon size="24" />}
+							name="Long text to stretch out text label to the maximum width"
+							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-nav-with-temp-nav-app-icon.tsx

@@ -10,17 +10,17 @@ import {
 	TopNavStart,
 } from '@atlaskit/navigation-system/layout/top-nav';
 import {
+	AppLogo,
 	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 { FocusIcon } from '@atlaskit/temp-nav-app-icons/focus';
 
 import { WithResponsiveViewport } from './utils/example-utils';
 
@@ -38,10 +38,10 @@ export default function TopNavWithTempNavAppIcon() {
 					<TopNavStart>
 						<SideNavToggleButton collapseLabel="Collapse sidebar" expandLabel="Expand sidebar" />
 						<AppSwitcher label="App switcher" />
-						<NavLogo
+						<AppLogo
 							href="http://www.atlassian.design"
-							logo={() => <FocusLogo />}
-							icon={() => <FocusIcon size="24" />}
+							icon={FocusIcon}
+							name="Focus"
 							label="Home page"
 						/>
 					</TopNavStart>