@servicetitan/navigation 12.0.3 → 13.0.0-canary.256.5761ed1.0

package/dist/utils/navigation-context.d.ts

@@ -1,27 +1,8 @@
-import { FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
-import { NavigationLinkData } from './navigation';
-export interface NavLinkComponentPropsStrict {
+import { ComponentPropsWithoutRef, FC } from 'react';
+export type NavLinkComponentProps = ComponentPropsWithoutRef<'a'> & {
     to: string;
-    title?: string;
-    className?: string;
     activeClassName?: string;
-    children: ReactNode;
     isActive?: (pathname: string) => boolean;
-    target?: HTMLAttributeAnchorTarget;
-}
-export interface NavLinkComponentProps extends NavLinkComponentPropsStrict {
-    [key: string]: any;
-}
+};
 export declare const DefaultNavLinkComponent: FC<NavLinkComponentProps>;
-export interface NavigationLocationInfo {
-    pathname: string;
-}
-export type NavigationActiveLinkMatcher = (location: NavigationLocationInfo, link: NavigationLinkData) => boolean;
-export interface NavigationLocationContextType {
-    location: NavigationLocationInfo;
-    isLinkActive: NavigationActiveLinkMatcher;
-}
-export declare const NavigationComponentContext: import("react").Context<FC<NavLinkComponentProps>>;
-export declare const NavigationLegacyContext: import("react").Context<boolean>;
-export declare const NavigationLocationContext: import("react").Context<NavigationLocationContextType>;
 //# sourceMappingURL=navigation-context.d.ts.map

package/dist/utils/navigation-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-context.d.ts","sourceRoot":"","sources":["../../src/utils/navigation-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,yBAAyB,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,MAAM,WAAW,2BAA2B;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IACzC,MAAM,CAAC,EAAE,yBAAyB,CAAC;CACtC;AAED,MAAM,WAAW,qBAAsB,SAAQ,2BAA2B;IACtE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,qBAAqB,CAK5B,CAAC;AAEnC,MAAM,WAAW,sBAAsB;IACnC,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,2BAA2B,GAAG,CACtC,QAAQ,EAAE,sBAAsB,EAChC,IAAI,EAAE,kBAAkB,KACvB,OAAO,CAAC;AAEb,MAAM,WAAW,6BAA6B;IAC1C,QAAQ,EAAE,sBAAsB,CAAC;IACjC,YAAY,EAAE,2BAA2B,CAAC;CAC7C;AAED,eAAO,MAAM,0BAA0B,oDAC8B,CAAC;AACtE,eAAO,MAAM,uBAAuB,kCAAuB,CAAC;AAC5D,eAAO,MAAM,yBAAyB,wDAGpC,CAAC"}
+{"version":3,"file":"navigation-context.d.ts","sourceRoot":"","sources":["../../src/utils/navigation-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAErD,MAAM,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,GAAG,CAAC,GAAG;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,qBAAqB,CAU7D,CAAC"}

package/dist/utils/navigation-context.js

@@ -1,16 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext } from 'react';
-export const DefaultNavLinkComponent = ({ children, activeClassName, isActive, ...props })=>/*#__PURE__*/ _jsx("a", {
+export const DefaultNavLinkComponent = ({ children, to, activeClassName, isActive, ...props })=>/*#__PURE__*/ _jsx("a", {
+        href: to,
         ...props,
         children: children
     });
-export const NavigationComponentContext = /*#__PURE__*/ createContext(DefaultNavLinkComponent);
-export const NavigationLegacyContext = /*#__PURE__*/ createContext(false);
-export const NavigationLocationContext = /*#__PURE__*/ createContext({
-    location: {
-        pathname: ''
-    },
-    isLinkActive: ()=>false
-});
 
 //# sourceMappingURL=navigation-context.js.map

package/dist/utils/navigation-context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/navigation-context.tsx"],"sourcesContent":["import { FC, HTMLAttributeAnchorTarget, ReactNode, createContext } from 'react';\nimport { NavigationLinkData } from './navigation';\n\nexport interface NavLinkComponentPropsStrict {\n    to: string;\n    title?: string;\n    className?: string;\n    activeClassName?: string;\n    children: ReactNode;\n    isActive?: (pathname: string) => boolean;\n    target?: HTMLAttributeAnchorTarget;\n}\n\nexport interface NavLinkComponentProps extends NavLinkComponentPropsStrict {\n    [key: string]: any;\n}\n\nexport const DefaultNavLinkComponent: FC<NavLinkComponentProps> = ({\n    children,\n    activeClassName,\n    isActive,\n    ...props\n}) => <a {...props}>{children}</a>;\n\nexport interface NavigationLocationInfo {\n    pathname: string;\n}\n\nexport type NavigationActiveLinkMatcher = (\n    location: NavigationLocationInfo,\n    link: NavigationLinkData\n) => boolean;\n\nexport interface NavigationLocationContextType {\n    location: NavigationLocationInfo;\n    isLinkActive: NavigationActiveLinkMatcher;\n}\n\nexport const NavigationComponentContext =\n    createContext<FC<NavLinkComponentProps>>(DefaultNavLinkComponent);\nexport const NavigationLegacyContext = createContext(false);\nexport const NavigationLocationContext = createContext<NavigationLocationContextType>({\n    location: { pathname: '' },\n    isLinkActive: () => false,\n});\n"],"names":["createContext","DefaultNavLinkComponent","children","activeClassName","isActive","props","a","NavigationComponentContext","NavigationLegacyContext","NavigationLocationContext","location","pathname","isLinkActive"],"mappings":";AAAA,SAAmDA,aAAa,QAAQ,QAAQ;AAiBhF,OAAO,MAAMC,0BAAqD,CAAC,EAC/DC,QAAQ,EACRC,eAAe,EACfC,QAAQ,EACR,GAAGC,OACN,iBAAK,KAACC;QAAG,GAAGD,KAAK;kBAAGH;OAAc;AAgBnC,OAAO,MAAMK,2CACTP,cAAyCC,yBAAyB;AACtE,OAAO,MAAMO,wCAA0BR,cAAc,OAAO;AAC5D,OAAO,MAAMS,0CAA4BT,cAA6C;IAClFU,UAAU;QAAEC,UAAU;IAAG;IACzBC,cAAc,IAAM;AACxB,GAAG"}
+{"version":3,"sources":["../../src/utils/navigation-context.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, FC } from 'react';\n\nexport type NavLinkComponentProps = ComponentPropsWithoutRef<'a'> & {\n    to: string;\n    activeClassName?: string;\n    isActive?: (pathname: string) => boolean;\n};\n\nexport const DefaultNavLinkComponent: FC<NavLinkComponentProps> = ({\n    children,\n    to,\n    activeClassName,\n    isActive,\n    ...props\n}) => (\n    <a href={to} {...props}>\n        {children}\n    </a>\n);\n"],"names":["DefaultNavLinkComponent","children","to","activeClassName","isActive","props","a","href"],"mappings":";AAQA,OAAO,MAAMA,0BAAqD,CAAC,EAC/DC,QAAQ,EACRC,EAAE,EACFC,eAAe,EACfC,QAAQ,EACR,GAAGC,OACN,iBACG,KAACC;QAAEC,MAAML;QAAK,GAAGG,KAAK;kBACjBJ;OAEP"}

package/dist/utils/navigation.d.ts

@@ -1,17 +1,10 @@
 import { IconProps } from '@servicetitan/anvil2';
-import { FC } from 'react';
 import { CounterTagData, CounterTagValue } from './counter-tag';
 export interface NavigationItemData extends NavigationLinkData {
-    /** flag if the link is not shown (based on FG and/or user permissions) */
-    isHidden?: boolean;
-    /** custom className (can be used for mdi icons) */
-    iconClassName?: string;
     /** svg icon (anvil2) of inactive item */
     icon: IconProps['svg'] | undefined;
     /** svg icon (anvil2) of active item */
     iconActive: IconProps['svg'] | undefined;
-    /** icon component of item (<svg />) */
-    iconComponent?: FC;
     /** item tag (optional). shown if it is set and true or greater than 0 */
     counter?: CounterTagValue;
     tag?: CounterTagData;
@@ -19,6 +12,8 @@ export interface NavigationItemData extends NavigationLinkData {
     className?: string;
     /** optional submenu of link item */
     submenu?: NavigationSubmenuData;
+    iconClassName?: never;
+    iconComponent?: never;
 }
 export interface NavigationLinkData {
     /** link id */

package/dist/utils/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhE,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC1D,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEnC,uCAAuC;IACvC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEzC,uCAAuC;IACvC,aAAa,CAAC,EAAE,EAAE,CAAC;IAEnB,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,cAAc,CAAC;IAErB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,qBAAqB,CAAC;CACnC;AAED,MAAM,WAAW,kBAAkB;IAC/B,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IAEX,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;CACxD;AAED,MAAM,WAAW,qBAAqB;IAClC,qBAAqB;IACrB,MAAM,EAAE,0BAA0B,EAAE,CAAC;CACxC;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACjE,+EAA+E;IAC/E,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,MAAM,WAAW,0BAA0B;IACvC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,KAAK,EAAE,yBAAyB,EAAE,CAAC;CACtC"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhE,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC1D,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEnC,uCAAuC;IACvC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEzC,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,cAAc,CAAC;IAErB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAEhC,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC;CACzB;AAED,MAAM,WAAW,kBAAkB;IAC/B,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IAEX,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;CACxD;AAED,MAAM,WAAW,qBAAqB;IAClC,qBAAqB;IACrB,MAAM,EAAE,0BAA0B,EAAE,CAAC;CACxC;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACjE,+EAA+E;IAC/E,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,MAAM,WAAW,0BAA0B;IACvC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,KAAK,EAAE,yBAAyB,EAAE,CAAC;CACtC"}

package/dist/utils/navigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/navigation.ts"],"sourcesContent":["import { IconProps } from '@servicetitan/anvil2';\nimport { FC } from 'react';\nimport { CounterTagData, CounterTagValue } from './counter-tag';\n\nexport interface NavigationItemData extends NavigationLinkData {\n    /** flag if the link is not shown (based on FG and/or user permissions) */\n    isHidden?: boolean;\n\n    /** custom className (can be used for mdi icons) */\n    iconClassName?: string;\n\n    /** svg icon (anvil2) of inactive item */\n    icon: IconProps['svg'] | undefined;\n\n    /** svg icon (anvil2) of active item */\n    iconActive: IconProps['svg'] | undefined;\n\n    /** icon component of item (<svg />) */\n    iconComponent?: FC;\n\n    /** item tag (optional). shown if it is set and true or greater than 0 */\n    counter?: CounterTagValue;\n    tag?: CounterTagData;\n\n    /** class name of link item */\n    className?: string;\n\n    /** optional submenu of link item */\n    submenu?: NavigationSubmenuData;\n}\n\nexport interface NavigationLinkData {\n    /** link id */\n    id: string;\n\n    /** link href */\n    to: string;\n\n    /** link title */\n    title: string;\n\n    /** callback to return active state. By default, it compares link href with current pathname */\n    isActive?: boolean | ((pathname: string) => boolean);\n}\n\nexport interface NavigationSubmenuData {\n    /** submenu groups */\n    groups: NavigationSubmenuGroupData[];\n}\n\nexport interface NavigationSubmenuItemData extends NavigationLinkData {\n    /** item tag (optional) value. shown if it is set and true or greater than 0 */\n    counter?: CounterTagValue;\n    tag?: CounterTagData;\n}\n\nexport interface NavigationSubmenuGroupData {\n    /** submenu group title */\n    title: string;\n\n    /** submenu group links */\n    links: NavigationSubmenuItemData[];\n}\n"],"names":[],"mappings":"AAwDA,WAMC"}
+{"version":3,"sources":["../../src/utils/navigation.ts"],"sourcesContent":["import { IconProps } from '@servicetitan/anvil2';\nimport { CounterTagData, CounterTagValue } from './counter-tag';\n\nexport interface NavigationItemData extends NavigationLinkData {\n    /** svg icon (anvil2) of inactive item */\n    icon: IconProps['svg'] | undefined;\n\n    /** svg icon (anvil2) of active item */\n    iconActive: IconProps['svg'] | undefined;\n\n    /** item tag (optional). shown if it is set and true or greater than 0 */\n    counter?: CounterTagValue;\n    tag?: CounterTagData;\n\n    /** class name of link item */\n    className?: string;\n\n    /** optional submenu of link item */\n    submenu?: NavigationSubmenuData;\n\n    iconClassName?: never;\n    iconComponent?: never;\n}\n\nexport interface NavigationLinkData {\n    /** link id */\n    id: string;\n\n    /** link href */\n    to: string;\n\n    /** link title */\n    title: string;\n\n    /** callback to return active state. By default, it compares link href with current pathname */\n    isActive?: boolean | ((pathname: string) => boolean);\n}\n\nexport interface NavigationSubmenuData {\n    /** submenu groups */\n    groups: NavigationSubmenuGroupData[];\n}\n\nexport interface NavigationSubmenuItemData extends NavigationLinkData {\n    /** item tag (optional) value. shown if it is set and true or greater than 0 */\n    counter?: CounterTagValue;\n    tag?: CounterTagData;\n}\n\nexport interface NavigationSubmenuGroupData {\n    /** submenu group title */\n    title: string;\n\n    /** submenu group links */\n    links: NavigationSubmenuItemData[];\n}\n"],"names":[],"mappings":"AAiDA,WAMC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "12.0.3",
+    "version": "13.0.0-canary.256.5761ed1.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -42,5 +42,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "c4d3e8b44fbf7d1fc7849c475ddeb32547bcac8b"
+    "gitHead": "5761ed1e46eb6357f79785dce570a744a4baff2b"
 }

package/src/components/counter-tag.tsx

@@ -5,7 +5,7 @@ import { CounterTagData } from '../utils/counter-tag';
 
 export interface CounterTagProps extends CounterTagData {
     [key: string]: any;
-    className: string;
+    className?: string;
 }
 
 export const CounterTag: FC<{

package/src/components/profile-dropdown/interface.ts

@@ -0,0 +1,47 @@
+import { PopoverPropsStrict } from '@servicetitan/design-system';
+import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import { CounterTagData, CounterTagValue } from '../../utils/counter-tag';
+
+export type ProfileDropdownTriggerProps = {
+    info?: { title: string; text: string };
+    imageSrc?: string | null;
+    avatarBadge?: boolean | string;
+    badge?: { content?: number | string; className: string };
+} & Omit<ComponentPropsWithoutRef<'div'>, 'onClick'>;
+
+export type ProfileDropdownProps = {
+    direction?: PopoverPropsStrict['direction'];
+    trigger?: Omit<ProfileDropdownTriggerProps, 'onClick' | 'open' | 'hintArrow'>;
+    hintPopup?: {
+        className?: string;
+        content: FC<{ openProfile(): void }>;
+        width?: PopoverPropsStrict['width'];
+        onClose?: () => void;
+    };
+    portal?: boolean;
+    width?: PopoverPropsStrict['width'];
+    onClose?(): void;
+    onOpen?(): void;
+} & ComponentPropsWithoutRef<'div'>;
+
+export type ProfileItemContent =
+    | { children: string; text?: string }
+    | { children: ReactNode; text: string };
+
+export type ProfileDropdownSectionProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
+    children: ReactNode;
+    id: string;
+    tooltip?: string;
+    tag?: CounterTagData;
+    counter?: CounterTagValue;
+} & ProfileItemContent;
+
+export type ProfileDropdownLinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'children'> & {
+    id: string;
+    children: ReactNode;
+    external?: boolean;
+    tooltip?: string;
+    to: string;
+    tag?: CounterTagData;
+    counter?: CounterTagValue;
+} & ProfileItemContent;

package/src/components/profile-dropdown/profile-dropdown-legacy.stories.tsx

@@ -0,0 +1,25 @@
+import { NavLinkMock, withAnvil, withMemoryRouter } from '../../test/data';
+import { TitanLayout } from '../titan-layout';
+import { DesktopProfileDropdown } from './profile-dropdown';
+
+const withLayout = (Story: any) => (
+    <TitanLayout navVariant="top" profile={<Story />} navigationComponent={NavLinkMock} />
+);
+
+export default {
+    title: 'Navigation/DesktopProfileDropdown/Legacy',
+    component: DesktopProfileDropdown,
+    parameters: {},
+    decorators: [withMemoryRouter, withAnvil, withLayout],
+};
+
+export {
+    ProfileDropdownDefault,
+    ProfileDropdownWithBothBadges,
+    ProfileDropdownWithCounter,
+    ProfileDropdownWithErrorLogo,
+    ProfileDropdownWithInfo,
+    ProfileDropdownWithHintAndInfoPopup,
+    ProfileDropdownWithHintPopup,
+    ProfileDropdownWithLogo,
+} from './profile-dropdown.stories';

package/src/components/profile-dropdown/profile-dropdown-stacked.stories.tsx

@@ -1,14 +1,22 @@
-import { withAnvil, withMemoryRouter } from '../../test/data';
-import { HeaderNavigationStacked } from '../header-navigation';
-import { ProfileDropdown } from './profile-dropdown';
+import { NavLinkMock, navItems, withAnvil, withMemoryRouter } from '../../test/data';
+import { TitanLayout } from '../titan-layout';
+import { DesktopProfileDropdown } from './profile-dropdown';
 
-const withHeaderNavigationStacked = (Story: any) => <HeaderNavigationStacked right={<Story />} />;
+const withStackedLayout = (Story: any) => (
+    <TitanLayout
+        navVariant="top"
+        top={<div />}
+        profile={<Story />}
+        navigationMainItems={[navItems.accounting]}
+        navigationComponent={NavLinkMock}
+    />
+);
 
 export default {
-    title: 'Navigation/ProfileDropdown/Stacked',
-    component: ProfileDropdown,
+    title: 'Navigation/DesktopProfileDropdown/Stacked',
+    component: DesktopProfileDropdown,
     parameters: {},
-    decorators: [withMemoryRouter, withAnvil, withHeaderNavigationStacked],
+    decorators: [withStackedLayout, withMemoryRouter, withAnvil],
 };
 
 export {

package/src/components/profile-dropdown/profile-dropdown.stories.tsx

@@ -1,58 +1,65 @@
 import { Button } from '@servicetitan/design-system';
-import { withAnvil, withMemoryRouter } from '../../test/data';
-import { HeaderNavigation } from '../header-navigation';
-import { ProfileDropdown } from './profile-dropdown';
+import { NavLinkMock, withAnvil, withMemoryRouter } from '../../test/data';
+import { TitanLayout } from '../titan-layout';
+import { DesktopProfileDropdown } from './profile-dropdown';
 
-const withHeaderNavigation = (Story: any) => (
-    <HeaderNavigation>
-        <Story />
-    </HeaderNavigation>
+const withLegacyLayout = (Story: any) => (
+    <TitanLayout navigationComponent={NavLinkMock} profile={<Story />} />
 );
 
 export default {
-    title: 'Navigation/ProfileDropdown/Legacy',
-    component: ProfileDropdown,
+    title: 'Navigation/DesktopProfileDropdown/Default',
+    component: DesktopProfileDropdown,
     parameters: {},
-    decorators: [withMemoryRouter, withAnvil, withHeaderNavigation],
+    decorators: [withLegacyLayout, withMemoryRouter, withAnvil],
 };
 
 export const ProfileDropdownDefault = () => (
-    <ProfileDropdown>
-        <ProfileDropdown.Link id="first" to="https://google.com">
+    <DesktopProfileDropdown>
+        <DesktopProfileDropdown.Link id="first" to="https://google.com" external>
             first link
-        </ProfileDropdown.Link>
-        <ProfileDropdown.Section id="second" onClick={() => alert('second click')}>
+        </DesktopProfileDropdown.Link>
+        <DesktopProfileDropdown.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">
+        </DesktopProfileDropdown.Section>
+        <DesktopProfileDropdown.Divider />
+        <DesktopProfileDropdown.Section id="content">some content</DesktopProfileDropdown.Section>
+        <DesktopProfileDropdown.Divider />
+        <DesktopProfileDropdown.Divider />
+        <DesktopProfileDropdown.Divider />
+        <DesktopProfileDropdown.Link id="third" to="third">
             third link
-        </ProfileDropdown.Link>
-        <ProfileDropdown.Divider />
-    </ProfileDropdown>
+        </DesktopProfileDropdown.Link>
+        <DesktopProfileDropdown.Divider />
+        <DesktopProfileDropdown.Section
+            id="forth"
+            onClick={() => alert('forth click')}
+            text="Sign Out user"
+        >
+            Sign Out
+            <span className="c-neutral-60 m-l-1">user</span>
+        </DesktopProfileDropdown.Section>
+        <DesktopProfileDropdown.Divider />
+    </DesktopProfileDropdown>
 );
 
 export const ProfileDropdownWithLogo = () => (
-    <ProfileDropdown
+    <DesktopProfileDropdown
         trigger={{
             imageSrc: 'https://upload.wikimedia.org/wikipedia/en/1/11/Milhouse_Van_Houten.png',
         }}
     >
-        <ProfileDropdown.Link id="first" to="https://google.com">
+        <DesktopProfileDropdown.Link id="first" to="https://google.com">
             first link
-        </ProfileDropdown.Link>
-        <ProfileDropdown.Section id="second" onClick={() => alert('second click')}>
+        </DesktopProfileDropdown.Link>
+        <DesktopProfileDropdown.Section id="second" onClick={() => alert('second click')}>
             second link
-        </ProfileDropdown.Section>
-    </ProfileDropdown>
+        </DesktopProfileDropdown.Section>
+    </DesktopProfileDropdown>
 );
 
 export const ProfileDropdownWithErrorLogo = () => (
-    <ProfileDropdown
+    <DesktopProfileDropdown
         trigger={{
             imageSrc: 'https://some.incorrect.url/logo.png',
         }}
@@ -60,7 +67,7 @@ export const ProfileDropdownWithErrorLogo = () => (
 );
 
 export const ProfileDropdownWithInfo = () => (
-    <ProfileDropdown
+    <DesktopProfileDropdown
         trigger={{
             info: { text: 'first', title: 'tenant user' },
             avatarBadge: true,
@@ -69,7 +76,7 @@ export const ProfileDropdownWithInfo = () => (
 );
 
 export const ProfileDropdownWithCounter = () => (
-    <ProfileDropdown
+    <DesktopProfileDropdown
         trigger={{
             info: { text: 'first', title: 'tenant user' },
             avatarBadge: true,
@@ -79,7 +86,7 @@ export const ProfileDropdownWithCounter = () => (
 );
 
 export const ProfileDropdownWithBothBadges = () => (
-    <ProfileDropdown
+    <DesktopProfileDropdown
         trigger={{
             avatarBadge: 'yellow-500',
             badge: { className: 'bg-red-400' },
@@ -91,7 +98,7 @@ export const ProfileDropdownWithBothBadges = () => (
 const log = (text: string) => console.log(text);
 
 export const ProfileDropdownWithHintPopup = () => (
-    <ProfileDropdown
+    <DesktopProfileDropdown
         trigger={{
             avatarBadge: 'yellow-500',
             badge: { className: 'bg-red-400' },
@@ -112,19 +119,19 @@ export const ProfileDropdownWithHintPopup = () => (
         onOpen={() => log('open profile dropdown')}
         onClose={() => log('close profile dropdown')}
     >
-        <ProfileDropdown.Link id="first" to="https://google.com" counter={12}>
+        <DesktopProfileDropdown.Link id="first" to="https://google.com" counter={12}>
             first item
-        </ProfileDropdown.Link>
-        <ProfileDropdown.Divider />
-        <ProfileDropdown.Section id="second">second item</ProfileDropdown.Section>
-        <ProfileDropdown.Link id="third" to="https://google.com" tag={{ value: 1 }}>
+        </DesktopProfileDropdown.Link>
+        <DesktopProfileDropdown.Divider />
+        <DesktopProfileDropdown.Section id="second">second item</DesktopProfileDropdown.Section>
+        <DesktopProfileDropdown.Link id="third" to="https://google.com" tag={{ value: 1 }}>
             third item
-        </ProfileDropdown.Link>
-    </ProfileDropdown>
+        </DesktopProfileDropdown.Link>
+    </DesktopProfileDropdown>
 );
 
 export const ProfileDropdownWithHintAndInfoPopup = () => (
-    <ProfileDropdown
+    <DesktopProfileDropdown
         trigger={{
             avatarBadge: 'yellow-500',
             badge: { className: 'bg-red-400' },