@dmartss/ui/lib/button.js

UI components for my projects

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

exports.Button = Button;
exports.LinkButton = LinkButton;
exports.ActionButton = ActionButton;

var _style = require('styled-jsx/style');

var _style2 = _interopRequireDefault(_style);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _palette = require('@dmartss/palette');

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

/**
 * Check if the button has an href and render it as a `<LinkButton />`
 * If it doesn't has it render it as `<ActionButton />`
 * @param {Object} props
 * @param {String} [props.href]
 */
/** @module ui/button */
function Button(_ref) {
  var href = _ref.href,
      props = (0, _objectWithoutProperties3.default)(_ref, ['href']);

  if (href) {
    return _react2.default.createElement(LinkButton, (0, _extends3.default)({ href: href }, props));
  }

  return _react2.default.createElement(ActionButton, props);
}

/**
 * Render an `<a />` stylized as a `<button />`
 * @param {Object} props
 * @param {Object} props.children
 * @param {Boolean} [props.inverted=false]
 */
function LinkButton(_ref2) {
  var children = _ref2.children,
      _ref2$inverted = _ref2.inverted,
      inverted = _ref2$inverted === undefined ? false : _ref2$inverted,
      props = (0, _objectWithoutProperties3.default)(_ref2, ['children', 'inverted']);

  return _react2.default.createElement(
    'a',
    (0, _extends3.default)({}, props, {
      className: _style2.default.dynamic([['1958095180', [inverted ? _palette.white : _palette.black, inverted ? _palette.black : _palette.white, inverted ? _palette.black : _palette.white]]]) + ' ' + (props.className != null && props.className || '')
    }),
    children,
    _react2.default.createElement(_style2.default, {
      styleId: '1958095180',
      css: 'a.__jsx-style-dynamic-selector{background-color:' + (inverted ? _palette.white : _palette.black) + ';border:1px solid ' + (inverted ? _palette.black : _palette.white) + ';border-radius:5px;color:' + (inverted ? _palette.black : _palette.white) + ';cursor:pointer;display:inline-block;font-size:0.9em;outline:none;padding:0.75em;-webkit-text-decoration:none;text-decoration:none;text-transform:uppercase;margin:0.25em 0;}',
      dynamic: [inverted ? _palette.white : _palette.black, inverted ? _palette.black : _palette.white, inverted ? _palette.black : _palette.white]
    })
  );
}

/**
 * Render a stylized `<button />`
 * @param {Object} props Component props
 * @param {Object} props.children Content of the coomponoent
 * @param {String} [props.type="button"] The type of button (button, submit or reset)
 * @param {Boolean} [props.inverted=false] If the colors are inverted
 * @param {Object} props.props The rest of the component props
 */
function ActionButton(_ref3) {
  var children = _ref3.children,
      _ref3$type = _ref3.type,
      type = _ref3$type === undefined ? 'button' : _ref3$type,
      _ref3$inverted = _ref3.inverted,
      inverted = _ref3$inverted === undefined ? false : _ref3$inverted,
      props = (0, _objectWithoutProperties3.default)(_ref3, ['children', 'type', 'inverted']);

  return _react2.default.createElement(
    'button',
    (0, _extends3.default)({ type: type }, props, {
      className: _style2.default.dynamic([['45811884', [inverted ? _palette.white : _palette.black, inverted ? _palette.black : _palette.white]]]) + ' ' + (props.className != null && props.className || '')
    }),
    children,
    _react2.default.createElement(_style2.default, {
      styleId: '45811884',
      css: 'button.__jsx-style-dynamic-selector{background:' + (inverted ? _palette.white : _palette.black) + ';border:none;border-radius:5px;color:' + (inverted ? _palette.black : _palette.white) + ';cursor:pointer;font-size:0.9em;outline:none;padding:0.75em;text-transform:uppercase;margin:0.75em 0;}',
      dynamic: [inverted ? _palette.white : _palette.black, inverted ? _palette.black : _palette.white]
    })
  );
}