@servicetitan/navigation 8.2.1 → 9.0.1

package/src/test/data.tsx

@@ -33,15 +33,15 @@ import SvgTasks from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_inactive.s
 import { BodyText, Popover } from '@servicetitan/design-system';
 
 import classNames from 'classnames';
-import { forwardRef, useState } from 'react';
+import { Fragment, forwardRef, useState } from 'react';
 // needed only for storybook and added in root dependencies
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { MemoryRouter, useHistory, useLocation } from 'react-router-dom';
+import { MemoryRouter, Redirect, Switch, useHistory, useLocation } from 'react-router-dom';
 import { HeaderNavigationTrigger } from '../components/links';
 import {
     HeaderNavigationItemData,
-    HeaderNavigationItemLinkProps,
     HeaderNavigationItemSubmenuGroup,
+    HeaderNavigationItemSubmenuLink,
     NavLinkComponentProps,
 } from '../utils/navigation';
 import { NavigationComponentContext } from '../utils/navigation-context';
@@ -145,8 +145,8 @@ const getItem = (
 
 const getSubItem = (
     id: string,
-    data: Partial<HeaderNavigationItemLinkProps>
-): HeaderNavigationItemLinkProps => ({
+    data: Partial<HeaderNavigationItemSubmenuLink>
+): HeaderNavigationItemSubmenuLink => ({
     id,
     to: id,
     title: id[0].toUpperCase() + id.substring(1),
@@ -155,7 +155,7 @@ const getSubItem = (
 
 const getGroup = (
     title: string,
-    links: HeaderNavigationItemLinkProps[]
+    links: HeaderNavigationItemSubmenuLink[]
 ): HeaderNavigationItemSubmenuGroup => ({
     title,
     links,
@@ -176,7 +176,7 @@ export const items = {
         iconName: 'local_phone',
         icon: SvgCalls,
         iconActive: SvgCallsActive,
-        counter: 12,
+        tag: 12,
     }),
     dashboard: getItem('dashboard', {
         iconName: 'odometer',
@@ -187,7 +187,7 @@ export const items = {
         iconName: 'location_disabled',
         icon: SvgDispatch,
         iconActive: SvgDispatchActive,
-        counter: 1,
+        tag: 1,
     }),
     fleet: getItem('fleet', {
         iconName: 'fleet-pro',
@@ -241,6 +241,7 @@ export const items = {
         iconName: 'assignment',
         icon: SvgAccounting,
         iconActive: SvgAccountingActive,
+        tag: true,
     }),
     accountingWithSubmenu: getItem('accounting', {
         iconName: 'assignment',
@@ -250,9 +251,9 @@ export const items = {
             groups: [
                 getGroup('Accounts Receivable', [
                     getSubItem('ar', { title: 'AR Management' }),
-                    getSubItem('export', { title: 'Batch/Export Transactions' }),
-                    getSubItem('invoices', { title: 'Invoices' }),
-                    getSubItem('payments', { title: 'Customer Payments' }),
+                    getSubItem('export', { title: 'Batch/Export Transactions', tag: true }),
+                    getSubItem('invoices', { title: 'Invoices', tag: 3 }),
+                    getSubItem('payments', { title: 'Customer Payments', tag: 2 }),
                     getSubItem('deposits', { title: 'Bank Deposits' }),
                 ]),
                 getGroup('Accounts Payable', [getSubItem('bills', { title: 'Bills' })]),
@@ -306,7 +307,7 @@ export const CallsNavigationTrigger = () => {
                 <HeaderNavigationTrigger
                     id="dialpad"
                     iconName="phone"
-                    counter={2}
+                    tag={2}
                     icon={SvgPhone}
                     iconActive={SvgPhoneActive}
                     onClick={() => setOpen(!open)}
@@ -318,3 +319,14 @@ export const CallsNavigationTrigger = () => {
         </Popover>
     );
 };
+
+export const withDefaultRedirects = (Story: any) => (
+    <Fragment>
+        <Switch>
+            <Redirect from="/accounting" exact to="/accounting/export" />
+            <Redirect from="/purchasing" exact to="/purchasing/repl" />
+            <Redirect from="/followUps" exact to="/followUps/sold" />
+        </Switch>
+        <Story />
+    </Fragment>
+);

package/src/utils/navigation.ts

@@ -25,8 +25,8 @@ export interface HeaderNavigationItemData extends HeaderNavigationItemLinkProps
     /** icon component of item (<svg />) */
     iconComponent?: FC;
 
-    /** item counter (optional). shown if it is set and greater than 0 */
-    counter?: CounterTagPropsType;
+    /** item tag (optional). shown if it is set and true or greater than 0 */
+    tag?: CounterTagPropsType;
 
     /** class name of link item */
     className?: string;
@@ -54,12 +54,17 @@ export interface HeaderNavigationItemSubmenu {
     groups: HeaderNavigationItemSubmenuGroup[];
 }
 
+export interface HeaderNavigationItemSubmenuLink extends HeaderNavigationItemLinkProps {
+    /** item tag (optional). shown if it is set and true or greater than 0 */
+    tag?: CounterTagPropsType;
+}
+
 export interface HeaderNavigationItemSubmenuGroup {
     /** submenu group title */
     title: string;
 
     /** submenu group links */
-    links: HeaderNavigationItemLinkProps[];
+    links: HeaderNavigationItemSubmenuLink[];
 }
 
 export interface NavLinkComponentPropsStrict {
@@ -91,8 +96,8 @@ export interface HeaderNavigationTriggerPropsStrict {
     labelClassName?: string;
     /** isActive */
     isActive?: boolean;
-    /** counter shown for item */
-    counter?: CounterTagPropsType;
+    /** counter tag shown for item */
+    tag?: CounterTagPropsType;
     /** counter component class name */
     counterClassName?: string;
     /** icon component class name */