@servicetitan/navigation 12.0.3 → 13.0.0-canary.256.b43c6d7.0

package/dist/components/titan-layout/layout-profile.stories.d.ts

@@ -1,13 +0,0 @@
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./layout-profile").ProfileDropdownProps> & {
-        Divider: import("react").FC;
-        Link: import("react").FC<import("./layout-profile").ProfileDropdownLinkProps>;
-        Section: import("react").FC<import("./layout-profile").ProfileDropdownSectionProps>;
-    };
-    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
-    parameters: {};
-};
-export default _default;
-export declare const ProfileDefault: () => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=layout-profile.stories.d.ts.map

package/dist/components/titan-layout/layout-profile.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"layout-profile.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-profile.stories.tsx"],"names":[],"mappings":";;;;;;;;;;AAWA,wBAKE;AAEF,eAAO,MAAM,cAAc,+CA2B1B,CAAC"}

package/src/components/header-navigation/header-navigation-content.tsx

@@ -1,120 +0,0 @@
-import { Icon, IconPropsStrict } from '@servicetitan/design-system';
-import classNames from 'classnames';
-import { FC, Fragment, useContext } from 'react';
-import { NavigationComponentContext } from '../../utils/navigation-context';
-import { HeaderNavigationItemData } from '../../utils/navigation-legacy';
-import { getCounterTag } from '../../utils/side-nav';
-import { CounterTag, CounterTagProps } from '../counter-tag';
-import * as Styles from './header-navigation.module.less';
-import { withTooltip } from './with-tooltip';
-
-export interface HeaderNavigationItemContentPropsStrict {
-    /** item text */
-    title?: string;
-    /** text component class name */
-    titleClassName?: string;
-    /** counter tag shown for item */
-    tag: CounterTagProps | undefined;
-    /** counter component class name */
-    counterClassName?: string;
-    /** icon component class name */
-    iconClassName?: string;
-    /** IconComponent custom icon component */
-    iconComponent?: FC;
-    /** iconName name of anvil icon */
-    iconName?: IconPropsStrict['name'];
-}
-
-/** Content for navigation items */
-export const HeaderNavigationItemContent: FC<HeaderNavigationItemContentPropsStrict> = ({
-    title,
-    titleClassName,
-    counterClassName,
-    iconClassName,
-    iconComponent: IconComponent,
-    iconName,
-    tag,
-}) => {
-    const iconClass = classNames(Styles.navigationIcon, iconClassName);
-    return (
-        <Fragment>
-            {IconComponent ? (
-                <i className={iconClass}>
-                    <IconComponent />
-                </i>
-            ) : iconName ? (
-                <Icon name={iconName} className={iconClass} />
-            ) : (
-                <i className={iconClass} />
-            )}
-
-            {!!title && (
-                <span className={classNames(Styles.navigationItemTitle, titleClassName)}>
-                    {title}
-                </span>
-            )}
-
-            {!!tag && (
-                <CounterTag
-                    data={tag}
-                    className={classNames(Styles.navigationItemCounter, counterClassName)}
-                    longClassName={Styles.navigationItemCounterLong}
-                />
-            )}
-        </Fragment>
-    );
-};
-
-interface HeaderNavigationItemPropsStrict extends HeaderNavigationItemData {
-    minimized: boolean;
-    main: boolean;
-}
-
-/** Navigation main menu item */
-export const HeaderNavigationItem: FC<HeaderNavigationItemPropsStrict> = ({
-    id,
-    to,
-    counter,
-    title,
-    hint,
-    className,
-    iconClassName,
-    iconComponent,
-    iconName,
-    isActive,
-    main,
-    minimized,
-    tag,
-}) => {
-    const NavigationComponent = useContext(NavigationComponentContext);
-
-    return withTooltip(
-        <NavigationComponent
-            data-cy={`navigation-item-${id}`}
-            data-pendo={`navigation-item-${id}`}
-            key={id}
-            to={to}
-            title={hint}
-            className={classNames(
-                Styles.navigationItem,
-                main ? Styles.navigationItemMain : Styles.navigationItemOverflow,
-                className,
-                {
-                    [Styles.navigationItemActive]: isActive === true,
-                }
-            )}
-            isActive={typeof isActive === 'function' ? isActive : undefined}
-            activeClassName={Styles.navigationItemActive}
-        >
-            <HeaderNavigationItemContent
-                title={minimized ? undefined : title}
-                titleClassName={main ? '' : 'm-l-half'}
-                tag={getCounterTag(counter, tag)}
-                iconComponent={iconComponent}
-                iconClassName={iconClassName}
-                iconName={iconName}
-            />
-        </NavigationComponent>,
-        minimized ? title : undefined
-    );
-};

package/src/components/header-navigation/header-navigation-extra-stacked.stories.tsx

@@ -1,19 +0,0 @@
-import { withAnvil, withMemoryRouter } from '../../test/data';
-import { HeaderNavigationLink } from '../links';
-import { HeaderNavigationStacked } from './header-navigation';
-
-const withHeaderNavigationStacked = (Story: any) => <HeaderNavigationStacked right={<Story />} />;
-
-export default {
-    title: 'Navigation/Extra/Stacked',
-    component: HeaderNavigationLink,
-    decorators: [withHeaderNavigationStacked, withMemoryRouter, withAnvil],
-    parameters: {},
-};
-
-export {
-    ExtraWithTooltip,
-    ExtraLink,
-    ExtraTrigger,
-    ExtraWithLabel,
-} from './header-navigation-extra.stories';

package/src/components/header-navigation/header-navigation-extra.stories.tsx

@@ -1,142 +0,0 @@
-import SvgHelp from '@servicetitan/anvil2/assets/icons/material/round/help_outline.svg';
-import SvgPhone from '@servicetitan/anvil2/assets/icons/material/round/phone.svg';
-import SvgSearch from '@servicetitan/anvil2/assets/icons/material/round/search.svg';
-import { Button, Popover } from '@servicetitan/design-system';
-import { Fragment, useState } from 'react';
-import { withAnvil, withMemoryRouter } from '../../test/data';
-import { HeaderNavigationLink, HeaderNavigationTrigger } from '../links';
-import { HeaderNavigation } from './';
-
-const withHeaderNavigation = (Story: any) => (
-    <HeaderNavigation rightClassName="m-r-1">
-        <Story />
-    </HeaderNavigation>
-);
-
-export default {
-    title: 'Navigation/Extra/Legacy',
-    component: HeaderNavigationLink,
-    decorators: [withHeaderNavigation, withMemoryRouter, withAnvil],
-    parameters: {},
-};
-
-export const ExtraLink = () => (
-    <HeaderNavigationLink
-        id="search"
-        title="Search"
-        to="https://google.com"
-        target="_blank"
-        iconName="search"
-        icon={SvgSearch}
-        iconActive={undefined}
-        hint="Search: for all the questions"
-    />
-);
-
-export const ExtraTrigger = () => (
-    <HeaderNavigationTrigger
-        id="dialpad"
-        title="Dialpad"
-        iconName="phone"
-        counter={2}
-        tooltip="Phones pro"
-        icon={SvgPhone}
-        iconActive={undefined}
-    />
-);
-
-export const ExtraWithTooltip = () => (
-    <Fragment>
-        <HeaderNavigationLink
-            id="search"
-            title="Search"
-            to="https://google.com"
-            target="_blank"
-            iconName="search"
-            icon={SvgSearch}
-            iconActive={undefined}
-            tooltip="Search: for all the questions"
-            hint="Google"
-        />
-
-        <HeaderNavigationTrigger
-            id="dialpad"
-            title="Dialpad"
-            iconName="phone"
-            hint="Dialpad"
-            counter={2}
-            icon={SvgPhone}
-            iconActive={undefined}
-        />
-
-        <HelpCenterButton />
-    </Fragment>
-);
-
-const HelpCenterButton = () => {
-    const [open, setOpen] = useState(false);
-
-    return (
-        <Popover
-            onClickOutside={() => setOpen(false)}
-            open={open}
-            direction="bl"
-            width="xs"
-            trigger={
-                <Button
-                    className="c-inherit"
-                    iconName="help_outline"
-                    fill="subtle"
-                    onClick={() => setOpen(true)}
-                />
-            }
-            portal
-        >
-            help center
-        </Popover>
-    );
-};
-
-const HelpTrigger = () => {
-    const [active, setActive] = useState(true);
-
-    return (
-        <HeaderNavigationTrigger
-            id="help"
-            title="Help"
-            iconName="help_outline"
-            hint="Help"
-            icon={SvgHelp}
-            iconActive={undefined}
-            label="Live Chat"
-            onClick={() => setActive(!active)}
-            isActive={active}
-        />
-    );
-};
-export const ExtraWithLabel = () => (
-    <Fragment>
-        <HeaderNavigationLink
-            id="search"
-            title="Search"
-            to="https://google.com"
-            target="_blank"
-            iconName="search"
-            icon={SvgSearch}
-            iconActive={undefined}
-            tooltip="Search: for all the questions"
-            hint="Google"
-        />
-
-        <HelpTrigger />
-        <HeaderNavigationTrigger
-            id="dialpad"
-            title="Dialpad"
-            iconName="phone"
-            hint="Dialpad"
-            tag={{ value: 2 }}
-            icon={SvgPhone}
-            iconActive={undefined}
-        />
-    </Fragment>
-);

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

@@ -1,141 +0,0 @@
-import classNames from 'classnames';
-import { FC, ReactNode, useContext } from 'react';
-import { NavigationComponentContext } from '../../utils/navigation-context';
-import {
-    HeaderNavigationLinkProps,
-    HeaderNavigationTriggerProps,
-} from '../../utils/navigation-legacy';
-import { getCounterTag } from '../../utils/side-nav';
-import { HeaderNavigationItemContent } from './header-navigation-content';
-import * as Styles from './header-navigation.module.less';
-import { withTooltip } from './with-tooltip';
-
-/** Navigation extra item with link */
-export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
-    id,
-    to,
-    counter,
-    hint,
-    tooltip,
-    className,
-    icon,
-    iconActive,
-    iconClassName,
-    iconComponent,
-    iconName,
-    isActive,
-    label,
-    labelClassName,
-    tag,
-    target,
-    title,
-    ...rest
-}) => {
-    const NavigationComponent = useContext(NavigationComponentContext);
-
-    return withTooltip(
-        <NavigationComponent
-            data-cy={`navigation-link-${id}`}
-            data-pendo={`navigation-link-${id}`}
-            {...rest}
-            key={id}
-            to={to}
-            title={hint}
-            className={classNames(Styles.navigationLink, Styles.navigationItem, className, {
-                [Styles.navigationItemActive]: isActive === true,
-            })}
-            isActive={typeof isActive === 'function' ? isActive : undefined}
-            activeClassName={Styles.navigationItemActive}
-            target={target}
-        >
-            <HeaderNavigationItemContent
-                tag={getCounterTag(counter, tag)}
-                iconComponent={iconComponent}
-                iconClassName={iconClassName}
-                iconName={iconName}
-                title={label}
-                titleClassName={labelClassName}
-            />
-        </NavigationComponent>,
-        tooltip
-    );
-};
-
-/** Navigation extra item with icon button */
-export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
-    id,
-    className,
-    counter,
-    icon,
-    iconActive,
-    iconClassName,
-    iconComponent,
-    iconName,
-    isActive,
-    label,
-    labelClassName,
-    hint,
-    tag,
-    tooltip,
-    title,
-    ...rest
-}) => {
-    return withTooltip(
-        <div
-            data-cy={`navigation-trigger-${id}`}
-            data-pendo={`navigation-trigger-${id}`}
-            {...rest}
-            title={hint}
-            className={classNames(
-                Styles.navigationItem,
-                Styles.navigationLink,
-                {
-                    [Styles.navigationItemActive]: isActive === true,
-                },
-                'cursor-pointer',
-                className
-            )}
-        >
-            <HeaderNavigationItemContent
-                tag={getCounterTag(counter, tag)}
-                iconComponent={iconComponent}
-                iconClassName={iconClassName}
-                iconName={iconName}
-                title={label}
-                titleClassName={labelClassName}
-            />
-        </div>,
-        tooltip
-    );
-};
-
-/** Navigation extra item with custom content */
-export const HeaderNavigationTriggerCustom: FC<
-    Omit<
-        HeaderNavigationTriggerProps,
-        | 'counter'
-        | 'iconSize'
-        | 'iconName'
-        | 'iconComponent'
-        | 'iconClassName'
-        | 'icon'
-        | 'iconActive'
-    > & { children: ReactNode }
-> = ({ children, id, className, tooltip, title, ...rest }) =>
-    withTooltip(
-        <div
-            data-cy={`navigation-custom-${id}`}
-            data-pendo={`navigation-custom-${id}`}
-            {...rest}
-            title={title}
-            className={classNames(
-                Styles.navigationItem,
-                Styles.navigationLink,
-                'cursor-pointer',
-                className
-            )}
-        >
-            {children}
-        </div>,
-        tooltip
-    );

package/src/components/header-navigation/header-navigation-stacked.stories.tsx

@@ -1,146 +0,0 @@
-import { Input, Stack } from '@servicetitan/design-system';
-import { FC, Fragment } from 'react';
-import { SearchIcon, items, withMemoryRouter } from '../../test/data';
-import { LogoCompanyTitle } from '../logo/logo-company-title';
-import { LogoTitan, LogoTitanTitle } from '../logo/logo-titan-text';
-import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
-import { HeaderNavigationLink, HeaderNavigationTrigger } from './header-navigation-links';
-import * as Styles from './header-navigation-stories.module.less';
-import { HeaderNavigationStacked } from './';
-
-export default {
-    title: 'Navigation/HeaderNavigationStacked',
-    component: HeaderNavigationStacked,
-    parameters: {},
-    decorators: [withMemoryRouter],
-};
-
-const SvgIcon = undefined as any;
-
-export const DefaultNavigation = () => (
-    <HeaderNavigationStacked
-        left={<LogoCompanyTitle className="m-l-1" fill="#fff" size="150" />}
-        leftClassName="d-f align-items-center"
-        items={[
-            items.dashboard,
-            items.calendar,
-            items.calls,
-            items.accounting,
-            items.dispatch,
-            items.fleet,
-        ]}
-    />
-);
-
-export const WithLogoTextAndOverflow = () => (
-    <HeaderNavigationStacked
-        left={
-            <Stack alignItems="center">
-                <LogoTitan mantleFill="#2270EE" size={44} />
-                <LogoTitanTitle className="c-white m-l-1">Commercial</LogoTitanTitle>
-            </Stack>
-        }
-        items={[
-            items.dashboard,
-            items.calendar,
-            items.calls,
-            items.accounting,
-            items.dispatch,
-            items.purchasing,
-            items.fleet,
-        ]}
-        itemsOverflow={[items.calls, items.accounting, items.purchasing, items.dispatch]}
-    />
-);
-
-const TimeZoneOffset: FC = () => (
-    <div className="fs-2 ff-default p-r-2">
-        <span>EST (-9 hrs)</span>
-    </div>
-);
-
-export const WithAllMonolithData = () => (
-    <HeaderNavigationStacked
-        left={<LogoCompanyTitle className="m-l-1" fill="#fff" size="150" />}
-        leftClassName="d-f align-items-center"
-        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,
-        ]}
-        right={
-            <Fragment>
-                <TimeZoneOffset />
-
-                <HeaderNavigationLink
-                    id="search"
-                    title="Search"
-                    to="https://google.com"
-                    target="_blank"
-                    iconComponent={SearchIcon}
-                    hint="Search: for all the questions"
-                    icon={SvgIcon}
-                    iconActive={SvgIcon}
-                />
-
-                <HeaderNavigationTrigger
-                    id="dialpad"
-                    title="Dialpad"
-                    iconName="phone"
-                    tag={{ value: 2 }}
-                    icon={SvgIcon}
-                    iconActive={SvgIcon}
-                />
-
-                <HeaderNavigationTrigger
-                    id="titanAdvisor"
-                    title="Titan Advisor"
-                    iconName="rocket"
-                    iconClassName={Styles.rocketIcon}
-                    icon={SvgIcon}
-                    iconActive={SvgIcon}
-                />
-
-                <HeaderNavigationLink
-                    id="settings"
-                    title="Settings"
-                    to="https://google.com"
-                    target="_blank"
-                    iconName="settings"
-                    aria-label="search"
-                    hint="Settings"
-                    isActive
-                    icon={SvgIcon}
-                    iconActive={SvgIcon}
-                />
-
-                <ProfileDropdown>
-                    <ProfileDropdown.Link id="tasks" to="https://googgle.com" counter={10}>
-                        Task Management
-                    </ProfileDropdown.Link>
-                    <ProfileDropdown.Divider />
-                    <ProfileDropdown.Link id="sign-out" to="https://googgle.com" text="Sign Out">
-                        Sign Out{' '}
-                        <span className="c-neutral-100 m-l-half t-truncate">James Bond</span>
-                    </ProfileDropdown.Link>
-                    <ProfileDropdown.Section id="userid" className="c-neutral-100 fs-1">
-                        User ID: 007
-                    </ProfileDropdown.Section>
-                </ProfileDropdown>
-            </Fragment>
-        }
-        center={<Input placeholder="Search smth" size="xsmall" className="w-100" />}
-        centerClassName="d-f align-items-center"
-    />
-);

package/src/components/header-navigation/header-navigation-stories.module.less

@@ -1,6 +0,0 @@
-/* stylelint-disable no-descending-specificity */
-@import (reference) '@servicetitan/tokens/core/tokens.less';
-
-.rocket-icon {
-    transform: scale(0.9) translate(2px, -2px) rotate(45deg);
-}

package/src/components/header-navigation/header-navigation-stories.module.less.d.ts

@@ -1,3 +0,0 @@
-export const __esModule: true;
-export const rocketIcon: string;
-