Merge pull request #143 from ensdomains/dropdown-href

allow passing href to a dropdown item
ensdomains · Mar 29, 2024 · 6a3d740 · 6a3d740
2 parents f397363 + f051ecb
commit 6a3d740
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/components/src/components/molecules/Dropdown/Dropdown.test.tsx b/components/src/components/molecules/Dropdown/Dropdown.test.tsx
@@ -139,4 +139,25 @@ describe('<Dropdown />', () => {
     })
     expect(screen.getByTestId('scrollbox-bottom-intersect')).toBeVisible()
   })
+  it('should allow having items as links', async () => {
+    render(
+      <DropdownHelper
+        items={[
+          {
+            as: 'button',
+            href: 'https://example.com',
+            label: 'Example',
+          },
+        ]}
+        label="menu"
+      />,
+    )
+
+    userEvent.click(screen.getByText('menu'))
+
+    expect(screen.getByText('Example')).toHaveAttribute(
+      'href',
+      'https://example.com',
+    )
+  })
 })
diff --git a/components/src/components/molecules/Dropdown/Dropdown.tsx b/components/src/components/molecules/Dropdown/Dropdown.tsx
@@ -25,6 +25,7 @@ export type DropdownItemObject = {
   color?: Colors
   disabled?: boolean
   showIndicator?: boolean | Colors
+  href?: string
 }
 
 export type DropdownItem =
@@ -298,6 +299,7 @@ const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
         as,
         wrapper,
         showIndicator,
+        href,
       } = item as DropdownItemObject
 
       const props: React.ComponentProps<any> = {
@@ -316,6 +318,7 @@ const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
             {label}
           </>
         ),
+        href,
       }
 
       if (wrapper) {