fix: pass onClick to anchor in button component (#87)

warp-ds · Sep 19, 2023 · 24a4247 · 24a4247
1 parent ff6c7b7
commit 24a4247
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/packages/button/src/component.tsx b/packages/button/src/component.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, Ref, AnchorHTMLAttributes } from 'react';
+import React, { forwardRef, Ref, AnchorHTMLAttributes, MouseEvent } from 'react';
 import { button as ccButton } from '@warp-ds/css/component-classes';
 import { i18n } from '@lingui/core';
 import { classNames } from '@chbphone55/classnames';
@@ -98,6 +98,12 @@ export const Button = forwardRef<
     [ccButton.linkAsButton]: !!props.href,
   });
 
+  const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    if (props.onClick) {
+      props.onClick(e);
+    }
+  };
+
   activateI18n(enMessages, nbMessages, fiMessages);
 
   const ariaValueTextLoading = i18n._(
@@ -111,6 +117,7 @@ export const Button = forwardRef<
     <>
       {props.href ? (
         <a
+          onClick={handleClick}
           aria-current={props['aria-current']}
           href={props.href}
           target={props.target}

diff --git a/packages/button/src/props.tsx b/packages/button/src/props.tsx
@@ -9,7 +9,7 @@ export type ButtonProps = {
   /**
    * Action to be called when the component is clicked
    */
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
 
   /**
    * CSS styles to inline on the component

diff --git a/packages/button/stories/Button.stories.tsx b/packages/button/stories/Button.stories.tsx
@@ -210,6 +210,15 @@ export const Example = () => {
         >
           Simple link as button utility
         </Button>
+        {/* @ts-ignore */}
+        <Button
+          className="mr-32"
+          href="https://google.com/"
+          target="_blank"
+          onClick={() => alert("you've clicked")}
+        >
+          Simple link with onClick
+        </Button>
       </div>
       <div>
         <h3>Disabled button</h3>