Merge pull request #669 from devtron-labs/feat/anchor-support-in-button

feat: add support for anchor tag in Button component

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.10.6",
+    "version": "1.10.8",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { ButtonHTMLAttributes, MutableRefObject, PropsWithChildren, useEffect, useRef, useState } from 'react'
-import { Link, LinkProps } from 'react-router-dom'
+import { MutableRefObject, PropsWithChildren, useEffect, useRef, useState } from 'react'
+import { Link } from 'react-router-dom'
 import { Progressing } from '@Common/Progressing'
 import { Tooltip } from '@Common/Tooltip'
 import { TooltipProps } from '@Common/Tooltip/types'
@@ -26,6 +26,7 @@ import './button.scss'
 
 const ButtonElement = ({
     component = ButtonComponentType.button,
+    anchorProps,
     linkProps,
     buttonProps,
     onClick,
@@ -53,26 +54,44 @@ const ButtonElement = ({
         elementRef: MutableRefObject<HTMLButtonElement | HTMLAnchorElement>
     }
 >) => {
+    // Added the specific class to ensure that the link override is applied
+    const linkOrAnchorClassName = `${props.className} button__link ${props.disabled ? 'dc__disable-click' : ''}`
+
     if (component === ButtonComponentType.link) {
         return (
             <Link
                 {...linkProps}
                 {...props}
-                // Added the specific class to ensure that the link override is applied
-                className={`${props.className} button__link ${props.disabled ? 'dc__disable-click' : ''}`}
-                onClick={onClick as LinkProps['onClick']}
+                className={linkOrAnchorClassName}
+                onClick={onClick as ButtonProps<typeof component>['onClick']}
                 ref={elementRef as MutableRefObject<HTMLAnchorElement>}
             />
         )
     }
 
+    if (component === ButtonComponentType.anchor) {
+        return (
+            <a
+                target="_blank"
+                rel="noopener noreferrer"
+                {...anchorProps}
+                {...props}
+                className={linkOrAnchorClassName}
+                onClick={onClick as ButtonProps<typeof component>['onClick']}
+                ref={elementRef as MutableRefObject<HTMLAnchorElement>}
+            >
+                {props.children}
+            </a>
+        )
+    }
+
     return (
         <button
             {...buttonProps}
             {...props}
             // eslint-disable-next-line react/button-has-type
             type={buttonProps?.type || 'button'}
-            onClick={onClick as ButtonHTMLAttributes<HTMLButtonElement>['onClick']}
+            onClick={onClick as ButtonProps<typeof component>['onClick']}
             ref={elementRef as MutableRefObject<HTMLButtonElement>}
         />
     )

src/Shared/Components/Button/Button.component.tsx

@@ -16,7 +16,7 @@
 
 import { TooltipProps } from '@Common/Tooltip/types'
 import { ComponentSizeType } from '@Shared/constants'
-import { ButtonHTMLAttributes, ReactElement } from 'react'
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement } from 'react'
 import { LinkProps } from 'react-router-dom'
 
 // Using the same for BEM class elements
@@ -39,6 +39,7 @@ export enum ButtonStyleType {
 export enum ButtonComponentType {
     button = 'button',
     link = 'link',
+    anchor = 'anchor',
 }
 
 export type ButtonProps<ComponentType extends ButtonComponentType = ButtonComponentType.button> =
@@ -50,25 +51,43 @@ export type ButtonProps<ComponentType extends ButtonComponentType = ButtonCompon
                */
               linkProps: Omit<LinkProps, 'children' | 'styles' | 'className' | 'onClick'>
               buttonProps?: never
+              anchorProps?: never
               onClick?: LinkProps['onClick']
           }
-        : {
-              /**
-               * Component to be rendered from the available options
-               *
-               * @default ButtonComponentType.button
-               */
-              component?: ComponentType | never
-              /**
-               * Props for the button component
-               */
-              buttonProps?: Omit<
-                  ButtonHTMLAttributes<HTMLButtonElement>,
-                  'children' | 'styles' | 'className' | 'disabled' | 'onClick'
-              >
-              linkProps?: never
-              onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick']
-          }) & {
+        : ComponentType extends ButtonComponentType.anchor
+          ? {
+                component: ButtonComponentType.anchor
+                linkProps?: never
+                buttonProps?: never
+                /**
+                 * Props for the anchor component
+                 *
+                 * Note: The target is '_blank' & rel is 'noopener noreferrer' by default.
+                 */
+                anchorProps: Omit<
+                    AnchorHTMLAttributes<HTMLAnchorElement>,
+                    'children' | 'styles' | 'className' | 'onClick'
+                >
+                onClick?: AnchorHTMLAttributes<HTMLAnchorElement>['onClick']
+            }
+          : {
+                /**
+                 * Component to be rendered from the available options
+                 *
+                 * @default ButtonComponentType.button
+                 */
+                component?: ComponentType | never
+                /**
+                 * Props for the button component
+                 */
+                buttonProps?: Omit<
+                    ButtonHTMLAttributes<HTMLButtonElement>,
+                    'children' | 'styles' | 'className' | 'disabled' | 'onClick'
+                >
+                linkProps?: never
+                anchorProps?: never
+                onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick']
+            }) & {
         /**
          * Variant of the button
          *