fix(buttonmenu): "as" not being forwarded correctly (#99)

* fix(buttonmenu): "as" not being forwarded correctly * test(buttonmenu): Updated snapshot
pancakeswap · Dec 17, 2020 · 6c9a8f1 · 6c9a8f1
1 parent 11f9647
commit 6c9a8f1
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>
+    </>
+  );
+};