<commit_before>import React from 'react'
import PropTypes from 'prop-types'

const Button = ({children, type, size, color, href, disabled, block, ...props}) => {
  const buttonProps = href ? {} : props

  return (
    // Button does have a type, but eslint is broken.
    // eslint-disable-next-line react/button-has-type
    <button
      type={type}
      disabled={disabled}
      className={`${size} ${disabled ? '' : color} ${block ? 'block' : ''}`}
      tabIndex={href ? -1 : null}
      {...buttonProps}
    >
      {href ? (
        <a href={href} {...props}>{children}</a>
      ) : children}

      <style jsx>{`
        @import 'colors';

        button {
          display: inline-block;
          border: 0 none;
          border-radius: 2px;
          padding: 5px 7px;
          border: 1px solid transparent;
          cursor: pointer;
          -webkit-font-smoothing: antialiased;

          &:disabled {
            background-color: $lightgrey;
            color: $grey;
            cursor: not-allowed;
          }
        }

        a {
          display: block;
          margin: -6px -8px;
          padding: 6px 8px;
          color: inherit;

          &:hover {
            color: inherit;
          }
        }

        .block {
          display: block;
          width: 100%;
        }

        .large {
          font-size: 1.2em;
          padding: 12px 16px;

          a {
            margin: -13px -17px;
            padding: 13px 17px;
          }
        }

        // Colors
        .blue {
          background-color: $blue;
          border-color: $blue;
          color: $white;

          &:hover {
            background-color: darken($blue, 10%);
            border-color: darken($blue, 10%);
          }
        }

        .red {
          background-color: $red;
          border-color: $red;
          color: $white;

          &:hover {
            background-color: darken($red, 10%);
            border-color: darken($red, 10%);
          }
        }

        .white {
          background-color: $white;
          border-color: $blue;
          color: $blue;

          &:hover {
            background-color: lighten($blue, 43%);
          }
        }
      `}</style>
    </button>
  )
}

Button.propTypes = {
  children: PropTypes.node.isRequired,
  disabled: PropTypes.bool,
  block: PropTypes.bool,
  type: PropTypes.string,
  href: PropTypes.string,
  size: PropTypes.oneOf([
    '',
    'large'
  ]),
  color: PropTypes.oneOf([
    'blue',
    'red',
    'white'
  ])
}

Button.defaultProps = {
  disabled: false,
  block: false,
  href: null,
  size: '',
  type: 'button',
  color: 'blue'
}

export default Button
<commit_msg>Fix link buttons not working on Firefox<commit_after>import React from 'react'
import PropTypes from 'prop-types'
import css from 'styled-jsx/css'

const style = css`
  @import 'colors';

  .wrapper {
    display: inline-block;
    border: 0 none;
    border-radius: 2px;
    padding: 5px 7px;
    border: 1px solid transparent;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    color: inherit;

    &:disabled {
      background-color: $lightgrey;
      color: $grey;
      cursor: not-allowed;
    }
  }

  .block {
    display: block;
    width: 100%;
  }

  .large {
    font-size: 1.2em;
    padding: 12px 16px;

    a {
      margin: -13px -17px;
      padding: 13px 17px;
    }
  }

  // Colors
  .blue {
    background-color: $blue;
    border-color: $blue;
    color: $white;

    &:hover {
      background-color: darken($blue, 10%);
      border-color: darken($blue, 10%);
    }
  }

  .red {
    background-color: $red;
    border-color: $red;
    color: $white;

    &:hover {
      background-color: darken($red, 10%);
      border-color: darken($red, 10%);
    }
  }

  .white {
    background-color: $white;
    border-color: $blue;
    color: $blue;

    &:hover {
      background-color: lighten($blue, 43%);
    }
  }
`

const Button = ({children, type, size, color, href, disabled, block, ...props}) => {
  if (href) {
    return (
      <a
        href={href}
        className={`wrapper ${size} ${disabled ? '' : color} ${block ? 'block' : ''}`}
        {...props}
      >
        {children}
        <style jsx>{style}</style>
      </a>
    )
  }

  return (
    <button
      type={type}
      disabled={disabled}
      className={`wrapper ${size} ${disabled ? '' : color} ${block ? 'block' : ''}`}
      {...props}
    >
      {children}
      <style jsx>{style}</style>
    </button>
  )
}

Button.propTypes = {
  children: PropTypes.node.isRequired,
  disabled: PropTypes.bool,
  block: PropTypes.bool,
  type: PropTypes.string,
  href: PropTypes.string,
  size: PropTypes.oneOf([
    '',
    'large'
  ]),
  color: PropTypes.oneOf([
    'blue',
    'red',
    'white'
  ])
}

Button.defaultProps = {
  disabled: false,
  block: false,
  href: null,
  size: '',
  type: 'button',
  color: 'blue'
}

export default Button

{'fraction_non_alphanumeric': 0.1482828282828283, 'fraction_numerical': 0.013939393939393939, 'mean_word_length': 1.758217270194986, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5175660', 'n_tokens_mistral': 1692, 'n_tokens_neox': 1604, 'n_words': 373}