@servicetitan/navigation 12.0.3 → 13.0.0-canary.256.44cf055.0

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;
-

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

@@ -1,260 +0,0 @@
-/* stylelint-disable no-descending-specificity */
-@import (reference) '@servicetitan/tokens/core/tokens.less';
-
-.header {
-    height: 56px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    background-color: @color-neutral-300;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
-
-    .right > * {
-        color: @color-white;
-    }
-
-    .right {
-        .navigation-icon {
-            height: 24px;
-            width: 24px;
-            font-size: 24px;
-        }
-    }
-
-    .center {
-        min-width: 0;
-        overflow-x: hidden;
-        overflow-y: hidden;
-
-        .navigation-icon {
-            height: 20px;
-            width: 20px;
-            font-size: @typescale-4;
-        }
-    }
-
-    &.calculating {
-        .center {
-            opacity: 0;
-        }
-    }
-
-    :global(.profile-dropdown-image) {
-        height: 32px;
-        width: 32px;
-    }
-
-    :global(.profile-dropdown-trigger) {
-        height: 40px;
-        font-size: 24px;
-    }
-
-    .navigation-item-counter {
-        font-size: @typescale-0 !important;
-    }
-
-    .navigation-item-main .navigation-item-counter {
-        top: 8px;
-        right: -4px;
-
-        &.navigation-item-counter-long {
-            right: -8px;
-        }
-    }
-
-    .navigation-link {
-        padding: @spacing-2 @spacing-1;
-        font-size: 24px;
-
-        .navigation-item-counter {
-            top: 8px;
-            right: -4px;
-        }
-    }
-
-    .navigation-item-main {
-        // styles specific to main nav links
-        padding: 18px 10px;
-    }
-
-    .navigation-item {
-        &.navigation-item-active:not(.navigation-item-overflow) {
-            color: @color-blue-200 !important;
-        }
-        &:hover:not(.navigation-item-active):not(.navigation-item-overflow) {
-            opacity: 0.7;
-        }
-    }
-}
-
-.overflow-popover {
-    padding: @spacing-1 @spacing-0 !important;
-
-    .navigation-overflow {
-        display: flex;
-        flex-direction: column;
-    }
-}
-
-.header-stacked {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: 44px 36px;
-
-    background-color: @color-neutral-500;
-
-    & > * {
-        overflow-y: hidden;
-    }
-
-    .he-top-left {
-        grid-column: span 1;
-    }
-
-    .he-top-center {
-        grid-column: span 1;
-    }
-
-    .he-top-right {
-        grid-column: span 1;
-
-        .navigation-icon {
-            height: 20px;
-            width: 20px;
-            font-size: @typescale-4;
-        }
-
-        & > * {
-            color: @color-white;
-        }
-    }
-
-    .he-bottom {
-        grid-column: span 3;
-        border-top: 1px solid @color-neutral-200;
-
-        .navigation-icon {
-            height: 20px;
-            width: 20px;
-            font-size: @typescale-4;
-        }
-    }
-
-    &.calculating {
-        .he-bottom {
-            opacity: 0;
-        }
-    }
-
-    :global(.profile-dropdown-image) {
-        height: 24px;
-        width: 24px;
-    }
-
-    :global(.profile-dropdown-trigger) {
-        height: 30px;
-        font-size: @typescale-4;
-    }
-
-    .navigation-item-counter {
-        font-size: 8px !important;
-    }
-
-    .navigation-item-main .navigation-item-counter {
-        top: 4px;
-        right: -4px;
-
-        &.navigation-item-counter-long {
-            right: -8px;
-        }
-    }
-
-    .navigation-link {
-        padding: 12px @spacing-1;
-        font-size: @typescale-4;
-
-        .navigation-item-counter {
-            top: 8px;
-            right: 0;
-        }
-    }
-
-    .navigation-item-main {
-        // styles specific to main nav links
-        padding: 7px 10px;
-    }
-
-    .navigation-item {
-        &.navigation-item-active:not(.navigation-item-overflow) {
-            color: @color-blue-200 !important;
-        }
-        &:hover:not(.navigation-item-active):not(.navigation-item-overflow) {
-            opacity: 0.7;
-        }
-    }
-}
-
-.navigation-icon {
-    display: inline-block;
-    color: inherit;
-
-    & > svg {
-        height: 1em;
-        width: 1em;
-        font-size: 1em;
-    }
-}
-
-.navigation-item {
-    // styles specific to main nav links and extra nav links
-    font-family: @base-font-family;
-    color: @color-white;
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    text-wrap: nowrap;
-
-    .navigation-item-counter {
-        color: @color-white;
-        font-weight: @font-weight-semibold;
-        min-width: 12px !important;
-        min-height: 12px !important;
-    }
-
-    &:not(.navigation-item-overflow) .navigation-item-counter {
-        position: absolute;
-    }
-
-    .navigation-item-title {
-        font-family: @base-font-family;
-        font-size: @typescale-2;
-        margin-left: @spacing-half;
-    }
-}
-
-.navigation-item-overflow {
-    // styles specific to overflow links
-    display: inline-flex;
-    color: @color-black;
-    padding: @spacing-1 12px;
-
-    &.navigation-item-active:not(:hover) {
-        color: @color-blue-500;
-    }
-
-    &:hover {
-        background-color: @color-blue-500;
-        color: @color-white;
-    }
-
-    .navigation-item-counter {
-        margin-left: @spacing-half;
-        margin-top: -@spacing-1;
-    }
-}
-
-.navigation-link {
-    color: inherit;
-}

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

@@ -1,22 +0,0 @@
-export const __esModule: true;
-export const calculating: string;
-export const center: string;
-export const heBottom: string;
-export const heTopCenter: string;
-export const heTopLeft: string;
-export const heTopRight: string;
-export const header: string;
-export const headerStacked: string;
-export const navigationIcon: string;
-export const navigationItem: string;
-export const navigationItemActive: string;
-export const navigationItemCounter: string;
-export const navigationItemCounterLong: string;
-export const navigationItemMain: string;
-export const navigationItemOverflow: string;
-export const navigationItemTitle: string;
-export const navigationLink: string;
-export const navigationOverflow: string;
-export const overflowPopover: string;
-export const right: string;
-

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

@@ -1,165 +0,0 @@
-import { Popover } from '@servicetitan/design-system';
-import { FC, useState } from 'react';
-import { SearchIcon, items, withMemoryRouter } from '../../test/data';
-import { LogoCompanyTitle } from '../logo/logo-company-title';
-import { LogoTitanText } 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 { HeaderNavigation } from './';
-
-export default {
-    title: 'Navigation/HeaderNavigation',
-    component: HeaderNavigation,
-    parameters: {},
-    decorators: [withMemoryRouter],
-};
-const SvgIcon = undefined as any;
-
-export const DefaultNavigation = () => (
-    <HeaderNavigation
-        left={<LogoCompanyTitle className="m-l-1" fill="#fff" />}
-        items={[
-            items.dashboard,
-            items.calendar,
-            items.calls,
-            items.accounting,
-            items.dispatch,
-            items.fleet,
-        ]}
-    />
-);
-
-export const WithLogoTextAndOverflow = () => (
-    <HeaderNavigation
-        left={
-            <LogoTitanText
-                mantleFill="#2270EE"
-                title="Commercial"
-                description="tenant tenant tenant tenant tenant"
-            />
-        }
-        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 HelpCenterButton = () => {
-    const [open, setOpen] = useState(false);
-
-    return (
-        <Popover
-            onClickOutside={() => setOpen(false)}
-            open={open}
-            direction="bl"
-            width="xs"
-            trigger={
-                <HeaderNavigationTrigger
-                    id="help"
-                    title="Help"
-                    iconName="help_outline"
-                    onClick={() => setOpen(true)}
-                    icon={SvgIcon}
-                    iconActive={SvgIcon}
-                />
-            }
-            portal
-        >
-            help center
-        </Popover>
-    );
-};
-
-const TimeZoneOffset: FC = () => (
-    <div className="fs-2 ff-default p-r-2">
-        <span>EST (-9 hrs)</span>
-    </div>
-);
-
-export const WithAllMonolithData = () => (
-    <HeaderNavigation
-        left={<LogoCompanyTitle className="m-l-1" fill="#fff" />}
-        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,
-        ]}
-    >
-        <TimeZoneOffset />
-
-        <HeaderNavigationTrigger
-            id="dialpad"
-            title="Dialpad"
-            iconName="phone"
-            counter={2}
-            icon={SvgIcon}
-            iconActive={SvgIcon}
-        />
-
-        <HeaderNavigationLink
-            id="search"
-            title="Search"
-            to="https://google.com"
-            target="_blank"
-            iconComponent={SearchIcon}
-            hint="Search: for all the questions"
-            icon={SvgIcon}
-            iconActive={SvgIcon}
-        />
-
-        <HelpCenterButton />
-        <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>
-    </HeaderNavigation>
-);