@servicetitan/navigation 10.6.1 → 11.0.0-canary.237.0ce6038.0

package/src/components/titan-layout/layout-sidebar.tsx

@@ -0,0 +1,295 @@
+import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';
+import SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';
+import SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';
+import SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';
+import classNames from 'classnames';
+import {
+    Children,
+    FC,
+    Fragment,
+    MouseEvent,
+    ReactElement,
+    isValidElement,
+    useCallback,
+} from 'react';
+import { NavigationItemData, NavigationSubmenuData } from '../../utils/navigation';
+import { NavLinkComponentProps } from '../../utils/navigation-context';
+import { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';
+import { NavigationComponentProps } from './interface-internal';
+import { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';
+import {
+    InternalSideNavigationGroup,
+    InternalSideNavigationGroupLink,
+    InternalSideNavigationLink,
+} from './layout-sidebar-links-internal';
+import * as Styles from './layout-sidebar.module.less';
+
+import { withTooltip } from './with-tooltip';
+
+export interface LayoutSidebarProps {
+    className?: string;
+    top?: ReactElement[];
+    bottom?: ReactElement;
+    mainItems?: NavigationItemData[];
+    barExpanded: boolean;
+    submenuExpanded: string | undefined;
+    mobile: boolean;
+    navigationComponent: FC<NavLinkComponentProps>;
+    onBarExpandChange(expanded: boolean): void;
+    onSubmenuExpandChange(id: string, expanded: boolean): void;
+}
+
+export const LayoutSidebar: FC<LayoutSidebarProps> = ({
+    className,
+    mobile,
+    barExpanded,
+    submenuExpanded,
+    onBarExpandChange,
+    onSubmenuExpandChange,
+    mainItems,
+    top,
+    bottom,
+    navigationComponent,
+}) => {
+    const handleClick = (e: MouseEvent<never>) => {
+        e.stopPropagation();
+    };
+
+    return (
+        <LayoutPlacementContext.Provider value="side">
+            <div
+                className={classNames(
+                    Styles.nav,
+                    mobile && Styles.navDrawer,
+                    mobile && barExpanded && Styles.navDrawerOpened,
+                    !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),
+                    className
+                )}
+                data-cy="side-navigation"
+                onClick={handleClick}
+            >
+                <ThemeProvider mode="dark" className={Styles.navMain}>
+                    {mobile && (
+                        <div className={Styles.navCloseWrapper}>
+                            <div
+                                className={Styles.navClose}
+                                onClick={() => onBarExpandChange(false)}
+                            >
+                                <Icon svg={SvgClose} size="large" />
+                            </div>
+                        </div>
+                    )}
+                    {!!top?.length && <SidebarTop>{top}</SidebarTop>}
+
+                    <div data-cy="navigation-items">
+                        {mainItems?.map(item =>
+                            item.submenu ? (
+                                <SideNavigationGroupItem
+                                    key={item.id}
+                                    barExpanded={barExpanded}
+                                    submenuExpanded={!!item.id && submenuExpanded === item.id}
+                                    onSubmenuExpand={onSubmenuExpandChange}
+                                    navigationComponent={navigationComponent}
+                                    {...item}
+                                />
+                            ) : (
+                                <InternalSideNavigationLink
+                                    key={item.id}
+                                    submenuExpanded={undefined}
+                                    navigationComponent={navigationComponent}
+                                    {...item}
+                                    tag={getSubmenuGroupTag(
+                                        item.submenu,
+                                        getCounterTag(item.counter, item.tag)
+                                    )}
+                                />
+                            )
+                        )}
+                    </div>
+
+                    {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}
+                </ThemeProvider>
+
+                {!mobile && (
+                    <div className={Styles.navFooter}>
+                        <div className={Styles.divider} />
+                        <div className={Styles.toggleWrapper}>
+                            <SideNavigationOptionsToggle
+                                appearance={barExpanded ? 'collapse-button' : 'expand'}
+                                onExpandedChange={() => onBarExpandChange(!barExpanded)}
+                            />
+                        </div>
+                    </div>
+                )}
+            </div>
+        </LayoutPlacementContext.Provider>
+    );
+};
+LayoutSidebar.displayName = 'LayoutSidebar';
+
+/** Side Navigation options toggle */
+const SideNavigationOptionsToggle: FC<{
+    appearance: 'expand' | 'collapse' | 'collapse-button';
+    onExpandedChange?(expanded: boolean): void;
+}> = ({ appearance, onExpandedChange }) =>
+    withTooltip(
+        <div
+            data-cy="navigation-left-options"
+            data-pendo="navigation-left-options"
+            className={classNames(Styles.toggle)}
+            onClick={() => onExpandedChange?.(appearance === 'expand')}
+        >
+            <div className={Styles.toggleContent}>
+                <div className={Styles.toggleIconWrapper}>
+                    <Icon
+                        className={Styles.toggleIcon}
+                        svg={appearance === 'expand' ? SvgExpand : SvgCollapse}
+                    />
+                </div>
+
+                {appearance === 'collapse-button' && (
+                    <span className={Styles.toggleText}>Collapse Menu</span>
+                )}
+            </div>
+        </div>,
+        appearance === 'expand'
+            ? 'Expand Menu'
+            : appearance === 'collapse'
+              ? 'Collapse Menu'
+              : undefined,
+        'right'
+    );
+
+/** Side Navigation menu item */
+const SideNavigationGroupItem: FC<
+    NavigationItemData & {
+        navigationComponent: FC<NavLinkComponentProps>;
+        barExpanded: boolean;
+        submenuExpanded: boolean;
+        onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);
+    }
+> = ({ onSubmenuExpand, barExpanded, submenuExpanded, ...props }) => {
+    const onExpandToggle = useCallback(
+        (e: MouseEvent<never>) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (props.id) {
+                onSubmenuExpand?.(props.id, !submenuExpanded);
+            }
+        },
+        [props.id, submenuExpanded, onSubmenuExpand]
+    );
+    const {
+        sidebar: {
+            styles: { popoverContent },
+        },
+    } = useTitanLayoutContext();
+
+    const tag = getSubmenuGroupTag(props.submenu, getCounterTag(props.counter, props.tag));
+
+    return barExpanded ? (
+        <InternalSideNavigationGroup
+            {...props}
+            submenuExpanded={submenuExpanded}
+            onExpandToggle={onExpandToggle}
+            tag={tag}
+        >
+            <SideNavigationGroupContent
+                groups={props.submenu?.groups ?? []}
+                navigationComponent={props.navigationComponent}
+            />
+        </InternalSideNavigationGroup>
+    ) : (
+        <Popover placement="right-start" openOnHover delay={500}>
+            <Popover.Trigger>
+                {(triggerProps: any) => (
+                    <div {...triggerProps}>
+                        <InternalSideNavigationLink
+                            {...props}
+                            submenuExpanded={undefined}
+                            tag={tag}
+                        />
+                    </div>
+                )}
+            </Popover.Trigger>
+            <Popover.Content style={popoverContent} className="z-global-nav-i">
+                <div className={Styles.submenuPopover}>
+                    <Text
+                        variant="headline"
+                        el="h4"
+                        size="small"
+                        className="c-white m-b-half-i m-t-1"
+                    >
+                        {props.title}
+                    </Text>
+                    <SideNavigationGroupContent
+                        groups={props.submenu?.groups ?? []}
+                        navigationComponent={props.navigationComponent}
+                    />
+                </div>
+            </Popover.Content>
+        </Popover>
+    );
+};
+const SideNavigationGroupContent: FC<NavigationSubmenuData & NavigationComponentProps> = ({
+    groups,
+    navigationComponent,
+}) => {
+    return (
+        <Fragment>
+            {groups.reduce((out, group, index) => {
+                if (!group.links.length) {
+                    return out;
+                }
+
+                const title = group.title?.trim() ?? '';
+                /* eslint-disable react/no-array-index-key */
+                out.push(
+                    <Text
+                        key={`:group:${index}:title`}
+                        variant="eyebrow"
+                        className={classNames(Styles.submenuGroupHeader, {
+                            [Styles.submenuGroupHeaderEmpty]: !title,
+                        })}
+                    >
+                        {title}
+                    </Text>
+                );
+                out.push(
+                    ...group.links.map((link, index) => (
+                        <InternalSideNavigationGroupLink
+                            key={`:${link.id}:${index}`}
+                            {...link}
+                            navigationComponent={navigationComponent}
+                        />
+                    ))
+                );
+                /* eslint-enable react/no-array-index-key */
+
+                return out;
+            }, [] as ReactElement[])}
+        </Fragment>
+    );
+};
+
+function SidebarTop({ children }: any) {
+    const list = Children.map(children, child => {
+        return child && isValidElement(child) ? child : null;
+    });
+    return list?.length ? (
+        <ThemeProvider mode="dark" className={Styles.navTop} data-cy="navigation-items-top">
+            {list}
+            <div className={Styles.divider} />
+        </ThemeProvider>
+    ) : null;
+}
+
+function SidebarBottom({ children }: any) {
+    return (
+        <ThemeProvider mode="dark" className={Styles.navBottom} data-cy="navigation-items-bottom">
+            <div className={Styles.divider} />
+            {children}
+        </ThemeProvider>
+    );
+}

package/src/components/titan-layout/titan-layout.module.less

@@ -0,0 +1,76 @@
+/* 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);
+
+.layout-anvil1 {
+    height: calc(100vh - var(--nav-offset-top));
+    margin-top: var(--nav-offset-top);
+
+    display: flex;
+    flex-direction: row;
+
+    .side {
+        flex-basis: var(--nav-offset-left);
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+
+    .content {
+        flex-grow: 1;
+
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+}
+
+.layout-legacy,
+.layout-anvil2 {
+    padding-left: var(--nav-offset-left);
+
+    .top-placeholder {
+        height: var(--nav-offset-top);
+    }
+
+    &:not(.layout-mobile) {
+        .side {
+            position: fixed;
+            top: var(--nav-offset-top);
+            bottom: 0;
+            left: 0;
+            right: 0;
+            z-index: @z-index-global-nav;
+        }
+    }
+}
+
+.layout {
+    --nav-offset-top: 49px;
+
+    &.layout-mobile {
+        --nav-offset-top: 61px;
+        --nav-offset-left: 0;
+    }
+
+    &.layout-nav-slim {
+        --nav-offset-left: 64px;
+    }
+
+    &.layout-nav-wide {
+        --nav-offset-left: 212px;
+    }
+
+    .top {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 991;
+    }
+}

package/src/components/titan-layout/titan-layout.module.less.d.ts

@@ -0,0 +1,13 @@
+export const __esModule: true;
+export const content: string;
+export const layout: string;
+export const layoutAnvil1: string;
+export const layoutAnvil2: string;
+export const layoutLegacy: string;
+export const layoutMobile: string;
+export const layoutNavSlim: string;
+export const layoutNavWide: string;
+export const side: string;
+export const top: string;
+export const topPlaceholder: string;
+

package/src/components/titan-layout/titan-layout.stories.tsx

@@ -0,0 +1,194 @@
+import { Page as Anvil2Page, Popover } from '@servicetitan/anvil2';
+import SvgSearch from '@servicetitan/anvil2/assets/icons/material/round/search.svg';
+import SvgAtlas from '@servicetitan/anvil2/assets/icons/st/atlas_logo.svg';
+import SvgSettingsActive from '@servicetitan/anvil2/assets/icons/st/gnav_settings_active.svg';
+import SvgSettings from '@servicetitan/anvil2/assets/icons/st/gnav_settings_inactive.svg';
+import SvgRocketActive from '@servicetitan/anvil2/assets/icons/st/gnav_titan_advisor_active.svg';
+import SvgRocket from '@servicetitan/anvil2/assets/icons/st/gnav_titan_advisor_inactive.svg';
+import { Page as Anvil1Page } from '@servicetitan/design-system';
+import { FC, Fragment, useState } from 'react';
+import {
+    CallsNavigationTrigger,
+    LocationInfo,
+    NavLinkMock,
+    items,
+    withAnvil,
+    withDefaultRedirects,
+    withMemoryRouter,
+} from '../../test/data';
+import { SideNavigationLinkWrapperProps } from '../left-navigation';
+import { HeaderNavigationLink, HeaderNavigationTrigger } from '../links';
+import { ProfileDropdown, TitanLayout, TitanLayoutProps, TitanLayoutState } from './';
+
+export default {
+    title: 'Navigation/TitanLayout',
+    component: TitanLayout,
+    decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
+    parameters: {},
+};
+
+const mainNavItems = [
+    items.dashboard,
+    items.calendar,
+    items.calls,
+    items.accountingWithSubmenu,
+    items.dispatch,
+
+    items.fleet,
+    items.followUps,
+    items.inventory,
+
+    items.marketing,
+    items.priceBook,
+    items.pointOfSale,
+    items.reports,
+];
+
+const profile = (
+    <ProfileDropdown>
+        <ProfileDropdown.Link
+            id="first"
+            to="https://google.com"
+            tooltip="Google it"
+            target="_blank"
+        >
+            first link
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Section
+            id="second"
+            onClick={() => alert('second click')}
+            tooltip="Second hint"
+        >
+            second link
+        </ProfileDropdown.Section>
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Section id="content">some content</ProfileDropdown.Section>
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Link id="third" to="/third">
+            third link
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Divider />
+    </ProfileDropdown>
+);
+
+const extraLinks = (
+    <Fragment>
+        <HeaderNavigationLink
+            id="search"
+            to="https://google.com"
+            target="_blank"
+            title="Search"
+            hint="Search: for all the questions"
+            tooltip="Search"
+            icon={SvgSearch}
+            iconActive={SvgSearch}
+        />
+
+        <CallsNavigationTrigger />
+
+        <HeaderNavigationLink
+            id="titanAdvisor"
+            to="/titanAdvisor"
+            title="Titan Advisor"
+            icon={SvgRocket}
+            iconActive={SvgRocketActive}
+        />
+
+        <HeaderNavigationLink
+            id="settings"
+            to="/settings"
+            title="Settings"
+            target="_blank"
+            aria-label="search"
+            hint="Settings"
+            icon={SvgSettings}
+            iconActive={SvgSettingsActive}
+        />
+    </Fragment>
+);
+
+const extraLinksTop = (
+    <HeaderNavigationTrigger
+        id="atlas"
+        title="Atlas"
+        icon={SvgAtlas}
+        iconActive={SvgAtlas}
+        data-pendo="atlas-chat-button"
+        data-cy="atlas-chat-button"
+        data-atlas-chat-button
+    />
+);
+
+const SideLinkPopoverWrapper: FC<SideNavigationLinkWrapperProps> = ({ children, context }) => {
+    return (
+        <Popover placement="right" openOnHover>
+            <Popover.Trigger>{(props: any) => <div {...props}>{children}</div>}</Popover.Trigger>
+            <Popover.Content style={context.styles.popoverContent}>popover content</Popover.Content>
+        </Popover>
+    );
+};
+
+const sidebarTop = () => [
+    <TitanLayout.SidebarLink key="tasks" {...items.tasks} />,
+    <TitanLayout.SidebarLink key="calls" {...items.calls} />,
+    <TitanLayout.SidebarTrigger
+        key="marketing"
+        {...items.marketing}
+        isActive={false}
+        wrapper={SideLinkPopoverWrapper}
+        onMobileClick={() => alert('clicked')}
+        counter={50}
+    />,
+];
+const useLayoutProps = (): TitanLayoutProps => {
+    const [state, setState] = useState<TitanLayoutState | undefined>(undefined);
+
+    return {
+        state,
+        onStateChange: setState,
+
+        navigationMainItems: mainNavItems,
+        profile,
+        extraLinks,
+        extraLinksTop,
+
+        sidebarTop: sidebarTop(),
+        navigationComponent: NavLinkMock,
+        extraText: 'EST (-8 hrs)',
+    };
+};
+
+export const TitanLayoutLegacy = () => (
+    <TitanLayout {...useLayoutProps()} appearance="legacy">
+        <TitanLayout.Logo title />
+        <TitanLayout.Content>
+            <LocationInfo />
+        </TitanLayout.Content>
+    </TitanLayout>
+);
+
+export const TitanLayoutAnvil1 = () => (
+    <TitanLayout {...useLayoutProps()} appearance="anvil1">
+        <TitanLayout.Logo title />
+        <TitanLayout.Content>
+            <Anvil1Page>
+                <LocationInfo />
+            </Anvil1Page>
+        </TitanLayout.Content>
+    </TitanLayout>
+);
+
+export const TitanLayoutAnvil2 = () => (
+    <TitanLayout {...useLayoutProps()} appearance="anvil2">
+        <TitanLayout.Logo title />
+        <TitanLayout.Content>
+            <Anvil2Page>
+                <Anvil2Page.Content>
+                    <LocationInfo />
+                </Anvil2Page.Content>
+            </Anvil2Page>
+        </TitanLayout.Content>
+    </TitanLayout>
+);