rofrischmann/fela

import React from 'react'
import PropTypes from 'prop-types'
import { createComponent } from 'react-fela'

// declare fela styles
const __buttonStyle = props => ({
  padding: '.5em 1.5em',
  color: `${props.color || props.theme.colorGrey}`,
  'background-color': props.theme.colorWhite,
  border: '1px solid currentColor',
  'border-radius': props.theme.borderRadius,
  'text-align': 'center',
  'vertical-align': 'middle',
  cursor: 'pointer',
  fontSize: `${props.theme.buttonSizes[props.size] ||
    props.theme.buttonSizes['normal']}`,
})

const ButtonComponent = createComponent(__buttonStyle, 'button', [
  'color',
  'size',
  'onClick',
])

/**
 * The only true button.
 * Note: This component uses react-fela createComponent api to render styles for demo.
 */
export default function Button(props) {
  const { children, ...passDownProps } = props
  return <ButtonComponent {...passDownProps}>{children}</ButtonComponent>
}
Button.propTypes = {
  /** Button label */
  children: PropTypes.oneOfType([
    PropTypes.string.isRequired,
    PropTypes.number.isRequired,
  ]),
  /** The color for the button */
  color: PropTypes.string,
  /** The size of the button */
  size: PropTypes.oneOf(['small', 'normal', 'large']),
  /** Gets called when the user clicks on the button */
  onClick: PropTypes.func,
}
Button.defaultProps = {
  color: '#333',
  size: 'normal',
  /* eslint-disable no-console */
  onClick: event => {
    console.log('You have clicked me!', event.target)
  },
  /* eslint-enable no-console */
}