@servicetitan/navigation 9.0.1 → 9.2.0

package/dist/components/left-navigation/side-navigation.stories.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover } from '@servicetitan/anvil2';
 import { Page } from '@servicetitan/design-system';
 import { useState } from 'react';
 import { LocationInfo, items, withAnvil, withDefaultRedirects, withMemoryRouter, } from '../../test/data';
-import { SideNavigation } from './';
+import { SideNavigation, SideNavigationLink, SideNavigationTrigger, } from './';
 const layout = (Story) => {
     return (_jsxs("div", { className: "d-f border", style: { height: '800px' }, children: [_jsx(Story, {}), _jsx("div", { className: "flex-grow-1 flex-basis-0", children: _jsx(Page, { children: _jsx(LocationInfo, {}) }) })] }));
 };
@@ -27,7 +28,7 @@ export const DefaultSideNavigation = () => {
             items.priceBook,
             items.pointOfSale,
             items.reports,
-        ], itemsTop: [items.tasks] }));
+        ], children: _jsx(SideNavigation.Top, { children: _jsx(SideNavigationLink, { ...items.tasks }) }) }));
 };
 export const SideNavigationLinksOnly = () => {
     const [expanded, setExpanded] = useState(undefined);
@@ -61,4 +62,22 @@ export const SideNavigationWithSubmenu = () => {
             items.projects,
         ] }));
 };
+const SideLinkPopoverWrapper = ({ children, context }) => {
+    return (_jsxs(Popover, { placement: "right", openOnHover: true, children: [_jsx(Popover.Trigger, { children: props => _jsx("div", { ...props, children: children }) }), _jsx(Popover.Content, { style: context.styles.popoverContent, children: "popover content" })] }));
+};
+export const SideNavigationWithCustomTopElements = () => {
+    const [expanded, setExpanded] = useState(undefined);
+    return (_jsx(SideNavigation, { expanded: expanded, onExpandedChange: setExpanded, items: [
+            items.dashboard,
+            items.schedule,
+            items.dispatch,
+            items.accountingWithSubmenu,
+            items.purchasingWithSubmenu,
+            items.followUpsWithSubmenu,
+            items.reports,
+            items.marketing,
+            items.priceBook,
+            items.projects,
+        ], children: _jsxs(SideNavigation.Top, { children: [_jsx(SideNavigationLink, { ...items.calls }), _jsx(SideNavigationLink, { ...items.tasks }), _jsx(SideNavigationTrigger, { ...items.marketing, isActive: false, wrapper: SideLinkPopoverWrapper })] }) }));
+};
 //# sourceMappingURL=side-navigation.stories.js.map

package/dist/components/left-navigation/side-navigation.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"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"}

package/dist/utils/counter-tag.d.ts

@@ -0,0 +1,8 @@
+import { CounterTagProps } from '../components/counter-tag';
+export interface CounterTagPropsStrict {
+    value: number | boolean;
+    className?: string;
+}
+export type CounterTagType = boolean | number | CounterTagProps;
+export declare const isCounterPropsObject: (tag?: CounterTagType) => tag is CounterTagProps;
+//# sourceMappingURL=counter-tag.d.ts.map

package/dist/utils/counter-tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"counter-tag.d.ts","sourceRoot":"","sources":["../../src/utils/counter-tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,GAAG,eAAe,CAAC;AAEhE,eAAO,MAAM,oBAAoB,SAAU,cAAc,KAAG,GAAG,IAAI,eACtB,CAAC"}

package/dist/utils/counter-tag.js

@@ -0,0 +1,2 @@
+export const isCounterPropsObject = (tag) => !!tag && tag.value !== undefined;
+//# sourceMappingURL=counter-tag.js.map

package/dist/utils/counter-tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"counter-tag.js","sourceRoot":"","sources":["../../src/utils/counter-tag.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,GAAoB,EAA0B,EAAE,CACjF,CAAC,CAAC,GAAG,IAAK,GAAW,CAAC,KAAK,KAAK,SAAS,CAAC"}

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

@@ -0,0 +1,3 @@
+import { HeaderNavigationItemData, HeaderNavigationItemSubmenu } from './navigation';
+export declare function getSubmenuGroupTag(submenu: HeaderNavigationItemSubmenu | undefined, defaultTag: HeaderNavigationItemData['tag']): HeaderNavigationItemData['tag'];
+//# sourceMappingURL=side-nav.d.ts.map

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

@@ -0,0 +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"}

package/dist/utils/side-nav.js

@@ -0,0 +1,27 @@
+import { isCounterPropsObject } from './counter-tag';
+export function getSubmenuGroupTag(submenu, defaultTag) {
+    if (!submenu) {
+        return 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;
+            if (ltv) {
+                if (typeof ltv === 'number') {
+                    if (typeof tagValue !== 'number') {
+                        tagValue = 0;
+                    }
+                    tagValue += ltv;
+                }
+                else if (typeof tagValue !== 'number') {
+                    tagValue = true;
+                }
+            }
+        }
+    }
+    return tagValue !== null && tagValue !== void 0 ? tagValue : defaultTag;
+}
+//# sourceMappingURL=side-nav.js.map

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

@@ -0,0 +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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "9.0.1",
+    "version": "9.2.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -43,5 +43,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "17e9d04bdccaff2925c01f9aa1216b6f53df61f5"
+    "gitHead": "97dd433c1d3ad452a2445174e297ffa4b23c0a05"
 }

package/src/components/counter-tag.tsx

@@ -1,11 +1,7 @@
 import { Tag } from '@servicetitan/design-system';
 import classNames from 'classnames';
 import { FC } from 'react';
-
-export interface CounterTagPropsStrict {
-    value: number | boolean;
-    className?: string;
-}
+import { CounterTagPropsStrict } from '../utils/counter-tag';
 
 export interface CounterTagProps extends CounterTagPropsStrict {
     [key: string]: any;

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

@@ -52,6 +52,9 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
     className,
     icon,
     iconActive,
+    iconClassName,
+    iconComponent,
+    iconName,
     isActive,
     label,
     labelClassName,

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

@@ -1,2 +1,4 @@
 export * from './header-navigation-tiny';
 export * from './side-navigation';
+export * from './side-navigation-links';
+export * from './interface';

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

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { NavLinkComponentProps } from '../../utils/navigation';
+import { SideNavigationExpandedState } from './interface';
+
+export interface NavigationComponentProps {
+    navigationComponent: FC<NavLinkComponentProps>;
+}
+
+export interface SideNavigationExpandedProps {
+    expanded?: SideNavigationExpandedState;
+}

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

@@ -0,0 +1,23 @@
+import { FC, ReactElement } from 'react';
+import { HeaderNavigationItemData } from '../../utils/navigation';
+import { SideNavigationContextType } from './side-navigation-context';
+
+export interface SideNavigationExpandedState {
+    bar: boolean;
+    submenus?: string[];
+}
+
+export interface SideNavigationLinkWrapperProps {
+    children: ReactElement<SideNavigationLinkProps> | ReactElement<SideNavigationTriggerProps>;
+    context: SideNavigationContextType;
+}
+
+export interface SideNavigationLinkProps
+    extends Omit<HeaderNavigationItemData, 'iconName' | 'submenu'> {
+    wrapper?: FC<SideNavigationLinkWrapperProps>;
+}
+export interface SideNavigationTriggerProps
+    extends Omit<SideNavigationLinkProps, 'to' | 'isActive'> {
+    isActive?: boolean;
+    wrapper?: FC<SideNavigationLinkWrapperProps>;
+}

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

@@ -0,0 +1,13 @@
+import { CSSProperties, createContext } from 'react';
+
+export interface SideNavigationContextType {
+    styles: {
+        popoverContent: CSSProperties;
+    };
+}
+
+export const SideNavigationContext = createContext<SideNavigationContextType>({
+    styles: {
+        popoverContent: {},
+    },
+});

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

@@ -0,0 +1,128 @@
+import { Icon } from '@servicetitan/anvil2';
+import SvgGroupCollapse from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';
+import SvgGroupExpand from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';
+
+import classNames from 'classnames';
+import { FC, Fragment } from 'react';
+import { HeaderNavigationItemData } from '../../utils/navigation';
+import { CounterTag } 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' | ''> {
+    submenuExpanded: boolean | undefined;
+}
+
+export const InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({
+    icon,
+    iconActive,
+    iconClassName,
+    iconComponent: IconComponent,
+    tag,
+    title,
+    submenuExpanded,
+}) => (
+    <Fragment>
+        <div className={Styles.navigationItemIconWrapper}>
+            {IconComponent ? (
+                <i className={classNames(Styles.navigationIcon, iconClassName)}>
+                    <IconComponent />
+                </i>
+            ) : (
+                <Fragment>
+                    {icon && (
+                        <Icon
+                            svg={icon}
+                            className={classNames(
+                                Styles.navigationIcon,
+                                Styles.navigationIconInactive,
+                                iconClassName
+                            )}
+                        />
+                    )}
+                    {iconActive && (
+                        <Icon
+                            svg={iconActive}
+                            className={classNames(
+                                Styles.navigationIcon,
+                                Styles.navigationIconActive,
+                                iconClassName
+                            )}
+                        />
+                    )}
+                </Fragment>
+            )}
+
+            <div className={Styles.navigationItemTextExpanded}>{title}</div>
+            {!!tag && <CounterTag data={tag} className={Styles.navigationItemCounter} />}
+            {typeof submenuExpanded === 'boolean' && (
+                <Icon
+                    svg={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}
+                    className={Styles.navigationItemGroupToggle}
+                />
+            )}
+        </div>
+
+        <div
+            className={classNames(Styles.navigationItemTextCollapsed, {
+                [Styles.navigationItemTextSmall]: title.length >= 10,
+            })}
+        >
+            {title}
+        </div>
+    </Fragment>
+);
+
+export interface InternalSideNavigationLinkProps
+    extends Omit<HeaderNavigationItemData, 'iconName'>,
+        NavigationComponentProps,
+        SideNavigationExpandedProps {
+    submenuExpanded: boolean | undefined;
+    dataPrefix?: string;
+}
+
+export const internalNavigationContentContainerProps = ({
+    className,
+    icon,
+    iconActive,
+    iconComponent,
+    id,
+    isActive,
+    prefix,
+}: Omit<SideNavigationTriggerProps, 'isActive'> & { prefix: string; isActive?: any }) => ({
+    'data-cy': `${prefix}-${id}`,
+    'data-pendo': `${prefix}-${id}`,
+    'className': classNames(Styles.navigationItem, className, {
+        [Styles.navigationItemActive]: isActive === true,
+        [Styles.navigationItemIconSwitch]: !!icon && !!iconActive && !iconComponent,
+    }),
+});
+
+/** Side Navigation menu item (for internal usage) */
+export const InternalSideNavigationLink: FC<InternalSideNavigationLinkProps> = ({
+    to,
+    className,
+    dataPrefix,
+    isActive,
+    navigationComponent: NavigationComponent,
+    submenuExpanded,
+    ...props
+}) => {
+    return (
+        <NavigationComponent
+            {...internalNavigationContentContainerProps({
+                ...props,
+                prefix: dataPrefix ?? 'navigation-item',
+                className,
+                isActive,
+            })}
+            to={to}
+            isActive={typeof isActive === 'function' ? isActive : undefined}
+            activeClassName={Styles.navigationItemActive}
+        >
+            <InternalSideNavigationItemContent submenuExpanded={submenuExpanded} {...props} />
+        </NavigationComponent>
+    );
+};

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

@@ -0,0 +1,51 @@
+import classNames from 'classnames';
+import { FC, ReactElement, useContext } from 'react';
+import { NavigationComponentContext } from '../../utils/navigation-context';
+import { SideNavigationLinkProps, SideNavigationTriggerProps } from './interface';
+import { SideNavigationContext } from './side-navigation-context';
+import {
+    InternalSideNavigationItemContent,
+    InternalSideNavigationLink,
+    internalNavigationContentContainerProps,
+} from './side-navigation-links-internal';
+
+const WrappedLink: FC<{
+    children: ReactElement;
+    wrapper: NonNullable<SideNavigationLinkProps['wrapper']>;
+}> = ({ children, wrapper: WrapperComponent }) => {
+    return (
+        <WrapperComponent context={useContext(SideNavigationContext)}>{children}</WrapperComponent>
+    );
+};
+/** Side Navigation menu link */
+export function SideNavigationLink({ wrapper, ...props }: SideNavigationLinkProps) {
+    const NavigationComponent = useContext(NavigationComponentContext);
+
+    const element = (
+        <InternalSideNavigationLink
+            {...props}
+            navigationComponent={NavigationComponent}
+            submenuExpanded={undefined}
+            dataPrefix="navigation-link"
+        />
+    );
+
+    return wrapper ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
+}
+
+/** Side Navigation menu trigger */
+export function SideNavigationTrigger({ wrapper, ...props }: SideNavigationTriggerProps) {
+    const element = (
+        <div
+            {...internalNavigationContentContainerProps({
+                ...props,
+                prefix: 'navigation-trigger',
+                className: classNames(props.className, 'cursor-pointer'),
+                isActive: props.isActive,
+            })}
+        >
+            <InternalSideNavigationItemContent submenuExpanded={undefined} {...props} />
+        </div>
+    );
+    return wrapper ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
+}

package/src/components/left-navigation/side-navigation.module.less

@@ -44,7 +44,10 @@
                 padding: @spacing-half;
             }
 
-            .navigation-item-text {
+            .navigation-item-text-expanded {
+                display: none;
+            }
+            .navigation-item-text-collapsed {
                 font-family: @base-font-family;
                 font-size: 11px;
                 line-height: 11px;
@@ -52,7 +55,7 @@
                 text-align: center;
             }
 
-            .navigation-item-text.navigation-item-text-small {
+            .navigation-item-text-collapsed.navigation-item-text-small {
                 font-size: 10.5px;
             }
         }
@@ -81,13 +84,17 @@
                 padding: @spacing-1 @spacing-half;
             }
 
-            .navigation-item-text {
+            .navigation-item-text-expanded {
                 font-family: @base-font-family;
                 font-size: @typescale-3;
                 padding-left: @spacing-1;
                 flex: 1;
             }
 
+            .navigation-item-text-collapsed {
+                display: none;
+            }
+
             .navigation-item-counter {
                 margin-right: @spacing-1;
             }
@@ -190,7 +197,7 @@
     }
 
     .navigation-item-counter {
-        color: @color-white;
+        color: @color-black;
         font-weight: @font-weight-semibold;
         min-width: 12px !important;
         min-height: 12px !important;

package/src/components/left-navigation/side-navigation.module.less.d.ts

@@ -9,7 +9,8 @@ export const navigationItemCounter: string;
 export const navigationItemGroupToggle: string;
 export const navigationItemIconSwitch: string;
 export const navigationItemIconWrapper: string;
-export const navigationItemText: string;
+export const navigationItemTextCollapsed: string;
+export const navigationItemTextExpanded: string;
 export const navigationItemTextSmall: string;
 export const optionsIcon: string;
 export const optionsIconWrapper: string;

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

@@ -1,5 +1,6 @@
+import { Popover } from '@servicetitan/anvil2';
 import { Page } from '@servicetitan/design-system';
-import { ComponentType, useState } from 'react';
+import { ComponentType, FC, useState } from 'react';
 import {
     LocationInfo,
     items,
@@ -7,7 +8,13 @@ import {
     withDefaultRedirects,
     withMemoryRouter,
 } from '../../test/data';
-import { SideNavigation, SideNavigationExpandedState } from './';
+import {
+    SideNavigation,
+    SideNavigationExpandedState,
+    SideNavigationLink,
+    SideNavigationLinkWrapperProps,
+    SideNavigationTrigger,
+} from './';
 
 const layout = (Story: ComponentType) => {
     return (
@@ -50,8 +57,11 @@ export const DefaultSideNavigation = () => {
                 items.pointOfSale,
                 items.reports,
             ]}
-            itemsTop={[items.tasks]}
-        />
+        >
+            <SideNavigation.Top>
+                <SideNavigationLink {...items.tasks} />
+            </SideNavigation.Top>
+        </SideNavigation>
     );
 };
 
@@ -106,3 +116,47 @@ export const SideNavigationWithSubmenu = () => {
         />
     );
 };
+
+const SideLinkPopoverWrapper: FC<SideNavigationLinkWrapperProps> = ({ children, context }) => {
+    return (
+        <Popover placement="right" openOnHover>
+            <Popover.Trigger>{props => <div {...props}>{children}</div>}</Popover.Trigger>
+            <Popover.Content style={context.styles.popoverContent}>popover content</Popover.Content>
+        </Popover>
+    );
+};
+
+export const SideNavigationWithCustomTopElements = () => {
+    const [expanded, setExpanded] = useState<SideNavigationExpandedState | undefined>(undefined);
+    return (
+        <SideNavigation
+            expanded={expanded}
+            onExpandedChange={setExpanded}
+            items={[
+                items.dashboard,
+                items.schedule,
+                items.dispatch,
+
+                items.accountingWithSubmenu,
+                items.purchasingWithSubmenu,
+
+                items.followUpsWithSubmenu,
+                items.reports,
+                items.marketing,
+                items.priceBook,
+
+                items.projects,
+            ]}
+        >
+            <SideNavigation.Top>
+                <SideNavigationLink {...items.calls} />
+                <SideNavigationLink {...items.tasks} />
+                <SideNavigationTrigger
+                    {...items.marketing}
+                    isActive={false}
+                    wrapper={SideLinkPopoverWrapper}
+                />
+            </SideNavigation.Top>
+        </SideNavigation>
+    );
+};