Merge branch 'feat/button' of github.com:devtron-labs/devtron-fe-common-lib into feat/button

Author: eshankvaish

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

@@ -1,11 +1,60 @@
+import { ButtonHTMLAttributes, PropsWithChildren } from 'react'
+import { Link, LinkProps } from 'react-router-dom'
 import { Progressing } from '@Common/Progressing'
 import { Tooltip } from '@Common/Tooltip'
 import { ComponentSizeType } from '@Shared/constants'
-import { ButtonProps, ButtonStyleType, ButtonVariantType } from './types'
+import { ButtonComponentType, ButtonProps, ButtonStyleType, ButtonVariantType } from './types'
 import { BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP, BUTTON_SIZE_TO_LOADER_SIZE_MAP } from './constants'
 import { getButtonDerivedClass } from './utils'
 import './button.scss'
 
+const ButtonElement = ({
+    component = ButtonComponentType.button,
+    linkProps,
+    buttonProps,
+    onClick,
+    ...props
+}: PropsWithChildren<
+    Omit<
+        ButtonProps,
+        | 'text'
+        | 'variant'
+        | 'size'
+        | 'style'
+        | 'startIcon'
+        | 'endIcon'
+        | 'showTooltip'
+        | 'tooltipProps'
+        | 'dataTestId'
+        | 'isLoading'
+    > & {
+        className: string
+        'data-testid': ButtonProps['dataTestId']
+    }
+>) => {
+    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']}
+            />
+        )
+    }
+
+    return (
+        <button
+            {...buttonProps}
+            {...props}
+            // eslint-disable-next-line react/button-has-type
+            type={buttonProps?.type || 'button'}
+            onClick={onClick as ButtonHTMLAttributes<HTMLButtonElement>['onClick']}
+        />
+    )
+}
+
 /**
  * Generic component for Button.
  * Should be used in combination of variant, size and style.
@@ -55,6 +104,15 @@ import './button.scss'
  * <Button text="Hello World" showTippy tippyContent="Tippy content"  />
  * ```
  *
+ * @example With onClick
+ * ```tsx
+ * <Button text="Hello World" onClick={noop}  />
+ * ```
+ *
+ * @example Link component
+ * ```tsx
+ * <Button component={ButtonComponentType.link} linkProps={{ to: '#' }} />
+ * ```
  */
 const Button = ({
     dataTestId,
@@ -68,7 +126,6 @@ const Button = ({
     isLoading = false,
     showTooltip = false,
     tooltipProps = {},
-    type = 'button',
     ...props
 }: ButtonProps) => {
     const isDisabled = disabled || isLoading
@@ -77,19 +134,17 @@ const Button = ({
     return (
         <Tooltip {...tooltipProps} alwaysShowTippyOnHover={showTooltip && !!tooltipProps?.content}>
             <div>
-                <button
+                <ButtonElement
                     {...props}
                     disabled={isDisabled}
-                    // eslint-disable-next-line react/button-has-type
-                    type={type}
                     className={`br-4 flex cursor dc__mnw-100 dc__tab-focus dc__position-rel dc__capitalize ${getButtonDerivedClass({ size, variant, style, isLoading })} ${isDisabled ? 'dc__disabled' : ''}`}
                     data-testid={dataTestId}
                 >
                     {startIcon && <span className={iconClass}>{startIcon}</span>}
                     <span className="dc__mxw-150 dc__align-left dc__truncate">{text}</span>
                     {endIcon && <span className={iconClass}>{endIcon}</span>}
                     {isLoading && <Progressing size={BUTTON_SIZE_TO_LOADER_SIZE_MAP[size]} />}
-                </button>
+                </ButtonElement>
             </div>
         </Tooltip>
     )

src/Shared/Components/Button/button.scss

@@ -3,6 +3,10 @@
     color: $text-color;
     border: 1px solid $border-color;
 
+    &.button__link {
+        color: $text-color;
+    }
+
     // Only stroke icons are supposed to be used with button
     svg,
     svg * {
@@ -26,15 +30,15 @@
 @mixin pseudo-states($hover-bg-color, $active-bg-color, $hover-border-color: null) {
     $parent-selector: &;
 
-    &:hover:enabled {
+    &:hover:not([disabled]) {
         background: $hover-bg-color;
 
         @if ($hover-border-color) {
             border-color: $hover-border-color;
         }
     }
 
-    &:active:enabled {
+    &:active:not([disabled]) {
         background: $active-bg-color;
     }
 }
@@ -45,6 +49,7 @@
     color: inherit;
     border: none;
     outline: inherit;
+    text-decoration: none;
 
     &__primary {
         $border-color: transparent;
@@ -169,7 +174,7 @@
             border: none;
 
             &:hover {
-                text-decoration: underline;
+                text-decoration: underline !important;
             }
         }
     }
@@ -183,4 +188,10 @@
             visibility: hidden;
         }
     }
+
+    &__link {
+        &:hover {
+            text-decoration: none;
+        }
+    }
 }

src/Shared/Components/Button/types.ts

@@ -1,6 +1,7 @@
 import { TooltipProps } from '@Common/Tooltip/types'
 import { ComponentSizeType } from '@Shared/constants'
 import { ButtonHTMLAttributes, ReactElement } from 'react'
+import { LinkProps } from 'react-router-dom'
 
 // Using the same for BEM class elements
 export enum ButtonVariantType {
@@ -18,7 +19,39 @@ export enum ButtonStyleType {
     neutral = 'neutral',
 }
 
-export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'styles' | 'className'> & {
+export enum ButtonComponentType {
+    button = 'button',
+    link = 'link',
+}
+
+export type ButtonProps = (
+    | {
+          /**
+           * Component to be rendered from the available options
+           *
+           * @default ButtonComponentType.button
+           */
+          component?: ButtonComponentType.button | never
+          /**
+           * Props for the button component
+           */
+          buttonProps?: Omit<
+              ButtonHTMLAttributes<HTMLButtonElement>,
+              'children' | 'styles' | 'className' | 'disabled' | 'onClick'
+          >
+          linkProps?: never
+          onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick']
+      }
+    | {
+          component: ButtonComponentType.link
+          /**
+           * Props for the link component
+           */
+          linkProps: Omit<LinkProps, 'children' | 'styles' | 'className' | 'onClick'>
+          buttonProps?: never
+          onClick?: LinkProps['onClick']
+      }
+) & {
     /**
      * Variant of the button
      *
@@ -53,7 +86,16 @@ export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'childre
      * If true, the loading state is shown for the button with disabled
      */
     isLoading?: boolean
+    /**
+     * Test id for the component
+     */
     dataTestId: string
+    /**
+     * If true, the button is disabled
+     *
+     * @default false
+     */
+    disabled?: boolean
 } & (
         | {
               /**