All files / Components Button.js

100% Statements 8/8
100% Branches 28/28
100% Functions 1/1
100% Lines 8/8

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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91              3x                       22x   22x   22x   22x                                                                             22x         3x                     3x                    
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
 
import Link from './Link';
import { WebAppsUXContext } from '../Context/index';
 
const Button = props => {
    const {
        shade,
        darkShade,
        type,
        size,
        rounded,
        square,
        padding,
        className,
        children,
        ...attributes
    } = props;
 
    const { theme } = useContext(WebAppsUXContext);
 
    const color = (props.color === 'brand') ? theme : props.color;
 
    const classes = classNames(
        'font-bold',
        'outline-none',
        'focus:outline-none',
        'ease-linear',
        'transition-all',
        'duration-150',
        (type === 'full')
            ? `bg-${color}-${shade} hover:bg-${color}-${darkShade} dark:bg-${color}-${darkShade} dark:hover:bg-${color}-${shade} text-white dark:text-gray-900`
            : '',
        (type === 'outline')
            ? `text-${color}-${shade} dark:text-${color}-${darkShade} bg-transparent border border-${color}-${shade} dark:border-${color}-${darkShade} hover:bg-${color}-600 dark:hover:bg-${color}-${darkShade} hover:text-white dark:hover:text-white`
            : '',
        (type === 'ghost')
            ? `text-${color}-${shade} dark:text-${color}-${darkShade} bg-transparent hover:bg-${color}-${shade} dark:hover:bg-${color}-${darkShade} hover:text-white dark:hover:text-white`
            : '',
        (type === 'link')
            ? `text-${color}-${shade} dark:text-${color}-${darkShade} bg-transparent hover:text-${color}-${darkShade} dark:hover:text-${color}-${shade}`
            : '',
        (size === "small")
            ? 'text-xs'
            : (size === "large")
                ? 'text-lg'
                : '',
        (padding)
            ? (size === "small")
                ? 'px-2 py-1'
                : (size === "large")
                    ? 'px-8 py-3'
                    : 'px-4 py-2'
            : '',
        (rounded)
            ? 'rounded-full'
            : (square)
                ? 'rounded-none'
                : 'rounded-md',
        className
    );
 
    return (props.href !== undefined || props.to !== undefined)
        ? <Link className={classes} {...attributes}>{children}</Link>
        : <button type="button" className={classes} {...attributes}>{children}</button>
}
 
Button.propTypes = {
    color: PropTypes.string,
    shade: PropTypes.string,
    darkShade: PropTypes.string,
    type: PropTypes.oneOf(['full', 'outline', 'ghost', 'link']),
    size: PropTypes.oneOf(['', 'small', 'large']),
    rounded: PropTypes.bool,
    square: PropTypes.bool,
    padding: PropTypes.bool,
}
 
Button.defaultProps = {
    color: 'brand',
    shade: '600',
    darkShade: '400',
    type: 'full',
    size: '',
    padding: true,
}
 
export default Button;