sgpl/components/button.js

import { h } from 'preact'

const filledClasses = 'bg-green b--black-10 dim white '
const emptyClasses = 'bg-white b--black-30 dim black-80 '
const disabledClasses = 'bg-moon-gray b--black-10 dim white '
export const buttonClasses = filledClasses

const sizeClasses = {
  large: 'f3 pv3 ph4 ',
  medium: 'f5 pv2 ph3 ',
  small: 'f6 pv1 ph2 '
}

export default (props) => {
  const Tag = props.tagName || 'button'
  let classes = 'button-reset ba pointer dim br2 nowrap '
  if (props.disabled) {
    classes += disabledClasses
  } else if (!props.empty && props.red) {
    classes += 'bg-red white b--black-20 '
  } else {
    classes += props.empty ? emptyClasses : filledClasses
  }
  classes += sizeClasses[props.size || 'medium']
  classes += props.extraClasses || ''

  const mainThing = h(Tag, Object.assign({
    className: classes
  }, props))

  if (props.href) {
    const aTagProps = {href: props.href}
    if (props.target) {
      aTagProps.target = props.target
    }

    return h('a', aTagProps, [mainThing])
  }

  return mainThing
}