@servicetitan/navigation 11.1.2 → 12.0.1

package/src/components/titan-layout/layout-header.module.less

@@ -122,14 +122,15 @@
     min-width: 0;
     overflow-x: auto;
     overflow-y: hidden;
+    flex: 1;
 
     display: flex;
     justify-content: center;
     align-items: center;
 
     &.calculating {
-        .header-navigation {
-            opacity: 0;
+        > * {
+            opacity: 0 !important;
         }
     }
 
@@ -202,6 +203,12 @@
             text-decoration: none;
         }
     }
+    .logo-title {
+        font-family: @display-font-family;
+        font-weight: @font-weight-semibold;
+        font-size: 21px;
+        line-height: 24px;
+    }
 }
 
 .header-desktop {
@@ -231,7 +238,8 @@
 }
 
 //!!!!!!!!!!!!!!! nav links styles !!!!!!!!!!!!!!!//
-.navigation-link {
+.navigation-link,
+.navigation-link-overflow {
     &.navigation-item-icon-state.navigation-item-active {
         .navigation-icon[data-anv][data-anv]:not(.navigation-icon-active) {
             display: none;
@@ -270,34 +278,34 @@
 
         border-radius: 12px;
         font-size: @size-links-tiny;
-    }
-
-    .navigation-item-counter {
-        color: @color-white;
-        font-weight: @font-weight-semibold;
-        font-size: 8px !important;
-        min-width: 16px !important;
-        height: 16px !important;
-        position: absolute;
-        top: 4px;
-        right: -2px;
 
-        &.navigation-item-counter-long {
-            right: -8px;
+        .navigation-item-counter {
+            color: @color-white;
+            font-weight: @font-weight-semibold;
+            font-size: 8px !important;
+            min-width: 16px !important;
+            height: 16px !important;
+            position: absolute;
+            top: 4px;
+            right: -2px;
+
+            &.navigation-item-counter-long {
+                right: -8px;
+            }
         }
-    }
 
-    .navigation-item-label {
-        color: inherit;
-        font-size: @typescale-1;
-        font-family: @base-font-family;
-        font-weight: @font-weight-semibold;
-        margin-left: @spacing-half;
-    }
+        .navigation-item-label {
+            color: inherit;
+            font-size: @typescale-1;
+            font-family: @base-font-family;
+            font-weight: @font-weight-semibold;
+            margin-left: @spacing-half;
+        }
 
-    .navigation-icon[data-anv][data-anv] {
-        height: 24px;
-        width: 24px;
+        .navigation-icon[data-anv][data-anv] {
+            height: 24px;
+            width: 24px;
+        }
     }
 
     &.header-desktop {
@@ -333,7 +341,7 @@
 }
 
 .header-dark .navigation-link,
-.header-navigation > .navigation-link {
+.header-navigation .navigation-link {
     &.navigation-item-active {
         color: @color-blue-200 !important;
     }
@@ -395,47 +403,52 @@
     }
 }
 
-.header-navigation-overflow .navigation-link {
-    display: inline-flex;
-    color: @color-black;
-    padding: @spacing-1 12px;
-    cursor: pointer;
-
-    font-family: @base-font-family;
-    font-size: @typescale-4;
-    position: relative;
-    align-items: center;
-    flex-wrap: nowrap;
-    text-wrap: nowrap;
+.header-navigation-overflow {
+    display: flex;
+    flex-direction: column;
 
     margin-left: -0.5rem;
     margin-right: -0.5rem;
 
-    &:hover {
-        background-color: @color-blue-500;
-        color: @color-white;
-    }
-
-    &.navigation-item-active:not(:hover) {
-        color: @color-blue;
-    }
+    .navigation-link-overflow {
+        display: inline-flex;
+        color: @color-black;
+        padding: @spacing-1 12px;
+        cursor: pointer;
 
-    .navigation-item-label {
         font-family: @base-font-family;
-        font-size: @typescale-2;
-        margin-left: @spacing-half;
-    }
-    .navigation-item-counter {
-        color: @color-white;
-        font-weight: @font-weight-semibold;
-        font-size: 8px !important;
+        font-size: @typescale-4;
+        position: relative;
+        align-items: center;
+        flex-wrap: nowrap;
+        text-wrap: nowrap;
 
-        min-width: 12px !important;
-        height: 12px !important;
-        margin-left: @spacing-half;
-        margin-top: -@spacing-1;
-    }
-    .navigation-icon[data-anv][data-anv] {
-        height: 20px;
+        &:hover {
+            background-color: @color-blue-500;
+            color: @color-white;
+        }
+
+        &.navigation-item-active:not(:hover) {
+            color: @color-blue;
+        }
+
+        .navigation-item-label {
+            font-family: @base-font-family;
+            font-size: @typescale-2;
+            margin-left: @spacing-half;
+        }
+        .navigation-item-counter {
+            color: @color-white;
+            font-weight: @font-weight-semibold;
+            font-size: 8px !important;
+            margin-right: @spacing-half;
+            margin-left: @spacing-half;
+
+            min-width: 12px !important;
+            height: 12px !important;
+        }
+        .navigation-icon[data-anv][data-anv] {
+            height: 20px;
+        }
     }
 }

package/src/components/titan-layout/layout-header.module.less.d.ts

@@ -32,4 +32,5 @@ export const navigationItemCounterLong: string;
 export const navigationItemIconState: string;
 export const navigationItemLabel: string;
 export const navigationLink: string;
+export const navigationLinkOverflow: string;
 

package/src/components/titan-layout/layout-header.tsx

@@ -84,7 +84,11 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
                     )}
                     data-cy="navigation-right"
                 >
-                    {!!rightText && <div className={Styles.heTopRightText}>{rightText}</div>}
+                    {!!rightText && (
+                        <div className={Styles.heTopRightText} data-cy="navigation-right-text">
+                            {rightText}
+                        </div>
+                    )}
                     {right}
                     {profile}
                 </div>

package/src/components/titan-layout/layout-logo.tsx

@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import { ComponentPropsWithoutRef, FC, Fragment, ReactNode } from 'react';
 import { LogoCompanyTitle } from '../logo/logo-company-title';
 import { LogoTitanSvg } from '../logo/logo-titan';
-import { LogoTitanTitle } from '../logo/logo-titan-text';
 import { useTitanLayoutContext } from './layout-context';
 import * as Styles from './layout-header.module.less';
 
@@ -37,26 +36,32 @@ export const LayoutLogo: FC<TitanLayoutLogoProps> = props => {
     return (
         <div className={classNames(Styles.logo)} data-cy="navigation-left">
             {showCompanyTitle ? (
-                <div {...rest} className={Styles.logoCompanyWrapper}>
+                <div data-cy="logo-wrapper" {...rest} className={Styles.logoCompanyWrapper}>
                     <Wrapper to={to} className={Styles.logoLink}>
                         <LogoCompanyTitle />
                     </Wrapper>
                 </div>
             ) : (
                 <Fragment>
-                    <div {...rest} className={Styles.logoShortWrapper}>
+                    <div data-cy="logo-wrapper" {...rest} className={Styles.logoShortWrapper}>
                         <Wrapper to={to} className={Styles.logoLink}>
                             <LogoTitanSvg mantleFill={mantleFill} />
                         </Wrapper>
                     </div>
 
                     {isLogoText(props, isMobile) && (
-                        <LogoTitanTitle className={Styles.logoTitle}>{title}</LogoTitanTitle>
+                        <div className={Styles.logoTitle} data-cy="logo-title">
+                            {title}
+                        </div>
                     )}
                 </Fragment>
             )}
 
-            {!isMobile && postfix && <div className={Styles.logoPostfix}>{postfix}</div>}
+            {!isMobile && postfix && (
+                <div className={Styles.logoPostfix} data-cy="logo-postfix">
+                    {postfix}
+                </div>
+            )}
         </div>
     );
 };

package/src/components/titan-layout/layout-profile.tsx

@@ -50,12 +50,12 @@ const ProfileDropdownContent: FC<ProfileDropdownProps> = props => {
     );
 };
 ProfileDropdownContent.displayName = 'ProfileDropdown';
+const profileId = '--profile';
 
 const MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps> = ({
     children,
     ...props
 }) => {
-    const id = '__profile';
     const [expanded, setExpanded] = useState(false);
     const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
     const { onNotificationsUpdate } = useNotificationsContext();
@@ -65,13 +65,13 @@ const MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps>
     };
 
     useEffect(() => {
-        onNotificationsUpdate(id, hasNotifications);
+        onNotificationsUpdate(profileId, hasNotifications);
     }, [hasNotifications, onNotificationsUpdate]);
 
     return (
         <NotificationsContextProvider>
             <InternalSideNavigationGroup
-                id={id}
+                id={profileId}
                 to={undefined}
                 title="Profile"
                 icon={SvgAccountInactive}
@@ -168,6 +168,7 @@ const MobileProfileDropdownLink: FC<ProfileDropdownLinkProps & NavigationCompone
             {...props}
             to={to}
             title={linkText}
+            parentId={profileId}
             navigationComponent={isExternalLink ? ExternalNavComponent : navigationComponent}
         />
     ) : null;

package/src/components/titan-layout/layout-sidebar-links-internal.tsx

@@ -59,7 +59,9 @@ export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemCon
                 </Fragment>
             )}
 
-            <div className={Styles.navItemTextExpanded}>{title}</div>
+            <div className={Styles.navItemTextExpanded} data-cy="nav-item-label">
+                {title}
+            </div>
             {!!tag && (
                 <BadgeTag
                     data={tag}
@@ -74,7 +76,11 @@ export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemCon
                         className={Styles.navItemGroupToggle}
                         onClick={onExpandToggle}
                     />
-                    <div className={Styles.navItemGroupToggleClick} onClick={onExpandToggle} />
+                    <div
+                        className={Styles.navItemGroupToggleClick}
+                        data-cy="nav-item-group-expand"
+                        onClick={onExpandToggle}
+                    />
                 </div>
             )}
         </div>
@@ -83,6 +89,7 @@ export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemCon
             className={classNames(Styles.navItemTextCollapsed, {
                 [Styles.navItemTextSmall]: !!title && title.length >= 10,
             })}
+            data-cy="nav-item-label"
         >
             {title}
         </div>
@@ -181,10 +188,11 @@ export const InternalSideNavigationTrigger: FC<
 };
 
 export const InternalSideNavigationGroupLink: FC<
-    NavigationSubmenuItemData & NavigationComponentProps
+    NavigationSubmenuItemData & NavigationComponentProps & { parentId: string }
 > = ({
     id,
     counter,
+    parentId,
     tag,
     title,
     to,
@@ -195,8 +203,8 @@ export const InternalSideNavigationGroupLink: FC<
     return (
         <NavigationComponent
             key={id}
-            data-cy={`navigation-item-${id}`}
-            data-pendo={`navigation-item-${id}`}
+            data-cy={`navigation-item-${parentId}--${id}`}
+            data-pendo={`navigation-item-${parentId}--${id}`}
             {...rest}
             to={to}
             className={classNames(Styles.submenuItem, Styles.submenuLink, {
@@ -270,6 +278,7 @@ export const InternalSideNavigationGroup: FC<
                 className={classNames(Styles.submenuWrapper, {
                     [Styles.submenuWrapperCollapsed]: !submenuExpanded,
                 })}
+                data-cy={`navigation-submenu-${props.id}`}
             >
                 <div className={Styles.submenu}>{children}</div>
             </div>

package/src/components/titan-layout/layout-sidebar-links.tsx

@@ -32,7 +32,7 @@ export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebar
             {...props}
             navigationComponent={NavigationComponent}
             submenuExpanded={undefined}
-            dataPrefix="navigation-link"
+            dataPrefix="navigation-item"
             tag={tag}
         />
     );

package/src/components/titan-layout/layout-sidebar.tsx

@@ -205,6 +205,7 @@ const SideNavigationGroupItem: FC<
             tag={tag}
         >
             <SideNavigationGroupContent
+                parentId={props.id}
                 groups={props.submenu?.groups ?? []}
                 navigationComponent={props.navigationComponent}
             />
@@ -233,6 +234,7 @@ const SideNavigationGroupItem: FC<
                         {props.title}
                     </Text>
                     <SideNavigationGroupContent
+                        parentId={props.id}
                         groups={props.submenu?.groups ?? []}
                         navigationComponent={props.navigationComponent}
                     />
@@ -241,10 +243,9 @@ const SideNavigationGroupItem: FC<
         </Popover>
     );
 };
-const SideNavigationGroupContent: FC<NavigationSubmenuData & NavigationComponentProps> = ({
-    groups,
-    navigationComponent,
-}) => {
+const SideNavigationGroupContent: FC<
+    NavigationSubmenuData & NavigationComponentProps & { parentId: string }
+> = ({ groups, parentId, navigationComponent }) => {
     return (
         <Fragment>
             {groups.reduce((out, group, index) => {
@@ -256,7 +257,7 @@ const SideNavigationGroupContent: FC<NavigationSubmenuData & NavigationComponent
                 /* eslint-disable react/no-array-index-key */
                 out.push(
                     <Text
-                        key={`:group:${index}:title`}
+                        key={`:group:${parentId}:${index}:title`}
                         variant="eyebrow"
                         className={classNames(Styles.submenuGroupHeader, {
                             [Styles.submenuGroupHeaderEmpty]: !title,
@@ -268,8 +269,9 @@ const SideNavigationGroupContent: FC<NavigationSubmenuData & NavigationComponent
                 out.push(
                     ...group.links.map((link, index) => (
                         <InternalSideNavigationGroupLink
-                            key={`:${link.id}:${index}`}
+                            key={`:${parentId}:${link.id}:${index}`}
                             {...link}
+                            parentId={parentId}
                             navigationComponent={navigationComponent}
                         />
                     ))

package/src/components/titan-layout/titan-layout.stories.tsx

@@ -365,6 +365,20 @@ export const TitanLayoutAnvil1TopNav = (args: LayoutContentArgs) => (
 );
 
 export const TitanLayoutAnvil1Top = (args: LayoutContentArgs) => (
+    <TitanLayout
+        {...useLayoutProps(args)}
+        appearance="anvil1"
+        navVariant="top"
+        top={undefined}
+        navigationOverflowItems={undefined}
+    >
+        <Anvil1Page>
+            <Content {...args} />
+        </Anvil1Page>
+    </TitanLayout>
+);
+
+export const TitanLayoutAnvil1TopOverflow = (args: LayoutContentArgs) => (
     <TitanLayout {...useLayoutProps(args)} appearance="anvil1" navVariant="top" top={undefined}>
         <Anvil1Page>
             <Content {...args} />

package/src/components/titan-layout/titan-layout.tsx

@@ -316,10 +316,9 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                                             {extraLinks}
                                             {!!extraText && (
                                                 <InternalSideNavigationTrigger
-                                                    id="__extra_text"
+                                                    id="--extra-text"
                                                     title={extraText}
                                                     submenuExpanded={undefined}
-                                                    dataPrefix="navigation-extra-text"
                                                     tag={undefined}
                                                     icon={undefined}
                                                     iconActive={undefined}

package/src/components/titan-layout/with-tooltip.tsx

@@ -4,7 +4,7 @@ import { ReactElement } from 'react';
 export const withTooltip = (
     element: ReactElement,
     tooltip: string | undefined,
-    props: {
+    props?: {
         placement?: TooltipProps['placement'];
         key?: string;
     }