@servicetitan/navigation 11.0.0-canary.237.c90556e.0 → 11.0.0-canary.237.f92c882.0

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

@@ -0,0 +1,530 @@
+/* stylelint-disable no-descending-specificity */
+@import (reference) '@servicetitan/tokens/core/tokens.less';
+
+@text-color: var(--colorsTextInverted, @color-white);
+@text-color-active: var(--colorsTextPrimarySubdued, @color-blue-300);
+@border-color: var(--colorsTextOnGrey, @color-neutral-200);
+@bg-color: #0f1d26;
+@bg-color-hover: rgba(255, 255, 255, 0.08);
+@bg-color-active: rgba(120, 187, 250, 0.2);
+
+.side-nav {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+
+    &.side-nav-v1 {
+        &.side-nav-slim {
+            width: 64px;
+        }
+        &.side-nav-expanded {
+            width: 212px;
+
+            .navigation-item {
+                flex-direction: row;
+                margin-left: @spacing-1;
+                margin-right: @spacing-1;
+
+                .navigation-item-icon-wrapper {
+                    flex: 1;
+                    padding: @spacing-1 @spacing-half;
+                }
+
+                .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;
+                    position: relative;
+                    transform: unset;
+                }
+            }
+        }
+
+        .divider {
+            margin-left: @spacing-1;
+            margin-right: @spacing-1;
+        }
+    }
+
+    &.side-nav-v2 {
+        .navigation-item {
+            margin-bottom: @spacing-half;
+        }
+        &.side-nav-slim {
+            width: 64px;
+        }
+        &.side-nav-expanded {
+            width: 268px;
+
+            .options-item-text {
+                padding-left: @spacing-0 !important;
+            }
+        }
+    }
+
+    &.side-nav-v1.side-nav-slim,
+    &.side-nav-v2 {
+        .navigation-item {
+            flex-direction: column;
+            width: 64px;
+            overflow-x: hidden;
+            padding-top: @spacing-1;
+
+            &:not(:first-child) {
+                margin-top: @spacing-half;
+            }
+
+            .navigation-item-counter {
+                position: absolute;
+                right: 0;
+                top: 4px;
+                z-index: auto;
+
+                &.navigation-item-counter-long {
+                    right: 2px;
+                }
+            }
+
+            .navigation-item-icon-wrapper {
+                flex: 1;
+                padding: @spacing-half;
+            }
+
+            .navigation-item-text-expanded {
+                display: none;
+            }
+            .navigation-item-text-collapsed {
+                font-family: @base-font-family;
+                font-size: 11px;
+                line-height: 11px;
+                margin: 2px @spacing-half @spacing-0;
+                text-align: center;
+            }
+
+            .navigation-item-text-collapsed.navigation-item-text-small {
+                font-size: 10.5px;
+            }
+        }
+    }
+
+    &.side-nav-expanded {
+        -webkit-transition: width 100ms ease-in-out;
+        -moz-transition: width 100ms ease-in-out;
+        -o-transition: width 100ms ease-in-out;
+        transition: width 100ms ease-in-out;
+    }
+}
+
+.side-nav-main {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    flex: 1;
+    position: relative;
+}
+
+.side-nav-footer {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    background-color: @bg-color;
+}
+.side-nav-submenu-bar {
+    background-color: @bg-color;
+    border-left: 1px solid @color-neutral-200;
+    width: 204px;
+}
+.side-nav-submenu-drawer {
+    background-color: @bg-color;
+    border-left: 1px solid @color-neutral-200;
+    width: 204px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 64px;
+    z-index: @z-index-overlay;
+}
+
+.side-nav-navigation {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    padding-top: @spacing-1;
+    flex: 1;
+
+    background-color: @bg-color;
+
+    .side-nav-content {
+        overflow-y: auto;
+        padding-bottom: @spacing-1;
+        flex-grow: 1;
+        flex-basis: 0;
+
+        &::-webkit-scrollbar {
+            width: 0;
+            height: 0;
+        }
+    }
+
+    .side-nav-top {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        padding-bottom: @spacing-1;
+    }
+
+    .side-nav-bottom {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+}
+
+.navigation-item {
+    font-family: @base-font-family;
+    color: @text-color;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    outline: none;
+    overflow: hidden;
+
+    .navigation-item-icon-wrapper {
+        border-radius: @border-radius-2;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-wrap: nowrap;
+        text-wrap: nowrap;
+        position: relative;
+    }
+
+    &.navigation-item-active {
+        color: @text-color-active;
+
+        .navigation-item-icon-wrapper {
+            background-color: @bg-color-active;
+        }
+    }
+
+    &.navigation-item-icon-switch {
+        &.navigation-item-active {
+            .navigation-icon-inactive[data-anv][data-anv] {
+                display: none;
+            }
+            .navigation-icon-active[data-anv][data-anv] {
+                display: block;
+            }
+        }
+        &:not(.navigation-item-active) {
+            .navigation-icon-inactive[data-anv][data-anv] {
+                display: block;
+            }
+            .navigation-icon-active[data-anv][data-anv] {
+                display: none;
+            }
+        }
+    }
+
+    &:hover:not(.navigation-item-active) .navigation-item-icon-wrapper {
+        background-color: @bg-color-hover;
+    }
+
+    .navigation-item-counter {
+        min-width: 12px !important;
+        min-height: 12px !important;
+    }
+
+    .navigation-item-group-toggle-wrapper {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .navigation-item-group-toggle[data-anv][data-anv] {
+            color: inherit;
+            font-weight: @font-weight-semibold;
+        }
+
+        .navigation-item-group-toggle-click {
+            position: absolute;
+            left: -@spacing-2;
+            right: -@spacing-half;
+            top: -@spacing-1;
+            bottom: -@spacing-1;
+        }
+    }
+
+    .navigation-icon[data-anv][data-anv] {
+        height: 24px;
+        width: 24px;
+        color: inherit;
+
+        & > svg {
+            height: 24px;
+            width: 24px;
+        }
+    }
+}
+
+.navigation-group-wrapper {
+    .navigation-group-item {
+        position: relative;
+    }
+
+    .submenu-wrapper:not(.submenu-wrapper-collapsed) {
+        max-height: 2000px;
+        transition: max-height 0.7s ease-in-out;
+    }
+}
+
+.submenu-wrapper {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height unset;
+}
+
+.submenu {
+    margin-left: @spacing-3;
+}
+
+.submenu-bar {
+    margin-left: 6px;
+
+    .submenu-link-active:before {
+        left: -6px !important;
+    }
+
+    > *,
+    > *[data-anv][data-anv] {
+        line-height: 18px;
+    }
+}
+
+.submenu,
+.submenu-bar {
+    padding-left: @spacing-1;
+    padding-right: @spacing-1;
+    margin-bottom: @spacing-1;
+    position: relative;
+    font-family: @base-font-family;
+
+    .submenu-group-header[data-anv][data-anv] {
+        padding-top: @spacing-2;
+        padding-bottom: @spacing-half;
+    }
+    .submenu-group-header.submenu-group-header-empty[data-anv][data-anv] {
+        padding-top: @spacing-1;
+    }
+
+    .submenu-link {
+        padding: @spacing-1;
+    }
+
+    .submenu-link-active {
+        position: relative;
+    }
+
+    .submenu-link-active:before {
+        content: '';
+        position: absolute;
+        background-color: @text-color-active;
+        width: 3px;
+        top: @spacing-1;
+        bottom: @spacing-1;
+        left: -12px;
+    }
+
+    .submenu-link:before:not(.submenu-link-active) {
+        background-color: @bg-color-hover;
+    }
+
+    > *,
+    > *[data-anv][data-anv] {
+        border-left: 3px solid transparent;
+        padding-left: @spacing-1;
+    }
+
+    > *:last-child {
+        margin-bottom: @spacing-0;
+    }
+}
+
+.submenu-popover {
+    margin-left: -@spacing-1;
+    margin-right: -@spacing-1;
+    min-width: 240px;
+
+    .submenu-group-header[data-anv][data-anv] {
+        margin-top: @spacing-2;
+        padding-bottom: @spacing-half;
+    }
+
+    .submenu-group-header.submenu-group-header-empty[data-anv][data-anv] {
+        margin-top: @spacing-1;
+    }
+
+    .submenu-link {
+        padding-top: @spacing-1;
+        padding-bottom: @spacing-1;
+    }
+
+    .submenu-link-active {
+        background-color: @bg-color-active;
+    }
+    .submenu-link:hover:not(.submenu-link-active) {
+        background-color: @bg-color-hover;
+    }
+
+    > *,
+    > *[data-anv][data-anv] {
+        padding-left: @spacing-1;
+        padding-right: @spacing-1;
+    }
+}
+
+.submenu,
+.submenu-popover,
+.submenu-bar {
+    display: flex;
+    flex-direction: column;
+
+    .submenu-group-header[data-anv][data-anv] {
+        color: @color-neutral-70;
+    }
+
+    .submenu-link {
+        color: @text-color;
+        font-size: @typescale-2;
+        border-radius: @border-radius-2;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .submenu-link-active {
+        color: @text-color-active;
+    }
+
+    .submenu-link-counter {
+        position: relative !important;
+        transform: unset !important;
+    }
+
+    .submenu-link:hover:not(.submenu-link-active) {
+        background-color: @bg-color-hover;
+    }
+}
+
+.options-item {
+    font-family: @base-font-family;
+    color: @text-color;
+    position: relative;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+        .options-item-content {
+            background-color: @bg-color-hover;
+        }
+    }
+
+    .options-item-content {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-wrap: nowrap;
+        text-wrap: nowrap;
+        height: 32px;
+
+        border-radius: @border-radius-2;
+    }
+
+    .options-icon-wrapper {
+        height: 24px;
+        width: 24px;
+
+        .options-icon[data-anv][data-anv] > svg {
+            height: 24px;
+            width: 24px;
+            color: @text-color;
+        }
+    }
+
+    .options-item-text {
+        font-family: @base-font-family;
+        font-size: @typescale-3;
+        flex: 1;
+    }
+}
+
+.side-nav-slim .side-nav-footer .options-item {
+    .options-item-content {
+        margin: @spacing-2;
+
+        .options-icon-wrapper {
+            padding-left: @spacing-half;
+            padding-right: @spacing-half;
+        }
+    }
+}
+
+.side-nav-slim .side-nav-navigation .options-item {
+    .options-item-content {
+        background-color: @color-blue-grey-500;
+    }
+}
+
+.side-nav-expanded .side-nav-footer .options-item {
+    .options-item-content {
+        margin: @spacing-2 @spacing-1;
+
+        .options-icon-wrapper {
+            padding-left: @spacing-1;
+            padding-right: @spacing-1;
+        }
+
+        .options-item-text {
+            font-family: @base-font-family;
+            font-size: @typescale-3;
+            padding-left: @spacing-1;
+        }
+    }
+}
+
+.side-nav-submenu-bar .options-item {
+    .options-item-content {
+        margin-right: @spacing-2;
+        justify-content: center;
+        width: 32px;
+    }
+}
+
+.side-nav-navigation .options-item {
+    width: 64px;
+    margin-top: @spacing-1;
+    margin-bottom: 12px;
+    display: flex;
+    justify-content: center;
+
+    .options-icon-wrapper {
+        padding-left: @spacing-half;
+        padding-right: @spacing-half;
+    }
+}
+
+.divider {
+    border-top: 1px solid @border-color;
+}

package/dist/components/left-navigation/side-navigation.stories.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+declare const _default: {
+    title: string;
+    component: (({ className, children, expanded, id, items, appearance, onExpandedChange, }: import("./side-navigation").SideNavigationProps) => import("react/jsx-runtime").JSX.Element) & {
+        Top: FC<import("./side-navigation").SideNavigationTopProps>;
+    };
+    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    parameters: {};
+};
+export default _default;
+export declare const DefaultSideNavigation: () => import("react/jsx-runtime").JSX.Element;
+export declare const SideNavigationLinksOnly: () => import("react/jsx-runtime").JSX.Element;
+export declare const SideNavigationWithSubmenu: () => import("react/jsx-runtime").JSX.Element;
+export declare const SideNavigationWithCustomTopElements: () => import("react/jsx-runtime").JSX.Element;
+export declare const SideNavigationWithSubmenuBar: () => import("react/jsx-runtime").JSX.Element;
+export declare const SideNavigationWithSubmenuBarAndTop: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=side-navigation.stories.d.ts.map

package/dist/components/left-navigation/side-navigation.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/side-navigation.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;;;;AA4BpD,wBAKE;AAEF,eAAO,MAAM,qBAAqB,+CA4BjC,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAwBnC,CAAC;AAEF,eAAO,MAAM,yBAAyB,+CA0BrC,CAAC;AAWF,eAAO,MAAM,mCAAmC,+CAkC/C,CAAC;AAEF,eAAO,MAAM,4BAA4B,+CA0BxC,CAAC;AAEF,eAAO,MAAM,kCAAkC,+CA+B9C,CAAC"}

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

@@ -0,0 +1,115 @@
+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, 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, {}) }) })] }));
+};
+export default {
+    title: 'Navigation/SideNavigation',
+    component: SideNavigation,
+    decorators: [layout, withDefaultRedirects, withMemoryRouter, withAnvil],
+    parameters: {},
+};
+export const DefaultSideNavigation = () => {
+    const [expanded, setExpanded] = useState(undefined);
+    return (_jsx(SideNavigation, { expanded: expanded, onExpandedChange: setExpanded, items: [
+            items.dashboard,
+            items.calendar,
+            items.calls,
+            items.accounting,
+            items.dispatch,
+            items.fleet,
+            items.followUps,
+            items.inventory,
+            items.marketing,
+            items.priceBook,
+            items.pointOfSale,
+            items.reports,
+        ], children: _jsx(SideNavigation.Top, { children: _jsx(SideNavigationLink, { ...items.tasks }) }) }));
+};
+export const SideNavigationLinksOnly = () => {
+    const [expanded, setExpanded] = useState(undefined);
+    return (_jsx(SideNavigation, { expanded: expanded, onExpandedChange: setExpanded, items: [
+            items.dashboard,
+            items.calls,
+            items.schedule,
+            items.dispatch,
+            items.accounting,
+            items.inventory,
+            items.followUps,
+            items.reports,
+            items.marketing,
+            items.priceBook,
+            items.projects,
+        ] }));
+};
+export const SideNavigationWithSubmenu = () => {
+    const [expanded, setExpanded] = useState(undefined);
+    return (_jsx(SideNavigation, { expanded: expanded, onExpandedChange: setExpanded, items: [
+            items.dashboard,
+            items.calls,
+            items.schedule,
+            items.dispatch,
+            items.accountingWithSubmenu,
+            items.purchasingWithSubmenu,
+            items.followUpsWithSubmenu,
+            items.reports,
+            items.marketing,
+            items.priceBook,
+            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, counter: 50 })] }) }));
+};
+export const SideNavigationWithSubmenuBar = () => {
+    const [expanded, setExpanded] = useState(undefined);
+    return (_jsx(SideNavigation, { expanded: expanded, onExpandedChange: setExpanded, appearance: "v2", items: [
+            items.dashboard,
+            items.calls,
+            items.schedule,
+            items.dispatch,
+            items.accountingWithSubmenu,
+            items.purchasingWithSubmenu,
+            items.followUpsWithSubmenu,
+            items.reports,
+            items.marketing,
+            items.priceBook,
+            items.projects,
+        ] }));
+};
+export const SideNavigationWithSubmenuBarAndTop = () => {
+    const [expanded, setExpanded] = useState(undefined);
+    return (_jsx(SideNavigation, { expanded: expanded, onExpandedChange: setExpanded, appearance: "v2", items: [
+            items.dashboard,
+            items.calls,
+            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 })] }) }));
+};
+//# sourceMappingURL=side-navigation.stories.js.map

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

@@ -0,0 +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/components/left-navigation/with-tooltip.d.ts

@@ -0,0 +1,4 @@
+import { TooltipProps } from '@servicetitan/anvil2';
+import { ReactElement } from 'react';
+export declare const withTooltip: (element: ReactElement, tooltip: string | undefined, placement?: TooltipProps["placement"]) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=with-tooltip.d.ts.map

package/dist/components/left-navigation/with-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/left-navigation/with-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,eAAO,MAAM,WAAW,GACpB,SAAS,YAAY,EACrB,SAAS,MAAM,GAAG,SAAS,EAC3B,YAAW,YAAY,CAAC,WAAW,CAAY,4CAS9C,CAAC"}

package/dist/components/left-navigation/with-tooltip.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip } from '@servicetitan/anvil2';
+export const withTooltip = (element, tooltip, placement = 'bottom') => tooltip ? (_jsxs(Tooltip, { placement: placement, children: [_jsx(Tooltip.Content, { children: tooltip }), _jsx(Tooltip.Trigger, { children: element })] })) : (element);
+//# sourceMappingURL=with-tooltip.js.map

package/dist/components/left-navigation/with-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-tooltip.js","sourceRoot":"","sources":["../../../src/components/left-navigation/with-tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAgB,MAAM,sBAAsB,CAAC;AAG7D,MAAM,CAAC,MAAM,WAAW,GAAG,CACvB,OAAqB,EACrB,OAA2B,EAC3B,YAAuC,QAAQ,EACjD,EAAE,CACA,OAAO,CAAC,CAAC,CAAC,CACN,MAAC,OAAO,IAAC,SAAS,EAAE,SAAS,aACzB,KAAC,OAAO,CAAC,OAAO,cAAE,OAAO,GAAmB,EAC5C,KAAC,OAAO,CAAC,OAAO,cAAE,OAAO,GAAmB,IACtC,CACb,CAAC,CAAC,CAAC,CACA,OAAO,CACV,CAAC"}

package/dist/components/links.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { HeaderNavigationLinkProps, HeaderNavigationTriggerProps } from '../utils/navigation-legacy';
+export declare const HeaderNavigationLink: FC<HeaderNavigationLinkProps>;
+export declare const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps>;
+//# sourceMappingURL=links.d.ts.map

package/dist/components/links.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"links.d.ts","sourceRoot":"","sources":["../../src/components/links.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EACH,yBAAyB,EACzB,4BAA4B,EAC/B,MAAM,4BAA4B,CAAC;AAepC,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAiB9D,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAepE,CAAC"}