@servicetitan/navigation 11.0.0-canary.237.4d902dc.0 → 11.0.0-canary.237.5f3f02d.0

package/dist/utils/use-breakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-breakpoint.js","sourceRoot":"","sources":["../../src/utils/use-breakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAOhC,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAoB,EAAE;IACpD,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IAEnC,OAAO,OAAO,CACV,GAAG,EAAE;;QAAC,OAAA,CAAC;YACH,IAAI,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,mCAAI,IAAI;YAC9B,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,UAAU,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK;SAC9D,CAAC,CAAA;KAAA,EACF,CAAC,UAAU,CAAC,CACf,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"use-breakpoint.js","sourceRoot":"","sources":["../../src/utils/use-breakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAQhC,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAoB,EAAE;IACpD,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IAEnC,OAAO,OAAO,CACV,GAAG,EAAE;;QAAC,OAAA,CAAC;YACH,IAAI,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,mCAAI,IAAI;YAC9B,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,UAAU,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK;YAC1D,KAAK,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,CAAC;SACrC,CAAC,CAAA;KAAA,EACF,CAAC,UAAU,CAAC,CACf,CAAC;AACN,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "11.0.0-canary.237.4d902dc.0",
+    "version": "11.0.0-canary.237.5f3f02d.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -42,5 +42,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "4d902dcdcc48f94d6593def648277fdd80405231"
+    "gitHead": "5f3f02dc96a43a51bcd8e0b05988f4b17e7e3639"
 }

package/src/components/badge-tag.tsx

@@ -5,7 +5,7 @@ import { CounterTagData } from '../utils/counter-tag';
 
 export interface BadgeTagProps extends CounterTagData {
     [key: string]: any;
-    className: string;
+    className?: string;
 }
 
 export const BadgeTag: FC<{

package/src/components/header-navigation/header-navigation-stacked.stories.tsx

@@ -130,7 +130,7 @@ export const WithAllMonolithData = () => (
                         Task Management
                     </ProfileDropdown.Link>
                     <ProfileDropdown.Divider />
-                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com">
+                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com" text="Sign Out">
                         Sign Out{' '}
                         <span className="c-neutral-100 m-l-half t-truncate">James Bond</span>
                     </ProfileDropdown.Link>

package/src/components/header-navigation/header-navigation.stories.tsx

@@ -154,7 +154,7 @@ export const WithAllMonolithData = () => (
                 Task Management
             </ProfileDropdown.Link>
             <ProfileDropdown.Divider />
-            <ProfileDropdown.Link id="sign-out" to="https://googgle.com">
+            <ProfileDropdown.Link id="sign-out" to="https://googgle.com" text="Sign Out">
                 Sign Out <span className="c-neutral-100 m-l-half t-truncate">James Bond</span>
             </ProfileDropdown.Link>
             <ProfileDropdown.Section id="userid" className="c-neutral-100 fs-1">

package/src/components/left-navigation/header-navigation-tiny.stories.tsx

@@ -93,7 +93,7 @@ export const WithAllMonolithData = () => (
                         Task Management
                     </ProfileDropdown.Link>
                     <ProfileDropdown.Divider />
-                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com">
+                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com" text="Sign Out">
                         Sign Out{' '}
                         <span className="c-neutral-100 m-l-half t-truncate">James Bond</span>
                     </ProfileDropdown.Link>
@@ -162,7 +162,7 @@ export const WithAllMonolithDataCommercial = () => (
                         Task Management
                     </ProfileDropdown.Link>
                     <ProfileDropdown.Divider />
-                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com">
+                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com" text="Sign Out">
                         Sign Out{' '}
                         <span className="c-neutral-100 m-l-half t-truncate">James Bond</span>
                     </ProfileDropdown.Link>

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

@@ -3,7 +3,7 @@ import { CSSProperties, FC, ReactNode } from 'react';
 import { LogoTitanSvg } from './logo-titan';
 import * as Styles from './logo-titan-text.module.less';
 
-export type WrapperProps = FC<{ className: string; children: ReactNode; style?: CSSProperties }>;
+export type WrapperProps = FC<{ className?: string; children: ReactNode; style?: CSSProperties }>;
 
 export interface LogoTitanProps {
     mantleFill?: string;

package/src/components/profile-dropdown/profile-dropdown.module.less

@@ -123,6 +123,11 @@
 
     .dropdown-section {
         padding: @spacing-1 @spacing-2;
+        position: relative;
+
+        &.dropdown-section-with-counter {
+            padding-right: @spacing-3;
+        }
     }
 
     .dropdown-link {
@@ -136,13 +141,22 @@
         }
     }
 
-    .counter {
-        color: @color-white;
-        font-size: @typescale-0;
-        font-weight: @font-weight-semibold;
+    .counter-wrapper {
         position: absolute;
-        top: @spacing-half;
-        margin-left: @spacing-half;
+        top: 0;
+        bottom: 0;
+        right: @spacing-1;
+
+        display: flex;
+        align-items: center;
+
+        .counter {
+            color: @color-white;
+            font-size: @typescale-0;
+            font-weight: @font-weight-semibold;
+            min-width: 12px !important;
+            min-height: 12px !important;
+        }
     }
 }
 

package/src/components/profile-dropdown/profile-dropdown.module.less.d.ts

@@ -4,12 +4,14 @@ export const badge: string;
 export const badgeNoContent: string;
 export const badgeWithContent: string;
 export const counter: string;
+export const counterWrapper: string;
 export const dropdown: string;
 export const dropdownContent: string;
 export const dropdownContentBottomLeft: string;
 export const dropdownContentWrapper: string;
 export const dropdownLink: string;
 export const dropdownSection: string;
+export const dropdownSectionWithCounter: string;
 export const expandIcon: string;
 export const hint: string;
 export const hintContent: string;

package/src/components/profile-dropdown/profile-dropdown.tsx

@@ -6,6 +6,7 @@ import SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_accoun
 import { BodyText, Popover, PopoverPropsStrict } from '@servicetitan/design-system';
 import classNames from 'classnames';
 import {
+    ComponentPropsWithoutRef,
     FC,
     HTMLAttributeAnchorTarget,
     MouseEvent,
@@ -147,22 +148,42 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
     );
 };
 
+const useTag = (counter?: CounterTagValue, tag?: CounterTagData) =>
+    useMemo(() => {
+        const data = getCounterTag(counter, tag);
+
+        return data ? (
+            <div className={Styles.counterWrapper}>
+                <CounterTag className={Styles.counter} data={data} />
+            </div>
+        ) : undefined;
+    }, [counter, tag]);
+
+export type ProfileItemContent =
+    | { children: string; text?: string }
+    | { children: ReactNode; text: string };
+
 export interface ProfileDropdownSectionPropsStrict {
     children: ReactNode;
     id: string;
     tooltip?: string;
     className?: string;
+    tag?: CounterTagData;
+    counter?: CounterTagValue;
     onClick?(e: MouseEvent): void;
 }
 
-export interface ProfileDropdownSectionProps extends ProfileDropdownSectionPropsStrict {
-    [key: string]: any;
-}
+export type ProfileDropdownSectionProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> &
+    ProfileDropdownSectionPropsStrict &
+    ProfileItemContent;
 
 export const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
     children,
     className,
+    counter,
     id,
+    tag,
+    text,
     tooltip,
     onClick,
     ...rest
@@ -175,17 +196,23 @@ export const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
         }
     };
 
+    const tagElement = useTag(counter, tag);
+
     return withTooltip(
         <div
-            className={classNames(Styles.dropdownSection, className, {
-                'cursor-pointer': !!onClick,
-            })}
+            className={classNames(
+                Styles.dropdownSection,
+                tagElement && Styles.dropdownSectionWithCounter,
+                !!onClick && Styles.dropdownLink,
+                className
+            )}
             onClick={clickHandler}
             data-cy={`profile-dropdown-section-${id}`}
             data-pendo={`profile-dropdown-section-${id}`}
             {...rest}
         >
             {children}
+            {tagElement}
         </div>,
         tooltip,
         'left'
@@ -206,9 +233,9 @@ export interface ProfileDropdownLinkPropsStrict {
     counter?: CounterTagValue;
 }
 
-export interface ProfileDropdownLinkProps extends ProfileDropdownLinkPropsStrict {
-    [key: string]: any;
-}
+export type ProfileDropdownLinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'children'> &
+    ProfileDropdownLinkPropsStrict &
+    ProfileItemContent;
 
 export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
     children,
@@ -218,6 +245,7 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
     counter,
     tag,
     target,
+    text,
     to,
     tooltip,
     onClick,
@@ -227,15 +255,17 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
 
     const isExternalLink = external ?? to?.startsWith('http');
 
-    const tagElement = useMemo(
-        () => <CounterTag data={getCounterTag(counter, tag)} className={Styles.counter} />,
-        [counter, tag]
-    );
+    const tagElement = useTag(counter, tag);
 
     return withTooltip(
         isExternalLink ? (
             <a
-                className={classNames(Styles.dropdownSection, Styles.dropdownLink, className)}
+                className={classNames(
+                    Styles.dropdownSection,
+                    tagElement && Styles.dropdownSectionWithCounter,
+                    Styles.dropdownLink,
+                    className
+                )}
                 href={to}
                 target={target}
                 data-cy={`profile-dropdown-link-${id}`}
@@ -247,7 +277,12 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
             </a>
         ) : (
             <NavigationComponent
-                className={classNames(Styles.dropdownSection, Styles.dropdownLink, className)}
+                className={classNames(
+                    Styles.dropdownSection,
+                    Styles.dropdownLink,
+                    { [Styles.dropdownSectionWithCounter]: !!tagElement },
+                    className
+                )}
                 target={target}
                 to={to}
                 data-cy={`profile-dropdown-link-${id}`}

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

@@ -19,7 +19,7 @@ export interface TitanLayoutContextType {
 
 export const LayoutContext = createContext<TitanLayoutContextType>({
     NavigationComponent: DefaultNavLinkComponent,
-    breakpoint: { name: 'lg', isMobile: false },
+    breakpoint: { name: 'lg', isMobile: false, width: 0 },
     isTitanLayout: false,
     sidebar: { styles: { popoverContent: {} } },
 });

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

@@ -134,7 +134,8 @@ export const LayoutHeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = (
         >
             <HeaderNavigationItemContent
                 tag={getCounterTag(counter, tag)}
-                icon={isActive && iconActive ? iconActive : icon}
+                icon={icon}
+                iconActive={iconActive}
                 label={label}
                 labelClassName={labelClassName}
             />

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

@@ -4,28 +4,29 @@
 @size-links-tiny: 24px;
 
 .header {
-    display: grid;
+    --nav-top-content-height: 32px;
+    display: flex;
+    justify-content: space-between;
 
     background-color: @color-white;
     color: @color-black;
+    box-sizing: border-box;
+    outline: 1px solid @color-neutral-60;
 
     & > * {
         overflow-y: hidden;
     }
 
     .he-top-left {
-        grid-column: span 1;
         display: flex;
         align-items: center;
     }
 
     .he-top-center {
-        grid-column: span 1;
+        overflow: hidden;
     }
 
     .he-top-right {
-        grid-column: span 1;
-
         & > * {
             color: @color-black;
         }
@@ -62,7 +63,7 @@
         }
 
         &.navigation-item-icon-state.navigation-item-active {
-            .navigation-icon:not(.navigation-icon-active) {
+            .navigation-icon[data-anv][data-anv]:not(.navigation-icon-active) {
                 display: none;
             }
 
@@ -89,33 +90,71 @@
     }
 }
 
+.header-mobile {
+    padding: @spacing-2 @spacing-0;
+    height: var(--nav-offset-top);
+
+    --nav-top-content-height: 40px;
+
+    .navigation-link {
+        padding: 10px;
+    }
+
+    .he-top-center {
+        max-width: unset;
+        flex: 1;
+        margin-left: @spacing-3;
+        margin-right: @spacing-3;
+    }
+
+    .he-top-left {
+        margin-left: @spacing-half;
+    }
+
+    .he-top-right {
+        margin-right: @spacing-half;
+    }
+}
+
 // desktop
-@media only screen and (min-width: 768px) {
-    .header {
-        grid-template-columns: repeat(3, 1fr);
-        grid-template-rows: 48px;
+.header-desktop {
+    height: var(--nav-offset-top);
+    .navigation-link {
+        margin: 6px 2px;
+        padding: 6px 6px;
 
-        .navigation-link {
-            margin: 6px 2px;
-            padding: 6px 6px;
+        .navigation-item-counter {
+            min-width: 12px !important;
+            height: 12px !important;
         }
     }
 
     .he-top-left {
         padding-left: @spacing-1;
     }
+    .he-top-center {
+        flex: 1;
+        margin-left: @spacing-2;
+        margin-right: @spacing-2;
+        max-width: 400px;
+    }
 }
 
-// mobile
-@media only screen and (max-width: 768px) {
-    .header {
+// desktop wide
+@media only screen and (min-width: 1200px) {
+    .header-desktop {
+        display: grid;
         grid-template-columns: repeat(3, 1fr);
-        grid-template-rows: 44px;
+        grid-template-rows: 48px;
 
-        padding: @spacing-1 @spacing-half;
+        .he-top-left,
+        .he-top-center,
+        .he-top-right {
+            grid-column: span 1;
+        }
 
-        .navigation-link {
-            padding: 10px;
+        .he-top-center {
+            max-width: unset;
         }
     }
 }
@@ -133,7 +172,8 @@
         color: @color-white;
         font-weight: @font-weight-semibold;
         font-size: 8px !important;
-        min-width: 12px;
+        min-width: 16px !important;
+        height: 16px !important;
         position: absolute;
         top: 4px;
         right: -2px;

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

@@ -4,6 +4,8 @@ export const heTopLeft: string;
 export const heTopRight: string;
 export const heTopRightText: string;
 export const header: string;
+export const headerDesktop: string;
+export const headerMobile: string;
 export const navigationIcon: string;
 export const navigationIconActive: string;
 export const navigationItemActive: string;

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

@@ -1,7 +1,7 @@
 import SvgBurgerMenu from '@servicetitan/anvil2/assets/icons/material/round/menu.svg';
 import classNames from 'classnames';
 import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
-import { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';
+import { LayoutPlacementContext } from './layout-context';
 import { LayoutHeaderNavigationTrigger } from './layout-header-links';
 import * as Styles from './layout-header.module.less';
 import { TitanLayoutLogoProps } from './layout-logo';
@@ -25,6 +25,8 @@ export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     logo: ReactElement<TitanLayoutLogoProps>;
     profile?: ReactElement;
 
+    isMobile: boolean;
+    hasNotifications: boolean;
     onBurgerClick?: (e: MouseEvent) => void;
 };
 
@@ -35,22 +37,26 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
     rightClassName,
     center,
     centerClassName,
+    isMobile,
+    hasNotifications,
     logo,
     profile,
     onBurgerClick,
     ...rest
 }) => {
-    const { breakpoint } = useTitanLayoutContext();
-
     return (
         <LayoutPlacementContext.Provider value="top">
             <div
-                className={classNames(Styles.header, className)}
+                className={classNames(
+                    Styles.header,
+                    isMobile ? Styles.headerMobile : Styles.headerDesktop,
+                    className
+                )}
                 {...rest}
                 data-cy="header-navigation"
             >
                 <div className={classNames(Styles.heTopLeft)} data-cy="navigation-left">
-                    {breakpoint.isMobile && (
+                    {isMobile && (
                         <LayoutHeaderNavigationTrigger
                             id="burger"
                             title=""
@@ -58,12 +64,17 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
                             iconActive={SvgBurgerMenu}
                             className="m-r-1"
                             onClick={onBurgerClick}
+                            tag={{ value: hasNotifications }}
                         />
                     )}
                     {logo}
                 </div>
                 <div
-                    className={classNames(Styles.heTopCenter, centerClassName)}
+                    className={classNames(
+                        Styles.heTopCenter,
+                        'd-f align-items-center justify-content-center',
+                        centerClassName
+                    )}
                     data-cy="navigation-center"
                 >
                     {center}

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

@@ -33,20 +33,27 @@ export const TitanLayoutLogo: FC<TitanLayoutLogoProps> = ({
     const Wrapper = logoWrapper;
     const logoSize = isMobile ? 44 : 56;
     const logoCompanySize = 48;
+    const showCompanyTitle = title === true && !isMobile;
 
     return (
-        <div className={classNames('d-f align-items-center', className)}>
-            {typeof title === 'string' ? (
+        <div
+            className={classNames(
+                'd-f align-items-center',
+                { 'p-t-half': showCompanyTitle },
+                className
+            )}
+        >
+            {showCompanyTitle ? (
+                <Wrapper>
+                    <LogoCompanyTitle height={logoCompanySize} />
+                </Wrapper>
+            ) : typeof title === 'string' ? (
                 <Fragment>
                     <LogoTitan size={logoSize} mantleFill={mantleFill} logoWrapper={Wrapper} />
                     {!isMobile && (
                         <LogoTitanTitle className="c-inherit m-l-1">{title}</LogoTitanTitle>
                     )}
                 </Fragment>
-            ) : title === true && !isMobile ? (
-                <Wrapper className="">
-                    <LogoCompanyTitle height={logoCompanySize} />
-                </Wrapper>
             ) : (
                 <LogoTitan size={logoSize} mantleFill={mantleFill} logoWrapper={Wrapper} />
             )}

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

@@ -18,7 +18,7 @@ export default {
 
 export const ProfileDefault = withTitanLayout(
     <ProfileDropdown>
-        <ProfileDropdown.Link id="first" to="https://google.com">
+        <ProfileDropdown.Link id="first" to="https://google.com" external>
             first link
         </ProfileDropdown.Link>
         <ProfileDropdown.Section id="second" onClick={() => alert('second click')}>
@@ -33,5 +33,14 @@ export const ProfileDefault = withTitanLayout(
             third link
         </ProfileDropdown.Link>
         <ProfileDropdown.Divider />
+        <ProfileDropdown.Section
+            id="forth"
+            onClick={() => alert('forth click')}
+            text="Sign Out user"
+        >
+            Sign Out
+            <span className="c-neutral-60 m-l-1">user</span>
+        </ProfileDropdown.Section>
+        <ProfileDropdown.Divider />
     </ProfileDropdown>
 );