@servicetitan/navigation 3.0.0 → 3.2.0

package/src/components/side-navigation/icons.tsx

@@ -1,27 +1,28 @@
-export const IconSideOptions = () => (
+import { FC } from 'react';
+
+export const IconSideOptions: FC<{ expanded?: boolean }> = ({ expanded }) => (
     <svg
         width="1em"
         height="1em"
-        viewBox="0 0 18 18"
+        viewBox="0 0 24 24"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
     >
         <path
-            d="M1 3C1 1.89543 1.89543 1 3 1H7V17H3C1.89543 17 1 16.1046 1 15V3Z"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeOpacity="1"
-        />
-        <rect
-            x="1"
-            y="1"
-            width="16"
-            height="16"
-            rx="2"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeOpacity="1"
+            d="M5 21C4.45 21 3.98 20.8 3.59 20.41C3.2 20.02 3 19.55 3 19V5C3 4.45 3.2 3.98 3.59 3.59C3.98 3.2 4.45 3 5 3H19C19.55 3 20.02 3.2 20.41 3.59C20.8 3.98 21 4.45 21 5V19C21 19.55 20.8 20.02 20.41 20.41C20.02 20.8 19.55 21 19 21H5ZM8 19V5H5V19H8ZM10 19H19V5H10V19Z"
+            fill="currentColor"
         />
+        {expanded ? (
+            <path
+                d="M16.54 14.19C16.71 14.38 16.71 14.66 16.54 14.85L16 15.46C15.9 15.56 15.77 15.62 15.62 15.62C15.48 15.62 15.35 15.56 15.25 15.46L12.46 12.33C12.29 12.14 12.29 11.86 12.46 11.67L15.25 8.54001C15.44 8.33001 15.81 8.33001 16 8.54001L16.54 9.15001C16.71 9.34001 16.71 9.62001 16.54 9.81001L14.58 12L16.54 14.19Z"
+                fill="currentColor"
+            />
+        ) : (
+            <path
+                d="M16.54 12.33L13.75 15.46C13.65 15.56 13.52 15.62 13.38 15.62C13.23 15.62 13.1 15.56 13 15.46L12.46 14.85C12.29 14.66 12.29 14.38 12.46 14.19L14.41 12L12.46 9.81001C12.29 9.62001 12.29 9.34001 12.46 9.15001L13 8.54001C13.19 8.33001 13.56 8.33001 13.75 8.54001L16.54 11.67C16.71 11.86 16.71 12.14 16.54 12.33Z"
+                fill="currentColor"
+            />
+        )}
     </svg>
 );
 

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

@@ -1,8 +1,11 @@
 /* stylelint-disable no-descending-specificity */
 @import (reference) '@servicetitan/tokens/core/tokens.less';
 
-@text-color: #383838;
-@border-color: #c5c5cb;
+@text-color: var(--colorsTextInverted, @color-white);
+@text-color-active: var(--colorsTextPrimarySubdued, @color-blue-300);
+@border-color: var(--colorsTextOnGrey, @color-neutral-200);
+@bg-color: var(--colorsSurfaceInvertedStrong, @color-neutral-400);
+@bg-color-hover: rgba(255, 255, 255, 0.12);
 
 .side-nav {
     display: flex;
@@ -14,20 +17,16 @@
     -o-transition: width 100ms ease-in-out;
     transition: width 100ms ease-in-out;
 
-    background-color: #ebebeb;
-    border-right: 1px solid @border-color;
+    background-color: @bg-color;
 
     .side-nav-bottom {
-        padding-left: 12px;
-        padding-right: 12px;
+        padding-left: @spacing-1;
+        padding-right: @spacing-1;
+        border-top: 1px solid @border-color;
 
         display: flex;
         flex-direction: column;
         justify-content: center;
-
-        .sideNavBottomDivider {
-            border-top: 1px solid @border-color;
-        }
     }
 
     &.side-nav-slim {
@@ -42,7 +41,7 @@
     }
 
     &.side-nav-expanded {
-        width: 240px;
+        width: 204px;
     }
 
     .side-nav-content {
@@ -50,16 +49,24 @@
         flex-direction: column;
         align-items: stretch;
         overflow-y: auto;
-        margin-top: @spacing-1;
-        margin-bottom: @spacing-1;
+        padding-top: @spacing-1;
+        padding-bottom: @spacing-1;
         flex-grow: 1;
         flex-basis: 0;
     }
+
+    .side-nav-top {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        padding-top: @spacing-1;
+        padding-bottom: @spacing-1;
+    }
 }
 
 .navigation-item {
     font-family: @base-font-family;
-    color: #383838;
+    color: @text-color;
     position: relative;
     display: flex;
     justify-content: flex-start;
@@ -73,11 +80,12 @@
     border-radius: 12px;
 
     &.navigation-item-active {
-        background-color: @color-white;
+        background-color: rgba(2, 101, 220, 0.3);
+        color: @text-color-active;
     }
 
     &:hover:not(.navigation-item-active) {
-        opacity: 0.7;
+        background-color: @bg-color-hover;
     }
 
     .navigation-item-counter {
@@ -109,27 +117,28 @@
     flex-wrap: nowrap;
     text-wrap: nowrap;
     cursor: pointer;
-    height: 32px;
+    height: 40px;
 
     margin-top: @spacing-1;
     margin-bottom: @spacing-1;
     border-radius: 8px;
 
     &:hover {
-        background-color: @color-white;
+        background-color: @bg-color-hover;
     }
 
     .options-icon {
-        height: 18px;
-        width: 18px;
-        font-size: 18px;
-        padding-left: 7px;
+        height: 24px;
+        width: 24px;
+        font-size: 24px;
+        padding-left: @spacing-1;
+        padding-right: @spacing-1;
     }
 
     .options-item-text {
         font-family: @base-font-family;
         font-size: @typescale-3;
-        padding-left: @spacing-2;
+        padding-left: @spacing-1;
         flex: 1;
     }
 }
@@ -151,3 +160,9 @@
 .options-popover-item-active {
     border-radius: @border-radius-1;
 }
+
+.divider {
+    border-top: 1px solid @border-color;
+    margin-left: 12px;
+    margin-right: 12px;
+}

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

@@ -1,4 +1,5 @@
 export const __esModule: true;
+export const divider: string;
 export const navigationIcon: string;
 export const navigationItem: string;
 export const navigationItemActive: string;
@@ -12,8 +13,8 @@ export const optionsPopoverItemClickable: string;
 export const optionsPopoverItemInactive: string;
 export const sideNav: string;
 export const sideNavBottom: string;
-export const sideNavBottomDivider: string;
 export const sideNavContent: string;
 export const sideNavExpanded: string;
 export const sideNavSlim: string;
+export const sideNavTop: string;
 

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

@@ -50,6 +50,7 @@ const items = {
     pointOfSale: getItem('pointOfSale', { iconName: 'cash-register' }),
     projects: getItem('projects', { iconName: 'folder_special' }),
     reports: getItem('reports', { iconName: 'poll' }),
+    tasks: getItem('tasks', { iconName: 'format_list_bulleted' }),
 };
 
 const NavLinkMock: FC<NavLinkComponentProps> = props => (
@@ -88,6 +89,7 @@ export const DefaultSideNavigation = () => {
                 items.pointOfSale,
                 items.reports,
             ]}
+            itemsTop={[items.tasks]}
         />
     );
 };

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

@@ -1,6 +1,6 @@
 import { BodyText, Divider, Eyebrow, Icon, Popover, Stack } from '@servicetitan/design-system';
 import classNames from 'classnames';
-import { FC, useState } from 'react';
+import { FC, Fragment, PropsWithChildren, useState } from 'react';
 import { HeaderNavigationItemData, NavLinkComponentProps } from '../../utils/navigation';
 import {
     DefaultNavLinkComponent,
@@ -19,6 +19,8 @@ export interface SideNavigationProps {
     id?: string;
     /** main navigation items */
     items?: HeaderNavigationItemData[];
+    /** top navigation items */
+    itemsTop?: HeaderNavigationItemData[];
     /** is menu expanded */
     expanded?: boolean;
     /** navigation component used for routing */
@@ -32,6 +34,7 @@ export const SideNavigation: FC<SideNavigationProps> = ({
     expanded,
     id,
     items,
+    itemsTop,
     navigationComponent = DefaultNavLinkComponent,
     onExpandedChange,
 }) => {
@@ -46,14 +49,23 @@ export const SideNavigation: FC<SideNavigationProps> = ({
                 id={id}
                 data-cy="side-navigation"
             >
+                {!!itemsTop?.length && (
+                    <Fragment>
+                        <div className={Styles.sideNavTop} data-cy="navigation-items-top">
+                            {itemsTop.map(item => (
+                                <SideNavigationItem key={item.id} expanded={expanded} {...item} />
+                            ))}
+                        </div>
+                        <div className={Styles.divider} />
+                    </Fragment>
+                )}
                 <div className={Styles.sideNavContent} data-cy="navigation-items">
                     {items?.map(item => (
                         <SideNavigationItem key={item.id} expanded={expanded} {...item} />
                     ))}
                 </div>
                 <div className={Styles.sideNavBottom}>
-                    <div className={Styles.sideNavBottomDivider} />
-                    <SideNavigationOptions
+                    <SideNavigationOptionsToggle
                         expanded={expanded}
                         onExpandedChange={onExpandedChange}
                     />
@@ -115,30 +127,37 @@ export const SideNavigationItem: FC<SideNavigationItemProps> = ({
     );
 };
 
-/** Side Navigation options item */
-export const SideNavigationOptions: FC<{
+/** Side Navigation options toggle */
+export const SideNavigationOptionsToggle: FC<{
     expanded?: boolean;
     onExpandedChange(expanded: boolean): void;
-}> = ({ expanded, onExpandedChange }) => {
-    const [open, setOpen] = useState(false);
-
-    const trigger = withTooltip(
+}> = ({ expanded, onExpandedChange }) =>
+    withTooltip(
         <div
             data-cy="navigation-left-options"
             data-pendo="navigation-left-options"
             className={classNames(Styles.optionsItem)}
-            onClick={() => setOpen(!open)}
+            onClick={() => onExpandedChange(!expanded)}
         >
             <div className={Styles.optionsIcon}>
-                <IconSideOptions />
+                <IconSideOptions expanded={expanded} />
             </div>
 
-            {!!expanded && <span className={Styles.optionsItemText}>Menu Options</span>}
+            {!!expanded && <span className={Styles.optionsItemText}>Collapse Menu</span>}
         </div>,
-        open || expanded ? undefined : 'Menu Options',
+        expanded ? undefined : 'Expand Menu',
         'r'
     );
 
+/** Side Navigation options popover */
+export const SideNavigationOptionsPopover: FC<
+    PropsWithChildren<{
+        expanded?: boolean;
+        onExpandedChange(expanded: boolean): void;
+    }>
+> = ({ children, expanded, onExpandedChange }) => {
+    const [open, setOpen] = useState(false);
+
     const onExpand = () => {
         setOpen(false);
         onExpandedChange(true);
@@ -151,7 +170,7 @@ export const SideNavigationOptions: FC<{
     return (
         <Popover
             className="bg-neutral-30"
-            trigger={trigger}
+            trigger={children}
             direction="tr"
             onClickOutside={() => setOpen(false)}
             open={open}