Button Example

import React from 'react'
// libs
import { object, func, string } from 'prop-types'
// components
import RaisedButton from 'material-ui/RaisedButton'
// helpers
import get from 'lodash/get'
// context
import palette from 'context/palette'

const backgroundColors = {
  blue: palette.main[10],
  lightBlue: palette.main[26],
  white: palette.white,
  green: palette.main[29],
  orange: palette.main[687],
  red: palette.main[688]
}

const fontWeights = {
  white: '500',
  blue: '400'
}

const templateColors = {
  blue: { backgroundColor: backgroundColors.blue, textColor: backgroundColors.white },
  white: { backgroundColor: backgroundColors.white, textColor: backgroundColors.lightBlue },
  green: { backgroundColor: backgroundColors.green, textColor: backgroundColors.white },
  orange: { backgroundColor: backgroundColors.orange, textColor: backgroundColors.white },
  red: { backgroundColor: backgroundColors.red, textColor: backgroundColors.white }
}

const labelCommonStyle = { fontSize: 13, fontFamily: 'Roboto, sans-serif' }

const getColor = (templateColor, color, element) => {
  return get(templateColors, `[${templateColor}][${element}]`) || color || templateColors.blue[element]
}

const RaisedButtonComponent = ({ label, bgColor, labelColor, labelStyle, style, onClick, templateColor, ...rest }) => (
  <RaisedButton
    label={label}
    backgroundColor={getColor(templateColor, bgColor, 'backgroundColor')}
    labelColor={getColor(templateColor, labelColor, 'textColor')}
    labelStyle={{ ...labelCommonStyle, ...labelStyle, fontWeight: fontWeights[templateColor] || '400' }}
    style={style}
    onClick={onClick}
    {...rest}
  />
)

RaisedButtonComponent.propTypes = {
  label: string.isRequired,
  bgColor: string,
  labelColor: string,
  templateColor: string,
  labelStyle: object,
  style: object,
  onClick: func
}

RaisedButtonComponent.defaultProps = {
  labelStyle: {},
  onClick: () => ''
}

export default RaisedButtonComponent