backpack-ui/dist/components/button/index.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _objectAssign = require("object-assign");

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _settings = require("../../../settings.json");

var _settings2 = _interopRequireDefault(_settings);

var _color = require("../../utils/color");

var _mixins = require("../../utils/mixins");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var hoverStyles = {
  base: {
    textDecoration: "none"
  },

  blue: {
    backgroundColor: (0, _color.lighten)(_settings2.default.color.blue, 7),
    color: _settings2.default.color.white
  },

  white: {
    backgroundColor: _settings2.default.color.white,
    color: (0, _color.lighten)(_settings2.default.color.blue, 14)
  }

};

var styles = {
  base: {
    appearance: "none",
    backfaceVisibility: "hidden",
    border: 0,
    borderRadius: 0,
    cursor: "pointer",
    display: "inline-block",
    fontWeight: 600,
    lineHeight: 1,
    paddingLeft: 30 / 13 + "em",
    paddingRight: 30 / 13 + "em",
    textAlign: "center",
    textDecoration: "none",
    letterSpacing: "0.6px",
    textTransform: "uppercase",
    transition: "color " + _settings2.default.timing.default + " ease-in-out,\n      background-color " + _settings2.default.timing.default + " ease-in-out,\n      opacity " + _settings2.default.timing.default + " ease-in-out",
    verticalAlign: "middle",
    whiteSpace: "nowrap",

    ":hover": hoverStyles.base,
    ":active": hoverStyles.base,
    ":focus": (0, _objectAssign2.default)({}, hoverStyles.base, (0, _mixins.outline)())
  },

  color: {
    blue: {
      backgroundColor: _settings2.default.color.blue,
      color: _settings2.default.color.white,

      ":hover": hoverStyles.blue,
      ":focus": hoverStyles.blue,
      ":active": hoverStyles.blue
    },

    white: {
      backgroundColor: _settings2.default.color.white,
      color: _settings2.default.color.blue,

      ":hover": hoverStyles.white,
      ":focus": hoverStyles.white,
      ":active": hoverStyles.white
    }
  },

  size: {
    tiny: {
      fontSize: "9px",
      paddingBottom: 9 / 9 + "em",
      paddingLeft: 19 / 9 + "em",
      paddingRight: 19 / 9 + "em",
      paddingTop: 12 / 9 + "em"
    },
    small: {
      fontSize: "11px",
      paddingBottom: 15 / 11 + "em",
      paddingTop: 18 / 11 + "em"
    },
    medium: {
      fontSize: "13px",
      paddingBottom: 21 / 13 + "em",
      paddingTop: 26 / 13 + "em"
    },
    large: {
      fontSize: "15px",
      paddingBottom: 23 / 15 + "em",
      paddingTop: 28 / 15 + "em"
    },
    huge: {
      fontSize: "17px",
      paddingBottom: 25 / 17 + "em",
      paddingTop: 30 / 17 + "em"
    }
  },

  type: {
    rounded: {
      base: {
        borderRadius: "100px", // a value large enough to scale
        paddingLeft: 19 / 9 + "em",
        paddingRight: 19 / 9 + "em",
        paddingTop: 12 / 9 + "em"
      },

      tiny: {
        paddingBottom: 9 / 9 + "em"
      },

      small: {
        paddingBottom: 10 / 9 + "em"
      },

      medium: {
        paddingBottom: 9 / 9 + "em"
      },

      large: {
        paddingBottom: 10 / 9 + "em"
      },

      huge: {
        paddingBottom: 9 / 9 + "em"
      }
    },
    full: {
      display: "block",
      width: "100%"
    }
  },

  disabled: {
    cursor: "not-allowed",
    opacity: 0.5
  }
};

/**
 * Button component
 *
 * @usage
 * <Button href="/foo">Bar</Button>
 */
function Button(_ref) {
  var href = _ref.href;
  var children = _ref.children;
  var onClick = _ref.onClick;
  var color = _ref.color;
  var size = _ref.size;
  var rounded = _ref.rounded;
  var full = _ref.full;
  var border = _ref.border;
  var disabled = _ref.disabled;
  var customStyles = _ref.customStyles;

  var Element = href ? "a" : "button";
  var role = Element === "a" ? "button" : "";

  var style = [styles.base, color && styles.color[color], size && styles.size[size], rounded && styles.type.rounded.base, rounded && styles.type.rounded[size], full && styles.type.full, customStyles, disabled && styles.disabled, border && {
    boxShadow: "0 0 0 1px " + (color === "white" ? _settings2.default.color.blue : _settings2.default.color.white) + " inset"
  }];

  return _react2.default.createElement(
    Element,
    {
      className: "Button",
      style: style,
      href: href,
      onClick: onClick,
      role: role,
      disabled: disabled
    },
    children
  );
}

Button.propTypes = {
  /**
   * Pass an href prop to make the button an `a` element instead of a `button`
   */
  href: _react2.default.PropTypes.string,

  /**
   * Content for the button
   */
  children: _react2.default.PropTypes.node.isRequired,

  /**
   * Function to run when the button is clicked
   */
  onClick: _react2.default.PropTypes.func,

  /**
   * Color of the button
   */
  color: _react2.default.PropTypes.oneOf(["blue", "white"]),

  /**
   * Size of the button
   * tiny: 30 px tall
   * small: 44 px tall
   * medium: 60 px tall
   * large: 66 px tall
   * huge: 72 px tall
   */
  size: _react2.default.PropTypes.oneOf(["tiny", "small", "medium", "large", "huge"]),

  /**
   * Use a rounded button
   */
  rounded: _react2.default.PropTypes.bool,

  /**
   * Allow button to span available width
   */
  full: _react2.default.PropTypes.bool,

  /**
   * Special styles passed in props
   */
  customStyles: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.number, _react2.default.PropTypes.object])),

  /**
   * Use a border
   */
  border: _react2.default.PropTypes.bool,

  /**
   * Disable button
   */
  disabled: _react2.default.PropTypes.bool
};

Button.defaultProps = {
  href: "",

  onClick: null,

  color: "blue",

  size: "medium",

  rounded: false,

  full: false,

  border: false,

  children: "Button",

  disabled: false,

  customStyles: null
};

Button.styles = styles;

exports.default = (0, _radium2.default)(Button);