@servicetitan/navigation 10.7.0 → 11.0.0-canary.237.0a4df1d.0

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

@@ -0,0 +1,346 @@
+import { Announcement, Page as Anvil2Page, Button, Popover, TextField } 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 './';
+
+interface LayoutContentArgs {
+    header: boolean;
+    sideTop: boolean;
+    extraText: boolean;
+    search: boolean;
+    longContent: boolean;
+    wideContent: boolean;
+    minWidth: boolean;
+    emptyNav: boolean;
+}
+
+export default {
+    title: 'Navigation/TitanLayout',
+    decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
+    parameters: {},
+    argTypes: {},
+    args: {
+        header: true,
+        sideTop: true,
+        extraText: true,
+        search: true,
+        longContent: true,
+        wideContent: false,
+        minWidth: false,
+        emptyNav: false,
+    } as LayoutContentArgs,
+};
+
+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"
+            tag={{ value: true }}
+        >
+            first link
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Section
+            id="second"
+            onClick={() => alert('second click')}
+            tooltip="Second hint"
+            counter
+        >
+            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.Link key="tasks" {...items.tasks} />,
+    <TitanLayout.Link key="calls" {...items.calls} />,
+    <TitanLayout.Trigger
+        key="marketing"
+        {...items.marketing}
+        isActive={false}
+        wrapper={SideLinkPopoverWrapper}
+        onMobileClick={() => alert('clicked')}
+        counter={50}
+    />,
+];
+const ContentHeader = () => {
+    const [longInfo, setLongInfo] = useState(false);
+
+    return (
+        <Fragment>
+            <Announcement title="Some info" status="info" />
+            <Announcement title="Some warning" status="warning" />
+            <div
+                className="d-f justify-content-center align-items-center bg-purple-100-i"
+                style={{ height: longInfo ? '120px' : '48px' }}
+            >
+                <div className="d-f align-items-center gap-1">
+                    custom content{' '}
+                    <Button onClick={() => setLongInfo(!longInfo)} size="small" aria-label="test">
+                        {longInfo ? '↑' : '↓'}
+                    </Button>
+                </div>
+            </div>
+        </Fragment>
+    );
+};
+const SearchBar = () => (
+    <TextField size="small" placeholder="Search" className="w-100-i m-x-half-i" />
+);
+
+const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
+    const [state, setState] = useState<TitanLayoutState | undefined>(undefined);
+
+    return {
+        state,
+        onStateChange: setState,
+
+        navigationComponent: NavLinkMock,
+        navigationMainItems: args.emptyNav ? [] : mainNavItems,
+
+        profile,
+        top: args.search ? <SearchBar /> : undefined,
+        header: args.header ? <ContentHeader /> : undefined,
+
+        extraLinks,
+        extraLinksTop,
+        extraText: args.extraText ? 'EST (-8 hrs)' : undefined,
+
+        sideTop: args.sideTop && !args.emptyNav ? sidebarTop() : undefined,
+
+        minContentWidth: args.minWidth ? 900 : undefined,
+    };
+};
+
+const Content = (args: LayoutContentArgs) => {
+    return (
+        <Fragment>
+            <LocationInfo className="m-b-3" />
+            <div className="m-b-3">rendered - {new Date().toLocaleTimeString()}</div>
+            {args.wideContent && (
+                <div style={{ width: '1200px' }}>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+                    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+                    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                    culpa qui officia deserunt mollit anim id est laborum.
+                </div>
+            )}
+
+            {args.longContent && (
+                <div>
+                    <p>Lorem</p>
+                    <p>ipsum</p>
+                    <p>dolor</p>
+                    <p>sit</p>
+                    <p>amet,</p>
+                    <p>consectetur</p>
+                    <p>adipiscing</p>
+                    <p>elit,</p>
+                    <p>sed</p>
+                    <p>do</p>
+                    <p>eiusmod</p>
+                    <p>tempor</p>
+                    <p>incididunt</p>
+                    <p>ut</p>
+                    <p>labore</p>
+                    <p>et</p>
+                    <p>dolore</p>
+                    <p>magna</p>
+                    <p>aliqua.</p>
+                    <p>Ut</p>
+                    <p>enim</p>
+                    <p>ad</p>
+                    <p>minim</p>
+                    <p>veniam,</p>
+                    <p>quis</p>
+                    <p>nostrud</p>
+                    <p>exercitation</p>
+                    <p>ullamco</p>
+                    <p>laboris</p>
+                    <p>nisi</p>
+                    <p>ut</p>
+                    <p>aliquip</p>
+                    <p>ex</p>
+                    <p>ea</p>
+                    <p>commodo</p>
+                    <p>consequat.</p>
+                    <p>Duis</p>
+                    <p>aute</p>
+                    <p>irure</p>
+                    <p>dolor</p>
+                    <p>in</p>
+                    <p>reprehenderit</p>
+                    <p>in</p>
+                    <p>voluptate</p>
+                    <p>velit</p>
+                    <p>esse</p>
+                    <p>cillum</p>
+                    <p>dolore</p>
+                    <p>eu</p>
+                    <p>fugiat</p>
+                    <p>nulla</p>
+                    <p>pariatur.</p>
+                    <p>Excepteur</p>
+                    <p>sint</p>
+                    <p>occaecat</p>
+                    <p>cupidatat</p>
+                    <p>non</p>
+                    <p>proident,</p>
+                    <p>sunt</p>
+                    <p>in</p>
+                    <p>culpa</p>
+                    <p>qui</p>
+                    <p>officia</p>
+                    <p>deserunt</p>
+                    <p>mollit</p>
+                    <p>anim</p>
+                    <p>id</p>
+                    <p>est</p>
+                    <p>laborum.</p>
+                </div>
+            )}
+        </Fragment>
+    );
+};
+
+export const TitanLayoutLegacy = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="legacy">
+        <TitanLayout.Logo title />
+        <TitanLayout.Content>
+            <div
+                className="p-3"
+                style={{ position: 'absolute', width: 'calc(100% - var(--nav-offset-left));' }}
+            >
+                <Content {...args} />
+            </div>
+        </TitanLayout.Content>
+    </TitanLayout>
+);
+
+export const TitanLayoutAnvil1 = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="anvil1">
+        <TitanLayout.Logo title />
+        <TitanLayout.Content>
+            <Anvil1Page>
+                <Content {...args} />
+            </Anvil1Page>
+        </TitanLayout.Content>
+    </TitanLayout>
+);
+
+export const TitanLayoutAnvil2 = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="anvil2">
+        <TitanLayout.Logo title />
+        <TitanLayout.Content>
+            <Anvil2Page>
+                <Anvil2Page.Content>
+                    <Content {...args} />
+                </Anvil2Page.Content>
+            </Anvil2Page>
+        </TitanLayout.Content>
+    </TitanLayout>
+);