<commit_before>import React, { Component } from "react";
import PropTypes from "prop-types";
import { css } from "emotion";
import { ThemeContext } from "@hig/theme-context";

import stylesheet from "./stylesheet";

import {
  availableTargets,
  availableTypes,
  availableWidths
} from "../constants";

export default class ButtonPresenter extends Component {
  static propTypes = {
    disabled: PropTypes.bool,
    hasFocus: PropTypes.bool,
    hasHover: PropTypes.bool,
    isPressed: PropTypes.bool,
    icon: PropTypes.node,
    link: PropTypes.string,
    onBlur: PropTypes.func,
    onClick: PropTypes.func,
    onFocus: PropTypes.func,
    onHover: PropTypes.func,
    onMouseDown: PropTypes.func,
    onMouseEnter: PropTypes.func,
    onMouseLeave: PropTypes.func,
    onMouseUp: PropTypes.func,
    target: PropTypes.oneOf(availableTargets),
    title: PropTypes.string.isRequired,
    type: PropTypes.oneOf(availableTypes),
    width: PropTypes.oneOf(availableWidths)
  };

  render() {
    const {
      disabled,
      hasFocus,
      hasHover,
      isPressed,
      icon,
      link,
      onBlur,
      onClick,
      onFocus,
      onHover,
      onMouseDown,
      onMouseEnter,
      onMouseLeave,
      onMouseUp,
      target,
      title,
      type,
      width,
      ...otherProps
    } = this.props;

    const href = link || undefined;
    const tabIndex = disabled ? "-1" : "0";
    const Wrapper = link ? "a" : "button";
    const wrapperTarget = link ? target : undefined;

    return (
      <ThemeContext.Consumer>
        {({ resolvedRoles, metadata }) => {
          const styles = stylesheet(
            { disabled, hasFocus, hasHover, isPressed, type, width },
            resolvedRoles,
            metadata
          );
          return (
            <Wrapper
              className={css(styles.button)}
              href={href}
              tabIndex={tabIndex}
              target={wrapperTarget}
              onBlur={onBlur}
              onClick={onClick}
              onFocus={onFocus}
              onMouseDown={onMouseDown}
              onMouseEnter={onMouseEnter}
              onMouseLeave={onMouseLeave}
              onMouseOver={onHover}
              onMouseUp={onMouseUp}
              disabled={disabled}
              {...otherProps}
            >
              {icon && <span className={css(styles.icon)}>{icon}</span>}
              <span className={icon ? css(styles.iconText) : ""}>{title}</span>
            </Wrapper>
          );
        }}
      </ThemeContext.Consumer>
    );
  }
}<commit_msg>fix: allow passing down className to Button<commit_after>import React, { Component } from "react";
import PropTypes from "prop-types";
import { cx, css } from "emotion";
import { ThemeContext } from "@hig/theme-context";

import stylesheet from "./stylesheet";

import {
  availableTargets,
  availableTypes,
  availableWidths
} from "../constants";

export default class ButtonPresenter extends Component {
  static propTypes = {
    disabled: PropTypes.bool,
    hasFocus: PropTypes.bool,
    hasHover: PropTypes.bool,
    isPressed: PropTypes.bool,
    icon: PropTypes.node,
    link: PropTypes.string,
    onBlur: PropTypes.func,
    onClick: PropTypes.func,
    onFocus: PropTypes.func,
    onHover: PropTypes.func,
    onMouseDown: PropTypes.func,
    onMouseEnter: PropTypes.func,
    onMouseLeave: PropTypes.func,
    onMouseUp: PropTypes.func,
    target: PropTypes.oneOf(availableTargets),
    title: PropTypes.string.isRequired,
    type: PropTypes.oneOf(availableTypes),
    width: PropTypes.oneOf(availableWidths)
  };

  render() {
    const {
      disabled,
      hasFocus,
      hasHover,
      isPressed,
      icon,
      link,
      onBlur,
      onClick,
      onFocus,
      onHover,
      onMouseDown,
      onMouseEnter,
      onMouseLeave,
      onMouseUp,
      target,
      title,
      type,
      width,
      ...otherProps
    } = this.props;

    const { className } = otherProps;

    const href = link || undefined;
    const tabIndex = disabled ? "-1" : "0";
    const Wrapper = link ? "a" : "button";
    const wrapperTarget = link ? target : undefined;

    return (
      <ThemeContext.Consumer>
        {({ resolvedRoles, metadata }) => {
          const styles = stylesheet(
            { disabled, hasFocus, hasHover, isPressed, type, width },
            resolvedRoles,
            metadata
          );
          return (
            <Wrapper
              {...otherProps}
              className={cx(css(styles.button), className)}
              href={href}
              tabIndex={tabIndex}
              target={wrapperTarget}
              onBlur={onBlur}
              onClick={onClick}
              onFocus={onFocus}
              onMouseDown={onMouseDown}
              onMouseEnter={onMouseEnter}
              onMouseLeave={onMouseLeave}
              onMouseOver={onHover}
              onMouseUp={onMouseUp}
              disabled={disabled}
            >
              {icon && <span className={css(styles.icon)}>{icon}</span>}
              <span className={icon ? css(styles.iconText) : ""}>{title}</span>
            </Wrapper>
          );
        }}
      </ThemeContext.Consumer>
    );
  }
}
{'fraction_non_alphanumeric': 0.11091954022988505, 'fraction_numerical': 0.0007662835249042146, 'mean_word_length': 2.060375146541618, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 21, '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': '2267913', 'n_tokens_mistral': 1461, 'n_tokens_neox': 1496, 'n_words': 315}