From 6c9a8f1d36838b75e44efa8546a7e07e2907ea13 Mon Sep 17 00:00:00 2001
From: hachiojidev <72719739+hachiojidev@users.noreply.github.com>
Date: Thu, 17 Dec 2020 17:52:24 +0900
Subject: [PATCH] fix(buttonmenu): "as" not being forwarded correctly (#99)

* fix(buttonmenu): "as" not being forwarded correctly

* test(buttonmenu): Updated snapshot
---
 src/__tests__/components/buttonmenu.test.tsx  |  2 +-
 src/components/ButtonMenu/ButtonMenu.tsx      |  8 ++++++--
 src/components/ButtonMenu/ButtonMenuItem.tsx  |  6 ++++--
 .../ButtonMenu/StyledButtonMenu.tsx           |  3 ++-
 src/components/ButtonMenu/index.stories.tsx   | 20 +++++++++++++++++++
 5 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/__tests__/components/buttonmenu.test.tsx b/src/__tests__/components/buttonmenu.test.tsx
index 785234d9d..6dfab367d 100644
--- a/src/__tests__/components/buttonmenu.test.tsx
+++ b/src/__tests__/components/buttonmenu.test.tsx
@@ -15,7 +15,7 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="sc-bdfBwQ emLCCz"
+        class="sc-bdfBwQ ixBoaC"
       >
         <button
           class="sc-gsTCUz ghXEjt"
diff --git a/src/components/ButtonMenu/ButtonMenu.tsx b/src/components/ButtonMenu/ButtonMenu.tsx
index cb1e974cc..73730dc50 100644
--- a/src/components/ButtonMenu/ButtonMenu.tsx
+++ b/src/components/ButtonMenu/ButtonMenu.tsx
@@ -13,8 +13,12 @@ const ButtonMenu: React.FC<ButtonMenuProps> = ({
   return (
     <StyledButtonMenu>
       {Children.map(children, (child: ReactElement<ButtonMenuItemProps>, index) => {
-        const handleClick = () => onClick && onClick(index);
-        return cloneElement(child, { isActive: activeIndex === index, onClick: handleClick, size, variant });
+        return cloneElement(child, {
+          isActive: activeIndex === index,
+          onClick: onClick ? () => onClick(index) : undefined,
+          size,
+          variant,
+        });
       })}
     </StyledButtonMenu>
   );
diff --git a/src/components/ButtonMenu/ButtonMenuItem.tsx b/src/components/ButtonMenu/ButtonMenuItem.tsx
index 5f1af70d7..73cd5f0a6 100644
--- a/src/components/ButtonMenu/ButtonMenuItem.tsx
+++ b/src/components/ButtonMenu/ButtonMenuItem.tsx
@@ -16,20 +16,22 @@ const ButtonMenuItem: React.FC<ButtonMenuItemProps> = ({
   isActive = false,
   size = sizes.MD,
   variant = variants.PRIMARY,
+  as,
   ...props
 }) => {
   if (!isActive) {
     return (
       <InactiveButton
-        {...props}
+        forwardedAs={as}
         size={size}
         variant="tertiary"
         colorKey={variant === variants.PRIMARY ? "primary" : "textSubtle"}
+        {...props}
       />
     );
   }
 
-  return <Button size={size} variant={variant} {...props} />;
+  return <Button as={as} size={size} variant={variant} {...props} />;
 };
 
 export default ButtonMenuItem;
diff --git a/src/components/ButtonMenu/StyledButtonMenu.tsx b/src/components/ButtonMenu/StyledButtonMenu.tsx
index dc1f49226..3a9d4b763 100644
--- a/src/components/ButtonMenu/StyledButtonMenu.tsx
+++ b/src/components/ButtonMenu/StyledButtonMenu.tsx
@@ -5,7 +5,8 @@ const StyledButtonMenu = styled.div`
   border-radius: 16px;
   display: inline-flex;
 
-  & > button + button {
+  & > button + button,
+  & > a + a {
     margin-left: 2px; // To avoid focus shadow overlap
   }
 `;
diff --git a/src/components/ButtonMenu/index.stories.tsx b/src/components/ButtonMenu/index.stories.tsx
index 16b996dba..4d95958ec 100644
--- a/src/components/ButtonMenu/index.stories.tsx
+++ b/src/components/ButtonMenu/index.stories.tsx
@@ -63,3 +63,23 @@ export const Default: React.FC = () => {
     </>
   );
 };
+
+export const AsLinks: React.FC = () => {
+  return (
+    <>
+      <Row>
+        <ButtonMenu activeIndex={0}>
+          <ButtonMenuItem as="a" href="https://pancakeswap.finance">
+            Link 1
+          </ButtonMenuItem>
+          <ButtonMenuItem as="a" href="https://pancakeswap.finance">
+            Link 2
+          </ButtonMenuItem>
+          <ButtonMenuItem as="a" href="https://pancakeswap.finance">
+            Link 3
+          </ButtonMenuItem>
+        </ButtonMenu>
+      </Row>
+    </>
+  );
+};