@servicetitan/navigation 9.0.0 → 9.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/counter-tag.d.ts +1 -4
- package/dist/components/counter-tag.d.ts.map +1 -1
- package/dist/components/counter-tag.js.map +1 -1
- package/dist/components/layout.stories.js +2 -2
- package/dist/components/layout.stories.js.map +1 -1
- package/dist/components/left-navigation/index.d.ts +2 -0
- package/dist/components/left-navigation/index.d.ts.map +1 -1
- package/dist/components/left-navigation/index.js +2 -0
- package/dist/components/left-navigation/index.js.map +1 -1
- package/dist/components/left-navigation/interface-internal.d.ts +10 -0
- package/dist/components/left-navigation/interface-internal.d.ts.map +1 -0
- package/dist/components/left-navigation/interface-internal.js +2 -0
- package/dist/components/left-navigation/interface-internal.js.map +1 -0
- package/dist/components/left-navigation/interface.d.ts +11 -0
- package/dist/components/left-navigation/interface.d.ts.map +1 -0
- package/dist/components/left-navigation/interface.js +2 -0
- package/dist/components/left-navigation/interface.js.map +1 -0
- package/dist/components/left-navigation/side-navigation-links-internal.d.ts +23 -0
- package/dist/components/left-navigation/side-navigation-links-internal.d.ts.map +1 -0
- package/dist/components/left-navigation/side-navigation-links-internal.js +29 -0
- package/dist/components/left-navigation/side-navigation-links-internal.js.map +1 -0
- package/dist/components/left-navigation/side-navigation-links.d.ts +7 -0
- package/dist/components/left-navigation/side-navigation-links.d.ts.map +1 -0
- package/dist/components/left-navigation/side-navigation-links.js +20 -0
- package/dist/components/left-navigation/side-navigation-links.js.map +1 -0
- package/dist/components/left-navigation/side-navigation.d.ts +3 -11
- package/dist/components/left-navigation/side-navigation.d.ts.map +1 -1
- package/dist/components/left-navigation/side-navigation.js +12 -27
- package/dist/components/left-navigation/side-navigation.js.map +1 -1
- package/dist/components/left-navigation/side-navigation.module.less +11 -4
- package/dist/components/left-navigation/side-navigation.stories.d.ts +1 -0
- package/dist/components/left-navigation/side-navigation.stories.d.ts.map +1 -1
- package/dist/components/left-navigation/side-navigation.stories.js +26 -7
- package/dist/components/left-navigation/side-navigation.stories.js.map +1 -1
- package/dist/test/data.d.ts +1 -0
- package/dist/test/data.d.ts.map +1 -1
- package/dist/test/data.js +3 -2
- package/dist/test/data.js.map +1 -1
- package/dist/utils/counter-tag.d.ts +8 -0
- package/dist/utils/counter-tag.d.ts.map +1 -0
- package/dist/utils/counter-tag.js +2 -0
- package/dist/utils/counter-tag.js.map +1 -0
- package/dist/utils/side-nav.d.ts +3 -0
- package/dist/utils/side-nav.d.ts.map +1 -0
- package/dist/utils/side-nav.js +27 -0
- package/dist/utils/side-nav.js.map +1 -0
- package/package.json +4 -4
- package/src/components/counter-tag.tsx +1 -5
- package/src/components/layout.stories.tsx +2 -2
- package/src/components/left-navigation/index.ts +2 -0
- package/src/components/left-navigation/interface-internal.ts +11 -0
- package/src/components/left-navigation/interface.ts +13 -0
- package/src/components/left-navigation/side-navigation-links-internal.tsx +128 -0
- package/src/components/left-navigation/side-navigation-links.tsx +39 -0
- package/src/components/left-navigation/side-navigation.module.less +11 -4
- package/src/components/left-navigation/side-navigation.module.less.d.ts +2 -1
- package/src/components/left-navigation/side-navigation.stories.tsx +66 -7
- package/src/components/left-navigation/side-navigation.tsx +28 -131
- package/src/test/data.tsx +13 -2
- package/src/utils/counter-tag.ts +11 -0
- package/src/utils/side-nav.ts +34 -0
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
|
|
3
|
-
value: number | boolean;
|
|
4
|
-
className?: string;
|
|
5
|
-
}
|
|
2
|
+
import { CounterTagPropsStrict } from '../utils/counter-tag';
|
|
6
3
|
export interface CounterTagProps extends CounterTagPropsStrict {
|
|
7
4
|
[key: string]: any;
|
|
8
5
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"counter-tag.d.ts","sourceRoot":"","sources":["../../src/components/counter-tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"counter-tag.d.ts","sourceRoot":"","sources":["../../src/components/counter-tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC1D,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,MAAM,GAAG,eAAe,CAAC;AAYrE,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,mBAAmB,GAAG,SAAS,CAAC;CACzC,CAkBA,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"counter-tag.js","sourceRoot":"","sources":["../../src/components/counter-tag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAC;AAClD,OAAO,UAAU,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"counter-tag.js","sourceRoot":"","sources":["../../src/components/counter-tag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAC;AAClD,OAAO,UAAU,MAAM,YAAY,CAAC;AAUpC,MAAM,eAAe,GAAG,CACpB,KAAsC,EACL,EAAE;IACnC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;QAC1D,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;IAC5B,CAAC;IAED,OAAO,KAAK,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAIlB,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE;IACxC,MAAM,KAAK,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IAEpC,OAAO,KAAK,CAAC,CAAC,CAAC,CACX,KAAC,GAAG,IACA,KAAK,EAAC,UAAU,KACZ,KAAK,EACT,SAAS,EAAE,UAAU,CACjB,SAAS,EACT,KAAK,CAAC,SAAS,EACf,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,KAAK,GAAG,EAAE,IAAI,aAAa,CACvE,EACD,OAAO,QACP,KAAK,kBAEJ,KAAK,CAAC,KAAK,GACV,CACT,CAAC,CAAC,CAAC,IAAI,CAAC;AACb,CAAC,CAAC"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Page, Sidebar } from '@servicetitan/design-system';
|
|
3
|
-
import { LocationInfo, withAnvil, withMemoryRouter } from '../test/data';
|
|
3
|
+
import { LocationInfo, withAnvil, withDefaultRedirects, withMemoryRouter } from '../test/data';
|
|
4
4
|
import { WithAllMonolithData, WithAllMonolithDataCommercial, } from './left-navigation/header-navigation-tiny.stories';
|
|
5
5
|
import { DefaultSideNavigation, SideNavigationLinksOnly, SideNavigationWithSubmenu, } from './left-navigation/side-navigation.stories';
|
|
6
6
|
export default {
|
|
7
7
|
title: 'Navigation/Layout',
|
|
8
8
|
parameters: {},
|
|
9
|
-
decorators: [withMemoryRouter, withAnvil],
|
|
9
|
+
decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
|
|
10
10
|
};
|
|
11
11
|
export const LeftNavLayout = () => {
|
|
12
12
|
return (_jsxs("div", { className: "d-f border flex-column", style: { height: '800px' }, children: [_jsx(WithAllMonolithData, {}), _jsxs("div", { className: "flex-grow-1 flex-basis-0 d-f", children: [_jsx(DefaultSideNavigation, {}), _jsx("div", { className: "flex-grow-1 flex-basis-0" })] })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.stories.js","sourceRoot":"","sources":["../../src/components/layout.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"layout.stories.js","sourceRoot":"","sources":["../../src/components/layout.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC/F,OAAO,EACH,mBAAmB,EACnB,6BAA6B,GAChC,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,qBAAqB,EACrB,uBAAuB,EACvB,yBAAyB,GAC5B,MAAM,2CAA2C,CAAC;AAEnD,eAAe;IACX,KAAK,EAAE,mBAAmB;IAC1B,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,CAAC,oBAAoB,EAAE,gBAAgB,EAAE,SAAS,CAAC;CAClE,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAC9B,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,mBAAmB,KAAG,EACvB,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,qBAAqB,KAAG,EACzB,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IACxC,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,6BAA6B,KAAG,EACjC,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,qBAAqB,KAAG,EACzB,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACvC,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,6BAA6B,KAAG,EACjC,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,uBAAuB,KAAG,EAC3B,cAAK,SAAS,EAAC,0BAA0B,GAAG,IAC1C,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACrC,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,6BAA6B,KAAG,EACjC,eAAK,SAAS,EAAC,8BAA8B,aACzC,KAAC,yBAAyB,KAAG,EAC7B,cAAK,SAAS,EAAC,0BAA0B,YACrC,KAAC,IAAI,IAAC,OAAO,EAAE,KAAC,OAAO,IAAC,eAAe,EAAC,WAAW,wBAAkB,YACjE,KAAC,YAAY,KAAG,GACb,GACL,IACJ,IACJ,CACT,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,aAAa,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/left-navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/left-navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,aAAa,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { NavLinkComponentProps } from '../../utils/navigation';
|
|
3
|
+
import { SideNavigationExpandedState } from './interface';
|
|
4
|
+
export interface NavigationComponentProps {
|
|
5
|
+
navigationComponent: FC<NavLinkComponentProps>;
|
|
6
|
+
}
|
|
7
|
+
export interface SideNavigationExpandedProps {
|
|
8
|
+
expanded?: SideNavigationExpandedState;
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=interface-internal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interface-internal.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/interface-internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAC;AAE1D,MAAM,WAAW,wBAAwB;IACrC,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;CAClD;AAED,MAAM,WAAW,2BAA2B;IACxC,QAAQ,CAAC,EAAE,2BAA2B,CAAC;CAC1C"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interface-internal.js","sourceRoot":"","sources":["../../../src/components/left-navigation/interface-internal.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { HeaderNavigationItemData } from '../../utils/navigation';
|
|
2
|
+
export interface SideNavigationExpandedState {
|
|
3
|
+
bar: boolean;
|
|
4
|
+
submenus?: string[];
|
|
5
|
+
}
|
|
6
|
+
export interface SideNavigationLinkProps extends Omit<HeaderNavigationItemData, 'iconName' | 'submenu'> {
|
|
7
|
+
}
|
|
8
|
+
export interface SideNavigationTriggerProps extends Omit<SideNavigationLinkProps, 'to' | 'isActive'> {
|
|
9
|
+
isActive?: boolean;
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=interface.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAElE,MAAM,WAAW,2BAA2B;IACxC,GAAG,EAAE,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,uBACb,SAAQ,IAAI,CAAC,wBAAwB,EAAE,UAAU,GAAG,SAAS,CAAC;CAAG;AACrE,MAAM,WAAW,0BACb,SAAQ,IAAI,CAAC,uBAAuB,EAAE,IAAI,GAAG,UAAU,CAAC;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../../src/components/left-navigation/interface.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { HeaderNavigationItemData } from '../../utils/navigation';
|
|
3
|
+
import { SideNavigationTriggerProps } from './interface';
|
|
4
|
+
import { NavigationComponentProps, SideNavigationExpandedProps } from './interface-internal';
|
|
5
|
+
export interface InternalSideNavigationItemContentProps extends Omit<HeaderNavigationItemData, 'iconName' | 'to' | ''> {
|
|
6
|
+
submenuExpanded: boolean | undefined;
|
|
7
|
+
}
|
|
8
|
+
export declare const InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps>;
|
|
9
|
+
export interface InternalSideNavigationLinkProps extends Omit<HeaderNavigationItemData, 'iconName'>, NavigationComponentProps, SideNavigationExpandedProps {
|
|
10
|
+
submenuExpanded: boolean | undefined;
|
|
11
|
+
dataPrefix?: string;
|
|
12
|
+
}
|
|
13
|
+
export declare const internalNavigationContentContainerProps: ({ className, icon, iconActive, iconComponent, id, isActive, prefix, }: Omit<SideNavigationTriggerProps, "isActive"> & {
|
|
14
|
+
prefix: string;
|
|
15
|
+
isActive?: any;
|
|
16
|
+
}) => {
|
|
17
|
+
'data-cy': string;
|
|
18
|
+
'data-pendo': string;
|
|
19
|
+
className: string;
|
|
20
|
+
};
|
|
21
|
+
/** Side Navigation menu item (for internal usage) */
|
|
22
|
+
export declare const InternalSideNavigationLink: FC<InternalSideNavigationLinkProps>;
|
|
23
|
+
//# sourceMappingURL=side-navigation-links-internal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"side-navigation-links-internal.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation-links-internal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,MAAM,sBAAsB,CAAC;AAG7F,MAAM,WAAW,sCACb,SAAQ,IAAI,CAAC,wBAAwB,EAAE,UAAU,GAAG,IAAI,GAAG,EAAE,CAAC;IAC9D,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;CACxC;AAED,eAAO,MAAM,iCAAiC,EAAE,EAAE,CAAC,sCAAsC,CA0DxF,CAAC;AAEF,MAAM,WAAW,+BACb,SAAQ,IAAI,CAAC,wBAAwB,EAAE,UAAU,CAAC,EAC9C,wBAAwB,EACxB,2BAA2B;IAC/B,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,uCAAuC,0EAQjD,IAAI,CAAC,0BAA0B,EAAE,UAAU,CAAC,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE;;;;CAOlF,CAAC;AAEH,qDAAqD;AACrD,eAAO,MAAM,0BAA0B,EAAE,EAAE,CAAC,+BAA+B,CAwB1E,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Icon } from '@servicetitan/anvil2';
|
|
3
|
+
import SvgGroupCollapse from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';
|
|
4
|
+
import SvgGroupExpand from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';
|
|
5
|
+
import classNames from 'classnames';
|
|
6
|
+
import { Fragment } from 'react';
|
|
7
|
+
import { CounterTag } from '../counter-tag';
|
|
8
|
+
import * as Styles from './side-navigation.module.less';
|
|
9
|
+
export const InternalSideNavigationItemContent = ({ icon, iconActive, iconClassName, iconComponent: IconComponent, tag, title, submenuExpanded, }) => (_jsxs(Fragment, { children: [_jsxs("div", { className: Styles.navigationItemIconWrapper, children: [IconComponent ? (_jsx("i", { className: classNames(Styles.navigationIcon, iconClassName), children: _jsx(IconComponent, {}) })) : (_jsxs(Fragment, { children: [icon && (_jsx(Icon, { svg: icon, className: classNames(Styles.navigationIcon, Styles.navigationIconInactive, iconClassName) })), iconActive && (_jsx(Icon, { svg: iconActive, className: classNames(Styles.navigationIcon, Styles.navigationIconActive, iconClassName) }))] })), _jsx("div", { className: Styles.navigationItemTextExpanded, children: title }), !!tag && _jsx(CounterTag, { data: tag, className: Styles.navigationItemCounter }), typeof submenuExpanded === 'boolean' && (_jsx(Icon, { svg: submenuExpanded ? SvgGroupCollapse : SvgGroupExpand, className: Styles.navigationItemGroupToggle }))] }), _jsx("div", { className: classNames(Styles.navigationItemTextCollapsed, {
|
|
10
|
+
[Styles.navigationItemTextSmall]: title.length >= 10,
|
|
11
|
+
}), children: title })] }));
|
|
12
|
+
export const internalNavigationContentContainerProps = ({ className, icon, iconActive, iconComponent, id, isActive, prefix, }) => ({
|
|
13
|
+
'data-cy': `${prefix}-${id}`,
|
|
14
|
+
'data-pendo': `${prefix}-${id}`,
|
|
15
|
+
'className': classNames(Styles.navigationItem, className, {
|
|
16
|
+
[Styles.navigationItemActive]: isActive === true,
|
|
17
|
+
[Styles.navigationItemIconSwitch]: !!icon && !!iconActive && !iconComponent,
|
|
18
|
+
}),
|
|
19
|
+
});
|
|
20
|
+
/** Side Navigation menu item (for internal usage) */
|
|
21
|
+
export const InternalSideNavigationLink = ({ to, className, dataPrefix, isActive, navigationComponent: NavigationComponent, submenuExpanded, ...props }) => {
|
|
22
|
+
return (_jsx(NavigationComponent, { ...internalNavigationContentContainerProps({
|
|
23
|
+
...props,
|
|
24
|
+
prefix: dataPrefix !== null && dataPrefix !== void 0 ? dataPrefix : 'navigation-item',
|
|
25
|
+
className,
|
|
26
|
+
isActive,
|
|
27
|
+
}), to: to, isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.navigationItemActive, children: _jsx(InternalSideNavigationItemContent, { submenuExpanded: submenuExpanded, ...props }) }));
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=side-navigation-links-internal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"side-navigation-links-internal.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation-links-internal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { SideNavigationLinkProps, SideNavigationTriggerProps } from './interface';
|
|
3
|
+
/** Side Navigation menu link */
|
|
4
|
+
export declare const SideNavigationLink: FC<SideNavigationLinkProps>;
|
|
5
|
+
/** Side Navigation menu link */
|
|
6
|
+
export declare const SideNavigationTrigger: FC<SideNavigationTriggerProps>;
|
|
7
|
+
//# sourceMappingURL=side-navigation-links.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"side-navigation-links.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation-links.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,uBAAuB,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAOlF,gCAAgC;AAChC,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAW1D,CAAC;AAEF,gCAAgC;AAChC,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAahE,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { useContext } from 'react';
|
|
4
|
+
import { NavigationComponentContext } from '../../utils/navigation-context';
|
|
5
|
+
import { InternalSideNavigationItemContent, InternalSideNavigationLink, internalNavigationContentContainerProps, } from './side-navigation-links-internal';
|
|
6
|
+
/** Side Navigation menu link */
|
|
7
|
+
export const SideNavigationLink = props => {
|
|
8
|
+
const NavigationComponent = useContext(NavigationComponentContext);
|
|
9
|
+
return (_jsx(InternalSideNavigationLink, { ...props, navigationComponent: NavigationComponent, submenuExpanded: undefined, dataPrefix: "navigation-link" }));
|
|
10
|
+
};
|
|
11
|
+
/** Side Navigation menu link */
|
|
12
|
+
export const SideNavigationTrigger = props => {
|
|
13
|
+
return (_jsx("div", { ...internalNavigationContentContainerProps({
|
|
14
|
+
...props,
|
|
15
|
+
prefix: 'navigation-trigger',
|
|
16
|
+
className: classNames(props.className, 'cursor-pointer'),
|
|
17
|
+
isActive: props.isActive,
|
|
18
|
+
}), children: _jsx(InternalSideNavigationItemContent, { submenuExpanded: undefined, ...props }) }));
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=side-navigation-links.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"side-navigation-links.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation-links.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAM,UAAU,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAE5E,OAAO,EACH,iCAAiC,EACjC,0BAA0B,EAC1B,uCAAuC,GAC1C,MAAM,kCAAkC,CAAC;AAE1C,gCAAgC;AAChC,MAAM,CAAC,MAAM,kBAAkB,GAAgC,KAAK,CAAC,EAAE;IACnE,MAAM,mBAAmB,GAAG,UAAU,CAAC,0BAA0B,CAAC,CAAC;IAEnE,OAAO,CACH,KAAC,0BAA0B,OACnB,KAAK,EACT,mBAAmB,EAAE,mBAAmB,EACxC,eAAe,EAAE,SAAS,EAC1B,UAAU,EAAC,iBAAiB,GAC9B,CACL,CAAC;AACN,CAAC,CAAC;AAEF,gCAAgC;AAChC,MAAM,CAAC,MAAM,qBAAqB,GAAmC,KAAK,CAAC,EAAE;IACzE,OAAO,CACH,iBACQ,uCAAuC,CAAC;YACxC,GAAG,KAAK;YACR,MAAM,EAAE,oBAAoB;YAC5B,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,gBAAgB,CAAC;YACxD,QAAQ,EAAE,KAAK,CAAC,QAAQ;SAC3B,CAAC,YAEF,KAAC,iCAAiC,IAAC,eAAe,EAAE,SAAS,KAAM,KAAK,GAAI,GAC1E,CACT,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
2
|
import { HeaderNavigationItemData } from '../../utils/navigation';
|
|
3
|
-
|
|
4
|
-
bar: boolean;
|
|
5
|
-
submenus?: string[];
|
|
6
|
-
}
|
|
3
|
+
import { SideNavigationExpandedState } from './interface';
|
|
7
4
|
export interface SideNavigationProps {
|
|
8
5
|
/** container class name */
|
|
9
6
|
className?: string;
|
|
@@ -12,16 +9,11 @@ export interface SideNavigationProps {
|
|
|
12
9
|
/** main navigation items */
|
|
13
10
|
items?: HeaderNavigationItemData[];
|
|
14
11
|
/** top navigation items */
|
|
15
|
-
itemsTop?:
|
|
12
|
+
itemsTop?: ReactNode;
|
|
16
13
|
/** is menu expanded */
|
|
17
14
|
expanded?: SideNavigationExpandedState;
|
|
18
15
|
/** expand change handler */
|
|
19
16
|
onExpandedChange?(expanded: SideNavigationExpandedState): void;
|
|
20
17
|
}
|
|
21
18
|
export declare const SideNavigation: FC<SideNavigationProps>;
|
|
22
|
-
/** Side Navigation options toggle */
|
|
23
|
-
export declare const SideNavigationOptionsToggle: FC<{
|
|
24
|
-
expanded?: SideNavigationExpandedState;
|
|
25
|
-
onExpandedChange?(expanded: SideNavigationExpandedState): void;
|
|
26
|
-
}>;
|
|
27
19
|
//# sourceMappingURL=side-navigation.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEH,EAAE,EAIF,SAAS,EAGZ,MAAM,OAAO,CAAC;AACf,OAAO,EACH,wBAAwB,EAG3B,MAAM,wBAAwB,CAAC;AAIhC,OAAO,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAC;AAM1D,MAAM,WAAW,mBAAmB;IAChC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,KAAK,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACnC,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,2BAA2B,CAAC;IACvC,4BAA4B;IAC5B,gBAAgB,CAAC,CAAC,QAAQ,EAAE,2BAA2B,GAAG,IAAI,CAAC;CAClE;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAwDlD,CAAC"}
|
|
@@ -1,54 +1,39 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Icon, Popover, Text } from '@servicetitan/anvil2';
|
|
3
|
-
import SvgGroupCollapse from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';
|
|
4
|
-
import SvgGroupExpand from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';
|
|
5
3
|
import SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';
|
|
6
4
|
import SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';
|
|
7
5
|
import { Collapsible, Headline } from '@servicetitan/design-system';
|
|
8
6
|
import classNames from 'classnames';
|
|
9
7
|
import { Fragment, useCallback, useContext, } from 'react';
|
|
10
8
|
import { NavigationComponentContext } from '../../utils/navigation-context';
|
|
9
|
+
import { getSubmenuGroupTag } from '../../utils/side-nav';
|
|
11
10
|
import { CounterTag } from '../counter-tag';
|
|
11
|
+
import { InternalSideNavigationLink } from './side-navigation-links-internal';
|
|
12
12
|
import * as Styles from './side-navigation.module.less';
|
|
13
13
|
import { withTooltip } from './with-tooltip';
|
|
14
14
|
export const SideNavigation = ({ className, expanded, id, items, itemsTop, onExpandedChange, }) => {
|
|
15
15
|
const NavigationComponent = useContext(NavigationComponentContext);
|
|
16
|
-
return (_jsxs("div", { className: classNames(Styles.sideNav, (expanded === null || expanded === void 0 ? void 0 : expanded.bar) ? Styles.sideNavExpanded : Styles.sideNavSlim, className), id: id, "data-cy": "side-navigation", children: [!!
|
|
17
|
-
};
|
|
18
|
-
/** Side Navigation menu item */
|
|
19
|
-
const SideNavigationItem = ({ id, to, title, className, iconClassName, iconComponent: IconComponent, icon, iconActive, isActive, navigationComponent: NavigationComponent, tag, expanded, submenu, }) => {
|
|
20
|
-
var _a;
|
|
21
|
-
const iconSwitch = !!icon && !!iconActive && !IconComponent;
|
|
22
|
-
const hasSubmenu = !!submenu;
|
|
23
|
-
return (_jsxs(NavigationComponent, { "data-cy": `navigation-item-${id}`, "data-pendo": `navigation-item-${id}`, to: to, className: classNames(Styles.navigationItem, className, {
|
|
24
|
-
[Styles.navigationItemActive]: isActive === true,
|
|
25
|
-
[Styles.navigationItemIconSwitch]: iconSwitch,
|
|
26
|
-
}), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.navigationItemActive, children: [_jsxs("div", { className: Styles.navigationItemIconWrapper, children: [IconComponent ? (_jsx("i", { className: classNames(Styles.navigationIcon, iconClassName), children: _jsx(IconComponent, {}) })) : (_jsxs(Fragment, { children: [icon && (_jsx(Icon, { svg: icon, className: classNames(Styles.navigationIcon, Styles.navigationIconInactive, iconClassName) })), iconActive && (_jsx(Icon, { svg: iconActive, className: classNames(Styles.navigationIcon, Styles.navigationIconActive, iconClassName) }))] })), !!(expanded === null || expanded === void 0 ? void 0 : expanded.bar) && _jsx("div", { className: Styles.navigationItemText, children: title }), !!tag && _jsx(CounterTag, { data: tag, className: Styles.navigationItemCounter }), hasSubmenu && !!(expanded === null || expanded === void 0 ? void 0 : expanded.bar) && (_jsx(Icon, { svg: ((_a = expanded === null || expanded === void 0 ? void 0 : expanded.submenus) === null || _a === void 0 ? void 0 : _a.includes(id)) ? SvgGroupCollapse : SvgGroupExpand, className: Styles.navigationItemGroupToggle }))] }), !(expanded === null || expanded === void 0 ? void 0 : expanded.bar) && (_jsx("div", { className: classNames(Styles.navigationItemText, {
|
|
27
|
-
[Styles.navigationItemTextSmall]: title.length >= 10,
|
|
28
|
-
}), children: title }))] }, id));
|
|
16
|
+
return (_jsxs("div", { className: classNames(Styles.sideNav, (expanded === null || expanded === void 0 ? void 0 : expanded.bar) ? Styles.sideNavExpanded : Styles.sideNavSlim, className), id: id, "data-cy": "side-navigation", children: [!!itemsTop && (_jsxs(Fragment, { children: [_jsx("div", { className: Styles.sideNavTop, "data-cy": "navigation-items-top", children: itemsTop }), _jsx("div", { className: Styles.divider })] })), _jsx("div", { className: Styles.sideNavContent, "data-cy": "navigation-items", children: items === null || items === void 0 ? void 0 : items.map(item => item.submenu ? (_jsx(SideNavigationGroupItem, { expanded: expanded, onExpandedChange: onExpandedChange, navigationComponent: NavigationComponent, ...item }, item.id)) : (_jsx(InternalSideNavigationLink, { submenuExpanded: undefined, navigationComponent: NavigationComponent, ...item }, item.id))) }), _jsx("div", { className: Styles.divider }), _jsx("div", { className: Styles.sideNavBottom, children: _jsx(SideNavigationOptionsToggle, { expanded: expanded, onExpandedChange: onExpandedChange }) })] }));
|
|
29
17
|
};
|
|
30
18
|
const submenuPopoverStyles = { '--background-color-strong': '#24323C' };
|
|
31
|
-
const getFirstSubmenuLinkTo = (submenu, defaultTo) => { var _a, _b, _c; return (_c = (_b = (_a = submenu === null || submenu === void 0 ? void 0 : submenu.groups[0]) === null || _a === void 0 ? void 0 : _a.links) === null || _b === void 0 ? void 0 : _b[0].to) !== null && _c !== void 0 ? _c : defaultTo; };
|
|
32
19
|
/** Side Navigation menu item */
|
|
33
20
|
const SideNavigationGroupItem = ({ onExpandedChange, ...props }) => {
|
|
34
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
21
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
22
|
+
const isSubmenuExpanded = (_c = (_b = (_a = props.expanded) === null || _a === void 0 ? void 0 : _a.submenus) === null || _b === void 0 ? void 0 : _b.includes(props.id)) !== null && _c !== void 0 ? _c : false;
|
|
35
23
|
const triggerClick = useCallback((e) => {
|
|
36
|
-
var _a, _b, _c, _d
|
|
24
|
+
var _a, _b, _c, _d;
|
|
37
25
|
e.stopPropagation();
|
|
38
26
|
e.preventDefault();
|
|
39
|
-
const isSubmenuExpanded = (_b = (_a = props.expanded) === null || _a === void 0 ? void 0 : _a.submenus) === null || _b === void 0 ? void 0 : _b.includes(props.id);
|
|
40
27
|
onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange({
|
|
41
|
-
bar: !!((
|
|
28
|
+
bar: !!((_a = props.expanded) === null || _a === void 0 ? void 0 : _a.bar),
|
|
42
29
|
submenus: [
|
|
43
|
-
...((
|
|
30
|
+
...((_d = (_c = (_b = props.expanded) === null || _b === void 0 ? void 0 : _b.submenus) === null || _c === void 0 ? void 0 : _c.filter(id => id !== props.id)) !== null && _d !== void 0 ? _d : []),
|
|
44
31
|
...(isSubmenuExpanded ? [] : [props.id]),
|
|
45
32
|
],
|
|
46
33
|
});
|
|
47
|
-
}, [props.id, props.expanded, onExpandedChange]);
|
|
48
|
-
const tag = (
|
|
49
|
-
|
|
50
|
-
: props.tag;
|
|
51
|
-
return ((_b = props.expanded) === null || _b === void 0 ? void 0 : _b.bar) ? (_jsxs(Fragment, { children: [_jsx("div", { onClickCapture: triggerClick, children: _jsx(SideNavigationItem, { ...props, tag: tag }) }), _jsx(Collapsible, { open: (_d = (_c = props.expanded) === null || _c === void 0 ? void 0 : _c.submenus) === null || _d === void 0 ? void 0 : _d.includes(props.id), animate: true, children: _jsx("div", { className: Styles.submenu, children: _jsx(SideNavigationGroupContent, { groups: (_f = (_e = props.submenu) === null || _e === void 0 ? void 0 : _e.groups) !== null && _f !== void 0 ? _f : [], navigationComponent: props.navigationComponent }) }) })] })) : (_jsxs(Popover, { placement: "right-start", openOnHover: true, children: [_jsx(Popover.Trigger, { children: (triggerProps) => (_jsx("div", { ...triggerProps, children: _jsx(SideNavigationItem, { ...props, to: getFirstSubmenuLinkTo(props.submenu, props.to), tag: tag }) })) }), _jsx(Popover.Content, { style: submenuPopoverStyles, className: "z-global-nav-i", children: _jsxs("div", { className: Styles.submenuPopover, children: [_jsx(Headline, { size: "small", className: "c-white m-b-half-i m-t-1", children: props.title }), _jsx(SideNavigationGroupContent, { groups: (_h = (_g = props.submenu) === null || _g === void 0 ? void 0 : _g.groups) !== null && _h !== void 0 ? _h : [], navigationComponent: props.navigationComponent })] }) })] }));
|
|
34
|
+
}, [props.id, props.expanded, isSubmenuExpanded, onExpandedChange]);
|
|
35
|
+
const tag = getSubmenuGroupTag(props.submenu, props.tag);
|
|
36
|
+
return ((_d = props.expanded) === null || _d === void 0 ? void 0 : _d.bar) ? (_jsxs(Fragment, { children: [_jsx("div", { onClickCapture: triggerClick, children: _jsx(InternalSideNavigationLink, { ...props, submenuExpanded: isSubmenuExpanded, tag: tag }) }), _jsx(Collapsible, { open: (_f = (_e = props.expanded) === null || _e === void 0 ? void 0 : _e.submenus) === null || _f === void 0 ? void 0 : _f.includes(props.id), animate: true, children: _jsx("div", { className: Styles.submenu, children: _jsx(SideNavigationGroupContent, { groups: (_h = (_g = props.submenu) === null || _g === void 0 ? void 0 : _g.groups) !== null && _h !== void 0 ? _h : [], navigationComponent: props.navigationComponent }) }) })] })) : (_jsxs(Popover, { placement: "right-start", openOnHover: true, children: [_jsx(Popover.Trigger, { children: (triggerProps) => (_jsx("div", { ...triggerProps, children: _jsx(InternalSideNavigationLink, { ...props, submenuExpanded: undefined, tag: tag }) })) }), _jsx(Popover.Content, { style: submenuPopoverStyles, className: "z-global-nav-i", children: _jsxs("div", { className: Styles.submenuPopover, children: [_jsx(Headline, { size: "small", className: "c-white m-b-half-i m-t-1", children: props.title }), _jsx(SideNavigationGroupContent, { groups: (_k = (_j = props.submenu) === null || _j === void 0 ? void 0 : _j.groups) !== null && _k !== void 0 ? _k : [], navigationComponent: props.navigationComponent })] }) })] }));
|
|
52
37
|
};
|
|
53
38
|
const SideNavigationGroupContent = ({ groups, navigationComponent, }) => {
|
|
54
39
|
return (_jsx(Fragment, { children: groups.reduce((out, group, index) => {
|
|
@@ -67,5 +52,5 @@ const SideNavigationGroupLink = ({ id, tag, title, to, isActive, navigationCompo
|
|
|
67
52
|
}), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.submenuLinkActive, children: [_jsx("span", { children: title }), !!tag && _jsx(CounterTag, { data: tag, className: Styles.submenuLinkCounter })] }, id));
|
|
68
53
|
};
|
|
69
54
|
/** Side Navigation options toggle */
|
|
70
|
-
|
|
55
|
+
const SideNavigationOptionsToggle = ({ expanded, onExpandedChange }) => withTooltip(_jsxs("div", { "data-cy": "navigation-left-options", "data-pendo": "navigation-left-options", className: classNames(Styles.optionsItem), onClick: () => onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange({ bar: !(expanded === null || expanded === void 0 ? void 0 : expanded.bar), submenus: expanded === null || expanded === void 0 ? void 0 : expanded.submenus }), children: [_jsx("div", { className: Styles.optionsIconWrapper, children: _jsx(Icon, { className: Styles.optionsIcon, svg: expanded ? SvgCollapse : SvgExpand }) }), !!(expanded === null || expanded === void 0 ? void 0 : expanded.bar) && _jsx("span", { className: Styles.optionsItemText, children: "Collapse Menu" })] }), (expanded === null || expanded === void 0 ? void 0 : expanded.bar) ? undefined : 'Expand Menu', 'right');
|
|
71
56
|
//# sourceMappingURL=side-navigation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,
|
|
1
|
+
{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.tsx"],"names":[],"mappings":"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"}
|
|
@@ -44,7 +44,10 @@
|
|
|
44
44
|
padding: @spacing-half;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
.navigation-item-text {
|
|
47
|
+
.navigation-item-text-expanded {
|
|
48
|
+
display: none;
|
|
49
|
+
}
|
|
50
|
+
.navigation-item-text-collapsed {
|
|
48
51
|
font-family: @base-font-family;
|
|
49
52
|
font-size: 11px;
|
|
50
53
|
line-height: 11px;
|
|
@@ -52,7 +55,7 @@
|
|
|
52
55
|
text-align: center;
|
|
53
56
|
}
|
|
54
57
|
|
|
55
|
-
.navigation-item-text.navigation-item-text-small {
|
|
58
|
+
.navigation-item-text-collapsed.navigation-item-text-small {
|
|
56
59
|
font-size: 10.5px;
|
|
57
60
|
}
|
|
58
61
|
}
|
|
@@ -81,13 +84,17 @@
|
|
|
81
84
|
padding: @spacing-1 @spacing-half;
|
|
82
85
|
}
|
|
83
86
|
|
|
84
|
-
.navigation-item-text {
|
|
87
|
+
.navigation-item-text-expanded {
|
|
85
88
|
font-family: @base-font-family;
|
|
86
89
|
font-size: @typescale-3;
|
|
87
90
|
padding-left: @spacing-1;
|
|
88
91
|
flex: 1;
|
|
89
92
|
}
|
|
90
93
|
|
|
94
|
+
.navigation-item-text-collapsed {
|
|
95
|
+
display: none;
|
|
96
|
+
}
|
|
97
|
+
|
|
91
98
|
.navigation-item-counter {
|
|
92
99
|
margin-right: @spacing-1;
|
|
93
100
|
}
|
|
@@ -190,7 +197,7 @@
|
|
|
190
197
|
}
|
|
191
198
|
|
|
192
199
|
.navigation-item-counter {
|
|
193
|
-
color: @color-
|
|
200
|
+
color: @color-black;
|
|
194
201
|
font-weight: @font-weight-semibold;
|
|
195
202
|
min-width: 12px !important;
|
|
196
203
|
min-height: 12px !important;
|
|
@@ -8,4 +8,5 @@ export default _default;
|
|
|
8
8
|
export declare const DefaultSideNavigation: () => import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
export declare const SideNavigationLinksOnly: () => import("react/jsx-runtime").JSX.Element;
|
|
10
10
|
export declare const SideNavigationWithSubmenu: () => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare const SideNavigationWithCustomTopElements: () => import("react/jsx-runtime").JSX.Element;
|
|
11
12
|
//# sourceMappingURL=side-navigation.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":";;;;;;AA6BA,wBAKE;AAEF,eAAO,MAAM,qBAAqB,+CAyBjC,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAwBnC,CAAC;AAEF,eAAO,MAAM,yBAAyB,+CAwBrC,CAAC;AAiBF,eAAO,MAAM,mCAAmC,+CA8B/C,CAAC"}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
2
|
+
import { Popover } from '@servicetitan/anvil2';
|
|
3
|
+
import { Page } from '@servicetitan/design-system';
|
|
4
|
+
import { Fragment, useState } from 'react';
|
|
5
|
+
import { LocationInfo, items, withAnvil, withDefaultRedirects, withMemoryRouter, } from '../../test/data';
|
|
6
|
+
import { SideNavigation, SideNavigationLink, SideNavigationTrigger, } from './';
|
|
6
7
|
const layout = (Story) => {
|
|
7
|
-
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, {
|
|
8
|
+
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, {}) }) })] }));
|
|
8
9
|
};
|
|
9
10
|
export default {
|
|
10
11
|
title: 'Navigation/SideNavigation',
|
|
11
12
|
component: SideNavigation,
|
|
12
|
-
decorators: [layout, withMemoryRouter, withAnvil],
|
|
13
|
+
decorators: [layout, withDefaultRedirects, withMemoryRouter, withAnvil],
|
|
13
14
|
parameters: {},
|
|
14
15
|
};
|
|
15
16
|
export const DefaultSideNavigation = () => {
|
|
@@ -27,7 +28,7 @@ export const DefaultSideNavigation = () => {
|
|
|
27
28
|
items.priceBook,
|
|
28
29
|
items.pointOfSale,
|
|
29
30
|
items.reports,
|
|
30
|
-
], itemsTop:
|
|
31
|
+
], itemsTop: _jsx(SideNavigationLink, { ...items.tasks }) }));
|
|
31
32
|
};
|
|
32
33
|
export const SideNavigationLinksOnly = () => {
|
|
33
34
|
const [expanded, setExpanded] = useState(undefined);
|
|
@@ -61,4 +62,22 @@ export const SideNavigationWithSubmenu = () => {
|
|
|
61
62
|
items.projects,
|
|
62
63
|
] }));
|
|
63
64
|
};
|
|
65
|
+
const SideLinkWithPopover = () => {
|
|
66
|
+
return (_jsxs(Popover, { placement: "right", openOnHover: true, children: [_jsx(Popover.Trigger, { children: props => (_jsx("div", { ...props, children: _jsx(SideNavigationTrigger, { ...items.marketing, isActive: false }) })) }), _jsx(Popover.Content, { children: "popover content" })] }));
|
|
67
|
+
};
|
|
68
|
+
export const SideNavigationWithCustomTopElements = () => {
|
|
69
|
+
const [expanded, setExpanded] = useState(undefined);
|
|
70
|
+
return (_jsx(SideNavigation, { expanded: expanded, onExpandedChange: setExpanded, items: [
|
|
71
|
+
items.dashboard,
|
|
72
|
+
items.schedule,
|
|
73
|
+
items.dispatch,
|
|
74
|
+
items.accountingWithSubmenu,
|
|
75
|
+
items.purchasingWithSubmenu,
|
|
76
|
+
items.followUpsWithSubmenu,
|
|
77
|
+
items.reports,
|
|
78
|
+
items.marketing,
|
|
79
|
+
items.priceBook,
|
|
80
|
+
items.projects,
|
|
81
|
+
], itemsTop: _jsxs(Fragment, { children: [_jsx(SideNavigationLink, { ...items.calls }), _jsx(SideNavigationLink, { ...items.tasks }), _jsx(SideLinkWithPopover, {})] }) }));
|
|
82
|
+
};
|
|
64
83
|
//# sourceMappingURL=side-navigation.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,
|
|
1
|
+
{"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/test/data.d.ts
CHANGED
|
@@ -27,4 +27,5 @@ export declare const items: {
|
|
|
27
27
|
tasks: HeaderNavigationItemData;
|
|
28
28
|
};
|
|
29
29
|
export declare const CallsNavigationTrigger: () => import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export declare const withDefaultRedirects: (Story: any) => import("react/jsx-runtime").JSX.Element;
|
|
30
31
|
//# sourceMappingURL=data.d.ts.map
|
package/dist/test/data.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../src/test/data.tsx"],"names":[],"mappings":"AAwCA,OAAO,EACH,wBAAwB,EAGxB,qBAAqB,EACxB,MAAM,qBAAqB,CAAC;AAI7B,eAAO,MAAM,WAAW,oHAyBvB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAIxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,GAAG,4CAM1C,CAAC;AAEF,eAAO,MAAM,SAAS,UAAW,GAAG,4CAInC,CAAC;AAEF,eAAO,MAAM,aAAa,+CAKzB,CAAC;AAEF,eAAO,MAAM,UAAU,+CAetB,CAAC;AA6CF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;CAoIjB,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAuBlC,CAAC"}
|
|
1
|
+
{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../src/test/data.tsx"],"names":[],"mappings":"AAwCA,OAAO,EACH,wBAAwB,EAGxB,qBAAqB,EACxB,MAAM,qBAAqB,CAAC;AAI7B,eAAO,MAAM,WAAW,oHAyBvB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAIxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,GAAG,4CAM1C,CAAC;AAEF,eAAO,MAAM,SAAS,UAAW,GAAG,4CAInC,CAAC;AAEF,eAAO,MAAM,aAAa,+CAKzB,CAAC;AAEF,eAAO,MAAM,UAAU,+CAetB,CAAC;AA6CF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;CAoIjB,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAuBlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,UAAW,GAAG,4CAS9C,CAAC"}
|
package/dist/test/data.js
CHANGED
|
@@ -32,10 +32,10 @@ import SvgTasksActive from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_acti
|
|
|
32
32
|
import SvgTasks from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_inactive.svg';
|
|
33
33
|
import { BodyText, Popover } from '@servicetitan/design-system';
|
|
34
34
|
import classNames from 'classnames';
|
|
35
|
-
import { forwardRef, useState } from 'react';
|
|
35
|
+
import { Fragment, forwardRef, useState } from 'react';
|
|
36
36
|
// needed only for storybook and added in root dependencies
|
|
37
37
|
// eslint-disable-next-line import/no-extraneous-dependencies
|
|
38
|
-
import { MemoryRouter, useHistory, useLocation } from 'react-router-dom';
|
|
38
|
+
import { MemoryRouter, Redirect, Switch, useHistory, useLocation } from 'react-router-dom';
|
|
39
39
|
import { HeaderNavigationTrigger } from '../components/links';
|
|
40
40
|
import { NavigationComponentContext } from '../utils/navigation-context';
|
|
41
41
|
import * as Styles from './data-stories.module.less';
|
|
@@ -227,4 +227,5 @@ export const CallsNavigationTrigger = () => {
|
|
|
227
227
|
const [open, setOpen] = useState(false);
|
|
228
228
|
return (_jsx(Popover, { open: open, onClickOutside: () => setOpen(false), direction: "bl", trigger: _jsx(HeaderNavigationTrigger, { id: "dialpad", iconName: "phone", tag: 2, icon: SvgPhone, iconActive: SvgPhoneActive, onClick: () => setOpen(!open), isActive: open }), children: "calls content" }));
|
|
229
229
|
};
|
|
230
|
+
export const withDefaultRedirects = (Story) => (_jsxs(Fragment, { children: [_jsxs(Switch, { children: [_jsx(Redirect, { from: "/accounting", exact: true, to: "/accounting/export" }), _jsx(Redirect, { from: "/purchasing", exact: true, to: "/purchasing/repl" }), _jsx(Redirect, { from: "/followUps", exact: true, to: "/followUps/sold" })] }), _jsx(Story, {})] }));
|
|
230
231
|
//# sourceMappingURL=data.js.map
|