All files / components/ButtonsAndLinks/Button Button.tsx

100% Statements 5/5
100% Branches 11/11
100% Functions 1/1
100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65                  119x                             2411x                 2411x   1613x                             798x                            
import { buttonsAndLinksService } from '../../../services/buttonsAndLinks/buttonsAndLinks'
import { CommonProps } from '../../../types/buttonLinkCommonProps'
import { InnerContent } from '../InnerContent/InnerContent'
 
export type ButtonProps = CommonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
 
/**
 * Button component
 */
export const Button: React.FC<ButtonProps> = ({
    kind = 'primary',
    disabled = false,
    dimOpacityWhenDisabled = true,
    icon,
    datacy,
    iconSlot = 'start',
    loading = false,
    className = '',
    children,
    width,
    isColoredTertiary = false,
    ...props
}) => {
 
    const calculatedProps = buttonsAndLinksService({
        disabled,
        isColoredTertiary,
        loading,
        dimOpacityWhenDisabled,
        width,
        className,
    })
 
    if (kind !== 'tertiary') {
        /* Primary or Secondary as button */
        return (
            <button
                datacy={datacy}
                disabled={calculatedProps.disabled}
                className={`${calculatedProps.twButtonBaseClasses} ${kind === 'primary' ? calculatedProps.twPrimaryClasses : calculatedProps.twSecondaryClasses
                    }${calculatedProps.className}`}
                {...props}
            >
                <InnerContent icon={icon} iconSlot={iconSlot} loading={loading}>
                    {children}
                </InnerContent>
            </button>
        )
    } else {
        /* Tertiary (link style) as button */
        return (
            <button
                datacy={datacy}
                disabled={calculatedProps.disabled}
                className={`${calculatedProps.twLinkBaseClasses} ${calculatedProps.twDisabledTertiary}${calculatedProps.className}`}
                {...props}
            >
                <InnerContent icon={icon} iconSlot={iconSlot} loading={loading}>
                    {children}
                </InnerContent>
            </button>
        )
    }
}