@servicetitan/navigation 10.6.1 → 11.0.0-canary.237.0505ce7.0

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

@@ -0,0 +1,193 @@
+/* stylelint-disable no-descending-specificity */
+@import (reference) '@servicetitan/tokens/core/tokens.less';
+
+@size-links-tiny: 24px;
+
+.header {
+    --nav-top-content-height: 32px;
+    display: flex;
+    justify-content: space-between;
+
+    background-color: @color-white;
+    color: @color-black;
+    box-sizing: border-box;
+    outline: 1px solid @color-neutral-60;
+
+    & > * {
+        overflow-y: hidden;
+    }
+
+    .he-top-left {
+        display: flex;
+        align-items: center;
+    }
+
+    .he-top-center {
+        overflow: hidden;
+    }
+
+    .he-top-right {
+        & > * {
+            color: @color-black;
+        }
+
+        .he-top-right-text {
+            font-size: @typescale-2;
+            font-weight: @font-weight-bold;
+            font-family: @base-font-family;
+            margin-right: @spacing-1;
+        }
+    }
+
+    :global(.profile-dropdown-image) {
+        height: 24px;
+        width: 24px;
+    }
+
+    :global(.profile-dropdown-trigger) {
+        height: 32px;
+        font-size: @size-links-tiny;
+    }
+
+    .navigation-link {
+        border-radius: 12px;
+        font-size: @size-links-tiny;
+        color: inherit;
+
+        &.navigation-item-active:not(.navigation-item-overflow) {
+            background-color: @color-blue-100 !important;
+            color: @color-blue-500 !important;
+        }
+        &:hover:not(.navigation-item-active):not(.navigation-item-overflow) {
+            background-color: rgba(0, 0, 0, 0.12) !important;
+        }
+
+        &.navigation-item-icon-state.navigation-item-active {
+            .navigation-icon:not(.navigation-icon-active) {
+                display: none;
+            }
+
+            .navigation-icon.navigation-icon-active[data-anv][data-anv] {
+                display: block;
+            }
+        }
+    }
+
+    .navigation-icon[data-anv][data-anv] {
+        display: inline-block;
+        color: inherit;
+        height: 24px;
+        width: 24px;
+
+        > svg {
+            height: @size-links-tiny;
+            width: @size-links-tiny;
+        }
+
+        &.navigation-icon-active {
+            display: none;
+        }
+    }
+}
+
+.header-mobile {
+    padding: @spacing-2 @spacing-0;
+    height: var(--nav-offset-top);
+
+    --nav-top-content-height: 40px;
+
+    .navigation-link {
+        padding: 10px;
+    }
+
+    .he-top-center {
+        max-width: unset;
+        flex: 1;
+        margin-left: @spacing-3;
+        margin-right: @spacing-3;
+    }
+
+    .he-top-left {
+        margin-left: @spacing-half;
+    }
+
+    .he-top-right {
+        margin-right: @spacing-half;
+    }
+}
+
+// desktop
+.header-desktop {
+    height: var(--nav-offset-top);
+    .navigation-link {
+        margin: 6px 2px;
+        padding: 6px 6px;
+
+        .navigation-item-counter {
+            min-width: 12px !important;
+            height: 12px !important;
+        }
+    }
+
+    .he-top-left {
+        padding-left: @spacing-1;
+    }
+    .he-top-center {
+        flex: 1;
+        margin-left: @spacing-2;
+        margin-right: @spacing-2;
+        max-width: 400px;
+    }
+}
+
+// desktop wide
+@media only screen and (min-width: 1200px) {
+    .header-desktop {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-template-rows: 48px;
+
+        .he-top-left,
+        .he-top-center,
+        .he-top-right {
+            grid-column: span 1;
+        }
+
+        .he-top-center {
+            max-width: unset;
+        }
+    }
+}
+
+.navigation-link {
+    // styles specific to extra nav links
+    color: @color-black;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    text-wrap: nowrap;
+
+    .navigation-item-counter {
+        color: @color-white;
+        font-weight: @font-weight-semibold;
+        font-size: 8px !important;
+        min-width: 16px !important;
+        height: 16px !important;
+        position: absolute;
+        top: 4px;
+        right: -2px;
+    }
+
+    .navigation-item-label {
+        color: inherit;
+        font-size: @typescale-1;
+        font-family: @base-font-family;
+        font-weight: @font-weight-semibold;
+        margin-left: @spacing-half;
+    }
+
+    &.navigation-item-counter-long {
+        right: -8px;
+    }
+}

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

@@ -0,0 +1,18 @@
+export const __esModule: true;
+export const heTopCenter: string;
+export const heTopLeft: string;
+export const heTopRight: string;
+export const heTopRightText: string;
+export const header: string;
+export const headerDesktop: string;
+export const headerMobile: string;
+export const navigationIcon: string;
+export const navigationIconActive: string;
+export const navigationItemActive: string;
+export const navigationItemCounter: string;
+export const navigationItemCounterLong: string;
+export const navigationItemIconState: string;
+export const navigationItemLabel: string;
+export const navigationItemOverflow: string;
+export const navigationLink: string;
+

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

@@ -0,0 +1,97 @@
+import SvgBurgerMenu from '@servicetitan/anvil2/assets/icons/material/round/menu.svg';
+import classNames from 'classnames';
+import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
+import { LayoutPlacementContext } from './layout-context';
+import { LayoutHeaderNavigationTrigger } from './layout-header-links';
+import * as Styles from './layout-header.module.less';
+import { TitanLayoutLogoProps } from './layout-logo';
+
+export interface TitanLayoutHeaderLogoProps {
+    title?: true | string;
+    mantleFill?: string;
+    to?: string;
+}
+
+export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
+    right?: ReactNode;
+    rightText?: string;
+    rightClassName?: string;
+
+    id?: string;
+
+    center?: ReactElement;
+    centerClassName?: string;
+
+    logo: ReactElement<TitanLayoutLogoProps>;
+    profile?: ReactElement;
+
+    isMobile: boolean;
+    hasNotifications: boolean;
+    onBurgerClick?: (e: MouseEvent) => void;
+};
+
+export const LayoutHeader: FC<LayoutHeaderProps> = ({
+    className,
+    right,
+    rightText,
+    rightClassName,
+    center,
+    centerClassName,
+    isMobile,
+    hasNotifications,
+    logo,
+    profile,
+    onBurgerClick,
+    ...rest
+}) => {
+    return (
+        <LayoutPlacementContext.Provider value="top">
+            <div
+                className={classNames(
+                    Styles.header,
+                    isMobile ? Styles.headerMobile : Styles.headerDesktop,
+                    className
+                )}
+                {...rest}
+                data-cy="header-navigation"
+            >
+                <div className={classNames(Styles.heTopLeft)} data-cy="navigation-left">
+                    {isMobile && (
+                        <LayoutHeaderNavigationTrigger
+                            id="burger"
+                            title=""
+                            icon={SvgBurgerMenu}
+                            iconActive={SvgBurgerMenu}
+                            className="m-r-1"
+                            onClick={onBurgerClick}
+                            tag={{ value: hasNotifications }}
+                        />
+                    )}
+                    {logo}
+                </div>
+                <div
+                    className={classNames(
+                        Styles.heTopCenter,
+                        'd-f align-items-center justify-content-center',
+                        centerClassName
+                    )}
+                    data-cy="navigation-center"
+                >
+                    {center}
+                </div>
+                <div
+                    className={classNames(
+                        'd-f flex-row justify-content-end align-items-center',
+                        Styles.heTopRight,
+                        rightClassName
+                    )}
+                    data-cy="navigation-right"
+                >
+                    {!!rightText && <div className={Styles.heTopRightText}>{rightText}</div>}
+                    {right}
+                    {profile}
+                </div>
+            </div>
+        </LayoutPlacementContext.Provider>
+    );
+};

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

@@ -0,0 +1,31 @@
+import { Chip } from '@servicetitan/anvil2';
+import { ReactElement } from 'react';
+import { withAnvil, withDefaultRedirects, withMemoryRouter } from '../../test/data';
+import { TitanLayoutLogo, TitanLayoutLogoProps } from './layout-logo';
+import { TitanLayout } from './titan-layout';
+
+const withTitanLayout = (element: ReactElement<TitanLayoutLogoProps>) => () => (
+    <TitanLayout navigationMainItems={[]}>
+        {element}
+        <TitanLayout.Content>logo</TitanLayout.Content>
+    </TitanLayout>
+);
+
+export default {
+    title: 'Navigation/TitanLayoutLogo',
+    component: TitanLayoutLogo,
+    decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
+    parameters: {},
+};
+
+export const LogoDefault = withTitanLayout(<TitanLayoutLogo />);
+
+export const LogoCompanyTitle = withTitanLayout(<TitanLayoutLogo title />);
+
+export const LogoCommercial = withTitanLayout(
+    <TitanLayoutLogo title="Commercial" mantleFill="#2270EE" />
+);
+
+export const LogoWithPostfix = withTitanLayout(
+    <TitanLayoutLogo title postfix={<Chip className="m-l-2-i" label="demo" />} />
+);

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

@@ -0,0 +1,64 @@
+import classNames from 'classnames';
+import { FC, Fragment, ReactNode } from 'react';
+import { LogoCompanyTitle } from '../logo/logo-company-title';
+import { LogoTitan, LogoTitanTitle, WrapperProps } from '../logo/logo-titan-text';
+import { useTitanLayoutContext } from './layout-context';
+
+export interface TitanLayoutLogoProps {
+    /** container class name */
+    className?: string;
+
+    title?: string | boolean;
+
+    postfix?: ReactNode;
+
+    logoWrapper?: WrapperProps;
+
+    mantleFill?: string;
+}
+
+const EmptyWrapper: FC<any> = ({ children }) => children;
+
+export const TitanLayoutLogo: FC<TitanLayoutLogoProps> = ({
+    className,
+    mantleFill,
+    postfix,
+    title,
+    logoWrapper = EmptyWrapper,
+}) => {
+    const {
+        breakpoint: { isMobile },
+    } = useTitanLayoutContext();
+
+    const Wrapper = logoWrapper;
+    const logoSize = isMobile ? 44 : 56;
+    const logoCompanySize = 48;
+    const showCompanyTitle = title === true && !isMobile;
+
+    return (
+        <div
+            className={classNames(
+                'd-f align-items-center',
+                { 'p-t-half': showCompanyTitle },
+                className
+            )}
+        >
+            {showCompanyTitle ? (
+                <Wrapper>
+                    <LogoCompanyTitle height={logoCompanySize} />
+                </Wrapper>
+            ) : typeof title === 'string' ? (
+                <Fragment>
+                    <LogoTitan size={logoSize} mantleFill={mantleFill} logoWrapper={Wrapper} />
+                    {!isMobile && (
+                        <LogoTitanTitle className="c-inherit m-l-1">{title}</LogoTitanTitle>
+                    )}
+                </Fragment>
+            ) : (
+                <LogoTitan size={logoSize} mantleFill={mantleFill} logoWrapper={Wrapper} />
+            )}
+
+            {!isMobile && postfix}
+        </div>
+    );
+};

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

@@ -0,0 +1,46 @@
+import { ReactElement } from 'react';
+import { withAnvil, withDefaultRedirects, withMemoryRouter } from '../../test/data';
+import { ProfileDropdown } from './layout-profile';
+import { TitanLayout } from './titan-layout';
+
+const withTitanLayout = (element: ReactElement) => () => (
+    <TitanLayout navigationMainItems={[]} profile={element}>
+        <TitanLayout.Content>profile</TitanLayout.Content>
+    </TitanLayout>
+);
+
+export default {
+    title: 'Navigation/TitanLayoutProfile',
+    component: ProfileDropdown,
+    decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
+    parameters: {},
+};
+
+export const ProfileDefault = withTitanLayout(
+    <ProfileDropdown>
+        <ProfileDropdown.Link id="first" to="https://google.com" external>
+            first link
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Section id="second" onClick={() => alert('second click')}>
+            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.Section
+            id="forth"
+            onClick={() => alert('forth click')}
+            text="Sign Out user"
+        >
+            Sign Out
+            <span className="c-neutral-60 m-l-1">user</span>
+        </ProfileDropdown.Section>
+        <ProfileDropdown.Divider />
+    </ProfileDropdown>
+);

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

@@ -0,0 +1,178 @@
+import SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_active.svg';
+import SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';
+
+import { FC, MouseEvent, useEffect, useState } from 'react';
+import { NavLinkComponentProps, NavigationComponentContext } from '../../utils/navigation-context';
+import {
+    ProfileDropdown as DesktopProfileDropdown,
+    ProfileDropdownLinkProps,
+    ProfileDropdownProps,
+    ProfileDropdownSectionProps,
+} from '../profile-dropdown/profile-dropdown';
+import { NavigationComponentProps } from './interface-internal';
+import { useTitanLayoutContext } from './layout-context';
+import {
+    InternalSideNavigationGroup,
+    InternalSideNavigationGroupDivider,
+    InternalSideNavigationGroupLink,
+    InternalSideNavigationGroupTrigger,
+} from './layout-sidebar-links-internal';
+import { useNotificationsContext, useNotificationsState } from './notifications-context';
+
+export type {
+    ProfileDropdownProps,
+    ProfileDropdownSectionProps,
+    ProfileDropdownLinkProps,
+} from '../profile-dropdown/profile-dropdown';
+
+const ExternalNavComponent: FC<NavLinkComponentProps> = ({
+    children,
+    isActive,
+    to,
+    activeClassName,
+    ...props
+}) => (
+    <a {...props} href={to}>
+        {children}
+    </a>
+);
+
+const ProfileDropdownContent: FC<ProfileDropdownProps> = props => {
+    const { breakpoint, NavigationComponent } = useTitanLayoutContext();
+    return breakpoint.isMobile ? (
+        <MobileProfileDropdown {...props} navigationComponent={NavigationComponent} />
+    ) : (
+        <NavigationComponentContext.Provider value={NavigationComponent}>
+            <DesktopProfileDropdown {...props} />
+        </NavigationComponentContext.Provider>
+    );
+};
+ProfileDropdownContent.displayName = 'ProfileDropdown';
+
+const MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps> = ({
+    children,
+    ...props
+}) => {
+    const id = '__profile';
+    const [expanded, setExpanded] = useState(false);
+    const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const onExpandToggle = (e: MouseEvent<never>) => {
+        e.stopPropagation();
+        setExpanded(!expanded);
+    };
+
+    useEffect(() => {
+        onNotificationsUpdate(id, hasNotifications);
+    }, [hasNotifications, onNotificationsUpdate]);
+
+    return (
+        <NotificationsContextProvider>
+            <InternalSideNavigationGroup
+                id={id}
+                to={undefined}
+                title="Profile"
+                icon={SvgAccountInactive}
+                iconActive={SvgAccountActive}
+                isActive={expanded}
+                {...props}
+                submenuExpanded={expanded}
+                onExpandToggle={onExpandToggle}
+                onClick={onExpandToggle}
+                tag={{ value: hasNotifications }}
+            >
+                {children}
+            </InternalSideNavigationGroup>
+        </NotificationsContextProvider>
+    );
+};
+
+const ProfileDropdownDivider: FC = () => {
+    const { breakpoint } = useTitanLayoutContext();
+    return breakpoint.isMobile ? (
+        <InternalSideNavigationGroupDivider />
+    ) : (
+        <DesktopProfileDropdown.Divider />
+    );
+};
+
+const getText = (children: any, text: any): string | undefined => {
+    if (typeof children === 'string') {
+        return children;
+    }
+
+    if (typeof text === 'string') {
+        return text;
+    }
+
+    return undefined;
+};
+
+const getTag = (
+    tag: ProfileDropdownLinkProps['tag'],
+    counter: ProfileDropdownLinkProps['counter']
+): boolean => {
+    return !!tag?.value || !!counter;
+};
+
+const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = props => {
+    const { breakpoint } = useTitanLayoutContext();
+    return breakpoint.isMobile ? (
+        <MobileProfileDropdownSection {...props} />
+    ) : (
+        <DesktopProfileDropdown.Section {...props} />
+    );
+};
+const MobileProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
+    children,
+    text,
+    tooltip,
+    title,
+    ...props
+}) => {
+    const sectionText = getText(children, text);
+    const { onNotificationsUpdate } = useNotificationsContext();
+    onNotificationsUpdate(props.id, getTag(props.tag, props.counter));
+
+    return sectionText ? (
+        <InternalSideNavigationGroupTrigger {...props} title={sectionText} />
+    ) : null;
+};
+
+const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = props => {
+    const { breakpoint, NavigationComponent } = useTitanLayoutContext();
+    return breakpoint.isMobile ? (
+        <MobileProfileDropdownLink {...props} navigationComponent={NavigationComponent} />
+    ) : (
+        <DesktopProfileDropdown.Link {...props} />
+    );
+};
+const MobileProfileDropdownLink: FC<ProfileDropdownLinkProps & NavigationComponentProps> = ({
+    external,
+    to,
+    tooltip,
+    text,
+    children,
+    navigationComponent,
+    ...props
+}) => {
+    const { onNotificationsUpdate } = useNotificationsContext();
+    const linkText = getText(children, text);
+    const isExternalLink = external ?? to?.startsWith('http');
+    onNotificationsUpdate(props.id, getTag(props.tag, props.counter));
+
+    return linkText ? (
+        <InternalSideNavigationGroupLink
+            {...props}
+            to={to}
+            title={linkText}
+            navigationComponent={isExternalLink ? ExternalNavComponent : navigationComponent}
+        />
+    ) : null;
+};
+
+export const ProfileDropdown = Object.assign(ProfileDropdownContent, {
+    Divider: ProfileDropdownDivider,
+    Link: ProfileDropdownLink,
+    Section: ProfileDropdownSection,
+});