WIP(ui-top-nav-bar): improve types

Author: joyenjoyer

packages/ui-top-nav-bar/src/SubNav/index.tsx

@@ -28,19 +28,20 @@ import { jsx, useTheme } from '@instructure/emotion'
 
 import { generateStyles } from './styles'
 import { Link } from '@instructure/ui-link'
+import { SubNavProps, MenuItem } from './props'
 
 /**
 ---
 category: components
 ---
  **/
-const SubNav = ({ menuItems, styles }: any) => {
+const SubNav = ({ menuItems, styles }: SubNavProps) => {
   return (
     <div style={styles.container}>
-      {menuItems.map((item: any) => (
-        <div style={styles.linkContainer(item)} key={item}>
+      {menuItems.map((item: MenuItem) => (
+        <div style={styles.linkContainer(item)} key={item.title}>
           <Link
-            key={item}
+            key={item.title}
             href={item.href}
             themeOverride={styles.link(item)}
             isWithinText={false}

packages/ui-top-nav-bar/src/SubNav/props.ts

@@ -22,30 +22,31 @@
  * SOFTWARE.
  */
 
-import type { ReactNode, PropsWithChildren } from 'react'
+type MenuItem = {
+  href: string
+  title: string
+  selected: boolean
+  onClick?: () => void
+}
 
 type SubNavOwnProps = {
-  lightMode?: boolean
-  brand?: ReactNode
+  menuItems: MenuItem[]
 }
 
 type SubNavStyle = {
   container: {
     [key: string]: string | number
   }
-  content: (open: boolean) => {
-    [key: string]: string | number
-  }
-  topBar: {
+  linkContainer: (item: MenuItem) => {
     [key: string]: string | number
   }
-  btnRow: {
+  link: (item: MenuItem) => {
     [key: string]: string | number
   }
 }
 
 type SubNavProps = SubNavOwnProps & {
   styles: SubNavStyle
-} & PropsWithChildren
+}
 
-export type { SubNavProps, SubNavOwnProps }
+export type { SubNavProps, SubNavOwnProps, MenuItem }