@servicetitan/navigation 4.1.0 → 5.0.0

package/dist/test/data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data.js","sourceRoot":"","sources":["../../src/test/data.tsx"],"names":[],"mappings":"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"}

package/dist/utils/navigation-context.js

@@ -1,20 +1,6 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext } from 'react';
-export const DefaultNavLinkComponent = (_a) => {
-    var { children, activeClassName, isActive } = _a, props = __rest(_a, ["children", "activeClassName", "isActive"]);
-    return _jsx("a", Object.assign({}, props, { children: children }));
-};
+export const DefaultNavLinkComponent = ({ children, activeClassName, isActive, ...props }) => _jsx("a", { ...props, children: children });
 export const NavigationComponentContext = createContext(DefaultNavLinkComponent);
 export const NavigationLegacyContext = createContext(false);
 //# sourceMappingURL=navigation-context.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-context.js","sourceRoot":"","sources":["../../src/utils/navigation-context.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAM,aAAa,EAAE,MAAM,OAAO,CAAC;AAG1C,MAAM,CAAC,MAAM,uBAAuB,GAA8B,CAAC,EAKlE,EAAE,EAAE;QAL8D,EAC/D,QAAQ,EACR,eAAe,EACf,QAAQ,OAEX,EADM,KAAK,cAJuD,2CAKlE,CADW;IACN,OAAA,4BAAO,KAAK,cAAG,QAAQ,IAAK,CAAA;CAAA,CAAC;AAEnC,MAAM,CAAC,MAAM,0BAA0B,GACnC,aAAa,CAA4B,uBAAuB,CAAC,CAAC;AACtE,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC"}
+{"version":3,"file":"navigation-context.js","sourceRoot":"","sources":["../../src/utils/navigation-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,aAAa,EAAE,MAAM,OAAO,CAAC;AAG1C,MAAM,CAAC,MAAM,uBAAuB,GAA8B,CAAC,EAC/D,QAAQ,EACR,eAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,EAAE,CAAC,eAAO,KAAK,YAAG,QAAQ,GAAK,CAAC;AAEnC,MAAM,CAAC,MAAM,0BAA0B,GACnC,aAAa,CAA4B,uBAAuB,CAAC,CAAC;AACtE,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC"}

package/dist/utils/navigation.d.ts

@@ -51,6 +51,10 @@ export interface HeaderNavigationTriggerPropsStrict {
     hint?: string;
     /** container class name */
     className?: string;
+    /** item label */
+    label?: string;
+    /** label class name */
+    labelClassName?: string;
     /** isActive */
     isActive?: boolean;
     /** counter shown for item */

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,6BAA6B,CAAC;AAC9D,OAAO,EAAE,EAAE,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEhE,MAAM,WAAW,wBAAwB;IACrC,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IAEX,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IAEb,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IAErD,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAEnC,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,qEAAqE;IACrE,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAE9B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,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,MAAM,WAAW,kCAAkC;IAC/C,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,EAAE,CAAC;IACnB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACnC,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACnC,uCAAuC;IACvC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;CAC5C;AAED,MAAM,WAAW,4BAA6B,SAAQ,kCAAkC;IACpF,qBAAqB;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,+BACb,SAAQ,IAAI,CAAC,kCAAkC,EAAE,UAAU,CAAC;IAC5D,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IACrD,uBAAuB;IACvB,MAAM,CAAC,EAAE,yBAAyB,CAAC;CACtC;AAED,MAAM,WAAW,yBAA0B,SAAQ,+BAA+B;IAC9E,qBAAqB;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":"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"}

package/dist/utils/with-tooltip.d.ts

@@ -1,4 +1,4 @@
 import { TooltipPropsStrict } from '@servicetitan/design-system';
 import { ReactNode } from 'react';
-export declare const withTooltip: (element: ReactNode, tooltip: string | undefined, direction?: TooltipPropsStrict['direction']) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
+export declare const withTooltip: (element: ReactNode, tooltip: string | undefined, direction?: TooltipPropsStrict["direction"]) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
 //# sourceMappingURL=with-tooltip.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/navigation",
-    "version": "4.1.0",
+    "version": "5.0.0",
     "description": "Navigation components",
     "repository": {
         "type": "git",
@@ -18,7 +18,7 @@
     },
     "peerDependencies": {
         "@servicetitan/anvil2": ">=1.16.3",
-        "@servicetitan/design-system": ">=13.0.0",
+        "@servicetitan/design-system": ">=14.0.0",
         "@servicetitan/react-ioc": ">=14.1.1",
         "@servicetitan/tokens": ">=12.0.0",
         "mobx": ">=6.10.0",
@@ -43,5 +43,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "901f041843355800451ac2e52a830bfcece54acd"
+    "gitHead": "5e07aac7393d63f77dccb60b1d4372d1817e18cd"
 }

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

@@ -0,0 +1,19 @@
+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,54 +1,57 @@
+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 { useState } from 'react';
-import { withAnvil, withMemoryRouter } from '../../test/data.stories';
-import { HeaderNavigationLink, HeaderNavigationTrigger } from './header-navigation-links';
+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/HeaderNavigationExtra',
+    title: 'Navigation/Extra/Legacy',
     component: HeaderNavigationLink,
-    decorators: [withMemoryRouter, withAnvil],
+    decorators: [withHeaderNavigation, withMemoryRouter, withAnvil],
     parameters: {},
 };
 
-const SvgIcon = undefined as any;
-
-export const extraLink = () => (
-    <HeaderNavigation items={[]} rightClassName="m-r-1">
-        <HeaderNavigationLink
-            id="search"
-            to="https://google.com"
-            target="_blank"
-            iconName="search"
-            icon={SvgIcon}
-            iconActive={SvgIcon}
-            hint="Search: for all the questions"
-        />
-    </HeaderNavigation>
+export const ExtraLink = () => (
+    <HeaderNavigationLink
+        id="search"
+        to="https://google.com"
+        target="_blank"
+        iconName="search"
+        icon={SvgSearch}
+        iconActive={undefined}
+        hint="Search: for all the questions"
+    />
 );
 
-export const extraTrigger = () => (
-    <HeaderNavigation items={[]} rightClassName="m-r-1">
-        <HeaderNavigationTrigger
-            id="dialpad"
-            iconName="phone"
-            counter={2}
-            tooltip="Phones pro"
-            icon={SvgIcon}
-            iconActive={SvgIcon}
-        />
-    </HeaderNavigation>
+export const ExtraTrigger = () => (
+    <HeaderNavigationTrigger
+        id="dialpad"
+        iconName="phone"
+        counter={2}
+        tooltip="Phones pro"
+        icon={SvgPhone}
+        iconActive={undefined}
+    />
 );
 
-export const extraWithTooltip = () => (
-    <HeaderNavigation items={[]} rightClassName="m-r-1">
+export const ExtraWithTooltip = () => (
+    <Fragment>
         <HeaderNavigationLink
             id="search"
             to="https://google.com"
             target="_blank"
             iconName="search"
-            icon={SvgIcon}
-            iconActive={SvgIcon}
+            icon={SvgSearch}
+            iconActive={undefined}
             tooltip="Search: for all the questions"
             hint="Google"
         />
@@ -56,14 +59,14 @@ export const extraWithTooltip = () => (
         <HeaderNavigationTrigger
             id="dialpad"
             iconName="phone"
-            title="Dialpad"
+            hint="Dialpad"
             counter={2}
-            icon={SvgIcon}
-            iconActive={SvgIcon}
+            icon={SvgPhone}
+            iconActive={undefined}
         />
 
         <HelpCenterButton />
-    </HeaderNavigation>
+    </Fragment>
 );
 
 const HelpCenterButton = () => {
@@ -77,7 +80,7 @@ const HelpCenterButton = () => {
             width="xs"
             trigger={
                 <Button
-                    className="c-white"
+                    className="c-inherit"
                     iconName="help_outline"
                     fill="subtle"
                     onClick={() => setOpen(true)}
@@ -89,3 +92,44 @@ const HelpCenterButton = () => {
         </Popover>
     );
 };
+
+const HelpTrigger = () => {
+    const [active, setActive] = useState(true);
+
+    return (
+        <HeaderNavigationTrigger
+            id="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"
+            to="https://google.com"
+            target="_blank"
+            iconName="search"
+            icon={SvgSearch}
+            iconActive={undefined}
+            tooltip="Search: for all the questions"
+            hint="Google"
+        />
+
+        <HelpTrigger />
+        <HeaderNavigationTrigger
+            id="dialpad"
+            iconName="phone"
+            hint="Dialpad"
+            counter={2}
+            icon={SvgPhone}
+            iconActive={undefined}
+        />
+    </Fragment>
+);

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

@@ -18,6 +18,8 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
     iconComponent,
     iconName,
     isActive,
+    label,
+    labelClassName,
     target,
     ...rest
 }) => {
@@ -43,6 +45,8 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
                 iconComponent={iconComponent}
                 iconClassName={iconClassName}
                 iconName={iconName}
+                title={label}
+                titleClassName={labelClassName}
             />
         </NavigationComponent>,
         tooltip
@@ -58,6 +62,8 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
     iconComponent,
     iconName,
     isActive,
+    label,
+    labelClassName,
     hint,
     tooltip,
     ...rest
@@ -83,6 +89,8 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
                 iconComponent={iconComponent}
                 iconClassName={iconClassName}
                 iconName={iconName}
+                title={label}
+                titleClassName={labelClassName}
             />
         </div>,
         tooltip

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

@@ -1,6 +1,6 @@
 import { Input, Stack } from '@servicetitan/design-system';
 import { FC, Fragment } from 'react';
-import { SearchIcon, items, withMemoryRouter } from '../../test/data.stories';
+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';
@@ -17,7 +17,7 @@ export default {
 
 const SvgIcon = undefined as any;
 
-export const defaultNavigation = () => (
+export const DefaultNavigation = () => (
     <HeaderNavigationStacked
         left={<LogoCompanyTitle className="m-l-1" fill="#fff" size="150" />}
         leftClassName="d-f align-items-center"
@@ -32,7 +32,7 @@ export const defaultNavigation = () => (
     />
 );
 
-export const withLogoTextAndOverflow = () => (
+export const WithLogoTextAndOverflow = () => (
     <HeaderNavigationStacked
         left={
             <Stack alignItems="center">
@@ -59,7 +59,7 @@ const TimeZoneOffset: FC = () => (
     </div>
 );
 
-export const withAllMonolithData = () => (
+export const WithAllMonolithData = () => (
     <HeaderNavigationStacked
         left={<LogoCompanyTitle className="m-l-1" fill="#fff" size="150" />}
         leftClassName="d-f align-items-center"

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

@@ -1,6 +1,6 @@
 import { Popover } from '@servicetitan/design-system';
 import { FC, useState } from 'react';
-import { SearchIcon, items, withMemoryRouter } from '../../test/data.stories';
+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';
@@ -16,7 +16,7 @@ export default {
 };
 const SvgIcon = undefined as any;
 
-export const defaultNavigation = () => (
+export const DefaultNavigation = () => (
     <HeaderNavigation
         left={<LogoCompanyTitle className="m-l-1" fill="#fff" />}
         items={[
@@ -30,7 +30,7 @@ export const defaultNavigation = () => (
     />
 );
 
-export const withLogoTextAndOverflow = () => (
+export const WithLogoTextAndOverflow = () => (
     <HeaderNavigation
         left={
             <LogoTitanText
@@ -83,7 +83,7 @@ const TimeZoneOffset: FC = () => (
     </div>
 );
 
-export const withAllMonolithData = () => (
+export const WithAllMonolithData = () => (
     <HeaderNavigation
         left={<LogoCompanyTitle className="m-l-1" fill="#fff" />}
         items={[

package/src/components/layout.stories.tsx

@@ -1,4 +1,4 @@
-import { withAnvil, withMemoryRouter } from '../test/data.stories';
+import { withAnvil, withMemoryRouter } from '../test/data';
 import {
     WithAllMonolithData,
     WithAllMonolithDataCommercial,

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

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

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

@@ -13,7 +13,9 @@ export const HeaderNavigationItemContent: FC<{
     counterClassName?: string;
     icon: IconProps['svg'] | undefined;
     iconActive: IconProps['svg'] | undefined;
-}> = ({ counter, counterClassName, icon, iconActive }) => {
+    label?: string;
+    labelClassName?: string;
+}> = ({ counter, counterClassName, icon, iconActive, label, labelClassName }) => {
     return (
         <Fragment>
             {!!icon && <Icon svg={icon} className={Styles.navigationIcon} />}
@@ -24,6 +26,12 @@ export const HeaderNavigationItemContent: FC<{
                 />
             )}
 
+            {!!label && (
+                <span className={classNames(Styles.navigationItemLabel, labelClassName)}>
+                    {label}
+                </span>
+            )}
+
             {!!counter && (
                 <CounterTag
                     data={counter}
@@ -46,6 +54,8 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
     icon,
     iconActive,
     isActive,
+    label,
+    labelClassName,
     target,
     ...rest
 }) => {
@@ -67,7 +77,13 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
             activeClassName={Styles.navigationItemActive}
             target={target}
         >
-            <HeaderNavigationItemContent counter={counter} icon={icon} iconActive={iconActive} />
+            <HeaderNavigationItemContent
+                counter={counter}
+                icon={icon}
+                iconActive={iconActive}
+                label={label}
+                labelClassName={labelClassName}
+            />
         </NavigationComponent>,
         tooltip
     );
@@ -82,6 +98,8 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
     iconActive,
     isActive,
     hint,
+    label,
+    labelClassName,
     tooltip,
     title,
     titleClassName,
@@ -103,7 +121,13 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
                 className
             )}
         >
-            <HeaderNavigationItemContent counter={counter} icon={icon} iconActive={iconActive} />
+            <HeaderNavigationItemContent
+                counter={counter}
+                icon={icon}
+                iconActive={iconActive}
+                label={label}
+                labelClassName={labelClassName}
+            />
         </div>,
         tooltip
     );

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

@@ -103,6 +103,14 @@
         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/left-navigation/header-navigation-tiny.module.less.d.ts

@@ -9,6 +9,7 @@ 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/left-navigation/header-navigation-tiny.stories.tsx

@@ -6,12 +6,7 @@ import SvgRocket from '@servicetitan/anvil2/assets/icons/st/gnav_titan_advisor_i
 
 import { Input, Stack } from '@servicetitan/design-system';
 import { FC, Fragment } from 'react';
-import {
-    CallsNavigationTrigger,
-    SearchIcon,
-    withAnvil,
-    withMemoryRouter,
-} from '../../test/data.stories';
+import { CallsNavigationTrigger, SearchIcon, withAnvil, withMemoryRouter } from '../../test/data';
 import * as Styles from '../header-navigation/header-navigation-stories.module.less';
 import { LogoCompanyTitle } from '../logo/logo-company-title';
 import { LogoTitan, LogoTitanTitle } from '../logo/logo-titan-text';

package/src/components/left-navigation/side-navigation.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentType, useState } from 'react';
-import { NavLinkMock, items, withAnvil, withMemoryRouter } from '../../test/data.stories';
+import { NavLinkMock, items, withAnvil, withMemoryRouter } from '../../test/data';
 import { SideNavigation } from './';
 
 const layout = (Story: ComponentType) => {

package/src/components/logo/logo.stories.tsx

@@ -10,10 +10,10 @@ export default {
     parameters: {},
 };
 
-export const logoTitan = () => <LogoTitanSvg />;
-export const logoTitanBlueMantle = () => <LogoTitanSvg mantleFill="#2270EE" />;
-export const logoCompanyTitle = () => <LogoCompanyTitle />;
-export const logoTitanText = () => (
+export const Titan = () => <LogoTitanSvg />;
+export const TitanBlueMantle = () => <LogoTitanSvg mantleFill="#2270EE" />;
+export const CompanyTitle = () => <LogoCompanyTitle />;
+export const TitanText = () => (
     <LogoTitanText
         className="bg-neutral-300 border"
         mantleFill="#2270EE"
@@ -34,7 +34,7 @@ const NavLinkMock: FC<{ className: string; children: ReactNode }> = ({ className
     </a>
 );
 
-export const logoTitanTextWithLink = () => (
+export const TitanTextWithLink = () => (
     <LogoTitanText
         className="bg-neutral-300 border"
         mantleFill="#2270EE"
@@ -44,7 +44,7 @@ export const logoTitanTextWithLink = () => (
     />
 );
 
-export const logoTitanWithText = () => (
+export const TitanWithText = () => (
     <Stack className="border bg-neutral-300" alignItems="center">
         <LogoTitan className="border-left m-r-1" mantleFill="#2270EE" />
         <LogoTitanTitle className="m-x-1 p-b-half c-white">Contact Center</LogoTitanTitle>

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

@@ -1,13 +1,23 @@
-import { withAnvil, withMemoryRouter } from '../../test/data.stories';
+import { withAnvil, withMemoryRouter } from '../../test/data';
 import { HeaderNavigationStacked } from '../header-navigation';
-export * from './profile-dropdown.stories';
 import { ProfileDropdown } from './profile-dropdown';
 
 const withHeaderNavigationStacked = (Story: any) => <HeaderNavigationStacked right={<Story />} />;
 
 export default {
-    title: 'Navigation/ProfileDropdownStacked',
+    title: 'Navigation/ProfileDropdown/Stacked',
     component: ProfileDropdown,
     parameters: {},
     decorators: [withMemoryRouter, withAnvil, withHeaderNavigationStacked],
 };
+
+export {
+    ProfileDropdownDefault,
+    ProfileDropdownWithBothBadges,
+    ProfileDropdownWithCounter,
+    ProfileDropdownWithErrorLogo,
+    ProfileDropdownWithInfo,
+    ProfileDropdownWithHintAndInfoPopup,
+    ProfileDropdownWithHintPopup,
+    ProfileDropdownWithLogo,
+} from './profile-dropdown.stories';

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

@@ -1,6 +1,5 @@
-import { withAnvil, withMemoryRouter } from '../../test/data.stories';
+import { withAnvil, withMemoryRouter } from '../../test/data';
 import { HeaderNavigationTiny } from '../left-navigation';
-export * from './profile-dropdown.stories';
 import { ProfileDropdown } from './profile-dropdown';
 
 const withHeaderNavigationTiny = (Story: any) => (
@@ -8,8 +7,19 @@ const withHeaderNavigationTiny = (Story: any) => (
 );
 
 export default {
-    title: 'Navigation/ProfileDropdownTiny',
+    title: 'Navigation/ProfileDropdown/Tiny',
     component: ProfileDropdown,
     parameters: {},
     decorators: [withMemoryRouter, withAnvil, withHeaderNavigationTiny],
 };
+
+export {
+    ProfileDropdownDefault,
+    ProfileDropdownWithBothBadges,
+    ProfileDropdownWithCounter,
+    ProfileDropdownWithErrorLogo,
+    ProfileDropdownWithInfo,
+    ProfileDropdownWithHintAndInfoPopup,
+    ProfileDropdownWithHintPopup,
+    ProfileDropdownWithLogo,
+} from './profile-dropdown.stories';

package/src/components/profile-dropdown/profile-dropdown.module.less

@@ -50,10 +50,19 @@
         border-radius: 8px;
     }
 
+    .expand-icon[data-anv][data-anv] {
+        color: inherit;
+        display: flex;
+        align-items: center;
+    }
+
     &.trigger-container-legacy {
         .avatar-badge {
             left: 0;
         }
+        .badge {
+            right: 12px;
+        }
     }
 
     &.trigger-container-hint-arrow:first-child:before {