@eureca/eureca-ui/src/components/Buttons/button.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';

import { makeStyles } from '@material-ui/core/styles';
import { Button } from '@material-ui/core';

import { colors } from '../../theme/colors';

const useStyles = makeStyles({
  root: {
    color: colors.green1,
  },
  text: {
    color: colors.gray2,
    '&:active': {
      color: colors.green1,
      backgroundColor: 'transparent',
    },
    '&.Mui-disabled': {
      color: colors['color-e5e5e5'],
    },
  },
  contained: {
    boxShadow: 'none',
    color: colors.gray2,
    '&:hover': {
      backgroundColor: colors.green1,
    },
    '&:active': {
      // boxShadow: Theme.shadows.button
    },
    '&.Mui-disabled': {
      color: colors.gray2,
      backgroundColor: colors.gray4,
    },
  },
  outlined: {
    color: colors.gray2,

    '&.Mui-disabled': {
      color: colors.gray3,
      borderColor: colors.gray3,
    },
    '&:active': {
      color: colors.green1,
      backgroundColor: 'transparent',
    },
  },
});

function EnhancedButton({ variant = 'contained', ...props }) {
  const classes = useStyles();
  return <Button disableRipple variant={variant} classes={classes} {...props} color="primary" />;
}

EnhancedButton.propTypes = {
  /** Variante de estilo do botão*/
  variant: PropTypes.oneOf(['contained', 'outlined', 'text']),
};

EnhancedButton.defaultProps = {
  variant: 'contained',
};

export { EnhancedButton as Button };