@servicetitan/navigation 9.2.1 → 10.0.0

package/dist/utils/navigation-legacy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-legacy.d.ts","sourceRoot":"","sources":["../../src/utils/navigation-legacy.ts"],"names":[],"mappings":"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"}

package/dist/utils/navigation-legacy.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=navigation-legacy.js.map

package/dist/utils/navigation-legacy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-legacy.js","sourceRoot":"","sources":["../../src/utils/navigation-legacy.ts"],"names":[],"mappings":""}

package/dist/utils/navigation.d.ts

@@ -1,16 +1,11 @@
 import { IconProps } from '@servicetitan/anvil2';
-import { IconPropsStrict } from '@servicetitan/design-system';
-import { FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
-import { CounterTagPropsType } from '../components/counter-tag';
-export interface HeaderNavigationItemData extends HeaderNavigationItemLinkProps {
-    /** link description */
-    hint: string;
+import { FC } from 'react';
+import { CounterTagData, CounterTagValue } from './counter-tag';
+export interface NavigationItemData extends NavigationLinkData {
     /** flag if the link is not shown (based on FG and/or user permissions) */
     isHidden?: boolean;
     /** custom className (can be used for mdi icons) */
     iconClassName?: string;
-    /** anvil's icon name of item */
-    iconName?: IconPropsStrict['name'];
     /** svg icon (anvil2) of inactive item */
     icon: IconProps['svg'] | undefined;
     /** svg icon (anvil2) of active item */
@@ -18,13 +13,14 @@ export interface HeaderNavigationItemData extends HeaderNavigationItemLinkProps
     /** icon component of item (<svg />) */
     iconComponent?: FC;
     /** item tag (optional). shown if it is set and true or greater than 0 */
-    tag?: CounterTagPropsType;
+    counter?: CounterTagValue;
+    tag?: CounterTagData;
     /** class name of link item */
     className?: string;
     /** optional submenu of link item */
-    submenu?: HeaderNavigationItemSubmenu;
+    submenu?: NavigationSubmenuData;
 }
-export interface HeaderNavigationItemLinkProps {
+export interface NavigationLinkData {
     /** link id */
     id: string;
     /** link href */
@@ -34,76 +30,19 @@ export interface HeaderNavigationItemLinkProps {
     /** callback to return active state. By default, it compares link href with current pathname */
     isActive?: boolean | ((pathname: string) => boolean);
 }
-export interface HeaderNavigationItemSubmenu {
+export interface NavigationSubmenuData {
     /** submenu groups */
-    groups: HeaderNavigationItemSubmenuGroup[];
+    groups: NavigationSubmenuGroupData[];
 }
-export interface HeaderNavigationItemSubmenuLink extends HeaderNavigationItemLinkProps {
-    /** item tag (optional). shown if it is set and true or greater than 0 */
-    tag?: CounterTagPropsType;
+export interface NavigationSubmenuItemData extends NavigationLinkData {
+    /** item tag (optional) value. shown if it is set and true or greater than 0 */
+    counter?: CounterTagValue;
+    tag?: CounterTagData;
 }
-export interface HeaderNavigationItemSubmenuGroup {
+export interface NavigationSubmenuGroupData {
     /** submenu group title */
     title: string;
     /** submenu group links */
-    links: HeaderNavigationItemSubmenuLink[];
-}
-export interface NavLinkComponentPropsStrict {
-    to: string;
-    title?: string;
-    className?: string;
-    activeClassName?: string;
-    children: ReactNode;
-    isActive?: (pathname: string) => boolean;
-    target?: HTMLAttributeAnchorTarget;
-}
-export interface NavLinkComponentProps extends NavLinkComponentPropsStrict {
-    [key: string]: any;
-}
-export interface HeaderNavigationTriggerPropsStrict {
-    /** unique identifier */
-    id: string;
-    /** tooltip text */
-    tooltip?: string;
-    /** item description */
-    hint?: string;
-    /** container class name */
-    className?: string;
-    /** item label */
-    label?: string;
-    /** label class name */
-    labelClassName?: string;
-    /** isActive */
-    isActive?: boolean;
-    /** counter tag shown for item */
-    tag?: CounterTagPropsType;
-    /** counter component class name */
-    counterClassName?: string;
-    /** icon component class name */
-    iconClassName?: string;
-    /** IconComponent custom icon component */
-    iconComponent?: FC;
-    /** iconName name of anvil icon */
-    iconName?: IconPropsStrict['name'];
-    /** svg icon (anvil2) of inactive item */
-    icon: IconProps['svg'] | undefined;
-    /** svg icon (anvil2) of active item */
-    iconActive: IconProps['svg'] | undefined;
-}
-export interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {
-    /** unstrict props */
-    [key: string]: any;
-}
-export interface HeaderNavigationLinkPropsStrict extends Omit<HeaderNavigationTriggerPropsStrict, 'isActive'> {
-    /** link href */
-    to: string;
-    /** isActive */
-    isActive?: boolean | ((pathname: string) => boolean);
-    /** link html target */
-    target?: HTMLAttributeAnchorTarget;
-}
-export interface HeaderNavigationLinkProps extends HeaderNavigationLinkPropsStrict {
-    /** unstrict props */
-    [key: string]: any;
+    links: NavigationSubmenuItemData[];
 }
 //# sourceMappingURL=navigation.d.ts.map

package/dist/utils/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhE,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC1D,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEnC,uCAAuC;IACvC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEzC,uCAAuC;IACvC,aAAa,CAAC,EAAE,EAAE,CAAC;IAEnB,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,cAAc,CAAC;IAErB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,qBAAqB,CAAC;CACnC;AAED,MAAM,WAAW,kBAAkB;IAC/B,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IAEX,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;CACxD;AAED,MAAM,WAAW,qBAAqB;IAClC,qBAAqB;IACrB,MAAM,EAAE,0BAA0B,EAAE,CAAC;CACxC;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACjE,+EAA+E;IAC/E,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,MAAM,WAAW,0BAA0B;IACvC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,KAAK,EAAE,yBAAyB,EAAE,CAAC;CACtC"}

package/dist/utils/side-nav.d.ts

@@ -1,3 +1,6 @@
-import { HeaderNavigationItemData, HeaderNavigationItemSubmenu } from './navigation';
-export declare function getSubmenuGroupTag(submenu: HeaderNavigationItemSubmenu | undefined, defaultTag: HeaderNavigationItemData['tag']): HeaderNavigationItemData['tag'];
+import { CounterTagProps } from '../components/counter-tag';
+import { CounterTagData, CounterTagValue } from './counter-tag';
+import { NavigationSubmenuData } from './navigation';
+export declare function getSubmenuGroupTag(submenu: NavigationSubmenuData | undefined, defaultTag: CounterTagProps | undefined): CounterTagProps | undefined;
+export declare const getCounterTag: (counter: CounterTagValue | undefined, tag?: CounterTagData | undefined) => CounterTagProps | undefined;
 //# sourceMappingURL=side-nav.d.ts.map

package/dist/utils/side-nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../../src/utils/side-nav.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,MAAM,cAAc,CAAC;AAErF,wBAAgB,kBAAkB,CAC9B,OAAO,EAAE,2BAA2B,GAAG,SAAS,EAChD,UAAU,EAAE,wBAAwB,CAAC,KAAK,CAAC,GAC5C,wBAAwB,CAAC,KAAK,CAAC,CA2BjC"}
+{"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../../src/utils/side-nav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAErD,wBAAgB,kBAAkB,CAC9B,OAAO,EAAE,qBAAqB,GAAG,SAAS,EAC1C,UAAU,EAAE,eAAe,GAAG,SAAS,GACxC,eAAe,GAAG,SAAS,CAyB7B;AAED,eAAO,MAAM,aAAa,YACb,eAAe,GAAG,SAAS,QAC9B,cAAc,GAAG,SAAS,KACjC,eAAe,GAAG,SAIpB,CAAC"}

package/dist/utils/side-nav.js

@@ -1,4 +1,3 @@
-import { isCounterPropsObject } from './counter-tag';
 export function getSubmenuGroupTag(submenu, defaultTag) {
     if (!submenu) {
         return defaultTag;
@@ -6,9 +5,7 @@ export function getSubmenuGroupTag(submenu, defaultTag) {
     let tagValue = undefined;
     for (const group of submenu.groups) {
         for (const link of group.links) {
-            const ltv = isCounterPropsObject(link.tag)
-                ? link.tag.value
-                : link.tag;
+            const ltv = link.counter;
             if (ltv) {
                 if (typeof ltv === 'number') {
                     if (typeof tagValue !== 'number') {
@@ -22,6 +19,10 @@ export function getSubmenuGroupTag(submenu, defaultTag) {
             }
         }
     }
-    return tagValue !== null && tagValue !== void 0 ? tagValue : defaultTag;
+    return tagValue ? getCounterTag(tagValue) : defaultTag;
 }
+export const getCounterTag = (counter, tag) => {
+    const value = counter !== null && counter !== void 0 ? counter : tag === null || tag === void 0 ? void 0 : tag.value;
+    return value ? { value, className: '' } : undefined;
+};
 //# sourceMappingURL=side-nav.js.map

package/dist/utils/side-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.js","sourceRoot":"","sources":["../../src/utils/side-nav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAGrD,MAAM,UAAU,kBAAkB,CAC9B,OAAgD,EAChD,UAA2C;IAE3C,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,OAAO,UAAU,CAAC;IACtB,CAAC;IAED,IAAI,QAAQ,GAAiC,SAAS,CAAC;IAEvD,KAAK,MAAM,KAAK,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;QACjC,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;YAC7B,MAAM,GAAG,GAAiC,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC;gBACpE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK;gBAChB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YAEf,IAAI,GAAG,EAAE,CAAC;gBACN,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;oBAC1B,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;wBAC/B,QAAQ,GAAG,CAAC,CAAC;oBACjB,CAAC;oBACD,QAAQ,IAAI,GAAG,CAAC;gBACpB,CAAC;qBAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;oBACtC,QAAQ,GAAG,IAAI,CAAC;gBACpB,CAAC;YACL,CAAC;QACL,CAAC;IACL,CAAC;IAED,OAAO,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,UAAU,CAAC;AAClC,CAAC"}
+{"version":3,"file":"side-nav.js","sourceRoot":"","sources":["../../src/utils/side-nav.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,kBAAkB,CAC9B,OAA0C,EAC1C,UAAuC;IAEvC,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,OAAO,UAAU,CAAC;IACtB,CAAC;IAED,IAAI,QAAQ,GAAiC,SAAS,CAAC;IAEvD,KAAK,MAAM,KAAK,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;QACjC,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;YAC7B,MAAM,GAAG,GAAiC,IAAI,CAAC,OAAO,CAAC;YAEvD,IAAI,GAAG,EAAE,CAAC;gBACN,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;oBAC1B,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;wBAC/B,QAAQ,GAAG,CAAC,CAAC;oBACjB,CAAC;oBACD,QAAQ,IAAI,GAAG,CAAC;gBACpB,CAAC;qBAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;oBACtC,QAAQ,GAAG,IAAI,CAAC;gBACpB,CAAC;YACL,CAAC;QACL,CAAC;IACL,CAAC;IAED,OAAO,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;AAC3D,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,CACzB,OAAoC,EACpC,GAAgC,EACL,EAAE;IAC7B,MAAM,KAAK,GAAG,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,KAAK,CAAC;IAEpC,OAAO,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;AACxD,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "9.2.1",
+    "version": "10.0.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -43,5 +43,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "9b96f71a30018ed7ff17243fa35a56f5d6610d91"
+    "gitHead": "b5beeed5267bce1f6f6aaf3f725d31bdfab1f011"
 }

package/src/components/counter-tag.tsx

@@ -1,44 +1,33 @@
 import { Tag } from '@servicetitan/design-system';
 import classNames from 'classnames';
 import { FC } from 'react';
-import { CounterTagPropsStrict } from '../utils/counter-tag';
+import { CounterTagData } from '../utils/counter-tag';
 
-export interface CounterTagProps extends CounterTagPropsStrict {
+export interface CounterTagProps extends CounterTagData {
     [key: string]: any;
+    className: string;
 }
 
-export type CounterTagPropsType = boolean | number | CounterTagProps;
-
-const getCounterProps = (
-    props: CounterTagPropsType | undefined
-): CounterTagPropsStrict | undefined => {
-    if (typeof props === 'number' || typeof props === 'boolean') {
-        return { value: props };
-    }
-
-    return props;
-};
-
 export const CounterTag: FC<{
     className?: string;
     longClassName?: string;
-    data: CounterTagPropsType | undefined;
+    data: CounterTagProps | undefined;
 }> = ({ className, data, longClassName }) => {
-    const props = getCounterProps(data);
+    const { value, className: dataClassName, ...rest } = data ?? {};
 
-    return props ? (
+    return value ? (
         <Tag
             color="critical"
-            {...props}
+            {...rest}
             className={classNames(
                 className,
-                props.className,
-                typeof props.value === 'number' && props.value > 10 && longClassName
+                dataClassName,
+                typeof value === 'number' && value > 10 && longClassName
             )}
             compact
             badge
         >
-            {props.value}
+            {value}
         </Tag>
     ) : null;
 };

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

@@ -1,9 +1,10 @@
 import { Icon, IconPropsStrict } from '@servicetitan/design-system';
 import classNames from 'classnames';
 import { FC, Fragment, useContext } from 'react';
-import { HeaderNavigationItemData } from '../../utils/navigation';
 import { NavigationComponentContext } from '../../utils/navigation-context';
-import { CounterTag, CounterTagPropsType } from '../counter-tag';
+import { HeaderNavigationItemData } from '../../utils/navigation-legacy';
+import { getCounterTag } from '../../utils/side-nav';
+import { CounterTag, CounterTagProps } from '../counter-tag';
 import * as Styles from './header-navigation.module.less';
 import { withTooltip } from './with-tooltip';
 
@@ -13,7 +14,7 @@ export interface HeaderNavigationItemContentPropsStrict {
     /** text component class name */
     titleClassName?: string;
     /** counter tag shown for item */
-    tag?: CounterTagPropsType;
+    tag: CounterTagProps | undefined;
     /** counter component class name */
     counterClassName?: string;
     /** icon component class name */
@@ -73,6 +74,7 @@ interface HeaderNavigationItemPropsStrict extends HeaderNavigationItemData {
 export const HeaderNavigationItem: FC<HeaderNavigationItemPropsStrict> = ({
     id,
     to,
+    counter,
     title,
     hint,
     className,
@@ -107,7 +109,7 @@ export const HeaderNavigationItem: FC<HeaderNavigationItemPropsStrict> = ({
             <HeaderNavigationItemContent
                 title={minimized ? undefined : title}
                 titleClassName={main ? '' : 'm-l-half'}
-                tag={tag}
+                tag={getCounterTag(counter, tag)}
                 iconComponent={iconComponent}
                 iconClassName={iconClassName}
                 iconName={iconName}

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

@@ -36,7 +36,7 @@ export const ExtraTrigger = () => (
     <HeaderNavigationTrigger
         id="dialpad"
         iconName="phone"
-        tag={2}
+        counter={2}
         tooltip="Phones pro"
         icon={SvgPhone}
         iconActive={undefined}
@@ -60,7 +60,7 @@ export const ExtraWithTooltip = () => (
             id="dialpad"
             iconName="phone"
             hint="Dialpad"
-            tag={2}
+            counter={2}
             icon={SvgPhone}
             iconActive={undefined}
         />
@@ -127,7 +127,7 @@ export const ExtraWithLabel = () => (
             id="dialpad"
             iconName="phone"
             hint="Dialpad"
-            tag={2}
+            tag={{ value: 2 }}
             icon={SvgPhone}
             iconActive={undefined}
         />

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

@@ -1,7 +1,11 @@
 import classNames from 'classnames';
 import { FC, ReactNode, useContext } from 'react';
-import { HeaderNavigationLinkProps, HeaderNavigationTriggerProps } from '../../utils/navigation';
 import { NavigationComponentContext } from '../../utils/navigation-context';
+import {
+    HeaderNavigationLinkProps,
+    HeaderNavigationTriggerProps,
+} from '../../utils/navigation-legacy';
+import { getCounterTag } from '../../utils/side-nav';
 import { HeaderNavigationItemContent } from './header-navigation-content';
 import * as Styles from './header-navigation.module.less';
 import { withTooltip } from './with-tooltip';
@@ -10,6 +14,7 @@ import { withTooltip } from './with-tooltip';
 export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
     id,
     to,
+    counter,
     hint,
     tooltip,
     className,
@@ -43,7 +48,7 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
             target={target}
         >
             <HeaderNavigationItemContent
-                tag={tag}
+                tag={getCounterTag(counter, tag)}
                 iconComponent={iconComponent}
                 iconClassName={iconClassName}
                 iconName={iconName}
@@ -59,6 +64,7 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
 export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
     id,
     className,
+    counter,
     iconClassName,
     iconComponent,
     iconName,
@@ -87,7 +93,7 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
             )}
         >
             <HeaderNavigationItemContent
-                tag={tag}
+                tag={getCounterTag(counter, tag)}
                 iconComponent={iconComponent}
                 iconClassName={iconClassName}
                 iconName={iconName}

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

@@ -96,7 +96,7 @@ export const WithAllMonolithData = () => (
                 <HeaderNavigationTrigger
                     id="dialpad"
                     iconName="phone"
-                    tag={2}
+                    tag={{ value: 2 }}
                     icon={SvgIcon}
                     iconActive={SvgIcon}
                 />
@@ -122,7 +122,7 @@ export const WithAllMonolithData = () => (
                 />
 
                 <ProfileDropdown>
-                    <ProfileDropdown.Link id="tasks" to="https://googgle.com" tag={10}>
+                    <ProfileDropdown.Link id="tasks" to="https://googgle.com" counter={10}>
                         Task Management
                     </ProfileDropdown.Link>
                     <ProfileDropdown.Divider />

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

@@ -108,7 +108,7 @@ export const WithAllMonolithData = () => (
         <HeaderNavigationTrigger
             id="dialpad"
             iconName="phone"
-            tag={2}
+            counter={2}
             icon={SvgIcon}
             iconActive={SvgIcon}
         />
@@ -145,7 +145,7 @@ export const WithAllMonolithData = () => (
         />
 
         <ProfileDropdown>
-            <ProfileDropdown.Link id="tasks" to="https://googgle.com" tag={10}>
+            <ProfileDropdown.Link id="tasks" to="https://googgle.com" counter={10}>
                 Task Management
             </ProfileDropdown.Link>
             <ProfileDropdown.Divider />

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

@@ -1,8 +1,8 @@
 import { Icon, Popover, PopoverPropsStrict } from '@servicetitan/design-system';
 import classNames from 'classnames';
 import { FC, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
-import { HeaderNavigationItemData } from '../../utils/navigation';
 import { NavigationLegacyContext } from '../../utils/navigation-context';
+import { HeaderNavigationItemData } from '../../utils/navigation-legacy';
 import { HeaderNavigationItem } from './header-navigation-content';
 import * as Styles from './header-navigation.module.less';
 

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

@@ -1,15 +1,19 @@
 import { Icon, IconProps } from '@servicetitan/anvil2';
 import classNames from 'classnames';
 import { FC, Fragment, useContext } from 'react';
-import { HeaderNavigationLinkProps, HeaderNavigationTriggerProps } from '../../utils/navigation';
 import { NavigationComponentContext } from '../../utils/navigation-context';
-import { CounterTag, CounterTagPropsType } from '../counter-tag';
+import {
+    HeaderNavigationLinkProps,
+    HeaderNavigationTriggerProps,
+} from '../../utils/navigation-legacy';
+import { getCounterTag } from '../../utils/side-nav';
+import { CounterTag, CounterTagProps } from '../counter-tag';
 import * as Styles from './header-navigation-tiny.module.less';
 import { withTooltip } from './with-tooltip';
 
 /** Content for navigation items */
 export const HeaderNavigationItemContent: FC<{
-    tag?: CounterTagPropsType;
+    tag?: CounterTagProps;
     counterClassName?: string;
     icon: IconProps['svg'] | undefined;
     iconActive: IconProps['svg'] | undefined;
@@ -50,6 +54,7 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
     hint,
     tooltip,
     className,
+    counter,
     icon,
     iconActive,
     iconClassName,
@@ -81,7 +86,7 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
             target={target}
         >
             <HeaderNavigationItemContent
-                tag={tag}
+                tag={getCounterTag(counter, tag)}
                 icon={icon}
                 iconActive={iconActive}
                 label={label}
@@ -96,6 +101,7 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
 export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
     id,
     className,
+    counter,
     icon,
     iconActive,
     isActive,
@@ -125,7 +131,7 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
             )}
         >
             <HeaderNavigationItemContent
-                tag={tag}
+                tag={getCounterTag(counter, tag)}
                 icon={icon}
                 iconActive={iconActive}
                 label={label}

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

@@ -86,7 +86,7 @@ export const WithAllMonolithData = () => (
                 />
 
                 <ProfileDropdown>
-                    <ProfileDropdown.Link id="tasks" to="https://googgle.com" tag={10}>
+                    <ProfileDropdown.Link id="tasks" to="https://googgle.com" counter={10}>
                         Task Management
                     </ProfileDropdown.Link>
                     <ProfileDropdown.Divider />
@@ -152,7 +152,7 @@ export const WithAllMonolithDataCommercial = () => (
                 />
 
                 <ProfileDropdown>
-                    <ProfileDropdown.Link id="tasks" to="https://googgle.com" tag={10}>
+                    <ProfileDropdown.Link id="tasks" to="https://googgle.com" counter={10}>
                         Task Management
                     </ProfileDropdown.Link>
                     <ProfileDropdown.Divider />

package/src/components/left-navigation/interface-internal.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { NavLinkComponentProps } from '../../utils/navigation';
+import { NavLinkComponentProps } from '../../utils/navigation-context';
 import { SideNavigationExpandedState } from './interface';
 
 export interface NavigationComponentProps {

package/src/components/left-navigation/interface.ts

@@ -1,5 +1,5 @@
 import { FC, ReactElement } from 'react';
-import { HeaderNavigationItemData } from '../../utils/navigation';
+import { NavigationItemData } from '../../utils/navigation';
 import { SideNavigationContextType } from './side-navigation-context';
 
 export interface SideNavigationExpandedState {
@@ -12,8 +12,7 @@ export interface SideNavigationLinkWrapperProps {
     context: SideNavigationContextType;
 }
 
-export interface SideNavigationLinkProps
-    extends Omit<HeaderNavigationItemData, 'iconName' | 'submenu'> {
+export interface SideNavigationLinkProps extends Omit<NavigationItemData, 'submenu'> {
     wrapper?: FC<SideNavigationLinkWrapperProps>;
 }
 export interface SideNavigationTriggerProps

package/src/components/left-navigation/side-navigation-links-internal.tsx

@@ -4,15 +4,16 @@ import SvgGroupExpand from '@servicetitan/anvil2/assets/icons/material/round/exp
 
 import classNames from 'classnames';
 import { FC, Fragment } from 'react';
-import { HeaderNavigationItemData } from '../../utils/navigation';
-import { CounterTag } from '../counter-tag';
+import { NavigationItemData } from '../../utils/navigation';
+import { CounterTag, CounterTagProps } from '../counter-tag';
 import { SideNavigationTriggerProps } from './interface';
 import { NavigationComponentProps, SideNavigationExpandedProps } from './interface-internal';
 import * as Styles from './side-navigation.module.less';
 
 export interface InternalSideNavigationItemContentProps
-    extends Omit<HeaderNavigationItemData, 'iconName' | 'to' | ''> {
+    extends Omit<NavigationItemData, 'iconName' | 'to' | 'counter' | 'tag'> {
     submenuExpanded: boolean | undefined;
+    tag: CounterTagProps | undefined;
 }
 
 export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({
@@ -76,11 +77,12 @@ export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemCon
 );
 
 export interface InternalSideNavigationLinkProps
-    extends Omit<HeaderNavigationItemData, 'iconName'>,
+    extends Omit<NavigationItemData, 'iconName' | 'counter' | 'tag'>,
         NavigationComponentProps,
         SideNavigationExpandedProps {
     submenuExpanded: boolean | undefined;
     dataPrefix?: string;
+    tag: CounterTagProps | undefined;
 }
 
 export const internalNavigationContentContainerProps = ({
@@ -91,7 +93,7 @@ export const internalNavigationContentContainerProps = ({
     id,
     isActive,
     prefix,
-}: Omit<SideNavigationTriggerProps, 'isActive'> & { prefix: string; isActive?: any }) => ({
+}: Omit<SideNavigationTriggerProps, 'isActive' | 'tag'> & { prefix: string; isActive?: any }) => ({
     'data-cy': `${prefix}-${id}`,
     'data-pendo': `${prefix}-${id}`,
     'className': classNames(Styles.navigationItem, className, {

package/src/components/left-navigation/side-navigation-links.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { FC, ReactElement, useContext } from 'react';
 import { NavigationComponentContext } from '../../utils/navigation-context';
+import { getCounterTag } from '../../utils/side-nav';
 import { SideNavigationLinkProps, SideNavigationTriggerProps } from './interface';
 import { SideNavigationContext } from './side-navigation-context';
 import {
@@ -27,6 +28,7 @@ export function SideNavigationLink({ wrapper, ...props }: SideNavigationLinkProp
             navigationComponent={NavigationComponent}
             submenuExpanded={undefined}
             dataPrefix="navigation-link"
+            tag={getCounterTag(props.counter, props.tag)}
         />
     );
 
@@ -44,7 +46,11 @@ export function SideNavigationTrigger({ wrapper, ...props }: SideNavigationTrigg
                 isActive: props.isActive,
             })}
         >
-            <InternalSideNavigationItemContent submenuExpanded={undefined} {...props} />
+            <InternalSideNavigationItemContent
+                submenuExpanded={undefined}
+                {...props}
+                tag={getCounterTag(props.counter, props.tag)}
+            />
         </div>
     );
     return wrapper ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;