@servicetitan/navigation 3.2.0 → 4.0.0

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

@@ -1,8 +1,9 @@
-import { Icon, IconPropsStrict } from '@servicetitan/design-system';
+import { Icon, IconProps } from '@servicetitan/anvil2';
+import { Icon as IconLegacy, IconPropsStrict } from '@servicetitan/design-system';
 import classNames from 'classnames';
-import { FC, Fragment } from 'react';
+import { FC, Fragment, useContext } from 'react';
 import { HeaderNavigationItemData } from '../../utils/navigation';
-import { useNavLink } from '../../utils/navigation-context';
+import { NavigationContext } from '../../utils/navigation-context';
 import { withTooltip } from '../../utils/with-tooltip';
 import { CounterTag, CounterTagPropsType } from '../counter-tag';
 import * as Styles from './header-navigation.module.less';
@@ -22,6 +23,12 @@ export interface HeaderNavigationItemContentPropsStrict {
     iconComponent?: FC;
     /** iconName name of anvil icon */
     iconName?: IconPropsStrict['name'];
+    /** svg icon (anvil2) of inactive item */
+    icon: IconProps['svg'] | undefined;
+    /** svg icon (anvil2) of active item */
+    iconActive: IconProps['svg'] | undefined;
+    /** show legacy icons */
+    isLegacy: boolean;
 }
 
 /** Content for navigation items */
@@ -33,18 +40,36 @@ export const HeaderNavigationItemContent: FC<HeaderNavigationItemContentPropsStr
     iconClassName,
     iconComponent: IconComponent,
     iconName,
+    icon,
+    iconActive,
+    isLegacy,
 }) => {
     const iconClass = classNames(Styles.navigationIcon, iconClassName);
     return (
         <Fragment>
-            {IconComponent ? (
-                <i className={iconClass}>
-                    <IconComponent />
-                </i>
-            ) : iconName ? (
-                <Icon name={iconName} className={iconClass} />
+            {isLegacy ? (
+                IconComponent ? (
+                    <i className={iconClass}>
+                        <IconComponent />
+                    </i>
+                ) : iconName ? (
+                    <IconLegacy name={iconName} className={iconClass} />
+                ) : (
+                    <i className={iconClass} />
+                )
             ) : (
-                <i className={iconClass} />
+                <Fragment>
+                    {!!icon && <Icon svg={icon} className={Styles.navigationIcon} />}
+                    {!!iconActive && (
+                        <Icon
+                            svg={iconActive}
+                            className={classNames(
+                                Styles.navigationIcon,
+                                Styles.navigationIconActive
+                            )}
+                        />
+                    )}
+                </Fragment>
             )}
 
             {!!title && (
@@ -84,7 +109,7 @@ export const HeaderNavigationItem: FC<HeaderNavigationItemPropsStrict> = ({
     main,
     minimized,
 }) => {
-    const NavigationComponent = useNavLink();
+    const { NavigationComponent, isLegacy } = useContext(NavigationContext);
 
     return withTooltip(
         <NavigationComponent
@@ -111,6 +136,9 @@ export const HeaderNavigationItem: FC<HeaderNavigationItemPropsStrict> = ({
                 iconComponent={iconComponent}
                 iconClassName={iconClassName}
                 iconName={iconName}
+                icon={undefined}
+                iconActive={undefined}
+                isLegacy={isLegacy}
             />
         </NavigationComponent>,
         minimized ? title : undefined

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

@@ -1,6 +1,6 @@
 import { Button, Popover } from '@servicetitan/design-system';
-import { FC, useState } from 'react';
-import { NavLinkComponentProps } from '../../utils/navigation';
+import { useState } from 'react';
+import { NavLinkMock, withAnvil, withMemoryRouter } from '../../test/data.stories';
 import {
     HeaderNavigation,
     HeaderNavigationLink,
@@ -11,26 +11,11 @@ import {
 export default {
     title: 'Navigation/HeaderNavigationExtra',
     component: HeaderNavigationLink,
+    decorators: [withMemoryRouter, withAnvil],
     parameters: {},
 };
 
-const NavLinkMock: FC<NavLinkComponentProps> = ({
-    to,
-    children,
-    isActive,
-    activeClassName,
-    ...rest
-}) => (
-    <a
-        {...rest}
-        href={to}
-        onClick={e => {
-            e.preventDefault();
-        }}
-    >
-        {children}
-    </a>
-);
+const SvgIcon = undefined as any;
 
 export const extraLink = () => (
     <HeaderNavigation items={[]} navigationComponent={NavLinkMock} rightClassName="m-r-1">
@@ -39,6 +24,8 @@ export const extraLink = () => (
             to="https://google.com"
             target="_blank"
             iconName="search"
+            icon={SvgIcon}
+            iconActive={SvgIcon}
             hint="Search: for all the questions"
         />
     </HeaderNavigation>
@@ -46,7 +33,14 @@ export const extraLink = () => (
 
 export const extraTrigger = () => (
     <HeaderNavigation items={[]} navigationComponent={NavLinkMock} rightClassName="m-r-1">
-        <HeaderNavigationTrigger id="dialpad" iconName="phone" counter={2} tooltip="Phones pro" />
+        <HeaderNavigationTrigger
+            id="dialpad"
+            iconName="phone"
+            counter={2}
+            tooltip="Phones pro"
+            icon={SvgIcon}
+            iconActive={SvgIcon}
+        />
     </HeaderNavigation>
 );
 
@@ -65,11 +59,20 @@ export const extraWithTooltip = () => (
             to="https://google.com"
             target="_blank"
             iconName="search"
+            icon={SvgIcon}
+            iconActive={SvgIcon}
             tooltip="Search: for all the questions"
             hint="Google"
         />
 
-        <HeaderNavigationTrigger id="dialpad" iconName="phone" title="Dialpad" counter={2} />
+        <HeaderNavigationTrigger
+            id="dialpad"
+            iconName="phone"
+            title="Dialpad"
+            counter={2}
+            icon={SvgIcon}
+            iconActive={SvgIcon}
+        />
 
         <HelpCenterButton />
     </HeaderNavigation>

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

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import { FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
-import { useNavLink } from '../../utils/navigation-context';
+import { FC, HTMLAttributeAnchorTarget, ReactNode, useContext } from 'react';
+import { NavigationContext } from '../../utils/navigation-context';
 import { withTooltip } from '../../utils/with-tooltip';
 import {
     HeaderNavigationItemContent,
@@ -9,7 +9,7 @@ import {
 import * as Styles from './header-navigation.module.less';
 
 export interface HeaderNavigationTriggerPropsStrict
-    extends Omit<HeaderNavigationItemContentPropsStrict, 'title' | 'size'> {
+    extends Omit<HeaderNavigationItemContentPropsStrict, 'title' | 'isLegacy'> {
     /** unique identifier */
     id: string;
     /** tooltip text */
@@ -18,6 +18,8 @@ export interface HeaderNavigationTriggerPropsStrict
     hint?: string;
     /** container class name */
     className?: string;
+    /** isActive */
+    isActive?: boolean;
 }
 
 interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {
@@ -25,7 +27,8 @@ interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStric
     [key: string]: any;
 }
 
-export interface HeaderNavigationLinkPropsStrict extends HeaderNavigationTriggerPropsStrict {
+export interface HeaderNavigationLinkPropsStrict
+    extends Omit<HeaderNavigationTriggerPropsStrict, 'isActive'> {
     /** link href */
     to: string;
     /** isActive */
@@ -50,11 +53,13 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
     iconClassName,
     iconComponent,
     iconName,
+    icon,
+    iconActive,
     isActive,
     target,
     ...rest
 }) => {
-    const NavigationComponent = useNavLink();
+    const { NavigationComponent, isLegacy } = useContext(NavigationContext);
 
     return withTooltip(
         <NavigationComponent
@@ -66,6 +71,7 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
             title={hint}
             className={classNames(Styles.navigationLink, Styles.navigationItem, className, {
                 [Styles.navigationItemActive]: isActive === true,
+                [Styles.navigationItemIconState]: !!icon && !!iconActive,
             })}
             isActive={typeof isActive === 'function' ? isActive : undefined}
             activeClassName={Styles.navigationItemActive}
@@ -76,6 +82,9 @@ export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
                 iconComponent={iconComponent}
                 iconClassName={iconClassName}
                 iconName={iconName}
+                icon={icon}
+                iconActive={iconActive}
+                isLegacy={isLegacy}
             />
         </NavigationComponent>,
         tooltip
@@ -90,11 +99,16 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
     iconClassName,
     iconComponent,
     iconName,
+    icon,
+    iconActive,
+    isActive,
     hint,
     tooltip,
     ...rest
-}) =>
-    withTooltip(
+}) => {
+    const { isLegacy } = useContext(NavigationContext);
+
+    return withTooltip(
         <div
             data-cy={`navigation-trigger-${id}`}
             data-pendo={`navigation-trigger-${id}`}
@@ -103,6 +117,10 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
             className={classNames(
                 Styles.navigationItem,
                 Styles.navigationLink,
+                {
+                    [Styles.navigationItemActive]: isActive === true,
+                    [Styles.navigationItemIconState]: !!icon && !!iconActive,
+                },
                 'cursor-pointer',
                 className
             )}
@@ -112,16 +130,26 @@ export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
                 iconComponent={iconComponent}
                 iconClassName={iconClassName}
                 iconName={iconName}
+                icon={icon}
+                iconActive={iconActive}
+                isLegacy={isLegacy}
             />
         </div>,
         tooltip
     );
+};
 
 /** Navigation extra item with custom content */
 export const HeaderNavigationTriggerCustom: FC<
     Omit<
         HeaderNavigationTriggerProps,
-        'counter' | 'iconSize' | 'iconName' | 'iconComponent' | 'iconClassName'
+        | 'counter'
+        | 'iconSize'
+        | 'iconName'
+        | 'iconComponent'
+        | 'iconClassName'
+        | 'icon'
+        | 'iconActive'
     > & { children: ReactNode }
 > = ({ children, id, className, tooltip, title, ...rest }) =>
     withTooltip(

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 { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
+import { NavLinkMock, SearchIcon, items, withMemoryRouter } from '../../test/data.stories';
 import { LogoCompanyTitle } from '../logo/logo-company-title';
 import { LogoTitan, LogoTitanTitle } from '../logo/logo-titan-text';
 import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
@@ -11,72 +11,10 @@ export default {
     title: 'Navigation/HeaderNavigationStacked',
     component: HeaderNavigationStacked,
     parameters: {},
+    decorators: [withMemoryRouter],
 };
 
-const getItem = (
-    id: string,
-    data: Partial<HeaderNavigationItemData>
-): HeaderNavigationItemData => ({
-    id,
-    to: '/',
-    title: id[0].toUpperCase() + id.substring(1),
-    hint: id,
-    ...(data ?? {}),
-});
-
-const InventoryIcon = () => (
-    <svg width="20" xmlns="http://www.w3.org/2000/svg" viewBox="-293 385 24 24" fill="currentColor">
-        <polyline points="-288,400.9 -282,404.3 -282,397.6 -288,394.2 -288,400.9 " />
-        <path d="M-272,401.5c0,0.4-0.2,0.7-0.5,0.9l-7.9,4.4c-0.2,0.1-0.4,0.2-0.6,0.2s-0.4-0.1-0.6-0.2l-7.9-4.4c-0.3-0.2-0.5-0.5-0.5-0.9v-9c0-0.4,0.2-0.7,0.5-0.9l7.9-4.4c0.2-0.1,0.4-0.2,0.6-0.2s0.4,0.1,0.6,0.2l7.9,4.4c0.3,0.2,0.5,0.5,0.5,0.9V401.5 M-287,392.5 l6,3.4l5.9-3.3l-5.9-3.4L-287,392.5 M-274,400.9v-6.7l-6,3.4v6.7L-274,400.9z" />
-    </svg>
-);
-
-const SearchIcon = () => (
-    <svg
-        width="1em"
-        height="1em"
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <g transform="translate(0,4)">
-            <path
-                d="M0 15.7992V13.9992H12V15.7992H0ZM0 9.49922V7.69922H6V9.49922H0ZM0 3.19922V1.39922H6V3.19922H0ZM22.74 15.7992L17.94 10.9992C17.42 11.3992 16.86 11.6992 16.26 11.8992C15.66 12.0992 15.04 12.1992 14.4 12.1992C12.74 12.1992 11.325 11.6142 10.155 10.4442C8.985 9.27422 8.4 7.85922 8.4 6.19922C8.4 4.53922 8.985 3.12422 10.155 1.95422C11.325 0.784219 12.74 0.199219 14.4 0.199219C16.06 0.199219 17.475 0.784219 18.645 1.95422C19.815 3.12422 20.4 4.53922 20.4 6.19922C20.4 6.83922 20.3 7.45922 20.1 8.05922C19.9 8.65922 19.6 9.21922 19.2 9.73922L24 14.5392L22.74 15.7992ZM14.393 10.3992C15.5577 10.3992 16.55 9.99157 17.37 9.17627C18.19 8.36099 18.6 7.37099 18.6 6.20627C18.6 5.04157 18.1923 4.04922 17.377 3.22922C16.5618 2.40922 15.5718 1.99922 14.407 1.99922C13.2423 1.99922 12.25 2.40687 11.43 3.22217C10.61 4.03745 10.2 5.02745 10.2 6.19217C10.2 7.35687 10.6077 8.34922 11.423 9.16922C12.2382 9.98922 13.2282 10.3992 14.393 10.3992Z"
-                fill="white"
-            />
-        </g>
-    </svg>
-);
-
-const items = {
-    calendar: getItem('calendar', { iconName: 'event' }),
-    calls: getItem('calls', { iconName: 'local_phone', isActive: true, counter: 12 }),
-    dashboard: getItem('dashboard', { iconName: 'odometer', isActive: true }),
-    dispatch: getItem('dispatch', { iconName: 'location_disabled', counter: 1 }),
-    fleet: getItem('fleet', { iconName: 'fleet-pro', title: 'Fleet Pro' }),
-    followUps: getItem('followUps', { iconName: 'flag', title: 'Follow Ups' }),
-    inventory: getItem('inventory', { iconName: 'toys' }),
-    purchasing: getItem('purchasing', { iconComponent: InventoryIcon }),
-    accounting: getItem('accounting', { iconName: 'assignment' }),
-    marketing: getItem('marketing', { iconName: 'bullhorn' }),
-    priceBook: getItem('priceBook', { iconName: 'book' }),
-    pointOfSale: getItem('pointOfSale', { iconName: 'cash-register' }),
-    projects: getItem('projects', { iconName: 'folder_special' }),
-    reports: getItem('reports', { iconName: 'poll' }),
-};
-
-const NavLinkMock: FC<NavLinkComponentProps> = props => (
-    <a
-        href={props.to}
-        target={props.target}
-        onClick={e => {
-            e.preventDefault();
-        }}
-        className={props.className}
-    >
-        {props.children}
-    </a>
-);
+const SvgIcon = undefined as any;
 
 export const defaultNavigation = () => (
     <HeaderNavigationStacked
@@ -153,14 +91,24 @@ export const withAllMonolithData = () => (
                     target="_blank"
                     iconComponent={SearchIcon}
                     hint="Search: for all the questions"
+                    icon={SvgIcon}
+                    iconActive={SvgIcon}
                 />
 
-                <HeaderNavigationTrigger id="dialpad" iconName="phone" counter={2} />
+                <HeaderNavigationTrigger
+                    id="dialpad"
+                    iconName="phone"
+                    counter={2}
+                    icon={SvgIcon}
+                    iconActive={SvgIcon}
+                />
 
                 <HeaderNavigationTrigger
                     id="titanAdvisor"
                     iconName="rocket"
                     iconClassName={Styles.rocketIcon}
+                    icon={SvgIcon}
+                    iconActive={SvgIcon}
                 />
 
                 <HeaderNavigationLink
@@ -171,6 +119,8 @@ export const withAllMonolithData = () => (
                     aria-label="search"
                     hint="Settings"
                     isActive
+                    icon={SvgIcon}
+                    iconActive={SvgIcon}
                 />
 
                 <ProfileDropdown>

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

@@ -1,17 +1,31 @@
+import SvgSearch from '@servicetitan/anvil2/assets/icons/material/round/search.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 { Input, Stack } from '@servicetitan/design-system';
 import { FC, Fragment } from 'react';
-import { NavLinkComponentProps } from '../../utils/navigation';
+import {
+    CallsNavigationTrigger,
+    NavLinkMock,
+    SearchIcon,
+    withAnvil,
+    withMemoryRouter,
+} from '../../test/data.stories';
 import { LogoCompanyTitle } from '../logo/logo-company-title';
 import { LogoTitan, LogoTitanTitle } from '../logo/logo-titan-text';
 import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
 import * as Styles from './header-navigation-stories.module.less';
-import { HeaderNavigationLink, HeaderNavigationTiny, HeaderNavigationTrigger } from './';
+import { HeaderNavigationLink, HeaderNavigationTiny } from './';
 
 export default {
     title: 'Navigation/HeaderNavigationTiny',
     component: HeaderNavigationTiny,
     parameters: {},
     decorators: [
+        withMemoryRouter,
+        withAnvil,
         (Story: any) => (
             <div className="border" style={{ height: '500px' }}>
                 <Story />
@@ -20,36 +34,6 @@ export default {
     ],
 };
 
-const SearchIcon = () => (
-    <svg
-        width="1em"
-        height="1em"
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <g transform="translate(0,4)">
-            <path
-                d="M0 15.7992V13.9992H12V15.7992H0ZM0 9.49922V7.69922H6V9.49922H0ZM0 3.19922V1.39922H6V3.19922H0ZM22.74 15.7992L17.94 10.9992C17.42 11.3992 16.86 11.6992 16.26 11.8992C15.66 12.0992 15.04 12.1992 14.4 12.1992C12.74 12.1992 11.325 11.6142 10.155 10.4442C8.985 9.27422 8.4 7.85922 8.4 6.19922C8.4 4.53922 8.985 3.12422 10.155 1.95422C11.325 0.784219 12.74 0.199219 14.4 0.199219C16.06 0.199219 17.475 0.784219 18.645 1.95422C19.815 3.12422 20.4 4.53922 20.4 6.19922C20.4 6.83922 20.3 7.45922 20.1 8.05922C19.9 8.65922 19.6 9.21922 19.2 9.73922L24 14.5392L22.74 15.7992ZM14.393 10.3992C15.5577 10.3992 16.55 9.99157 17.37 9.17627C18.19 8.36099 18.6 7.37099 18.6 6.20627C18.6 5.04157 18.1923 4.04922 17.377 3.22922C16.5618 2.40922 15.5718 1.99922 14.407 1.99922C13.2423 1.99922 12.25 2.40687 11.43 3.22217C10.61 4.03745 10.2 5.02745 10.2 6.19217C10.2 7.35687 10.6077 8.34922 11.423 9.16922C12.2382 9.98922 13.2282 10.3992 14.393 10.3992Z"
-                fill="currentColor"
-            />
-        </g>
-    </svg>
-);
-
-const NavLinkMock: FC<NavLinkComponentProps> = props => (
-    <a
-        href={props.to}
-        target={props.target}
-        onClick={e => {
-            e.preventDefault();
-        }}
-        className={props.className}
-    >
-        {props.children}
-    </a>
-);
-
 export const defaultNavigation = () => (
     <HeaderNavigationTiny
         className="border-bottom"
@@ -81,24 +65,31 @@ export const WithAllMonolithData = () => (
                     target="_blank"
                     iconComponent={SearchIcon}
                     hint="Search: for all the questions"
+                    tooltip="Search"
+                    icon={SvgSearch}
+                    iconActive={SvgSearch}
                 />
 
-                <HeaderNavigationTrigger id="dialpad" iconName="phone" counter={2} />
+                <CallsNavigationTrigger />
 
-                <HeaderNavigationTrigger
+                <HeaderNavigationLink
                     id="titanAdvisor"
+                    to="titanAdvisor"
                     iconName="rocket"
                     iconClassName={Styles.rocketIcon}
+                    icon={SvgRocket}
+                    iconActive={SvgRocketActive}
                 />
 
                 <HeaderNavigationLink
                     id="settings"
-                    to="https://google.com"
+                    to="settings"
                     target="_blank"
                     iconName="settings"
                     aria-label="search"
                     hint="Settings"
-                    isActive
+                    icon={SvgSettings}
+                    iconActive={SvgSettingsActive}
                 />
 
                 <ProfileDropdown>
@@ -142,24 +133,29 @@ export const WithAllMonolithDataCommercial = () => (
                     target="_blank"
                     iconComponent={SearchIcon}
                     hint="Search: for all the questions"
+                    icon={SvgSearch}
+                    iconActive={SvgSearch}
                 />
 
-                <HeaderNavigationTrigger id="dialpad" iconName="phone" counter={2} />
+                <CallsNavigationTrigger />
 
-                <HeaderNavigationTrigger
+                <HeaderNavigationLink
                     id="titanAdvisor"
+                    to="titanAdvisor"
                     iconName="rocket"
                     iconClassName={Styles.rocketIcon}
+                    icon={SvgRocket}
+                    iconActive={SvgRocketActive}
                 />
 
                 <HeaderNavigationLink
                     id="settings"
-                    to="https://google.com"
-                    target="_blank"
+                    to="settings"
                     iconName="settings"
                     aria-label="search"
                     hint="Settings"
-                    isActive
+                    icon={SvgSettings}
+                    iconActive={SvgSettingsActive}
                 />
 
                 <ProfileDropdown>

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

@@ -256,6 +256,16 @@
             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 {
+                display: block;
+            }
+        }
+
         .navigation-item-counter {
             top: 4px;
             right: -2px;
@@ -265,6 +275,17 @@
 
 .navigation-icon {
     display: inline-block;
+    color: inherit;
+
+    & > svg {
+        height: 1em;
+        width: 1em;
+        font-size: 1em;
+    }
+
+    &.navigation-icon-active {
+        display: none;
+    }
 }
 
 .navigation-item {
@@ -314,3 +335,7 @@
         margin-top: -@spacing-1;
     }
 }
+
+.navigation-link {
+    color: inherit;
+}

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

@@ -9,10 +9,12 @@ export const header: string;
 export const headerStacked: string;
 export const headerTiny: string;
 export const navigationIcon: string;
+export const navigationIconActive: string;
 export const navigationItem: string;
 export const navigationItemActive: string;
 export const navigationItemCounter: string;
 export const navigationItemCounterLong: string;
+export const navigationItemIconState: string;
 export const navigationItemMain: string;
 export const navigationItemOverflow: string;
 export const navigationItemTitle: string;