@servicetitan/navigation 3.0.0 → 3.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.
Files changed (13) hide show
  1. package/dist/components/side-navigation/side-navigation.d.ts +10 -3
  2. package/dist/components/side-navigation/side-navigation.d.ts.map +1 -1
  3. package/dist/components/side-navigation/side-navigation.js +8 -7
  4. package/dist/components/side-navigation/side-navigation.js.map +1 -1
  5. package/dist/components/side-navigation/side-navigation.module.less +22 -11
  6. package/dist/components/side-navigation/side-navigation.stories.d.ts.map +1 -1
  7. package/dist/components/side-navigation/side-navigation.stories.js +2 -1
  8. package/dist/components/side-navigation/side-navigation.stories.js.map +1 -1
  9. package/package.json +2 -2
  10. package/src/components/side-navigation/side-navigation.module.less +22 -11
  11. package/src/components/side-navigation/side-navigation.module.less.d.ts +2 -1
  12. package/src/components/side-navigation/side-navigation.stories.tsx +2 -0
  13. package/src/components/side-navigation/side-navigation.tsx +32 -13
package/dist/components/side-navigation/side-navigation.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { FC } from 'react';
1
+ import { FC, PropsWithChildren } from 'react';
2
2
  import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
3
3
  export interface SideNavigationProps {
4
4
  /** container class name */
@@ -7,6 +7,8 @@ export interface SideNavigationProps {
7
7
  id?: string;
8
8
  /** main navigation items */
9
9
  items?: HeaderNavigationItemData[];
10
+ /** top navigation items */
11
+ itemsTop?: HeaderNavigationItemData[];
10
12
  /** is menu expanded */
11
13
  expanded?: boolean;
12
14
  /** navigation component used for routing */
@@ -20,10 +22,15 @@ interface SideNavigationItemProps extends HeaderNavigationItemData {
20
22
  }
21
23
  /** Side Navigation menu item */
22
24
  export declare const SideNavigationItem: FC<SideNavigationItemProps>;
23
- /** Side Navigation options item */
24
- export declare const SideNavigationOptions: FC<{
25
+ /** Side Navigation options toggle */
26
+ export declare const SideNavigationOptionsToggle: FC<{
25
27
  expanded?: boolean;
26
28
  onExpandedChange(expanded: boolean): void;
27
29
  }>;
30
+ /** Side Navigation options popover */
31
+ export declare const SideNavigationOptionsPopover: FC<PropsWithChildren<{
32
+ expanded?: boolean;
33
+ onExpandedChange(expanded: boolean): void;
34
+ }>>;
28
35
  export {};
29
36
  //# sourceMappingURL=side-navigation.d.ts.map
package/dist/components/side-navigation/side-navigation.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAWzF,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,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAChD,4BAA4B;IAC5B,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAkClD,CAAC;AAEF,UAAU,uBAAwB,SAAQ,wBAAwB;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,gCAAgC;AAChC,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA6C1D,CAAC;AAEF,mCAAmC;AACnC,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C,CA8DA,CAAC"}
1
+ {"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAY,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAWzF,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,wBAAwB,EAAE,CAAC;IACtC,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAChD,4BAA4B;IAC5B,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA4ClD,CAAC;AAEF,UAAU,uBAAwB,SAAQ,wBAAwB;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,gCAAgC;AAChC,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA6C1D,CAAC;AAEF,qCAAqC;AACrC,eAAO,MAAM,2BAA2B,EAAE,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C,CAgBI,CAAC;AAEN,sCAAsC;AACtC,eAAO,MAAM,4BAA4B,EAAE,EAAE,CACzC,iBAAiB,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC7C,CAAC,CA8CL,CAAC"}
package/dist/components/side-navigation/side-navigation.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { BodyText, Divider, Eyebrow, Icon, Popover, Stack } from '@servicetitan/design-system';
3
3
  import classNames from 'classnames';
4
- import { useState } from 'react';
4
+ import { Fragment, useState } from 'react';
5
5
  import { DefaultNavLinkComponent, NavLinkContext, useNavLink, } from '../../utils/navigation-context';
6
6
  import { withTooltip } from '../../utils/with-tooltip';
7
7
  import { CounterTag } from '../counter-tag';
8
8
  import { IconSideExpanded, IconSideOptions, IconSideSlim } from './icons';
9
9
  import * as Styles from './side-navigation.module.less';
10
- export const SideNavigation = ({ className, expanded, id, items, navigationComponent = DefaultNavLinkComponent, onExpandedChange, }) => {
11
- return (_jsx(NavLinkContext.Provider, { value: navigationComponent, children: _jsxs("div", { className: classNames(Styles.sideNav, expanded ? Styles.sideNavExpanded : Styles.sideNavSlim, className), id: id, "data-cy": "side-navigation", children: [_jsx("div", { className: Styles.sideNavContent, "data-cy": "navigation-items", children: items === null || items === void 0 ? void 0 : items.map(item => (_jsx(SideNavigationItem, Object.assign({ expanded: expanded }, item), item.id))) }), _jsxs("div", { className: Styles.sideNavBottom, children: [_jsx("div", { className: Styles.sideNavBottomDivider }), _jsx(SideNavigationOptions, { expanded: expanded, onExpandedChange: onExpandedChange })] })] }) }));
10
+ export const SideNavigation = ({ className, expanded, id, items, itemsTop, navigationComponent = DefaultNavLinkComponent, onExpandedChange, }) => {
11
+ return (_jsx(NavLinkContext.Provider, { value: navigationComponent, children: _jsxs("div", { className: classNames(Styles.sideNav, expanded ? Styles.sideNavExpanded : Styles.sideNavSlim, className), id: id, "data-cy": "side-navigation", children: [!!(itemsTop === null || itemsTop === void 0 ? void 0 : itemsTop.length) && (_jsxs(Fragment, { children: [_jsx("div", { className: Styles.sideNavTop, "data-cy": "navigation-items-top", children: itemsTop.map(item => (_jsx(SideNavigationItem, Object.assign({ expanded: expanded }, item), item.id))) }), _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 => (_jsx(SideNavigationItem, Object.assign({ expanded: expanded }, item), item.id))) }), _jsx("div", { className: Styles.sideNavBottom, children: _jsx(SideNavigationOptionsToggle, { expanded: expanded, onExpandedChange: onExpandedChange }) })] }) }));
12
12
  };
13
13
  /** Side Navigation menu item */
14
14
  export const SideNavigationItem = ({ id, to, title, hint, counter, className, iconClassName, iconComponent: IconComponent, iconName, isActive, expanded, }) => {
@@ -18,10 +18,11 @@ export const SideNavigationItem = ({ id, to, title, hint, counter, className, ic
18
18
  [Styles.navigationItemActive]: isActive === true,
19
19
  }), isActive: typeof isActive === 'function' ? isActive : undefined, activeClassName: Styles.navigationItemActive, children: [IconComponent ? (_jsx("i", { className: iconClass, children: _jsx(IconComponent, {}) })) : iconName ? (_jsx(Icon, { name: iconName, className: iconClass })) : (_jsx("i", { className: iconClass })), !!expanded && _jsx("span", { className: Styles.navigationItemText, children: title }), !!counter && _jsx(CounterTag, { data: counter, className: Styles.navigationItemCounter })] }, id), expanded ? undefined : title, 'r');
20
20
  };
21
- /** Side Navigation options item */
22
- export const SideNavigationOptions = ({ expanded, onExpandedChange }) => {
21
+ /** Side Navigation options toggle */
22
+ export const SideNavigationOptionsToggle = ({ expanded, onExpandedChange }) => withTooltip(_jsxs("div", { "data-cy": "navigation-left-options", "data-pendo": "navigation-left-options", className: classNames(Styles.optionsItem), onClick: () => onExpandedChange(!expanded), children: [_jsx("div", { className: Styles.optionsIcon, children: _jsx(IconSideOptions, {}) }), !!expanded && _jsx("span", { className: Styles.optionsItemText, children: "Collapse Menu" })] }), expanded ? undefined : 'Expand Menu', 'r');
23
+ /** Side Navigation options popover */
24
+ export const SideNavigationOptionsPopover = ({ children, expanded, onExpandedChange }) => {
23
25
  const [open, setOpen] = useState(false);
24
- const trigger = withTooltip(_jsxs("div", { "data-cy": "navigation-left-options", "data-pendo": "navigation-left-options", className: classNames(Styles.optionsItem), onClick: () => setOpen(!open), children: [_jsx("div", { className: Styles.optionsIcon, children: _jsx(IconSideOptions, {}) }), !!expanded && _jsx("span", { className: Styles.optionsItemText, children: "Menu Options" })] }), open || expanded ? undefined : 'Menu Options', 'r');
25
26
  const onExpand = () => {
26
27
  setOpen(false);
27
28
  onExpandedChange(true);
@@ -30,7 +31,7 @@ export const SideNavigationOptions = ({ expanded, onExpandedChange }) => {
30
31
  setOpen(false);
31
32
  onExpandedChange(false);
32
33
  };
33
- return (_jsxs(Popover, { className: "bg-neutral-30", trigger: trigger, direction: "tr", onClickOutside: () => setOpen(false), open: open, padding: "s", width: "xs", children: [_jsx(Eyebrow, { className: "p-l-2", children: "menu options" }), _jsx(SideNavigationOptionsItem, { active: !expanded, icon: IconSideSlim, title: "Slim", onClick: onCollapse }), _jsx(SideNavigationOptionsItem, { active: !!expanded, icon: IconSideExpanded, title: "Expanded", onClick: onExpand }), _jsx(Divider, { className: "m-x-half m-y-1" }), _jsx(SideNavigationOptionsItem, { active: false, icon: expanded ? IconSideExpanded : IconSideSlim, title: expanded ? 'Expanded' : 'Slim' })] }));
34
+ return (_jsxs(Popover, { className: "bg-neutral-30", trigger: children, direction: "tr", onClickOutside: () => setOpen(false), open: open, padding: "s", width: "xs", children: [_jsx(Eyebrow, { className: "p-l-2", children: "menu options" }), _jsx(SideNavigationOptionsItem, { active: !expanded, icon: IconSideSlim, title: "Slim", onClick: onCollapse }), _jsx(SideNavigationOptionsItem, { active: !!expanded, icon: IconSideExpanded, title: "Expanded", onClick: onExpand }), _jsx(Divider, { className: "m-x-half m-y-1" }), _jsx(SideNavigationOptionsItem, { active: false, icon: expanded ? IconSideExpanded : IconSideSlim, title: expanded ? 'Expanded' : 'Slim' })] }));
34
35
  };
35
36
  const SideNavigationOptionsItem = ({ active, onClick, title, icon: IconComponent }) => (_jsxs(Stack, { className: classNames(active ? Styles.optionsPopoverItemActive : Styles.optionsPopoverItemInactive, 'p-y-1 p-x-2', { [Styles.optionsPopoverItemClickable]: onClick && !active }), alignItems: "center", onClick: !active && onClick, children: [_jsx(IconComponent, {}), _jsx(BodyText, { className: "c-inherit m-l-1 flex-grow-1 flex-basis-0", children: title }), active && _jsx(Icon, { name: "check" })] }));
36
37
  //# sourceMappingURL=side-navigation.js.map
package/dist/components/side-navigation/side-navigation.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAC/F,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAM,QAAQ,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,EACH,uBAAuB,EACvB,cAAc,EACd,UAAU,GACb,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC1E,OAAO,KAAK,MAAM,MAAM,+BAA+B,CAAC;AAmBxD,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACpD,SAAS,EACT,QAAQ,EACR,EAAE,EACF,KAAK,EACL,QAAQ,EACR,mBAAmB,GAAG,uBAAuB,EAC7C,gBAAgB,GACnB,EAAE,EAAE;IACD,OAAO,CACH,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,mBAAmB,YAC/C,eACI,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,OAAO,EACd,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,EACtD,SAAS,CACZ,EACD,EAAE,EAAE,EAAE,aACE,iBAAiB,aAExB,CAAC,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,CAAA,IAAI,CACnB,MAAC,QAAQ,eACL,cAAK,SAAS,EAAE,MAAM,CAAC,UAAU,aAAU,sBAAsB,YAC5D,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAClB,KAAC,kBAAkB,kBAAe,QAAQ,EAAE,QAAQ,IAAM,IAAI,GAArC,IAAI,CAAC,EAAE,CAAkC,CACrE,CAAC,GACA,EACN,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI,IAC3B,CACd,EACD,cAAK,SAAS,EAAE,MAAM,CAAC,cAAc,aAAU,kBAAkB,YAC5D,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAChB,KAAC,kBAAkB,kBAAe,QAAQ,EAAE,QAAQ,IAAM,IAAI,GAArC,IAAI,CAAC,EAAE,CAAkC,CACrE,CAAC,GACA,EACN,cAAK,SAAS,EAAE,MAAM,CAAC,aAAa,YAChC,KAAC,2BAA2B,IACxB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,GACpC,GACA,IACJ,GACgB,CAC7B,CAAC;AACN,CAAC,CAAC;AAMF,gCAAgC;AAChC,MAAM,CAAC,MAAM,kBAAkB,GAAgC,CAAC,EAC5D,EAAE,EACF,EAAE,EACF,KAAK,EACL,IAAI,EACJ,OAAO,EACP,SAAS,EACT,aAAa,EACb,aAAa,EAAE,aAAa,EAC5B,QAAQ,EACR,QAAQ,EACR,QAAQ,GACX,EAAE,EAAE;IACD,MAAM,mBAAmB,GAAG,UAAU,EAAE,CAAC;IACzC,MAAM,SAAS,GAAG,UAAU,CAAC,MAAM,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;IAEnE,OAAO,WAAW,CACd,MAAC,mBAAmB,eACP,mBAAmB,EAAE,EAAE,gBACpB,mBAAmB,EAAE,EAAE,EAEnC,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,cAAc,EAAE,SAAS,EAAE;YACpD,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,QAAQ,KAAK,IAAI;SACnD,CAAC,EACF,QAAQ,EAAE,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC/D,eAAe,EAAE,MAAM,CAAC,oBAAoB,aAE3C,aAAa,CAAC,CAAC,CAAC,CACb,YAAG,SAAS,EAAE,SAAS,YACnB,KAAC,aAAa,KAAG,GACjB,CACP,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CACX,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAI,CACjD,CAAC,CAAC,CAAC,CACA,YAAG,SAAS,EAAE,SAAS,GAAI,CAC9B,EAEA,CAAC,CAAC,QAAQ,IAAI,eAAM,SAAS,EAAE,MAAM,CAAC,kBAAkB,YAAG,KAAK,GAAQ,EACxE,CAAC,CAAC,OAAO,IAAI,KAAC,UAAU,IAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,qBAAqB,GAAI,KApB/E,EAAE,CAqBW,EACtB,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAC5B,GAAG,CACN,CAAC;AACN,CAAC,CAAC;AAEF,qCAAqC;AACrC,MAAM,CAAC,MAAM,2BAA2B,GAGnC,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,EAAE,EAAE,CACpC,WAAW,CACP,0BACY,yBAAyB,gBACtB,yBAAyB,EACpC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,EACzC,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC,QAAQ,CAAC,aAE1C,cAAK,SAAS,EAAE,MAAM,CAAC,WAAW,YAC9B,KAAC,eAAe,KAAG,GACjB,EAEL,CAAC,CAAC,QAAQ,IAAI,eAAM,SAAS,EAAE,MAAM,CAAC,eAAe,8BAAsB,IAC1E,EACN,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,EACpC,GAAG,CACN,CAAC;AAEN,sCAAsC;AACtC,MAAM,CAAC,MAAM,4BAA4B,GAKrC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAC7C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,MAAM,QAAQ,GAAG,GAAG,EAAE;QAClB,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,CAAC;IACF,MAAM,UAAU,GAAG,GAAG,EAAE;QACpB,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,OAAO,CACH,MAAC,OAAO,IACJ,SAAS,EAAC,eAAe,EACzB,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAC,IAAI,EACd,cAAc,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EACpC,IAAI,EAAE,IAAI,EACV,OAAO,EAAC,GAAG,EACX,KAAK,EAAC,IAAI,aAEV,KAAC,OAAO,IAAC,SAAS,EAAC,OAAO,6BAAuB,EACjD,KAAC,yBAAyB,IACtB,MAAM,EAAE,CAAC,QAAQ,EACjB,IAAI,EAAE,YAAY,EAClB,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,UAAU,GACrB,EACF,KAAC,yBAAyB,IACtB,MAAM,EAAE,CAAC,CAAC,QAAQ,EAClB,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,QAAQ,GACnB,EAEF,KAAC,OAAO,IAAC,SAAS,EAAC,gBAAgB,GAAG,EAEtC,KAAC,yBAAyB,IACtB,MAAM,EAAE,KAAK,EACb,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,YAAY,EAChD,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,GACvC,IACI,CACb,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAK1B,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CACtD,MAAC,KAAK,IACF,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,CAAC,MAAM,CAAC,0BAA0B,EAC5E,aAAa,EACb,EAAE,CAAC,MAAM,CAAC,2BAA2B,CAAC,EAAE,OAAO,IAAI,CAAC,MAAM,EAAE,CAC/D,EACD,UAAU,EAAC,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,IAAI,OAAO,aAE3B,KAAC,aAAa,KAAG,EACjB,KAAC,QAAQ,IAAC,SAAS,EAAC,0CAA0C,YAAE,KAAK,GAAY,EAChF,MAAM,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,IAC5B,CACX,CAAC"}
package/dist/components/side-navigation/side-navigation.module.less CHANGED
@@ -1,8 +1,9 @@
1
1
  /* stylelint-disable no-descending-specificity */
2
2
  @import (reference) '@servicetitan/tokens/core/tokens.less';
3
3
 
4
- @text-color: #383838;
5
- @border-color: #c5c5cb;
4
+ @text-color: var(--colorsTextDefault, @color-neutral-400);
5
+ @border-color: var(--colorsBorderGrey, @color-neutral-60);
6
+ @bg-color: var(--colorsSurfaceGrey, @color-neutral-50);
6
7
 
7
8
  .side-nav {
8
9
  display: flex;
@@ -14,20 +15,16 @@
14
15
  -o-transition: width 100ms ease-in-out;
15
16
  transition: width 100ms ease-in-out;
16
17
 
17
- background-color: #ebebeb;
18
- border-right: 1px solid @border-color;
18
+ background-color: @bg-color;
19
19
 
20
20
  .side-nav-bottom {
21
21
  padding-left: 12px;
22
22
  padding-right: 12px;
23
+ border-top: 1px solid @border-color;
23
24
 
24
25
  display: flex;
25
26
  flex-direction: column;
26
27
  justify-content: center;
27
-
28
- .sideNavBottomDivider {
29
- border-top: 1px solid @border-color;
30
- }
31
28
  }
32
29
 
33
30
  &.side-nav-slim {
@@ -50,16 +47,24 @@
50
47
  flex-direction: column;
51
48
  align-items: stretch;
52
49
  overflow-y: auto;
53
- margin-top: @spacing-1;
54
- margin-bottom: @spacing-1;
50
+ padding-top: @spacing-1;
51
+ padding-bottom: @spacing-1;
55
52
  flex-grow: 1;
56
53
  flex-basis: 0;
57
54
  }
55
+
56
+ .side-nav-top {
57
+ display: flex;
58
+ flex-direction: column;
59
+ align-items: stretch;
60
+ padding-top: @spacing-1;
61
+ padding-bottom: @spacing-1;
62
+ }
58
63
  }
59
64
 
60
65
  .navigation-item {
61
66
  font-family: @base-font-family;
62
- color: #383838;
67
+ color: @text-color;
63
68
  position: relative;
64
69
  display: flex;
65
70
  justify-content: flex-start;
@@ -151,3 +156,9 @@
151
156
  .options-popover-item-active {
152
157
  border-radius: @border-radius-1;
153
158
  }
159
+
160
+ .divider {
161
+ border-top: 1px solid @border-color;
162
+ margin-left: 12px;
163
+ margin-right: 12px;
164
+ }
package/dist/components/side-navigation/side-navigation.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;;AAYpD,wBAKE;AAkDF,eAAO,MAAM,qBAAqB,+CAyBjC,CAAC"}
1
+ {"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;;AAYpD,wBAKE;AAmDF,eAAO,MAAM,qBAAqB,+CA0BjC,CAAC"}
package/dist/components/side-navigation/side-navigation.stories.js CHANGED
@@ -27,6 +27,7 @@ const items = {
27
27
  pointOfSale: getItem('pointOfSale', { iconName: 'cash-register' }),
28
28
  projects: getItem('projects', { iconName: 'folder_special' }),
29
29
  reports: getItem('reports', { iconName: 'poll' }),
30
+ tasks: getItem('tasks', { iconName: 'format_list_bulleted' }),
30
31
  };
31
32
  const NavLinkMock = props => (_jsx("a", { href: props.to, target: props.target, onClick: e => {
32
33
  e.preventDefault();
@@ -46,6 +47,6 @@ export const DefaultSideNavigation = () => {
46
47
  items.priceBook,
47
48
  items.pointOfSale,
48
49
  items.reports,
49
- ] }));
50
+ ], itemsTop: [items.tasks] }));
50
51
  };
51
52
  //# sourceMappingURL=side-navigation.stories.js.map
package/dist/components/side-navigation/side-navigation.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"side-navigation.stories.js","sourceRoot":"","sources":["../../../src/components/side-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@servicetitan/navigation",
3
- "version": "3.0.0",
3
+ "version": "3.1.0",
4
4
  "description": "Navigation components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -43,5 +43,5 @@
43
43
  "less": true,
44
44
  "webpack": false
45
45
  },
46
- "gitHead": "7093c94176a1cf164fbb81e186123625abd87795"
46
+ "gitHead": "bc12bb9c5588e0887811bff83cd360df90708442"
47
47
  }
package/src/components/side-navigation/side-navigation.module.less CHANGED
@@ -1,8 +1,9 @@
1
1
  /* stylelint-disable no-descending-specificity */
2
2
  @import (reference) '@servicetitan/tokens/core/tokens.less';
3
3
 
4
- @text-color: #383838;
5
- @border-color: #c5c5cb;
4
+ @text-color: var(--colorsTextDefault, @color-neutral-400);
5
+ @border-color: var(--colorsBorderGrey, @color-neutral-60);
6
+ @bg-color: var(--colorsSurfaceGrey, @color-neutral-50);
6
7
 
7
8
  .side-nav {
8
9
  display: flex;
@@ -14,20 +15,16 @@
14
15
  -o-transition: width 100ms ease-in-out;
15
16
  transition: width 100ms ease-in-out;
16
17
 
17
- background-color: #ebebeb;
18
- border-right: 1px solid @border-color;
18
+ background-color: @bg-color;
19
19
 
20
20
  .side-nav-bottom {
21
21
  padding-left: 12px;
22
22
  padding-right: 12px;
23
+ border-top: 1px solid @border-color;
23
24
 
24
25
  display: flex;
25
26
  flex-direction: column;
26
27
  justify-content: center;
27
-
28
- .sideNavBottomDivider {
29
- border-top: 1px solid @border-color;
30
- }
31
28
  }
32
29
 
33
30
  &.side-nav-slim {
@@ -50,16 +47,24 @@
50
47
  flex-direction: column;
51
48
  align-items: stretch;
52
49
  overflow-y: auto;
53
- margin-top: @spacing-1;
54
- margin-bottom: @spacing-1;
50
+ padding-top: @spacing-1;
51
+ padding-bottom: @spacing-1;
55
52
  flex-grow: 1;
56
53
  flex-basis: 0;
57
54
  }
55
+
56
+ .side-nav-top {
57
+ display: flex;
58
+ flex-direction: column;
59
+ align-items: stretch;
60
+ padding-top: @spacing-1;
61
+ padding-bottom: @spacing-1;
62
+ }
58
63
  }
59
64
 
60
65
  .navigation-item {
61
66
  font-family: @base-font-family;
62
- color: #383838;
67
+ color: @text-color;
63
68
  position: relative;
64
69
  display: flex;
65
70
  justify-content: flex-start;
@@ -151,3 +156,9 @@
151
156
  .options-popover-item-active {
152
157
  border-radius: @border-radius-1;
153
158
  }
159
+
160
+ .divider {
161
+ border-top: 1px solid @border-color;
162
+ margin-left: 12px;
163
+ margin-right: 12px;
164
+ }
package/src/components/side-navigation/side-navigation.module.less.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export const __esModule: true;
2
+ export const divider: string;
2
3
  export const navigationIcon: string;
3
4
  export const navigationItem: string;
4
5
  export const navigationItemActive: string;
@@ -12,8 +13,8 @@ export const optionsPopoverItemClickable: string;
12
13
  export const optionsPopoverItemInactive: string;
13
14
  export const sideNav: string;
14
15
  export const sideNavBottom: string;
15
- export const sideNavBottomDivider: string;
16
16
  export const sideNavContent: string;
17
17
  export const sideNavExpanded: string;
18
18
  export const sideNavSlim: string;
19
+ export const sideNavTop: string;
19
20
 
package/src/components/side-navigation/side-navigation.stories.tsx CHANGED
@@ -50,6 +50,7 @@ const items = {
50
50
  pointOfSale: getItem('pointOfSale', { iconName: 'cash-register' }),
51
51
  projects: getItem('projects', { iconName: 'folder_special' }),
52
52
  reports: getItem('reports', { iconName: 'poll' }),
53
+ tasks: getItem('tasks', { iconName: 'format_list_bulleted' }),
53
54
  };
54
55
 
55
56
  const NavLinkMock: FC<NavLinkComponentProps> = props => (
@@ -88,6 +89,7 @@ export const DefaultSideNavigation = () => {
88
89
  items.pointOfSale,
89
90
  items.reports,
90
91
  ]}
92
+ itemsTop={[items.tasks]}
91
93
  />
92
94
  );
93
95
  };
package/src/components/side-navigation/side-navigation.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { BodyText, Divider, Eyebrow, Icon, Popover, Stack } from '@servicetitan/design-system';
2
2
  import classNames from 'classnames';
3
- import { FC, useState } from 'react';
3
+ import { FC, Fragment, PropsWithChildren, useState } from 'react';
4
4
  import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
5
5
  import {
6
6
  DefaultNavLinkComponent,
@@ -19,6 +19,8 @@ export interface SideNavigationProps {
19
19
  id?: string;
20
20
  /** main navigation items */
21
21
  items?: HeaderNavigationItemData[];
22
+ /** top navigation items */
23
+ itemsTop?: HeaderNavigationItemData[];
22
24
  /** is menu expanded */
23
25
  expanded?: boolean;
24
26
  /** navigation component used for routing */
@@ -32,6 +34,7 @@ export const SideNavigation: FC<SideNavigationProps> = ({
32
34
  expanded,
33
35
  id,
34
36
  items,
37
+ itemsTop,
35
38
  navigationComponent = DefaultNavLinkComponent,
36
39
  onExpandedChange,
37
40
  }) => {
@@ -46,14 +49,23 @@ export const SideNavigation: FC<SideNavigationProps> = ({
46
49
  id={id}
47
50
  data-cy="side-navigation"
48
51
  >
52
+ {!!itemsTop?.length && (
53
+ <Fragment>
54
+ <div className={Styles.sideNavTop} data-cy="navigation-items-top">
55
+ {itemsTop.map(item => (
56
+ <SideNavigationItem key={item.id} expanded={expanded} {...item} />
57
+ ))}
58
+ </div>
59
+ <div className={Styles.divider} />
60
+ </Fragment>
61
+ )}
49
62
  <div className={Styles.sideNavContent} data-cy="navigation-items">
50
63
  {items?.map(item => (
51
64
  <SideNavigationItem key={item.id} expanded={expanded} {...item} />
52
65
  ))}
53
66
  </div>
54
67
  <div className={Styles.sideNavBottom}>
55
- <div className={Styles.sideNavBottomDivider} />
56
- <SideNavigationOptions
68
+ <SideNavigationOptionsToggle
57
69
  expanded={expanded}
58
70
  onExpandedChange={onExpandedChange}
59
71
  />
@@ -115,30 +127,37 @@ export const SideNavigationItem: FC<SideNavigationItemProps> = ({
115
127
  );
116
128
  };
117
129
 
118
- /** Side Navigation options item */
119
- export const SideNavigationOptions: FC<{
130
+ /** Side Navigation options toggle */
131
+ export const SideNavigationOptionsToggle: FC<{
120
132
  expanded?: boolean;
121
133
  onExpandedChange(expanded: boolean): void;
122
- }> = ({ expanded, onExpandedChange }) => {
123
- const [open, setOpen] = useState(false);
124
-
125
- const trigger = withTooltip(
134
+ }> = ({ expanded, onExpandedChange }) =>
135
+ withTooltip(
126
136
  <div
127
137
  data-cy="navigation-left-options"
128
138
  data-pendo="navigation-left-options"
129
139
  className={classNames(Styles.optionsItem)}
130
- onClick={() => setOpen(!open)}
140
+ onClick={() => onExpandedChange(!expanded)}
131
141
  >
132
142
  <div className={Styles.optionsIcon}>
133
143
  <IconSideOptions />
134
144
  </div>
135
145
 
136
- {!!expanded && <span className={Styles.optionsItemText}>Menu Options</span>}
146
+ {!!expanded && <span className={Styles.optionsItemText}>Collapse Menu</span>}
137
147
  </div>,
138
- open || expanded ? undefined : 'Menu Options',
148
+ expanded ? undefined : 'Expand Menu',
139
149
  'r'
140
150
  );
141
151
 
152
+ /** Side Navigation options popover */
153
+ export const SideNavigationOptionsPopover: FC<
154
+ PropsWithChildren<{
155
+ expanded?: boolean;
156
+ onExpandedChange(expanded: boolean): void;
157
+ }>
158
+ > = ({ children, expanded, onExpandedChange }) => {
159
+ const [open, setOpen] = useState(false);
160
+
142
161
  const onExpand = () => {
143
162
  setOpen(false);
144
163
  onExpandedChange(true);
@@ -151,7 +170,7 @@ export const SideNavigationOptions: FC<{
151
170
  return (
152
171
  <Popover
153
172
  className="bg-neutral-30"
154
- trigger={trigger}
173
+ trigger={children}
155
174
  direction="tr"
156
175
  onClickOutside={() => setOpen(false)}
157
176
  open={open}