@servicetitan/navigation 1.6.0 → 2.1.0

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

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

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

@@ -1,16 +1,21 @@
 export const __esModule: true;
-export const active: string;
 export const calculating: string;
 export const center: string;
-export const counter: string;
-export const counterLong: string;
+export const heBottom: string;
+export const heTopCenter: string;
+export const heTopLeft: string;
+export const heTopRight: string;
 export const header: string;
-export const icon: string;
-export const link: string;
-export const linkMain: string;
-export const linkOverflow: string;
-export const minimized: string;
-export const navigationItems: 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

@@ -4,13 +4,7 @@ import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/nav
 import { LogoCompanyTitle } from '../logo/logo-company-title';
 import { LogoTitanText } from '../logo/logo-titan-text';
 import { ProfileDropdown } from '../profile-dropdown/profile-dropdown';
-import {
-    HeaderNavigation,
-    HeaderNavigationItemContent,
-    HeaderNavigationLink,
-    HeaderNavigationTrigger,
-    HeaderNavigationTriggerCustom,
-} from './header-navigation';
+import { HeaderNavigation, HeaderNavigationLink, HeaderNavigationTrigger } from './';
 
 export default {
     title: 'Navigation/HeaderNavigation',
@@ -114,9 +108,11 @@ const HelpCenterButton = () => {
             direction="bl"
             width="xs"
             trigger={
-                <div onClick={() => setOpen(true)}>
-                    <HeaderNavigationItemContent iconName="help_outline" />
-                </div>
+                <HeaderNavigationTrigger
+                    id="help"
+                    iconName="help_outline"
+                    onClick={() => setOpen(true)}
+                />
             }
             portal
         >
@@ -134,22 +130,20 @@ const TimeZoneOffset: FC = () => (
 export const withAllMonolithData = () => (
     <HeaderNavigation
         left={<LogoCompanyTitle className="m-l-1" fill="#fff" />}
-        align="left"
-        alignMinimized="center"
         items={[
             items.dashboard,
             items.calendar,
             items.calls,
             items.accounting,
-            items.dispatch,
+            // items.dispatch,
 
             items.fleet,
-            items.followUps,
+            // items.followUps,
             items.inventory,
 
-            items.marketing,
+            // items.marketing,
             items.priceBook,
-            items.pointOfSale,
+            // items.pointOfSale,
             items.reports,
         ]}
         navigationComponent={NavLinkMock}
@@ -166,9 +160,7 @@ export const withAllMonolithData = () => (
             hint="Search: for all the questions"
         />
 
-        <HeaderNavigationTriggerCustom id="help-center">
-            <HelpCenterButton />
-        </HeaderNavigationTriggerCustom>
+        <HelpCenterButton />
         <HeaderNavigationTrigger id="titanAdvisor" iconName="rocket" />
 
         <HeaderNavigationLink