WIP(ui-top-nav-bar): add breadcrumb to topnavbar POC

instructure · Oct 27, 2023 · 041cd0c · 041cd0c
1 parent 3568250
commit 041cd0c
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 1 deletion.
diff --git a/packages/ui-top-nav-bar/package.json b/packages/ui-top-nav-bar/package.json
@@ -29,6 +29,7 @@
     "@instructure/shared-types": "8.46.1",
     "@instructure/ui-a11y-content": "8.46.1",
     "@instructure/ui-avatar": "8.46.1",
+    "@instructure/ui-breadcrumb": "8.46.1",
     "@instructure/ui-buttons": "8.46.1",
     "@instructure/ui-dialog": "8.46.1",
     "@instructure/ui-dom-utils": "8.46.1",

diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/DesktopLayout/index.tsx b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/DesktopLayout/index.tsx
@@ -40,6 +40,8 @@ import type {
   TopNavBarDesktopLayoutProps,
   TopNavBarDesktopLayoutStyleProps
 } from './props'
+import { IconHamburgerLine } from '@instructure/ui-icons'
+import TopNavBar from '../..'
 
 /**
 ---
@@ -108,12 +110,30 @@ class TopNavBarDesktopLayout extends Component<TopNavBarDesktopLayoutProps> {
     return !!renderUser && React.Children.count(renderUser.props.children) > 0
   }
 
+  get hasMenuItemsBlock() {
+    const { renderMenuItems } = this.props
+    return (
+      !!renderMenuItems &&
+      React.Children.count(renderMenuItems.props.children) > 0
+    )
+  }
+
+  get hasBreadcrumbBlock() {
+    const { renderBreadcrumb } = this.props
+    // TODO: check the children part
+    return (
+      !!renderBreadcrumb &&
+      React.Children.count(renderBreadcrumb.props.children) > 0
+    )
+  }
+
   render() {
     const {
       renderBrand,
       renderMenuItems,
       renderActionItems,
       renderUser,
+      renderBreadcrumb,
       navLabel,
       styles
     } = this.props
@@ -129,7 +149,24 @@ class TopNavBarDesktopLayout extends Component<TopNavBarDesktopLayoutProps> {
           <div css={styles?.brandContainer}>{renderBrand}</div>
         )}
 
-        <div css={styles?.menuItemsContainer}>{renderMenuItems}</div>
+        {this.hasMenuItemsBlock && (
+          <div css={styles?.menuItemsContainer}>{renderMenuItems}</div>
+        )}
+
+        {!(this.hasBrandBlock || this.hasMenuItemsBlock) &&
+          this.hasBreadcrumbBlock && (
+            <div css={styles?.breadcrumbContainer}>
+              <TopNavBar.Item
+                id="iconItem"
+                variant="icon"
+                renderIcon={<IconHamburgerLine />}
+                tooltip="Icon variant"
+              >
+                Icon variant
+              </TopNavBar.Item>
+              {renderBreadcrumb}
+            </div>
+          )}
 
         {this.hasActionItemsBlock && (
           <div css={styles?.actionItemsContainer}>{renderActionItems}</div>

diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/DesktopLayout/props.ts b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/DesktopLayout/props.ts
@@ -72,6 +72,7 @@ type TopNavBarDesktopLayoutStyle = ComponentStyle<
   | 'menuItemsContainer'
   | 'actionItemsContainer'
   | 'userContainer'
+  | 'breadcrumbContainer'
 >
 
 type TopNavBarDesktopLayoutStyleProps = {

diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/DesktopLayout/styles.ts b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/DesktopLayout/styles.ts
@@ -58,6 +58,7 @@ const generateStyle = (
       fontSize: componentTheme.desktopFontSize,
       fontFamily: componentTheme.desktopFontFamily,
       fontWeight: componentTheme.desktopFontWeight,
+      // TODO: do we really need inverse?
       background: inverseColor
         ? componentTheme.desktopBackgroundInverse
         : componentTheme.desktopBackground,
@@ -129,6 +130,16 @@ const generateStyle = (
           display: 'block'
         }
       })
+    },
+    breadcrumbContainer: {
+      label: 'topNavBarDesktopLayout__breadcrumbContainer',
+      display: 'flex',
+      flexGrow: 0,
+      flexShrink: 0,
+      marginBlock: 0,
+      alignItems: 'center',
+      // TODO add proper margin from theme
+      marginInline: componentTheme.desktopMenuItemsContainerInlineMargin
     }
   }
 }

diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/props.ts b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/props.ts
@@ -52,6 +52,7 @@ import { topNavBarItemTooltipPropType } from '../TopNavBarItem/props'
 import { TopNavBarLayout } from './index'
 import type { DesktopLayoutOwnProps } from './DesktopLayout/props'
 import type { SmallViewportLayoutOwnProps } from './SmallViewportLayout/props'
+import { Breadcrumb } from '@instructure/ui-breadcrumb'
 
 type LayoutChild = React.ComponentElement<TopNavBarLayoutProps, TopNavBarLayout>
 
@@ -92,6 +93,9 @@ type CommonTopNavBarLayoutProps = {
    */
   renderUser?: UserChild
 
+  // TODO replace any
+  renderBreadcrumb?: any
+
   /**
    * The 'aria-label' for the underlying `<nav>` element
    */
@@ -134,6 +138,8 @@ const commonPropTypes: PropValidators<CommonPropKeys> = {
   renderMenuItems: ChildrenPropTypes.oneOf([TopNavBarMenuItems]),
   renderActionItems: ChildrenPropTypes.oneOf([TopNavBarActionItems]),
   renderUser: ChildrenPropTypes.oneOf([TopNavBarUser]),
+  //TODO BreadCrumb wrapper
+  renderBreadcrumb: ChildrenPropTypes.oneOf([Breadcrumb]),
   navLabel: PropTypes.string,
   elementRef: PropTypes.func
 }
@@ -173,6 +179,7 @@ const commonAllowedProps: CommonAllowedPropKeys = [
   'renderMenuItems',
   'renderActionItems',
   'renderUser',
+  'renderBreadcrumb',
   'navLabel',
   'elementRef'
 ]

diff --git a/packages/ui-top-nav-bar/tsconfig.build.json b/packages/ui-top-nav-bar/tsconfig.build.json
@@ -12,6 +12,7 @@
     { "path": "../shared-types/tsconfig.build.json" },
     { "path": "../ui-a11y-content/tsconfig.build.json" },
     { "path": "../ui-avatar/tsconfig.build.json" },
+    { "path": "../ui-breadcrumb/tsconfig.build.json" },
     { "path": "../ui-buttons/tsconfig.build.json" },
     { "path": "../ui-dialog/tsconfig.build.json" },
     { "path": "../ui-dom-utils/tsconfig.build.json" },