ac-patterns/dist/button.js

/** @jsx h */
import { h } from 'preact';
import getComponent from './utils/get-styled-component';
import { Icon } from './icon';

const preventDefault = e => {
  e.preventDefault();
};

export const Button = getComponent({
  tagName: 'button',
  baseClasses: 'br2 ba',
  options: {
    size: ['tiny', 'large'],
    pressed: ['pressed'],
    variant: ['primary', 'stop', 'disabled']
  },
  defaultProps: {
    onContextMenu: preventDefault
  },
  fn: ({ tiny, large, disabled, pressed, primary, stop }) => {
    let classes = ['bn'];
    // handle sizes
    if (tiny) {
      classes.push('pa1');
    } else if (large) {
      classes.push('pa3 fw6');
    } else {
      classes.push('pa2');
    }

    // if disabled stop here
    if (disabled) {
      classes.push('mid-gray bg-light-gray not-allowed');
      return classes.join(' ');
    }

    // pointer class
    classes.push('pointer');

    if (pressed) {
      classes.push('shadow-3');
    } else {
      classes.push('shadow-2');
    }

    if (stop) {
      classes.push('white bg-red');
    }
    if (primary) {
      classes.push('dark-blue bg-light-blue');
    }
    if (!stop && !primary) {
      classes.push('dark-blue');
      if (pressed) {
        classes.push('bg-lightest-blue');
      } else {
        classes.push('bg-white');
      }
    }

    return classes.join(' ');
  }
});

export const TapIconButton = getComponent({
  baseClasses: 'button-reset pointer pa0 ma0 bn bg-transparent flex items-center justify-center',
  style: {
    width: '40px',
    height: '40px'
  },
  options: {
    icon: ['icon'],
    color: ['color']
  },
  renderChildren: ({ icon, color }) => [h(Icon, { icon: icon, color: color, size: '28' })]
});