WIP(ui-top-nav-bar): add withStyle to CanvasTopNav

instructure · Dec 13, 2024 · b514597 · b514597
1 parent fb0196b
commit b514597
Show file tree

Hide file tree

Showing 8 changed files with 151 additions and 86 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/__docs__/package.json b/packages/__docs__/package.json
@@ -122,6 +122,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^7.0.2",
     "semver": "^7.6.3",
     "uuid": "^11.0.3",
     "webpack-merge": "^6.0.1"

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
@@ -24,7 +24,7 @@
 
 /** @jsx jsx */
 import { Component } from 'react'
-
+import { Route, Routes, useNavigate } from 'react-router-dom'
 import { withStyle, jsx } from '@instructure/emotion'
 import { CanvasTopNav } from '@instructure/ui-top-nav-bar'
 import { IconButton } from '@instructure/ui-buttons'
@@ -33,13 +33,16 @@ import {
   IconAnalyticsLine,
   IconArrowOpenEndSolid,
   IconCoursesLine,
+  IconDashboardLine,
   IconQuestionLine,
   IconUserLine
 } from '@instructure/ui-icons'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-type AppProps = Record<string, never>
+type AppProps = {
+  navigate: (path: string, options?: { replace: boolean }) => void
+}
 
 type AppState = {
   menuStack: string[]
@@ -135,6 +138,15 @@ class App extends Component<AppProps, AppState> {
             },
             renderAfterLabel: <IconArrowOpenEndSolid />
           },
+          {
+            label: 'Dashboard',
+            renderBeforeLabel: <IconDashboardLine />,
+            onClick: () => {
+              // Navigate and reload logic
+              this.props.navigate('/dashboard', { replace: true })
+              window.location.reload() // Forces a reload
+            }
+          },
           {
             label: 'Help',
             renderBeforeLabel: <IconQuestionLine />
@@ -212,10 +224,20 @@ class App extends Component<AppProps, AppState> {
           beforeMobileMenuItems={<div>Before Mobile Menu</div>}
           afterMobileMenuItems={<div>After Mobile Menu</div>}
         />
+        <Routes>
+          <Route path="/" element={<h1>This is home</h1>} />
+          <Route path="/dashboard" element={<h1>This is dashboard</h1>} />
+          {/*<Route path="/profile" element={<Profile />} />*/}
+        </Routes>
       </div>
     )
   }
 }
 
+function AppWrapper() {
+  const navigate = useNavigate()
+  return <App navigate={navigate} />
+}
+
 export default App
-export { App }
+export { App, AppWrapper }
diff --git a/packages/__docs__/src/index.tsx b/packages/__docs__/src/index.tsx
@@ -25,12 +25,15 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
 
-import { App } from './App'
+import { AppWrapper } from './App'
 import { InstUISettingsProvider } from '@instructure/emotion'
 import '../globals'
+import { BrowserRouter } from 'react-router-dom'
 
 createRoot(document.getElementById('app')).render(
   <InstUISettingsProvider>
-    <App />
+    <BrowserRouter>
+      <AppWrapper />
+    </BrowserRouter>
   </InstUISettingsProvider>
 )
diff --git a/packages/__docs__/webpack.config.mjs b/packages/__docs__/webpack.config.mjs
@@ -59,6 +59,7 @@ const config = merge(baseConfig, {
       directory: outputPath,
     },
     host: '0.0.0.0',
+    historyApiFallback: true,
     onListening: function () {
       // devServer is watching source files by default and hot reloading the docs page if they are changed
       // however markdown files (i.e. README.md) need to be recompiled hence the need for chokidar

diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -26,7 +26,7 @@
 import { useEffect, useState } from 'react'
 import { DesktopTopNav } from '../DesktopTopNav'
 import { MobileTopNav } from '../MobileTopNav'
-import { jsx } from '@instructure/emotion'
+import { InstUISettingsProvider, jsx, useTheme } from '@instructure/emotion'
 import {
   IconAddLine,
   IconAdminSolid,
@@ -35,6 +35,7 @@ import {
 } from '@instructure/ui-icons'
 import { Button, IconButton } from '@instructure/ui-buttons'
 import { Breadcrumb, BreadcrumbLink } from '@instructure/ui-breadcrumb'
+import { generateStyles } from './styles'
 
 /**
 ---
@@ -52,7 +53,8 @@ const CanvasTopNav = ({
   mobileMenuBackNavigation,
   hamburgerOnClick,
   beforeMobileMenuItems,
-  afterMobileMenuItems
+  afterMobileMenuItems,
+  styles
 }: any) => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)
 
@@ -134,17 +136,27 @@ const CanvasTopNav = ({
           <IconHamburgerLine />
         </IconButton>
         <div style={{ minWidth: '100%' }}>
-          <Breadcrumb label={breadcrumb.label}>
-            {breadcrumb.links.map((link: any, index: any) =>
-              link.href ? (
-                <Breadcrumb.Link key={index} href={link.href}>
-                  {link.label}
-                </Breadcrumb.Link>
-              ) : (
-                <Breadcrumb.Link key={index}>{link.label}</Breadcrumb.Link>
-              )
-            )}
-          </Breadcrumb>
+          <InstUISettingsProvider
+            theme={{
+              componentOverrides: {
+                Link: {
+                  color: styles.breadcrumbOverride.color
+                }
+              }
+            }}
+          >
+            <Breadcrumb label={breadcrumb.label}>
+              {breadcrumb.links.map((link: any, index: any) =>
+                link.href ? (
+                  <Breadcrumb.Link key={index} href={link.href}>
+                    {link.label}
+                  </Breadcrumb.Link>
+                ) : (
+                  <Breadcrumb.Link key={index}>{link.label}</Breadcrumb.Link>
+                )
+              )}
+            </Breadcrumb>
+          </InstUISettingsProvider>
         </div>
       </DesktopTopNav.Start>
       <DesktopTopNav.End>
@@ -155,5 +167,23 @@ const CanvasTopNav = ({
   )
 }
 
-export { CanvasTopNav }
-export default CanvasTopNav
+const withStyles =
+  <ComponentOwnProps, ComponentStyle>(
+    generateStyles: (props: any, theme: any) => ComponentStyle
+  ) =>
+  (WrappedComponent: any) =>
+  // eslint-disable-next-line react/display-name
+  (originalProps: ComponentOwnProps) => {
+    const theme = useTheme()
+    const styledProps = {
+      styles: generateStyles(originalProps, theme),
+      ...originalProps
+    }
+    return <WrappedComponent {...styledProps} />
+  }
+
+const SC: any = withStyles(generateStyles)(CanvasTopNav)
+SC.displayName = 'CanvasTopNav'
+
+export { SC as CanvasTopNav }
+export default SC
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
@@ -23,75 +23,15 @@
  */
 import type { TopNavProps } from './props'
 
-//TODO use theme variables for spacing
 const generateStyles = (props: TopNavProps, theme: any) => {
   const { lightMode } = props
   return {
-    container: (open: boolean) => {
-      return {
-        height: '54px',
-        position: open ? 'fixed' : 'relative',
-        backgroundColor: lightMode
-          ? theme.colors.ui.surfacePageSecondary
-          : theme.colors.ui.surfaceDark,
-        color: lightMode
-          ? theme.colors.contrasts.grey125125
-          : theme.colors?.contrasts?.white1010,
-        width: '100%',
-        zIndex: '1000'
-      }
-    },
-    topBar: {
-      padding: `0 ${theme.spacing.small}`,
-      height: '54px',
-      display: 'flex',
-      alignItems: 'center'
-      // justifyContent: 'space-between'
-    },
-    content: (open: boolean) => {
-      return {
-        padding: `0 ${theme.spacing.small}`,
-        height: open ? '100%' : '0px',
-        top: '3.375rem',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        overflow: open ? 'scroll' : 'hidden',
-        position: 'fixed',
-        backgroundColor: lightMode
-          ? theme.colors.ui.surfacePageSecondary
-          : theme.colors.ui.surfaceDark,
-        color: lightMode
-          ? theme.colors.contrasts.grey125125
-          : theme.colors?.contrasts?.white1010
-      }
-    },
-    btnRow: {
-      display: 'flex',
-      marginRight: '12px'
+    breadcrumbOverride: {
+      color: lightMode
+        ? theme?.colors?.contrasts?.blue4570
+        : theme?.colors?.contrasts?.grey1111
     }
   }
 }
-const generateItemListStyles = (_props: any, theme: any) => {
-  return {
-    divider: {
-      height: '0.0625rem',
-      overflow: 'hidden',
-      background: theme.colors.contrasts.grey1214
-    }
-  }
-}
-const generateItemStyles = (_props: any, _theme: any) => {
-  return {
-    container: {
-      margin: '16px 0',
-      display: 'flex',
-      cursor: 'pointer',
-      alignItems: 'flex-end'
-    },
-    leftIcon: { paddingRight: '8px', fontSize: '18px' },
-    rightIcon: { marginLeft: 'auto', paddingRight: '8px', fontSize: '18px' }
-  }
-}
 
-export { generateStyles, generateItemListStyles, generateItemStyles }
+export { generateStyles }
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx b/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
@@ -28,7 +28,7 @@ const generateStyles = (props: DesktopTopNavProps, theme: any) => {
   return {
     container: {
       height: '66px',
-      position: 'fixed',
+      position: 'relative',
       backgroundColor: lightMode
         ? theme.colors.ui.surfacePageSecondary
         : theme.colors.ui.surfaceDark,