use prop for 'as'

primer · Oct 26, 2022 · 5c907fd · 5c907fd
1 parent 858b449
commit 5c907fd
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 21 deletions.
diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx
@@ -207,8 +207,6 @@ export const UnderlineNav = forwardRef(
       React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement> | null
     >(null)
 
-    const [asNavItem, setAsNavItem] = useState('a')
-
     const [iconsVisible, setIconsVisible] = useState<boolean>(true)
 
     const afterSelectHandler = (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => {
@@ -300,7 +298,6 @@ export const UnderlineNav = forwardRef(
           setSelectedLink,
           selectedLinkText,
           setSelectedLinkText,
-          setAsNavItem,
           selectEvent,
           afterSelect: afterSelectHandler,
           variant,
@@ -343,8 +340,8 @@ export const UnderlineNav = forwardRef(
                       <Box key={index} as="li">
                         <ActionList.Item
                           {...actionElementProps}
+                          as={action.props.as || 'a'}
                           sx={menuItemStyles}
-                          as={asNavItem}
                           onSelect={(event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => {
                             swapMenuItemWithListItem(action, index, event, updateListAndMenu)
                             setSelectEvent(event)

diff --git a/src/UnderlineNav2/UnderlineNavContext.tsx b/src/UnderlineNav2/UnderlineNavContext.tsx
@@ -10,7 +10,6 @@ export const UnderlineNavContext = createContext<{
   selectedLinkText: string
   setSelectedLinkText: React.Dispatch<React.SetStateAction<string>>
   selectEvent: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement> | null
-  setAsNavItem: React.Dispatch<React.SetStateAction<string>>
   afterSelect?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void
   variant: 'default' | 'small'
   loadingCounters: boolean
@@ -24,7 +23,6 @@ export const UnderlineNavContext = createContext<{
   selectedLinkText: '',
   setSelectedLinkText: () => null,
   selectEvent: null,
-  setAsNavItem: () => null,
   variant: 'default',
   loadingCounters: false,
   iconsVisible: true

diff --git a/src/UnderlineNav2/UnderlineNavItem.tsx b/src/UnderlineNav2/UnderlineNavItem.tsx
@@ -72,7 +72,6 @@ export const UnderlineNavItem = forwardRef(
       selectedLinkText,
       setSelectedLinkText,
       selectEvent,
-      setAsNavItem,
       afterSelect,
       variant,
       loadingCounters,
@@ -107,7 +106,6 @@ export const UnderlineNavItem = forwardRef(
         if (typeof onSelect === 'function' && selectEvent !== null) onSelect(selectEvent)
         setSelectedLinkText('')
       }
-      setAsNavItem(Component)
     }, [
       ref,
       preSelected,
@@ -118,9 +116,7 @@ export const UnderlineNavItem = forwardRef(
       setChildrenWidth,
       setNoIconChildrenWidth,
       onSelect,
-      selectEvent,
-      setAsNavItem,
-      Component
+      selectEvent
     ])
 
     const keyPressHandler = React.useCallback(

diff --git a/src/UnderlineNav2/examples.stories.tsx b/src/UnderlineNav2/examples.stories.tsx
@@ -72,16 +72,16 @@ export const withCounterLabels = () => {
   )
 }
 
-const items: {navigation: string; icon: React.FC<IconProps>; counter?: number | string}[] = [
-  {navigation: 'Code', icon: CodeIcon},
-  {navigation: 'Issues', icon: IssueOpenedIcon, counter: '12K'},
-  {navigation: 'Pull Requests', icon: GitPullRequestIcon, counter: 13},
-  {navigation: 'Discussions', icon: CommentDiscussionIcon, counter: 5},
-  {navigation: 'Actions', icon: PlayIcon, counter: 4},
-  {navigation: 'Projects', icon: ProjectIcon, counter: 9},
-  {navigation: 'Insights', icon: GraphIcon, counter: '0'},
-  {navigation: 'Settings', icon: GearIcon, counter: 10},
-  {navigation: 'Security', icon: ShieldLockIcon}
+const items: {navigation: string; icon: React.FC<IconProps>; counter?: number | string; href?: string}[] = [
+  {navigation: 'Code', icon: CodeIcon, href: '#code'},
+  {navigation: 'Issues', icon: IssueOpenedIcon, counter: '12K', href: '#issues'},
+  {navigation: 'Pull Requests', icon: GitPullRequestIcon, counter: 13, href: '#pull-requests'},
+  {navigation: 'Discussions', icon: CommentDiscussionIcon, counter: 5, href: '#discussions'},
+  {navigation: 'Actions', icon: PlayIcon, counter: 4, href: '#actions'},
+  {navigation: 'Projects', icon: ProjectIcon, counter: 9, href: '#projects'},
+  {navigation: 'Insights', icon: GraphIcon, counter: '0', href: '#insights'},
+  {navigation: 'Settings', icon: GearIcon, counter: 10, href: '#settings'},
+  {navigation: 'Security', icon: ShieldLockIcon, href: '#security'}
 ]
 
 export const InternalResponsiveNav = () => {
@@ -96,6 +96,7 @@ export const InternalResponsiveNav = () => {
           selected={index === selectedIndex}
           onSelect={() => setSelectedIndex(index)}
           counter={item.counter}
+          href={item.href}
         >
           {item.navigation}
         </UnderlineNav.Item>