@loadsmart/loadsmart-ui 6.0.1 → 6.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@loadsmart/loadsmart-ui",
-	"version": "6.0.1",
+	"version": "6.0.2",
 	"description": "Miranda UI, a React UI library",
 	"main": "dist",
 	"files": [

package/src/components/TopNavigation/Menu/Menu.test.tsx

@@ -55,6 +55,39 @@ describe('Menu', () => {
     expect(screen.getByRole('link', { name: 'Schedule' })).toHaveAttribute('href', '/schedule')
   })
 
+  it('renders dropdown menu when subitems are provided', () => {
+    const username = 'Username'
+    const link = { label: 'Link', url: '/url' }
+    const action = { label: 'Logout', click: jest.fn() }
+
+    setup({
+      children: (
+        <Menu.Item label={username}>
+          <Menu.SubItem label={link.label} url={link.url} />
+          <Menu.SubItem label={action.label} onClick={action.click} />
+        </Menu.Item>
+      ),
+    })
+
+    expect(screen.getByText(username)).toBeInTheDocument()
+    expect(screen.queryByText(link.label)).not.toBeInTheDocument()
+    expect(screen.queryByText(action.label)).not.toBeInTheDocument()
+
+    user.click(screen.getByRole('button', { name: username }))
+
+    const linkSubItem = screen.getByRole('link', { name: link.label })
+    const buttonSubItem = screen.getByRole('menuitem', { name: action.label })
+
+    expect(linkSubItem).toBeVisible()
+    expect(linkSubItem).toHaveAttribute('href', link.url)
+
+    expect(buttonSubItem).toBeVisible()
+
+    user.click(buttonSubItem)
+
+    expect(action.click).toBeCalled()
+  })
+
   // FIXME: Skipping as it's preventing test pipeline from being finished
   it.skip('renders an accessible dropdown menu when children are provided', () => {
     const username = 'Username'

package/src/components/TopNavigation/Menu/MenuItemDropdown.tsx

@@ -68,7 +68,7 @@ const MenuDropdownSubItemLink = styled(BaseLink)`
 
 type MenuDropdownSubItemProps = HTMLAttributes<HTMLElement> & {
   label: string
-  url: string
+  url?: string
   icon?: ReactNode
   separator?: boolean
 }
@@ -79,12 +79,16 @@ export function MenuDropdownSubItem({
   url,
   ...rest
 }: MenuDropdownSubItemProps): JSX.Element {
-  return (
+  return url ? (
     <MenuDropdownSubItemLink {...rest} href={url}>
       <DropdownMenuItem tabIndex={-1} leading={<IconWrapper>{icon}</IconWrapper>}>
         {label}
       </DropdownMenuItem>
     </MenuDropdownSubItemLink>
+  ) : (
+    <DropdownMenuItem leading={<IconWrapper>{icon}</IconWrapper>} {...rest}>
+      {label}
+    </DropdownMenuItem>
   )
 }
 

package/src/components/TopNavigation/TopNavigation.stories.tsx

@@ -31,7 +31,10 @@ export function Playground(): JSX.Element {
             url="#"
           />
           <TopNavigation.Menu.Separator />
-          <TopNavigation.Menu.SubItem label="Log Out" url="#" />
+          <TopNavigation.Menu.SubItem
+            label="Logout"
+            onClick={() => alert('Logout button clicked')}
+          />
         </TopNavigation.Menu.Item>
       </TopNavigation.Menu>
     </TopNavigation>