composable_button.js

import React from 'react';
import styles from './styles.scss';
import classnames from 'classnames';

/**
 * Button params:
 * size: {'xs', 'sm', 'md', 'lg'}
 * rounded: {true, false}
 * color = {'gray', 'red','blue','green'}
 * weight = {'xtralight', 'light', 'normal', 'bold'}
 * uppercase = {true, false}
 * lowercase = {true, false}
 * boxShaddow = {true, false}
 * onClick = function
 * children = Button text
*/
const Button = ({
  size = 'sm',
  rounded = false,
  color = 'gray',
  weight = 400,
  uppercase = false,
  lowercase = false,
  boxShadow = false,
  onClick,
  children
}) => {

  const sizeClass = styles[size];
  const roundedClass = rounded ? styles.rounded : '';
  const colorClass = styles[color];
  const weightClass = styles['weight-' + weight];
  const upperCaseClass = uppercase ? styles.upperCase : '';
  const lowerCaseClass = lowercase ? styles.lowerCase : '';
  const boxShadowClass = boxShadow ? styles.boxShadow : '';

  return (
    <button
      className={classnames(
        styles.button,
        sizeClass,
        roundedClass,
        colorClass,
        weightClass,
        upperCaseClass,
        lowerCaseClass,
        boxShadowClass
      )}
      onClick={onClick}
    >
      {children}
    </button>
  );

}

Button.propTypes = {
  size: React.PropTypes.string,
  rounded: React.PropTypes.bool,
  color: React.PropTypes.string,
  weight: React.PropTypes.string,
  uppercase: React.PropTypes.bool,
  lowercase: React.PropTypes.bool,
  boxShadow: React.PropTypes.bool,
  onClick: React.PropTypes.func,
  children: React.PropTypes.node.isRequired
};

module.exports = Button;