import React, { PropTypes } from 'react';
import { classNames } from '../lib/utils';
import Icon from '../Icon';
import Text from '../Text';
import styles from './style.css';

const Loader = ({ children }) => {
  const classes = classNames(styles, 'loader');
  return (
    <div className={classes}>
      <div className={styles.icon}>
        <Icon type={'buffer-top'} className={styles.top} />
        <Icon type={'buffer-middle'} className={styles.middle} />
        <Icon type={'buffer-bottom'} className={styles.bottom} />
      </div>
      <Text>{children}</Text>
    </div>
  );
};

Loader.propTypes = {
  children: PropTypes.node,
};

export default Loader;

import React, { PropTypes } from 'react';
import Icon from '../Icon';
import Text from '../Text';
import styles from './style.css';

const Loader = ({ children }) =>
  <div className={styles.loader}>
    <div className={styles.icon}>
      <Icon type={'buffer-top'} className={styles.top} />
      <Icon type={'buffer-middle'} className={styles.middle} />
      <Icon type={'buffer-bottom'} className={styles.bottom} />
    </div>
    <Text>{children}</Text>
  </div>;

Loader.propTypes = {
  children: PropTypes.node,
};

export default Loader;

Remove utils import and use {styles} instead
Remove utils import and use {styles} instead

This commit removes the need to use the `classNames` utility. Removing
this gives us a single value that we're returning so removing the return
statement and {} syntax on our arrow function feels super clean! :D
