<commit_before>import React, { PropTypes } from 'react';
import CSSModules from 'react-css-modules';
import styles from './header.css';

type Props = {
  /** One of: display, headline, title, subtitle, body, caption, footnote */
  type: 'display'|'headline'|'title'|'subtitle'|'body'|'caption'|'footnote',
  /** color of the header, primary or alternate. */
  color?: 'primary'|'alternate'| 'inherit',
  /** bold the text */
  bold?: boolean,
  /** html element: div,span,button, etc */
  component?: string,
  children: any,
  styles: Object,
  /** add any other props to the component */
  other?: Object
}
/**
 * All the rem sizes are based on having the html element set to 65.5% font-size
 */
function Header({ component: Component = 'div', color, children, type, bold, styles: CSSStyles, ...other }: Props) {

  let styleNames = bold ? `${type} bold` : `${type}`;

  return (
    <Component {...other} styleName={styleNames += ` ${color}`}>{children}</Component>
  );
}
Header.defaultProps = {
  component: 'div',
  bold: false,
  color: 'inherit'
};

export default CSSModules(Header, styles, { allowMultiple: true });
<commit_msg>changed the header to a stateful component<commit_after>import React, { PropTypes } from 'react';
import CSSModules from 'react-css-modules';
import styles from './header.css';

type Props = {
  /** One of: display, headline, title, subtitle, body, caption, footnote */
  type: 'display'|'headline'|'title'|'subtitle'|'body'|'caption'|'footnote',
  /** color of the header, primary or alternate. */
  color?: 'primary'|'alternate'| 'inherit',
  /** bold the text */
  bold?: boolean,
  /** html element: div,span,button, etc */
  component?: string,
  children: any,
  styles: Object,
  /** add any other props to the component */
  other?: Object
}
/**
 * All the rem sizes are based on having the html element set to 65.5% font-size
 */
class Header extends React.Component {
  constructor(props: Props) {
    super(props);
  }
  render() {
    const { component: Component = 'div', color, children, type, bold, styles: CSSStyles, ...other } = this.props;
    let styleNames = bold ? `${type} bold` : `${type}`;
    return (
      <Component {...other} styleName={styleNames += ` ${color}`}>{children}</Component>
    );
  }
}
Header.defaultProps = {
  component: 'div',
  bold: false,
  color: 'inherit'
};

export default CSSModules(Header, styles, { allowMultiple: true });

{'fraction_non_alphanumeric': 0.1683905668183699, 'fraction_numerical': 0.0024824162184526274, 'mean_word_length': 3.9958677685950414, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, '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': '5154789', 'n_tokens_mistral': 751, 'n_tokens_neox': 756, 'n_words': 237}